:root{
	--bg:#0e0e10;
	--card:#18181b;
	--card-hover:#1e1e22;
	--accent:#3b82f6;
	--accent-hover:#2563eb;
	--muted:#71717a;
	--text:#fafafa;
	--text-secondary:#a1a1aa;
	--border:rgba(255,255,255,0.06);
	--glass:rgba(255,255,255,0.03);
	--common: #ffffff;
	--rare: #3b82f6;
	--epic: #8b5cf6;
	--special: #a855f7;
	--legendary: #f97316;
	--spooky: #ff7a18;
	--chromatic: #ff5bd1;
	--unique: #00bfff;
	--godly: #ffd700;
	--festive: #c41e3a;
	--eternal: #d4af37;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
	background:#0e0e10;
	color:var(--text);
	line-height:1.6;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--border)}
header h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-0.02em}
.halloween-shimmer,.christmas-shimmer{
	display:inline-block;
	background:linear-gradient(90deg,#3b82f6 0%, #8b5cf6 50%, #3b82f6 100%);
	background-size:200% auto;
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	animation:halloweenShift 3s linear infinite;
	font-weight:800;
}
.subtitle{
	font-size:12px;
	color:var(--text-secondary);
	font-weight:600;
	margin-top:4px;
}

@keyframes halloweenShift{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

.thanksgiving-shimmer{ color: inherit; font-weight:800; }
.event-thanksgiving .thanksgiving-shimmer{
	display:inline-block;
	background: linear-gradient(90deg, #ff8c00 0%, #ffa500 25%, #d2691e 50%, #ff6347 75%, #ff8c00 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: thanksgivingShift 4s ease-in-out infinite;
}

@keyframes thanksgivingShift{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

.autumn-leaves{ display:none; position: fixed; top: -50px; pointer-events: none; z-index: 1; font-size: 24px; opacity: 0.7; animation: fallLeaves 8s linear infinite; }
.event-thanksgiving .autumn-leaves{ display:block; }

.thanksgiving-subtitle{ display:none; }
.event-thanksgiving .thanksgiving-subtitle{ display:block; }

/* Christmas content disabled */
.christmas-shimmer{ color: inherit; font-weight:800; background:none; -webkit-background-clip: initial; background-clip: initial; animation:none; }
.christmas-snow, .christmas-subtitle, #christmasShopItem, #christmasGiftItem{ display:none !important; }


@keyframes fallSnow{
	0%{ transform: translateY(0) rotate(0deg); opacity: 0.8; }
	50%{ opacity: 1; transform: translateX(20px); }
	100%{ transform: translateY(100vh) rotate(180deg); opacity: 0; }
}

#thanksgivingShopItem{ display:none; }
.event-thanksgiving #thanksgivingShopItem{ display:flex; }

@keyframes fallLeaves{
	0%{ transform: translateY(0) rotate(0deg); opacity: 0.7; }
	50%{ opacity: 0.9; }
	100%{ transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.wallet{font-weight:600;color:var(--text);font-size:15px}
.wallet::before{
	content:'';
	display:none;
}

.ep-display{
	font-weight:600;
	color:var(--text);
	font-size:14px;
	margin-top:4px;
}
.ep-display::before{
	content:'';
	display:none;
}
.ep-display #epDisplay{
	color:#a855f7;
	font-weight:600;
}

.nav-bar {
    background:transparent;
    padding:16px 0;
    display:flex;
    gap:32px;
    margin-bottom:32px;
    border-bottom:1px solid var(--border);
}
.nav-bar a {
    text-decoration:none;
    color:var(--text-secondary);
    font-weight:600;
    font-size:14px;
    padding:8px 0;
    transition:color 0.2s ease;
    position:relative;
}
.nav-bar a:hover {
    color:var(--text);
}
.nav-bar a.active {
    color:var(--accent);
}
.nav-bar a.active::after {
    content:'';
    position:absolute;
    bottom:-17px;
    left:0;
    right:0;
    height:2px;
    background:var(--accent);
}

/* Hero Section */
.hero {
	text-align:center;
	padding:80px 0 60px 0;
	max-width:800px;
	margin:0 auto;
}
.hero-title {
	font-size:48px;
	font-weight:900;
	margin:0 0 20px 0;
	letter-spacing:-0.03em;
	line-height:1.1;
}
.hero-accent {
	background:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.hero-subtitle {
	font-size:18px;
	color:var(--text-secondary);
	margin:0 0 32px 0;
	line-height:1.6;
}
.hero-actions {
	display:flex;
	gap:16px;
	justify-content:center;
	align-items:center;
}
.hero-actions button {
	padding:14px 28px;
	font-size:15px;
	font-weight:700;
}

main{display:grid;grid-template-columns:1fr 400px;gap:24px;padding:24px 0 48px 0}
.gacha{background:var(--card);padding:24px;border-radius:16px;border:1px solid var(--border);transition:background 0.2s ease}
.gacha:hover{background:var(--card-hover)}
.banner{font-weight:700;color:var(--text);margin-bottom:16px;font-size:18px}
.controls{display:flex;gap:12px;flex-wrap:wrap}
button{background:var(--accent);border:0;padding:12px 20px;border-radius:8px;color:white;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-size:14px}
button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,0.3)}
button:active{transform:translateY(0)}
button.muted{background:var(--card);color:var(--text-secondary);border:1px solid var(--border)}
button.muted:hover{background:var(--card-hover);color:var(--text)}

.result-area{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;min-height:100px}
.result-card{width:110px;height:130px;border-radius:12px;background:var(--card-hover);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;border:1px solid var(--border);transition:all 0.2s ease}
.result-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.3)}
.rarity-common{border-color:rgba(255,255,255,0.02)}
.rarity-rare{border-color:#3b82f6;box-shadow:0 6px 18px rgba(59,130,246,0.12)}
.rarity-legendary{border-color:#f97316;box-shadow:0 8px 24px rgba(249,115,22,0.14)}
.rarity-epic{border-color:#8b5cf6;box-shadow:0 8px 24px rgba(139,92,246,0.12)}
.rarity-special{border-color:#a855f7;box-shadow:0 8px 28px rgba(168,85,247,0.25)}
.rarity-chromatic{border-color:transparent;box-shadow:0 10px 30px rgba(255,255,255,0.06);position:relative;overflow:hidden}
.pet-name{margin-top:6px;font-size:13px;text-align:center}

.inventory,.capsule{background:var(--card);padding:24px;border-radius:16px;border:1px solid var(--border);transition:background 0.2s ease}
.inventory:hover,.capsule:hover{background:var(--card-hover)}
.inventory-list{display:grid;grid-template-columns:1fr;gap:10px;max-height:500px;overflow-y:auto;padding:4px}
.inventory-list::-webkit-scrollbar{width:8px}
.inventory-list::-webkit-scrollbar-track{background:var(--card)}
.inventory-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.inventory-list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}
.inventory-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:var(--card-hover);border:1px solid var(--border);transition:all 0.2s ease}
.inventory-item:hover{background:rgba(255,255,255,0.04);transform:translateX(4px)}
.badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:0.5px}
.badge.common{background:#849090;color:#000000}
.badge.rare{background:#0062ff;color:#05224b}
.badge.legendary{background:linear-gradient(90deg,#ff9800,#ffd700,#ffeb3b,#ffd700,#ff9800);background-size:200% 100%;color:#331204;position:relative;overflow:hidden;animation:goldShimmer 2.5s linear infinite}
.badge.epic{background:linear-gradient(90deg,#7c3aed,#06b6d4);color:white}
.badge.chromatic{background:linear-gradient(90deg,#ff5bd1,#ffd800,#39ff14,#00e0ff,#ff5bd1);color:#111}
.badge.special{background:linear-gradient(90deg,#7300ff,#e72fff, #9900ff);color:white;position:relative;overflow:hidden}
.badge.unique{background:linear-gradient(90deg,#050a1f 0%, #0d1b3a 10%, #1a3366 20%, #2952a3 30%, #00bfff 40%, #4dd0ff 50%, #00bfff 60%, #2952a3 70%, #1a3366 80%, #0d1b3a 90%, #050a1f 100%);background-size:200% 100%;color:#ffffff;position:relative;overflow:hidden;animation:goldShimmer 2.5s linear infinite;font-weight:800;text-shadow:0 0 15px rgba(0,191,255,0.95), 0 0 25px rgba(77,208,255,0.7), 0 0 35px rgba(41,82,163,0.5)}
.badge.godly{background:linear-gradient(90deg,#ff2d2d,#ff6a00,#ffae00,#ffd700,#fff0a6,#ffd700,#ff6a00,#ff2d2d);background-size:200% 100%;color:#ffffff;position:relative;overflow:hidden;animation:godlyShift 4s linear infinite;font-weight:900;text-shadow:0 0 10px rgba(255,244,214,0.9), 0 0 20px rgba(255,215,0,0.7), 0 0 30px rgba(255,165,0,0.5)}
.badge.eternal{background:linear-gradient(90deg,#10b981,#059669,#047857,#059669,#10b981);background-size:200% 100%;color:#ffffff;position:relative;overflow:hidden;animation:eternalShift 3s linear infinite;font-weight:900;text-shadow:0 0 12px rgba(16,185,129,0.95), 0 0 24px rgba(5,150,105,0.7), 0 0 36px rgba(4,120,87,0.5)}
.badge.new{background:#10b981;color:white;box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset}

/* Spooky rarity (Halloween) */
.badge.spooky{background: linear-gradient(90deg,#ff7a18,#8e2de2); color: white}
.rarity-spooky{ border-color: transparent; box-shadow: 0 8px 30px rgba(255,122,24,0.18); position: relative; overflow: hidden }

/* Festive rarity (Christmas) */
.badge.festive{
	background: linear-gradient(90deg,#c41e3a,#228b22,#c41e3a);
	background-size: 200% 100%;
	animation: christmasShift 3.2s linear infinite;
	color: white;
	font-weight:700;
}
.rarity-festive{ border-color: transparent; box-shadow: 0 8px 30px rgba(196,30,58,0.25); position: relative; overflow: hidden }

.rarity-unique{ border-color:#00bfff; box-shadow: 0 0 20px rgba(0,191,255,0.8), 0 0 40px rgba(77,208,255,0.5), 0 0 60px rgba(41,82,163,0.3); position:relative; overflow:hidden; animation:uniqueGlow 2s ease-in-out infinite }

.rarity-eternal{ border-color:#d4af37; box-shadow: 0 0 25px rgba(212, 175, 55, 0.9), 0 0 50px rgba(251, 191, 36, 0.6), 0 0 75px rgba(212, 175, 55, 0.4), 0 0 100px rgba(30, 58, 138, 0.3); position:relative; overflow:hidden; animation:eternalGlow 2.5s ease-in-out infinite }

@keyframes eternalGlow{
	0%{ box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 0 50px rgba(251, 191, 36, 0.3), 0 0 75px rgba(212, 175, 55, 0.2); }
	50%{ box-shadow: 0 0 35px rgba(212, 175, 55, 1), 0 0 70px rgba(251, 191, 36, 0.8), 0 0 100px rgba(30, 58, 138, 0.5), 0 0 130px rgba(212, 175, 55, 0.3); }
	100%{ box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 0 50px rgba(251, 191, 36, 0.3), 0 0 75px rgba(212, 175, 55, 0.2); }
}

.inventory-item.spooky{ position: relative; overflow: hidden; }
.inventory-item.spooky::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,#ff7a18, #8e2de2, #ff7a18);
	mix-blend-mode: screen; opacity: 0.7;
	filter: blur(10px) saturate(1.1);
	animation: chromaShift 3s linear infinite;
	pointer-events:none;
}

.inventory-item.festive{ position: relative; overflow: hidden; }
.inventory-item.festive::after{
	content: '';
	position: absolute;
	left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,
		#d32f2f 0%, #1b5e20 50%, #d32f2f 100%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	pointer-events: none;
	filter: blur(12px) saturate(1.1);
	transform: translateZ(0);
	animation: christmasShift 4s linear infinite;
}

.rarity-spooky::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,#ff7a18, #8e2de2, #ff7a18);
	mix-blend-mode: screen; opacity: 0.7;
	filter: blur(10px) saturate(1.1);
	animation: chromaShift 3s linear infinite;
	pointer-events:none;
}

.rarity-festive::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,#c41e3a, #228b22, #c41e3a);
	mix-blend-mode: screen; opacity: 0.7;
	filter: blur(10px) saturate(1.1);
	animation: christmasShift 4s linear infinite;
	pointer-events:none;
}

/* rainbow shimmer animation for chromatic */
/* shimmering rainbow overlay used by chromatic elements */
.inventory-item.chromatic{ position: relative; overflow: hidden; }
.inventory-item.chromatic::after{
	content: '';
	position: absolute;
	left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,
		#ff5bd1 0%, #ffd800 20%, #39ff14 40%, #00e0ff 60%, #ff5bd1 80%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	pointer-events: none;
	filter: blur(12px) saturate(1.1);
	transform: translateZ(0);
	animation: chromaShift 3s linear infinite;
}

.inventory-item.godly{ position: relative; overflow: hidden; background:linear-gradient(90deg,#ff2d2d,#ff6a00,#ffae00,#ffd700,#fff0a6,#ffd700,#ff6a00,#ff2d2d); color:#ffffff; border:1px solid rgba(255,215,0,0.28) }
.inventory-item.godly::after{
	content: '';
	position: absolute;
	left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,
		#ff2d2d 0%, #ff6a00 16%, #ffae00 32%, #ffd700 48%, #fff0a6 64%, #ffd700 80%, #ff6a00 90%, #ff2d2d 100%);
	background-size: 200% 100%;
	opacity: 0.75;
	mix-blend-mode: screen;
	pointer-events: none;
	filter: blur(14px) saturate(1.3);
	transform: translateZ(0);
	animation: godlyShift 4s linear infinite;
}

.inventory-item.eternal{ position: relative; overflow: hidden; background:linear-gradient(90deg, #10b981, #059669, #047857); }
.inventory-item.eternal::after{
	content: '';
	position: absolute;
	left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg,
		#10b981 0%, #059669 25%, #047857 50%, #059669 75%, #10b981 100%);
	background-size: 200% 100%;
	opacity: 0.5;
	mix-blend-mode: screen;
	pointer-events: none;
	filter: blur(14px) saturate(1.2);
	transform: translateZ(0);
	animation: eternalShift 3s linear infinite;
}

/* make badges and result-cards display a subtler shimmer */
.badge.chromatic{ position: relative; overflow: hidden; }
.badge.chromatic::after{
	content: '';
	position: absolute; left: -10%; top: -10%; right: -10%; bottom: -10%;
	background: linear-gradient(90deg, #ff5bd1 0%, #ffd800 25%, #39ff14 50%, #00e0ff 75%, #ff5bd1 100%);
	background-size: 200% 100%;
	opacity: 0.85;
	mix-blend-mode: overlay;
	filter: blur(6px);
	animation: chromaShift 3.2s linear infinite;
	pointer-events:none;
}

.badge.godly{ position: relative; overflow: hidden; }
.badge.godly::after{
	content: '';
	position: absolute; left: -10%; top: -10%; right: -10%; bottom: -10%;
	background: linear-gradient(90deg, #ff2d2d 0%, #ff6a00 16%, #ffae00 32%, #ffd700 48%, #fff0a6 64%, #ffd700 80%, #ff6a00 90%, #ff2d2d 100%);
	background-size: 200% 100%;
	opacity: 0.9;
	mix-blend-mode: overlay;
	filter: blur(7px);
	animation: godlyShift 4s linear infinite;
	pointer-events:none;
}

.result-card.chromatic{ position: relative; overflow: hidden; }
.result-card.chromatic::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg, #ff5bd1 0%, #ffd800 20%, #39ff14 40%, #00e0ff 60%, #ff5bd1 80%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(14px) saturate(1.1);
	animation: chromaShift 3s linear infinite;
	pointer-events:none;
}

.result-card.godly{ position: relative; overflow: hidden; will-change: transform, filter; }
.result-card.eternal{ position: relative; overflow: hidden; will-change: transform, filter; background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(251, 191, 36, 0.05)); }
.result-card.eternal::after{
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.1) 50%, transparent 70%);
	animation: eternalShift 3s linear infinite;
	pointer-events: none;
}
.result-card.godly::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg, #ff2d2d 0%, #ff6a00 16%, #ffae00 32%, #ffd700 48%, #fff0a6 64%, #ffd700 80%, #ff6a00 90%, #ff2d2d 100%);
	background-size: 200% 100%;
	opacity: 0.75;
	mix-blend-mode: screen;
	filter: blur(15px) saturate(1.3);
	animation: godlyShift 4s linear infinite;
	pointer-events:none;
}

.result-card.festive{ position: relative; overflow: hidden; }
.result-card.festive::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg, #d32f2f 0%, #1b5e20 50%, #d32f2f 100%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(14px) saturate(1.1);
	animation: christmasShift 4s linear infinite;
	pointer-events:none;
}

/* Unique rarity shimmer */
.inventory-item.unique{ position: relative; overflow: hidden; }
.inventory-item.unique::after{
	content: '';
	position: absolute; left: -20%; top: -20%; right: -20%; bottom: -20%;
	background: linear-gradient(90deg, #050a1f 0%, #1a3366 20%, #2952a3 35%, #00bfff 50%, #2952a3 65%, #1a3366 80%, #050a1f 100%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(12px);
	animation: goldShimmer 3s linear infinite;
	pointer-events:none;
}

.rarity-unique::after{
	content: '';
	position: absolute; left: -20%; top: -20%; right: -20%; bottom: -20%;
	background: linear-gradient(90deg, #050a1f 0%, #1a3366 20%, #2952a3 35%, #00bfff 50%, #2952a3 65%, #1a3366 80%, #050a1f 100%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(12px);
	animation: goldShimmer 3s linear infinite;
	pointer-events:none;
}

.result-card.unique{ position: relative; overflow: hidden; }
.result-card.unique::after{
	content: '';
	position: absolute; left: -15%; top: -15%; right: -15%; bottom: -15%;
	background: linear-gradient(90deg, #050a1f 0%, #1a3366 20%, #2952a3 35%, #00bfff 50%, #2952a3 65%, #1a3366 80%, #050a1f 100%);
	background-size: 200% 100%;
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(14px) saturate(1.2);
	animation: goldShimmer 2.5s linear infinite;
	pointer-events:none;
}

@keyframes chromaShift{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

@keyframes goldShimmer{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

@keyframes godlyShift{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

@keyframes uniqueGlow{
	0%{ box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 30px rgba(255,255,255,0.3), 0 0 45px rgba(135,206,235,0.2); }
	50%{ box-shadow: 0 0 25px rgba(135,206,235,0.9), 0 0 50px rgba(255,255,255,0.5), 0 0 75px rgba(135,206,235,0.3); }
	100%{ box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 30px rgba(255,255,255,0.3), 0 0 45px rgba(135,206,235,0.2); }
}

@keyframes uniqueReveal{
	0%{ transform: scale(0.3) rotate(-20deg); opacity: 0; filter: blur(10px) brightness(0); }
	30%{ transform: scale(1.15) rotate(5deg); opacity: 1; filter: blur(0) brightness(2); }
	50%{ transform: scale(0.95) rotate(-3deg); filter: brightness(1.5); }
	70%{ transform: scale(1.05) rotate(2deg); }
	100%{ transform: scale(1) rotate(0); opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes godlyReveal{
	0%{ transform: scale(0.2) rotate(0deg); opacity: 0; filter: blur(12px) brightness(0) hue-rotate(0deg); }
	60%{ transform: scale(1.06) rotate(216deg); opacity: 1; filter: blur(0) brightness(1.2) hue-rotate(180deg); }
	100%{ transform: scale(1) rotate(360deg); opacity: 1; filter: blur(0) brightness(1) hue-rotate(360deg); }
}

@keyframes eternalReveal{
	0%{ transform: scale(0) rotate(-45deg); opacity: 0; filter: blur(15px) brightness(0) hue-rotate(-60deg); box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
	20%{ filter: blur(8px) brightness(0.5) hue-rotate(-30deg); }
	50%{ transform: scale(1.15) rotate(180deg); opacity: 1; filter: blur(2px) brightness(2) hue-rotate(0deg); box-shadow: 0 0 40px rgba(212, 175, 55, 0.8); }
	80%{ transform: scale(0.95) rotate(540deg); filter: brightness(1.3) hue-rotate(60deg); }
	100%{ transform: scale(1) rotate(720deg); opacity: 1; filter: blur(0) brightness(1) hue-rotate(360deg); box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
}

@keyframes eternalShift{
	0%{ background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); }
	25%{ background-position: 50% 50%; filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)); }
	50%{ background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.8)); }
	75%{ background-position: 50% 50%; filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)); }
	100%{ background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); }
}

footer{padding:32px 0;text-align:center;color:var(--text-secondary);border-top:1px solid var(--border);margin-top:48px}

/* Inline disclaimers */
#disclaimer{color:var(--text-secondary);font-size:13px}

/* Responsive design */
@media(max-width:1024px){
	main{grid-template-columns:1fr;gap:24px}
	.inventory{order:2}
	.hero-title{font-size:36px}
	.hero-subtitle{font-size:16px}
}

@media(max-width:640px){
	header{flex-direction:column;gap:16px;text-align:center}
	.nav-bar{flex-wrap:wrap;gap:16px;justify-content:center}
	.hero{padding:40px 0 30px 0}
	.hero-title{font-size:28px}
	.hero-subtitle{font-size:15px}
	.hero-actions{flex-direction:column;width:100%}
	.hero-actions button{width:100%}
	.result-card{width:90px;height:110px}
}

/* Capsule & sell button styles */
.capsule{background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);padding:18px;border-radius:12px}
.sell-btn{background:#10b981;border-radius:8px;padding:6px 12px;font-weight:600;color:white;border:0;transition:all 0.2s ease;cursor:pointer}
.sell-btn:hover{background:#059669;transform:translateY(-1px)}
.small{padding:6px 12px;border-radius:6px;font-size:13px}
/* add spacing between adjacent small sell buttons (Sell x1 and Sell All) */
.sell-btn.small + .sell-btn.small{margin-left:12px}
/* make the action container (right-side in inventory items) use flex and gap for reliable spacing */
.inventory-item > div:last-child{ margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* Modal: Rarities & Info */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px)}
.modal-panel{position:relative;z-index:61;width:min(600px,92%);background:var(--card);border-radius:16px;padding:24px;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:20px;font-weight:700;margin:0}
.modal-body{min-height:100px}

/* Coin pop animation */
@keyframes coinPop {
    0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
    15% { opacity: 1; transform: translate(0, -2px) scale(1.1); }
    70% { opacity: 1; transform: translate(0, -20px) scale(1); }
    100% { opacity: 0; transform: translate(0, -28px) scale(0.9); }
}

.coin-pop {
    position: absolute;
    color: #fbbf24;
    font-weight: 700;
    font-size: 15px;
    pointer-events: none;
    animation: coinPop 1.2s ease-out forwards;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}


.coin-icon{
	height: 9px;
	width: 9px;
	vertical-align: -1px;
	margin-right: 6px;
}
/* Benny Boost coin pop variant (neon purple) */
.coin-pop.benny{
	color: #9b59ff;
	text-shadow: 0 0 8px rgba(155,89,255,0.95), 0 0 20px rgba(155,89,255,0.6);
}

/* EP pop animation */
@keyframes epPop {
    0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
    15% { opacity: 1; transform: translate(0, -2px) scale(1.1); }
    70% { opacity: 1; transform: translate(0, -20px) scale(1); }
    100% { opacity: 0; transform: translate(0, -28px) scale(0.9); }
}

.ep-pop {
    position: absolute;
    color: #a855f7;
    font-weight: 700;
    font-size: 15px;
    pointer-events: none;
    animation: epPop 1.2s ease-out forwards;
    text-shadow: 0 0 8px rgba(168,85,247,0.8), 0 0 16px rgba(168,85,247,0.4);
}

/* Tears pop animation (blue) */
@keyframes tearPop {
	0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
	15% { opacity: 1; transform: translate(0, -2px) scale(1.1); }
	70% { opacity: 1; transform: translate(0, -20px) scale(1); }
	100% { opacity: 0; transform: translate(0, -28px) scale(0.9); }
}

.tear-pop {
	position: absolute;
	color: #60a5fa; /* blue-400 */
	font-weight: 700;
	font-size: 15px;
	pointer-events: none;
	animation: tearPop 1.2s ease-out forwards;
	text-shadow: 0 0 8px rgba(96,165,250,0.9), 0 0 18px rgba(96,165,250,0.5);
}

/* Roll animations */
@keyframes btnPulse{ 0%{ transform:scale(1) } 50%{ transform:scale(1.04) } 100%{ transform:scale(1) } }
@keyframes popIn{ 0%{ transform: scale(0.6) rotate(-6deg); opacity:0 } 60%{ transform: scale(1.05) rotate(4deg); opacity:1 } 100%{ transform: scale(1) rotate(0) } }
@keyframes revealGlow{ 0%{ box-shadow:0 0 0 rgba(255,255,255,0) } 50%{ box-shadow:0 16px 40px rgba(124,58,237,0.14) } 100%{ box-shadow:0 0 0 rgba(255,255,255,0) } }

@keyframes uniqueGlow{
	0%{ box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 30px rgba(255,255,255,0.3), 0 0 45px rgba(135,206,235,0.2); }
	50%{ box-shadow: 0 0 25px rgba(135,206,235,0.9), 0 0 50px rgba(255,255,255,0.5), 0 0 75px rgba(135,206,235,0.3); }
	100%{ box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 30px rgba(255,255,255,0.3), 0 0 45px rgba(135,206,235,0.2); }
}

@keyframes uniqueReveal{
	0%{ transform: scale(0.3) rotate(-20deg); opacity: 0; filter: blur(10px) brightness(0); }
	30%{ transform: scale(1.15) rotate(5deg); opacity: 1; filter: blur(0) brightness(2); }
	50%{ transform: scale(0.95) rotate(-3deg); filter: brightness(1.5); }
	70%{ transform: scale(1.05) rotate(2deg); }
	100%{ transform: scale(1) rotate(0); opacity: 1; filter: blur(0) brightness(1); }
}

.controls button.anim-pulse{ animation: btnPulse 420ms ease-in-out }
.result-area.animating{ pointer-events:none; opacity:0.6 }
.result-card.pop{ animation: popIn 420ms cubic-bezier(.2,.8,.2,1); transform-origin:center; }
.result-card.chromatic.pop{ animation: popIn 520ms cubic-bezier(.2,.9,.2,1), chromaShift 3s linear infinite }
.result-card.godly.pop{ animation: godlyReveal 1.5s linear both, godlyShift 4s linear infinite; transform-origin:center; }
.result-card.unique.pop{ animation: uniqueReveal 1.2s cubic-bezier(.2,.9,.2,1); transform-origin:center; }
.result-card.eternal.pop{ animation: eternalReveal 1.8s cubic-bezier(.2,.9,.2,1); transform-origin:center; }
.result-card.reveal-glow{ animation: revealGlow 700ms ease-in-out }

/* Benny Boost glow for pets (result cards and inventory items) */
.result-card.benny-glow, .inventory-item.benny-glow{
	box-shadow: 0 0 12px rgba(155,89,255,0.9), 0 0 28px rgba(155,89,255,0.45) !important;
	border: 1px solid rgba(155,89,255,0.6) !important;
}

#idk {
	font-weight: bold;
}

#idk2 {
	font-weight: bold;
}

/* Enchantment badge styles for pet info modal */
.enchant-badge {
	background: var(--glass);
	border-radius: 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--accent);
}
.enchant-tier-1 {
	border-left-color: #10b981;
}
.enchant-tier-2 {
	border-left-color: #3b82f6;
}
.enchant-tier-3 {
	border-left-color: #a855f7;
}

/* Enchantment badge styles for pet info modal */
.enchant-badge {
	background: var(--glass);
	border-radius: 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--accent);
}
.enchant-tier-1 {
	border-left-color: #10b981;
}
.enchant-tier-2 {
	border-left-color: #3b82f6;
}
.enchant-tier-3 {
	border-left-color: #a855f7;
}