/* GLOBAL THEME VARIABLES */
:root {
  --bg: #000000;
  --panel: rgba(15, 15, 15, 0.6);
  --border: 1px solid rgba(255, 255, 255, 0.1);
  
  /* DEFAULT THEME COLOR */
  --accent: #00ff9d; 
  --theme-green: var(--accent); /* Compatibility alias */
  
  --red: #ff4444;
  --blue: #4488ff;
  --text: #eee;
  --glass-blur: blur(12px);
  --glow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* GLOBAL SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* DRAG & DROP UTILS */
.used-pokemon {
  filter: grayscale(100%);
  opacity: 0.3;
  pointer-events: none;
  border: 1px dashed #555 !important;
}

/* THEME APPLICATORS */
.status-dot.active { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.np-text { color: var(--accent); }
.media-tiny-btn:hover { background: var(--accent); color: #000; }
.slot.drag-over { border-color: var(--accent); background: rgba(255,255,255, 0.05); }

/* --- NEW BUTTON STYLES (SMALLER) --- */
.theme-btn-group {
    display: flex;
    gap: 8px;
}

.theme-color-btn, .theme-party-btn {
    width: 26px; /* Smaller size */
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: #222;
}

.theme-color-btn {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.theme-party-btn {
    background: linear-gradient(135deg, #222, #444);
}

.theme-party-btn:hover, .theme-color-btn:hover {
    transform: scale(1.1);
    border-color: #fff;
}

/* Party Mode Active State for the Button */
.party-active-btn {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 0 15px #fff, 0 0 30px rgba(255,255,255,0.35);
    animation: none !important;
    transform: none !important;
}

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