* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', sans-serif;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #ffeaa7 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    min-height: 100vh;
    color: white;
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.game-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.game-container.moonrot-active {
    background: linear-gradient(135deg, #2c1810 0%, #4a1c40 25%, #301a52 50%, #1a1a3e 75%, #0f0f23 100%);
}

.game-container.disco-active {
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 25%, #673ab7 50%, #3f51b5 75%, #2196f3 100%);
    background-size: 400% 400%;
    animation: disco-gradient 2s ease infinite;
}

.game-container.crab-active {
    background: linear-gradient(135deg, #87CEEB 0%, #F0E68C 25%, #DEB887 50%, #CD853F 75%, #8FBC8F 100%);
    background-size: 400% 400%;
    animation: wave-gradient 4s ease infinite;
}

.game-container.hungry-tung-active {
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 25%, #CD853F 50%, #DEB887 75%, #F4A460 100%);
    background-size: 400% 400%;
    animation: tung-gradient 3s ease infinite;
}

.game-container.mexico-active {
    background: linear-gradient(135deg, #f4a261 0%, #e76f51 25%, #e9c46a 50%, #2a9d8f 75%, #264653 100%);
}

.game-container.taco-active {
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 25%, #673ab7 50%, #3f51b5 75%, #2196f3 100%);
    background-size: 400% 400%;
    animation: taco-gradient 2s ease infinite;
}

.game-container.lava-active {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 25%, #FF4500 50%, #FF6347 75%, #FFB347 100%);
    background-size: 400% 400%;
    animation: lava-gradient 3s ease infinite;
}

.game-container.nyan-active {
    background: linear-gradient(135deg, #FF69B4 0%, #FF1493 25%, #9370DB 50%, #00BFFF 75%, #32CD32 100%);
    background-size: 400% 400%;
    animation: nyan-gradient 2s ease infinite;
}

.game-container.shark-active {
    background: linear-gradient(135deg, #87CEFA 0%, #00BFFF 50%, #1E90FF 100%);
}

.game-container.zombie-active {
    background: linear-gradient(135deg, #0c2f12 0%, #124d1d 40%, #0b3a15 70%, #07260e 100%);
    background-size: 200% 200%;
    animation: zombie-gradient 6s ease-in-out infinite;
}

.game-container.tree-active {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 25%, #43a047 50%, #1b5e20 75%, #0d3d14 100%);
    background-size: 400% 400%;
    animation: zombie-gradient 6s ease-in-out infinite;
}

.game-container.yinyang-active { background: linear-gradient(135deg,#111,#222 35%,#333); filter: grayscale(100%); }

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

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

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

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

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

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes conveyor-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(30px); }
}

@keyframes event-glow { 
  0%{ box-shadow: inset 0 0 20px rgba(255,255,255,0.12), 0 0 20px rgba(255,255,255,0.12); } 
  100%{ box-shadow: inset 0 0 40px rgba(255,255,255,0.25), 0 0 40px rgba(255,255,255,0.25); } 
}

.game-container.lava-active, .game-container.nyan-active, .game-container.crab-active, .game-container.hungry-tung-active, .game-container.shark-active, .game-container.zombie-active, .game-container.tree-active, .game-container.mexico-active, .game-container.yinyang-active, .game-container.moonrot-active, .game-container.disco-active {
  animation: event-glow 1.8s ease-in-out infinite alternate;
}

.game-container.theme-spooky {
  background: #0b0b0f !important;
  color: #eee;
}
.game-container.theme-spooky .shop,
.game-container.theme-spooky .conveyor-section,
.game-container.theme-spooky .inventory-section,
.game-container.theme-spooky .stat,
.game-container.theme-spooky .timer,
.game-container.theme-spooky .admin-panel,
.game-container.theme-spooky .brainrot-index,
.game-container.theme-spooky .rebirth-info {
  background: rgba(20,20,26,0.9);
  border-color: #ff6b35;
}
.game-container.theme-spooky .timer-value,
.game-container.theme-spooky .item-income { color: #ff6b35; }
.game-container.theme-spooky .shop-buy-btn { background: #ff6b35; }
.game-container.theme-spooky .btn-primary { background: #ff6b35; }
.game-container.theme-spooky .btn-secondary { background: #333; }

.conveyor-belt.yinyang { background: linear-gradient(135deg,#111,#1c1c1c); border:4px solid #444; }

.brainrot-item.yinyang { background: linear-gradient(135deg,#111,#222 35%,#333); filter: grayscale(100%); }

.variant-symbol.yinyang { background: linear-gradient(135deg,#000,#fff); color:#000; box-shadow:0 0 20px rgba(255,255,255,0.6); }

.timer-value.yinyang { color:#ffffff; }

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.header-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.restart-btn {
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.collect-all-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.collect-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.stat {
    background: rgba(255,255,255,0.1);
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.stat h3 {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 5px;
}

.stat .value {
    font-size: 1.5rem;
    font-weight: 700;
}

.timers {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.timer {
    background: rgba(255,255,255,0.1);
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    text-align: center;
}

.timer h3 {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 5px;
}

.timer-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f39c12;
}

.timer-value.moonrot { color: #ab47bc; }
.timer-value.lava { color: #ff6b35; }
.timer-value.nyan { color: #ff69b4; }
.timer-value.crab { color: #FF6347; }
.timer-value.hungry { color: #D2691E; }
.timer-value.zombie { color: #66bb6a; }
.timer-value.yinyang { color:#ffffff; }

.restart-btn.rebirth-ready {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    animation: rebirth-pulse 2s ease-in-out infinite;
}

@keyframes rebirth-pulse {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 6px 25px rgba(155, 89, 182, 0.6);
        transform: scale(1.05);
    }
}

.rebirth-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.rebirth-complete {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.shop {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    max-height: 420px;
    overflow-y: auto;
}

.shop h3 {
    margin-bottom: 15px;
    text-align: center;
}

.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-bottom: 10px;
}

.shop-info {
    flex: 1;
}

.shop-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.shop-description {
    font-size: 0.9rem;
    opacity: 0.8;
}

.shop-buy-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-buy-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.shop-buy-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #666;
}

.main-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.conveyor-section {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.conveyor-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.conveyor-belt {
    height: 400px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    border: 4px solid #a93226;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.conveyor-belt.moonrot {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    border: 4px solid #7b1fa2;
}

.conveyor-belt.disco {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    border: 4px solid #ad1457;
}

.conveyor-belt.crab {
    background: linear-gradient(135deg, #4682B4, #5F9EA0);
    border: 4px solid #2F4F4F;
}

.conveyor-belt.hungry-tung {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border: 4px solid #654321;
}

.conveyor-belt.taco {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    border: 4px solid #ad1457;
}

.conveyor-belt.lava {
    background: linear-gradient(135deg, #8B0000, #DC143C);
    border: 4px solid #FF4500;
}

.conveyor-belt.nyan {
    background: linear-gradient(135deg, #FF69B4, #9370DB);
    border: 4px solid #FF1493;
}

.conveyor-belt.shark {
    background: linear-gradient(135deg, #00BFFF, #1E90FF);
    border: 4px solid #187bcd;
}

.conveyor-belt.mexico {
    background: linear-gradient(135deg, #f4a261, #e76f51);
    border: 4px solid #2a9d8f;
}

.conveyor-belt.yinyang { background: linear-gradient(135deg,#111,#1c1c1c); border:4px solid #444; }

.conveyor-belt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 15px,
        rgba(255,255,255,0.1) 15px,
        rgba(255,255,255,0.1) 30px
    );
    animation: conveyor-move 1s linear infinite;
}

.brainrot-item {
    position: absolute;
    width: 100px;
    height: 130px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.3);
    z-index: 10;
}

.brainrot-item.disco {
    border: 3px solid #e91e63;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.6);
    animation: disco-glow 1s ease-in-out infinite alternate;
}

@keyframes disco-glow {
    0% { box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(233, 30, 99, 0.8); }
}

.brainrot-item.crab {
    border: 3px solid #FF6347;
    box-shadow: 0 0 20px rgba(255, 99, 71, 0.6);
    animation: crab-glow 1s ease-in-out infinite alternate;
}

@keyframes crab-glow {
    0% { box-shadow: 0 4px 15px rgba(255, 99, 71, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(255, 99, 71, 0.8); }
}

.brainrot-item.hungry-tung {
    border: 3px solid #D2691E;
    box-shadow: 0 0 20px rgba(210, 105, 30, 0.6);
    animation: tung-glow 1s ease-in-out infinite alternate;
}

@keyframes tung-glow {
    0% { box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(210, 105, 30, 0.8); }
}

.brainrot-item.taco {
    background: linear-gradient(135deg, #f4a261, #e76f51, #e9c46a);
    color: #2a2a2a;
    border: 3px solid #2a9d8f;
    box-shadow: 0 0 24px rgba(234, 179, 8, 0.6);
    animation: taco-glow 1.6s ease-in-out infinite alternate;
}

@keyframes taco-glow {
    0% { box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(233, 30, 99, 0.8); }
}

.brainrot-item.rainbow {
    border: 3px solid #ff6b6b;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
    background: linear-gradient(135deg, #e74c3c, #f39c12, #f1c40f, #27ae60, #3498db, #9b59b6, #e91e63);
    background-size: 400% 400%;
    animation: rainbow-glow 3s ease infinite;
    color: white;
}

.brainrot-item.lava {
    border: 3px solid #FF4500;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
    animation: lava-glow 1s ease-in-out infinite alternate;
}

@keyframes lava-glow {
    0% { box-shadow: 0 4px 15px rgba(255, 69, 0, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(255, 69, 0, 0.8); }
}

.brainrot-item.nyan {
    border: 3px solid #FF69B4;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
    animation: nyan-glow 1s ease-in-out infinite alternate;
}

@keyframes nyan-glow {
    0% { box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(255, 105, 180, 0.8); }
}

.brainrot-item.mexico {
    border:3px solid #2ecc71;
    box-shadow:0 0 20px rgba(46,204,113,0.6);
}

.brainrot-item.yinyang { background: linear-gradient(135deg,#111,#222 35%,#333); filter: grayscale(100%); }

.brainrot-item.locked { opacity: 0.55; filter: grayscale(1); }

.variant-symbol {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 20;
    animation: sparkle 1.5s ease-in-out infinite;
}

.variant-symbol.disco {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.8);
    animation: disco-pulse 1s ease-in-out infinite;
}

@keyframes disco-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.crab {
    background: linear-gradient(135deg, #FF6347, #FF4500);
    box-shadow: 0 0 20px rgba(255, 99, 71, 0.8);
    animation: crab-pulse 1s ease-in-out infinite;
}

@keyframes crab-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.hungry-tung {
    background: linear-gradient(135deg, #D2691E, #CD853F);
    box-shadow: 0 0 20px rgba(210, 105, 30, 0.8);
    animation: tung-pulse 1s ease-in-out infinite;
}

@keyframes tung-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.gold {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);
}

.variant-symbol.diamond {
    background: linear-gradient(135deg, #3498db, #85c1e9);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
}

.variant-symbol.moonrot {
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    box-shadow: 0 0 20px rgba(74, 20, 140, 0.8);
}

.variant-symbol.taco {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.8);
    animation: taco-pulse 1s ease-in-out infinite;
}

@keyframes taco-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.rainbow {
    background: linear-gradient(135deg, #e74c3c, #f39c12, #f1c40f, #27ae60, #3498db, #9b59b6, #e91e63);
    background-size: 400% 400%;
    animation: rainbow-pulse 1s ease infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

@keyframes rainbow-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
}

.variant-symbol.lava {
    background: linear-gradient(135deg, #FF4500, #DC143C);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
    animation: lava-pulse 1s ease-in-out infinite;
}

@keyframes lava-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.nyan {
    background: linear-gradient(135deg, #FF69B4, #9370DB);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.8);
    animation: nyan-pulse 1s ease-in-out infinite;
}

@keyframes nyan-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(360deg); }
}

.variant-symbol.zombie {
    background: linear-gradient(135deg, #0c2f12, #124d1d);
    box-shadow: 0 0 20px rgba(46, 73, 27, 0.8);
}

.brainrot-item:hover:not(.disabled) {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.brainrot-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.brainrot-item.moonrot {
    border: 3px solid #7b1fa2;
    box-shadow: 0 0 20px rgba(123, 31, 162, 0.6);
}

.brainrot-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 5px;
}

.item-info {
    text-align: center;
}

.item-name {
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.item-cost {
    font-size: 0.6rem;
    opacity: 0.9;
}

.item-income {
    font-size: 0.6rem;
    color: #2ecc71;
    font-weight: 700;
}

.brainrot-item.common {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    animation: common-glow 2s ease-in-out infinite alternate;
}

.brainrot-item.uncommon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    animation: uncommon-glow 2s ease-in-out infinite alternate;
}

.brainrot-item.rare {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    animation: rare-glow 2s ease-in-out infinite alternate;
}

.brainrot-item.epic {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: white;
    animation: epic-glow 2s ease-in-out infinite alternate;
}

.brainrot-item.legendary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    animation: legendary-glow 1.5s ease-in-out infinite alternate;
}

.brainrot-item.mythic {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    animation: mythic-glow 2s ease-in-out infinite alternate;
}

.brainrot-item.secret {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    animation: secret-glow 2s ease-in-out infinite alternate;
    border: 3px solid #7f8c8d;
}

@keyframes secret-glow {
    0% { box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(44, 62, 80, 0.6); }
}

.brainrot-item.brainrot_god {
    background: linear-gradient(135deg, #e74c3c, #f39c12, #f1c40f, #27ae60, #3498db, #9b59b6, #e91e63);
    background-size: 400% 400%;
    animation: rainbow-glow 3s ease infinite;
    color: white;
    border: 3px solid white;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

@keyframes common-glow {
    0% { box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(34, 197, 94, 0.6); }
}

@keyframes uncommon-glow {
    0% { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(59, 130, 246, 0.6); }
}

@keyframes rare-glow {
    0% { box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(37, 99, 235, 0.6); }
}

@keyframes epic-glow {
    0% { box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(147, 51, 234, 0.6); }
}

@keyframes legendary-glow {
    0% { box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5); }
    100% { box-shadow: 0 4px 35px rgba(249, 115, 22, 0.8); }
}

@keyframes mythic-glow {
    0% { box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(239, 68, 68, 0.6); }
}

@keyframes rainbow-glow {
    0% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
    }
    16% { 
        background-position: 16% 50%; 
        box-shadow: 0 0 30px rgba(243, 156, 18, 0.8);
    }
    33% { 
        background-position: 33% 50%; 
        box-shadow: 0 0 30px rgba(241, 196, 15, 0.8);
    }
    50% { 
        background-position: 50% 50%; 
        box-shadow: 0 0 30px rgba(39, 174, 96, 0.8);
    }
    66% { 
        background-position: 66% 50%; 
        box-shadow: 0 0 30px rgba(52, 152, 219, 0.8);
    }
    83% { 
        background-position: 83% 50%; 
        box-shadow: 0 0 30px rgba(155, 89, 182, 0.8);
    }
    100% { 
        background-position: 100% 50%; 
        box-shadow: 0 0 30px rgba(233, 30, 99, 0.8);
    }
}

@keyframes moveWhite {
  0% { background-position-y: 12%; }
  50% { background-position-y: 60%; }
  100% { background-position-y: 12%; }
}

.inventory-section {
    width: 350px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(10px);
    display: block;
}

.inventory-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.inventory-slot {
    width: 80px;
    height: 100px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    padding: 5px;
    cursor: pointer;
}

.inventory-slot.crab {
    border: 3px solid #FF6347;
    box-shadow: 0 0 15px rgba(255, 99, 71, 0.5);
}

.inventory-slot.hungry-tung {
    border: 3px solid #D2691E;
    box-shadow: 0 0 15px rgba(210, 105, 30, 0.5);
}

.inventory-slot.disco {
    border: 3px solid #e91e63;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.5);
}

.inventory-slot.taco {
    background: linear-gradient(135deg, rgba(244,162,97,0.35), rgba(231,111,81,0.35));
    border: 3px solid #2a9d8f;
    box-shadow: 0 0 15px rgba(234,179,8,0.5);
}

.inventory-slot.lava {
    border: 3px solid #FF4500;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
}

.inventory-slot.nyan {
    border: 3px solid #FF69B4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

.inventory-slot.shark {
    border: 3px solid #187bcd;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.inventory-slot:hover {
    transform: scale(1.05);
}

.inventory-slot.filled {
    border-color: rgba(255,255,255,0.8);
}

.inventory-slot img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 3px;
}

.inventory-slot.moonrot {
    border: 3px solid #7b1fa2;
    box-shadow: 0 0 15px rgba(123, 31, 162, 0.5);
}

.inventory-slot.limited {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    border: 3px solid #95a5a6;
}

.brainrot-item.limited {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    animation: limited-glow 2s ease-in-out infinite alternate;
}

@keyframes limited-glow {
    0% { box-shadow: 0 4px 15px rgba(52, 73, 94, 0.3); }
    100% { box-shadow: 0 4px 25px rgba(52, 73, 94, 0.6); }
}

.brainrot-entry.limited {
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.2), rgba(44, 62, 80, 0.2));
}

.rarity-header.limited {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
}

.slot-info {
    text-align: center;
}

.slot-name {
    font-size: 0.6rem;
    margin-bottom: 1px;
}

.slot-income {
    font-size: 0.5rem;
    opacity: 0.8;
}

.inventory-slot.common {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.inventory-slot.uncommon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.inventory-slot.rare {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

.inventory-slot.epic {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: white;
}

.inventory-slot.legendary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.inventory-slot.mythic {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.inventory-slot.secret {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border: 3px solid #7f8c8d;
}

.inventory-slot.brainrot_god {
    background: linear-gradient(135deg, #e74c3c, #f39c12, #f1c40f, #27ae60, #3498db, #9b59b6, #e91e63);
    background-size: 400% 400%;
    animation: rainbow-glow 3s ease infinite;
    color: white;
    border: 3px solid white;
}

.inventory-slot.gold {
    border: 3px solid #f39c12;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
}

.inventory-slot.diamond {
    border: 3px solid #3498db;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
}

.inventory-slot.mexico {
    border:3px solid #2ecc71;
    box-shadow:0 0 15px rgba(46,204,113,0.5);
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary {
    background: #4CAF50;
    color: white;
}

.btn-primary:hover {
    background: #45a049;
}

.btn-secondary {
    background: #2196F3;
    color: white;
}

.btn-secondary:hover {
    background: #1976D2;
}

.brainrot-index {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    display: block;
}

.brainrot-index h3 {
    margin-bottom: 10px;
    text-align: center;
}

.brainrot-entry {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.brainrot-entry:hover {
    transform: translateX(5px);
}

.index-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

.entry-info {
    flex: 1;
}

.brainrot-name {
    font-weight: 700;
    margin-bottom: 3px;
}

.brainrot-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0.9;
}

.rarity-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.brainrot-entry.common {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
}

.brainrot-entry.uncommon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
}

.brainrot-entry.rare {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(29, 78, 216, 0.2));
}

.brainrot-entry.epic {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(124, 58, 237, 0.2));
}

.brainrot-entry.legendary {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.2));
}

.brainrot-entry.mythic {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
}

.brainrot-entry.secret {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.2), rgba(52, 73, 94, 0.2));
}

.brainrot-entry.brainrot_god {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(243, 156, 18, 0.2), rgba(241, 196, 15, 0.2), rgba(39, 174, 96, 0.2), rgba(52, 152, 219, 0.2), rgba(155, 89, 182, 0.2), rgba(233, 30, 99, 0.2));
    background-size: 400% 400%;
    animation: rainbow-glow 3s ease infinite;
    color: white;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: rgba(255,255,255,0.95);
    color: #333;
    padding: 30px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content h2 {
    margin-bottom: 20px;
    text-align: center;
}

.modal-content.reveal-fx {
    position: relative;
    overflow: hidden;
    background: radial-gradient(closest-side, #ffffff 0%, #f7f7f7 60%, #ececec 100%);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.upgrade-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.upgrade-option:hover {
    background: rgba(0,0,0,0.2);
}

.upgrade-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.upgrade-info {
    flex: 1;
}

.upgrade-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.upgrade-details {
    font-size: 0.9rem;
    opacity: 0.8;
}

.upgrade-cost {
    font-weight: 600;
    font-size: 1.1rem;
    color: #4CAF50;
}

.rebirth-info {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.rebirth-info h3 {
    margin-bottom: 15px;
    text-align: center;
    color: #9b59b6;
}

.rebirth-details {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 15px;
}

.rebirth-level h4 {
    margin-bottom: 10px;
    color: #e74c3c;
}

.rebirth-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.requirements, .rewards {
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.requirements {
    border-left: 4px solid #e74c3c;
}

.rewards {
    border-left: 4px solid #27ae60;
}

.rebirth-action-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-top: 10px;
}

.rebirth-action-btn.ready {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
    animation: rebirth-pulse 2s ease-in-out infinite;
}

.rebirth-action-btn.disabled {
    background: #666;
    color: #999;
    cursor: not-allowed;
}

.rarity-section {
    margin-bottom: 20px;
}

.rarity-header {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.rarity-header.common {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.rarity-header.uncommon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.rarity-header.rare {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

.rarity-header.epic {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: white;
}

.rarity-header.legendary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.rarity-header.mythic {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.rarity-header.secret {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
}

.rarity-header.brainrot_god {
    background: linear-gradient(135deg, #e74c3c, #f39c12, #f1c40f, #27ae60, #3498db, #9b59b6, #e91e63);
    background-size: 400% 400%;
    animation: rainbow-glow 3s ease infinite;
    color: white;
}

.global-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 3000;
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.admin-panel {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
    border: 2px solid #ff6b6b;
    max-height: 65vh;
    overflow-y: auto;
}

.admin-panel h3 {
    margin-bottom: 15px;
    text-align: center;
    color: #ff6b6b;
}

.admin-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.spawn-controls {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 15px;
}

.spawn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.spawn-buttons .btn {
    padding: 5px 10px;
    font-size: 0.8rem;
}

.variant-spawns {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.variant-spawns .btn {
    margin: 5px;
    padding: 8px 15px;
    font-size: 0.9rem;
}

.message-control input {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 25px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}

.message-control input::placeholder {
    color: rgba(255,255,255,0.7);
}

.message-control input:focus {
    outline: none;
    background: rgba(255,255,255,0.2);
}

@keyframes pop { 0%{ transform: scale(0.6); opacity:0 } 60%{ transform: scale(1.15); opacity:1 } 100%{ transform: scale(1); } }

.cloner-status {
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    text-align: center;
}

.cloner-status p {
    margin: 5px 0;
}

.taco-machine {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    border: 2px solid #e91e63;
    display: none; /* Hide the taco machine */
}

.taco-machine h3 {
    margin-bottom: 15px;
    text-align: center;
    color: #e91e63;
}

.taco-machine-btn {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    width: 100%;
}

.taco-machine-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
}

.taco-machine-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #666;
}

.red-carpet {
    background: linear-gradient(135deg, #8B0000, #B22222);
    border: 2px solid #ff6b6b;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    display: none; /* hide limited stock section */
}

.lucky-blocks-list {
    max-height: 260px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
    
    .inventory-section {
        width: 100%;
    }
    
    .stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .collect-all-btn,
    .restart-btn {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .inventory-slot {
        width: 70px;
        height: 90px;
    }
    
    .header-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

.variant-symbol.vaca { background: linear-gradient(135deg,#000,#fff); color:#000; }
.brainrot-item.lava, .brainrot-item.nyan, .brainrot-item.crab, .brainrot-item.hungry-tung, .brainrot-item.shark, .brainrot-item.mexico, .brainrot-item.yinyang {
  transform: translateY(-2px);
}
.conveyor-belt.lava::before, .conveyor-belt.nyan::before, .conveyor-belt.crab::before, .conveyor-belt.hungry-tung::before, .conveyor-belt.shark::before, .conveyor-belt.mexico::before, .conveyor-belt.yinyang::before {
  animation-duration: 0.6s;
}

.shop.rituals { max-height: 200px; overflow-y: auto; }
.shop.rituals .shop-buy-btn { padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; }

/* Highlight selected slots in fuse mode */
.inventory-slot.selected {
  outline: 2px solid #ffd54f;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.7);
}

.variant-symbol.spider { background: #222; color:#fff; box-shadow: 0 0 14px rgba(255,255,255,0.25); }

.game-container.strawberry-active { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); }
.game-container.meowl-active { background: linear-gradient(135deg,#0d2614,#173a22,#0d2614); }
.game-container.indonesia-active { background: linear-gradient(135deg,#111,#1b1f24); }

.brainrot-item.og {
  background: linear-gradient(135deg,#111,#222);
  color:#fff; border:3px solid #bbb;
}
.inventory-slot.og {
  background: linear-gradient(135deg,#111,#222);
  color:#fff; border:3px solid #bbb;
}
.rarity-header.og { background: linear-gradient(135deg,#111,#222); color:#fff; }

.variant-symbol.indonesia { background: linear-gradient(135deg,#ffedbc,#ed4264); color:#000; box-shadow:0 0 18px rgba(237,66,100,0.6); }

.rarity-header.og,
.brainrot-item.og .item-name,
.inventory-slot.og .slot-name {
  font-weight: bold;
  background: linear-gradient(to bottom, yellow 20%, yellow 40%, yellow 40%, yellow 60%, black 60%, black 80%, yellow 80%, yellow 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 100% 300%; background-position: 0% 12%;
  animation: moveWhite 2.5s linear infinite;
}