/* ============================================================
   ArcanePlayConnect - Shared Theme Variables & Base Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&family=Cinzel:wght@400;700;900&display=swap');

/* === Theme definitions === */
:root,
:root[data-theme="cyberpunk"] {
    --accent: #00c8ff; --accent2: #b400ff; --accent3: #ff3278;
    --bg: rgba(10,10,20,0.92); --card: rgba(22,22,42,0.95);
    --card-border: rgba(0,200,255,0.25); --text: #e0e0ff; --text2: #8888aa;
    --rank1: #ffd700; --rank2: #c0c0c0; --rank3: #cd7f32;
    --hp-bar: linear-gradient(90deg, #00ff88, #00c8ff);
    --hp-bar-low: linear-gradient(90deg, #ff3278, #ff9500);
    --gradient: linear-gradient(135deg, #00c8ff, #b400ff, #ff3278);
    --glow: 0 0 20px rgba(0,200,255,0.3);
    --title-font: 'Orbitron', sans-serif;
}

:root[data-theme="neonfire"] {
    --accent: #ff6b00; --accent2: #ff0044; --accent3: #ffcc00;
    --bg: rgba(15,5,5,0.92); --card: rgba(40,12,12,0.95);
    --card-border: rgba(255,107,0,0.3); --text: #ffe0d0; --text2: #aa7766;
    --rank1: #ffcc00; --rank2: #ff8844; --rank3: #cc4400;
    --hp-bar: linear-gradient(90deg, #ffcc00, #ff6b00);
    --hp-bar-low: linear-gradient(90deg, #ff0044, #880022);
    --gradient: linear-gradient(135deg, #ff6b00, #ff0044, #ffcc00);
    --glow: 0 0 20px rgba(255,107,0,0.4);
    --title-font: 'Orbitron', sans-serif;
}

:root[data-theme="arcticfrost"] {
    --accent: #88ddff; --accent2: #44aaff; --accent3: #ffffff;
    --bg: rgba(8,15,25,0.92); --card: rgba(15,30,50,0.95);
    --card-border: rgba(136,221,255,0.2); --text: #d0e8ff; --text2: #6699bb;
    --rank1: #ffffff; --rank2: #88ddff; --rank3: #44aaff;
    --hp-bar: linear-gradient(90deg, #88ddff, #44aaff);
    --hp-bar-low: linear-gradient(90deg, #ff6688, #cc2244);
    --gradient: linear-gradient(135deg, #88ddff, #44aaff, #ffffff);
    --glow: 0 0 20px rgba(136,221,255,0.3);
    --title-font: 'Rajdhani', sans-serif;
}

:root[data-theme="dragonforge"] {
    --accent: #ff4400; --accent2: #884400; --accent3: #ffaa00;
    --bg: rgba(12,8,4,0.92); --card: rgba(30,18,8,0.95);
    --card-border: rgba(255,68,0,0.3); --text: #ffd8b0; --text2: #996644;
    --rank1: #ffaa00; --rank2: #ff6600; --rank3: #884400;
    --hp-bar: linear-gradient(90deg, #ffaa00, #ff4400);
    --hp-bar-low: linear-gradient(90deg, #880000, #440000);
    --gradient: linear-gradient(135deg, #ff4400, #884400, #ffaa00);
    --glow: 0 0 20px rgba(255,68,0,0.4);
    --title-font: 'Cinzel', serif;
}

:root[data-theme="sakurabloom"] {
    --accent: #ff88b4; --accent2: #cc44aa; --accent3: #ffccdd;
    --bg: rgba(15,8,12,0.92); --card: rgba(30,15,25,0.95);
    --card-border: rgba(255,136,180,0.25); --text: #ffe0f0; --text2: #aa6688;
    --rank1: #ffccdd; --rank2: #ff88b4; --rank3: #cc44aa;
    --hp-bar: linear-gradient(90deg, #ff88b4, #cc44aa);
    --hp-bar-low: linear-gradient(90deg, #884466, #442233);
    --gradient: linear-gradient(135deg, #ff88b4, #cc44aa, #ffccdd);
    --glow: 0 0 20px rgba(255,136,180,0.3);
    --title-font: 'Rajdhani', sans-serif;
}

:root[data-theme="voidshadow"] {
    --accent: #aa44ff; --accent2: #4400aa; --accent3: #dd88ff;
    --bg: rgba(5,2,12,0.92); --card: rgba(15,8,30,0.95);
    --card-border: rgba(170,68,255,0.25); --text: #e0d0ff; --text2: #7755aa;
    --rank1: #dd88ff; --rank2: #aa44ff; --rank3: #6622cc;
    --hp-bar: linear-gradient(90deg, #aa44ff, #dd88ff);
    --hp-bar-low: linear-gradient(90deg, #ff2266, #880033);
    --gradient: linear-gradient(135deg, #aa44ff, #4400aa, #dd88ff);
    --glow: 0 0 20px rgba(170,68,255,0.4);
    --title-font: 'Orbitron', sans-serif;
}

/* === Base reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: transparent;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: var(--text);
    overflow: hidden;
}

/* === Header === */
.header { text-align: center; margin-bottom: 18px; position: relative; }
.header h1 {
    font-family: var(--title-font);
    font-size: 28px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 5px;
    background: var(--gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px var(--accent));
}
.header-line {
    height: 3px; background: var(--gradient);
    border-radius: 2px; margin-top: 8px; opacity: 0.7;
}
.header-sub {
    font-size: 14px; color: var(--text2);
    letter-spacing: 4px; text-transform: uppercase; margin-top: 6px;
}

/* === Animations === */
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.8); } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* === Empty state === */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text2); font-size: 18px; }
.empty-icon { font-size: 44px; margin-bottom: 10px; opacity: 0.4; }

/* === Connection status === */
.connection-status {
    position: fixed; top: 8px; right: 8px;
    font-size: 10px; padding: 4px 10px;
    border-radius: 12px; z-index: 999;
    font-family: var(--title-font);
    letter-spacing: 1px;
}
.connection-status.connected {
    background: rgba(0,255,136,0.15); color: #00ff88;
    border: 1px solid rgba(0,255,136,0.3);
}
.connection-status.disconnected {
    background: rgba(255,50,120,0.15); color: #ff3278;
    border: 1px solid rgba(255,50,120,0.3);
}
.connection-status.connecting {
    background: rgba(255,200,0,0.15); color: #ffc800;
    border: 1px solid rgba(255,200,0,0.3);
}