/* =========================================
   1. Theme Variables
   ========================================= */
:root {
    --bg-color: #120a1a; 
    --text-color: #f0e6ff;
    --text-muted: #c2b5d9;
    --accent-color: #ffcc00; 
    --accent-hover: #ff5500;
    
    --panel-bg: rgba(20, 10, 45, 0.75);
    --panel-hover: rgba(40, 15, 75, 0.95);
    --mid-panel-bg: rgba(30, 20, 80, 0.7);
    --mid-panel-hover: rgba(50, 30, 120, 0.95);
    
    --header-footer-bg: rgba(11, 5, 20, 0.9);
    --border-color: rgba(255, 204, 0, 0.2);
    --bg-filter: opacity(0.15) brightness(1.2); 
    --form-bg: #1a0b2e;
    --spawn-curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="light"] {
    --bg-color: #f4f7f0; 
    --text-color: #000055;
    --text-muted: #333366;
    --accent-color: #5e17eb;
    --accent-hover: #0000a0;
    
    --panel-bg: rgba(255, 255, 255, 0.65);
    --panel-hover: rgba(255, 255, 255, 0.95);
    --mid-panel-bg: rgba(210, 225, 200, 0.7);
    --mid-panel-hover: rgba(230, 245, 220, 0.95);
    
    --header-footer-bg: rgba(224, 235, 213, 0.95);
    --border-color: rgba(94, 23, 235, 0.2);
    --bg-filter: opacity(0.4); 
    --form-bg: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

html { scroll-behavior: smooth; }

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    transition: background 0.5s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Background Slider */
.bg-slider {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;
    background-image: url('Iradel manta.png');
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    filter: var(--bg-filter); 
    transition: filter 0.5s ease;
}

/* 2. Header & UI */
header {
    position: fixed; top: 0; width: 100%; height: 90px;
    background: var(--header-footer-bg); backdrop-filter: blur(10px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 1000; border-bottom: 1px solid var(--border-color);
}

.logo-container { cursor: pointer; display: flex; align-items: center; }
.logo-container img { height: 75px; width: auto; transition: opacity 0.3s; }

/* Global Dark/Light mode icon toggles */
[data-theme="dark"] .logo-light, [data-theme="dark"] .icon-light { display: none !important; }
[data-theme="dark"] .logo-dark, [data-theme="dark"] .icon-dark { display: block !important; }
[data-theme="light"] .logo-dark, [data-theme="light"] .icon-dark { display: none !important; }
[data-theme="light"] .logo-light, [data-theme="light"] .icon-light { display: block !important; }

.header-right { display: flex; align-items: center; gap: 10px; }

.social-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-right: 10px; }
.social-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; font-size: 1rem;
    transition: transform 0.3s, filter 0.3s;
}
.social-icon:hover { transform: scale(1.2) rotate(10deg); filter: brightness(1.2); }
.sc-linktree { background: #43E660; }
.sc-yt { background: #FF0000; }
.sc-twitch { background: #9146FF; }
.sc-discord { background: #5865F2; }
.sc-tiktok { background: #000000; }
.sc-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.sc-fb { background: #1877F2; }

/* LIVE INDICATOR BUTTON */
.live-indicator {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 8px 15px; border-radius: 20px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; display: flex; align-items: center; gap: 8px; cursor: default;
    text-decoration: none; box-shadow: none !important; transition: 0.3s;
    opacity: 0.6; animation: none !important;
}
.live-indicator i { font-size: 0.9rem; transition: 0.3s; color: rgba(255, 255, 255, 0.3) !important; animation: none !important; }
.live-indicator:hover { background: rgba(255, 255, 255, 0.1) !important; opacity: 1; }

.live-indicator.is-live {
    background: rgba(255, 0, 64, 0.1) !important; color: #ff3366 !important; border: 1px solid #ff3366 !important;
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.4), inset 0 0 5px rgba(255, 0, 64, 0.2) !important;
    animation: pulseLive 2s infinite !important; opacity: 1; cursor: pointer;
}
.live-indicator.is-live i { animation: blinkLive 1s infinite !important; color: #ff3366 !important; }
.live-indicator.is-live:hover { background: #ff3366 !important; color: #fff !important; box-shadow: 0 0 20px rgba(255, 0, 64, 0.8) !important; }

@keyframes pulseLive { 0% { box-shadow: 0 0 10px rgba(255,0,64,0.4); } 50% { box-shadow: 0 0 20px rgba(255,0,64,0.8); } 100% { box-shadow: 0 0 10px rgba(255,0,64,0.4); } }
@keyframes blinkLive { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

[data-theme="light"] .live-indicator { background: rgba(0, 0, 0, 0.05) !important; box-shadow: none !important; color: rgba(0, 0, 0, 0.3) !important; border-color: rgba(0, 0, 0, 0.2) !important; }
[data-theme="light"] .live-indicator.is-live { background: #fff !important; box-shadow: 0 2px 10px rgba(255,0,64,0.2) !important; color: #ff3366 !important; border-color: #ff3366 !important; }
[data-theme="light"] .live-indicator.is-live:hover { background: #ff3366 !important; color: white !important; }

/* Buttons */
.btn-lang {
    background: var(--accent-color); color: #000;
    padding: 10px 15px; border-radius: 25px; border: none;
    font-weight: bold; cursor: pointer; text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3); transition: all 0.3s;
}
.btn-lang:hover { background: var(--accent-hover); color: white; transform: translateY(-2px); }

.btn-mystic-submission {
    background: linear-gradient(135deg, #2a0a52 0%, #0b0514 100%); color: var(--accent-color); padding: 10px 20px;
    border-radius: 30px 5px 30px 5px; border: 2px solid var(--accent-color); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; box-shadow: 0 0 8px rgba(255, 204, 0, 0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-mystic-submission::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.2), transparent); transition: 0.5s; }
.btn-mystic-submission:hover::before { left: 100%; }
.btn-mystic-submission:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 20px rgba(255, 204, 0, 0.5); background: linear-gradient(135deg, #4b0082 0%, #1a0b2e 100%); color: #fff; border-color: #fff; }
[data-theme="light"] .btn-mystic-submission { background: #ffffff; color: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 2px 8px rgba(94, 23, 235, 0.15); }
[data-theme="light"] .btn-mystic-submission:hover { background: var(--accent-color); color: #ffffff; }

.btn-terms {
    background: rgba(255,255,255,0.1); color: var(--text-color);
    padding: 10px 20px; border-radius: 30px 5px 30px 5px; border: 1px solid var(--border-color);
    font-weight: bold; cursor: pointer; transition: 0.3s; text-transform: uppercase;
}
.btn-terms:hover { background: rgba(255,255,255,0.2); border-color: var(--accent-color); color: var(--accent-color); }
[data-theme="light"] .btn-terms { background: rgba(0,0,0,0.05); color: #333; border-color: #ccc; }
[data-theme="light"] .btn-terms:hover { background: rgba(0,0,0,0.1); color: var(--accent-color); border-color: var(--accent-color); }

.btn-join-guild {
    background: linear-gradient(135deg, #0a2a1a 0%, #05140d 100%); color: #43E660; padding: 10px 20px;
    border-radius: 30px 5px 30px 5px; border: 2px solid #43E660; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; box-shadow: 0 0 8px rgba(67, 230, 96, 0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-join-guild:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 20px rgba(67, 230, 96, 0.5); background: linear-gradient(135deg, #155d27 0%, #0a2a1a 100%); color: #fff; border-color: #fff; }
[data-theme="light"] .btn-join-guild { background: #ffffff; color: #2ea645; border-color: rgba(46, 166, 69, 0.5); box-shadow: none; }
[data-theme="light"] .btn-join-guild:hover { background: rgba(46, 166, 69, 0.1); color: #155d27; border-color: #2ea645; }

.fancy-slogan { font-style: italic; background: linear-gradient(90deg, var(--text-color), var(--accent-color), var(--text-color)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: textShine 3s linear infinite; text-shadow: 0 0 10px rgba(255, 204, 0, 0.3); display: block; text-align: center; margin-bottom: 25px; margin-top: 10px; }
@keyframes textShine { to { background-position: 200% center; } }

#themeToggle { font-size: 1.8rem; padding: 12px; color: var(--accent-color); background: none; border: 2px solid var(--border-color); border-radius: 12px; cursor: pointer; transition: 0.3s; }
#themeToggle:hover { transform: scale(1.1); border-color: var(--accent-color); }

/* 3. Page Containers */
main { padding-top: 100px; min-height: 100vh; }


/* =========================================
   4. HOME PANELS (THE PERFECT SYMMETRICAL LAYOUT)
   ========================================= */
.panel-container { 
    display: flex; justify-content: center; align-items: center; 
    min-height: 80vh; gap: 10px; padding: 100px 5% 50px 5%; position: relative; z-index: 1; 
}
.panel-container::before { 
    content: ''; position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1200px; height: 70%; 
    transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, var(--accent-color), transparent 60%); 
    opacity: 0.15; filter: blur(80px); z-index: -1; animation: mysticalGlow 12s infinite alternate ease-in-out; pointer-events: none; 
}
@keyframes mysticalGlow { 0% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0.1; } 50% { opacity: 0.25; } 100% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); opacity: 0.15; } }

.panel-wrapper { flex: 1; height: 65vh; max-width: 250px; opacity: 0; position: relative; }
.wrapper-center { height: 75vh; max-width: 320px; animation: dropDown 1s ease forwards; z-index: 10; }

.panel { 
    width: 100%; height: 100%; position: relative;
    background-color: var(--panel-bg); 
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; 
    padding: 60px 20px 20px 20px; text-align: center; cursor: pointer; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s, box-shadow 0.4s;
    
    /* Hardware Acceleration to stop rendering bugs and jagged edges */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); 
}

/* Dark Tint over the Background Image */
.panel-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(18, 10, 26, 0.85); 
    transition: background 0.4s ease; z-index: 1;
}

/* Panel Content */
.panel-content {
    position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center;
}
.panel-icon-img { height: 100px; width: auto; margin-bottom: 20px; transition: all 0.4s var(--spawn-curve), filter 0.4s; filter: drop-shadow(0 0 5px rgba(255,204,0,0.3));}
.wrapper-center .panel-icon-img { height: 140px; }
.panel h2 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin: 0; transition: color 0.3s; }
.panel p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-top: 15px; padding: 0 15px; transition: color 0.3s; }

/* The Epic Hover Effect */
.panel:hover { 
    transform: scale(1.1) translateY(-10px); 
    z-index: 50; 
    border-color: var(--accent-color); 
    box-shadow: 0 15px 40px rgba(255, 204, 0, 0.3); 
}
.panel:hover .panel-overlay { 
    background: rgba(18, 10, 26, 0.3); /* Fades to reveal the beautiful background image */
} 
.panel:hover .panel-icon-img { 
    transform: scale(1.15) translateY(-5px); 
    filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.8)); 
}
.panel:hover h2 { color: var(--accent-color); text-shadow: 0 0 15px rgba(255,204,0,0.6); }
.panel:hover p { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.8); }

/* MATHEMATICALLY PERFECT SYMMETRICAL CUTOUTS */
#panel-events { 
    clip-path: polygon(0 15%, 100% 8%, 100% 92%, 0 85%); 
    -webkit-clip-path: polygon(0 15%, 100% 8%, 100% 92%, 0 85%);
}
#panel-crafting { 
    clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0 92%); 
    -webkit-clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0 92%);
}
#panel-official { 
    clip-path: polygon(50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%, 0% 8%); 
    -webkit-clip-path: polygon(50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%, 0% 8%);
}
#panel-entertainment { 
    clip-path: polygon(0 0%, 100% 8%, 100% 92%, 0 100%); 
    -webkit-clip-path: polygon(0 0%, 100% 8%, 100% 92%, 0 100%);
}
#panel-crew { 
    clip-path: polygon(0 8%, 100% 15%, 100% 85%, 0 92%); 
    -webkit-clip-path: polygon(0 8%, 100% 15%, 100% 85%, 0 92%);
}

/* Bulletproof Entrance Animations */
.wrapper-left-1 { animation: slideInLeft1 0.8s ease-out 0.4s forwards; }
.wrapper-left-2 { animation: slideInLeft2 0.8s ease-out 0.6s forwards; }
.wrapper-right-1 { animation: slideInRight1 0.8s ease-out 0.4s forwards; }
.wrapper-right-2 { animation: slideInRight2 0.8s ease-out 0.6s forwards; }

@keyframes dropDown { 
    0% { transform: translateY(-120%); opacity: 0; } 
    100% { transform: translateY(0); opacity: 1; } 
}
@keyframes slideInLeft1 { 
    0% { transform: translateX(110%) scale(0.9); opacity: 0; } 
    100% { transform: translateX(0) scale(1); opacity: 1; } 
}
@keyframes slideInLeft2 { 
    0% { transform: translateX(220%) scale(0.9); opacity: 0; } 
    100% { transform: translateX(0) scale(1); opacity: 1; } 
}
@keyframes slideInRight1 { 
    0% { transform: translateX(-110%) scale(0.9); opacity: 0; } 
    100% { transform: translateX(0) scale(1); opacity: 1; } 
}
@keyframes slideInRight2 { 
    0% { transform: translateX(-220%) scale(0.9); opacity: 0; } 
    100% { transform: translateX(0) scale(1); opacity: 1; } 
}


/* REVIEWS SECTION (HOME PAGE) */
.reviews-section { max-width: 1400px; margin: 0 auto 80px auto; padding: 40px 20px; text-align: center; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; margin-top: 40px; }
.review-card { background: var(--panel-bg); border: 1px solid var(--border-color); padding: 30px; border-radius: 15px; text-align: left; backdrop-filter: blur(5px); transition: 0.3s; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.review-card:hover { transform: translateY(-5px); border-color: var(--accent-color); box-shadow: 0 10px 25px rgba(255,204,0,0.2); }
.review-stars { color: var(--accent-color); margin-bottom: 15px; font-size: 1.2rem; }
.review-text { font-style: italic; color: var(--text-color); margin-bottom: 20px; font-size: 1.05rem; line-height: 1.6; }
.review-author { font-weight: bold; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; }
[data-theme="light"] .review-card { background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }


/* =========================================
   5. Fan Page Specifics 
   ========================================= */
.fan-slider-nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
.slider-btn { padding: 15px 40px; font-size: 1.2rem; font-weight: bold; border-radius: 30px; border: 2px solid var(--accent-color); background: transparent; color: var(--text-color); cursor: pointer; transition: 0.3s; }
.slider-btn.active { background: var(--accent-color); color: #000; box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4); }
[data-theme="light"] .slider-btn.active { color: #fff; }

.fan-sub-section { display: none; }
.fan-sub-section.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* GRAND AWARDS SECTION */
.winner-spotlight { background: linear-gradient(135deg, rgba(30, 20, 0, 0.95), rgba(10, 5, 0, 0.95)); border: 2px solid var(--accent-color); border-radius: 20px; padding: 40px; margin-bottom: 50px; display: flex; align-items: center; justify-content: space-between; gap: 40px; box-shadow: 0 0 30px rgba(255, 204, 0, 0.2), inset 0 0 20px rgba(255, 204, 0, 0.1); position: relative; overflow: hidden; }
[data-theme="light"] .winner-spotlight { background: linear-gradient(135deg, #fffdf5, #fff5d0); box-shadow: 0 5px 30px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(212, 175, 55, 0.1); }
.winner-spotlight::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 60%); animation: spinGlow 20s linear infinite; pointer-events: none; z-index: 0; }
.winner-info { flex: 1; text-align: left; z-index: 1; }
.winner-info h2 { font-size: 2.8rem; color: var(--accent-color); margin-bottom: 15px; text-shadow: 0 0 15px rgba(255, 204, 0, 0.4); }
[data-theme="light"] .winner-info h2 { color: #d4af37; text-shadow: none; }
.winner-info h3 { font-size: 2.2rem; color: var(--text-color); margin-bottom: 10px; }
[data-theme="light"] .winner-info h3 { color: #000; }
.winner-info p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 25px; line-height: 1.6; }
[data-theme="light"] .winner-info p { color: #333; }

.winner-card { flex: 0 0 400px; height: 450px; border: 4px solid var(--accent-color); transform: rotate(2deg); box-shadow: 0 15px 35px rgba(0,0,0,0.5); border-radius: 15px; overflow: hidden; position: relative; z-index: 1; transition: transform 0.4s; }
.winner-card img { width: 100%; height: 100%; object-fit: cover; }
.winner-card:hover { transform: scale(1.02) rotate(0deg); cursor: pointer; }

/* FAN GRID SPACING (FIXED - SMALLER TILES) */
.fan-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, 240px); 
    justify-content: start; 
    gap: 20px; 
    margin-bottom: 40px; 
}

.fan-card { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; position: relative; height: 200px; cursor: pointer; transition: 0.4s; }
.fan-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.fan-card-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: white; transform: translateY(80px); transition: 0.4s; }
.fan-card-info h4 { font-size: 1rem; margin-bottom: 3px; }
.fan-card-info p { font-size: 0.8rem; }
.fan-card:hover { border-color: var(--accent-color); transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 10; }
.fan-card:hover img { filter: brightness(0.6); }
.fan-card:hover .fan-card-info { transform: translateY(0); }
.badge-contestant { position: absolute; top: 10px; left: 10px; background: var(--accent-color); color: black; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; z-index: 5; }

.contest-header { text-align: center; margin-bottom: 40px; }
.contest-btn-group { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }

/* 6. Forms & Modals */
.content-section { max-width: 1000px; margin: 40px auto; padding: 40px; background: var(--panel-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 15px; }
form { display: grid; gap: 15px; }
input, select, textarea { padding: 12px; border-radius: 5px; border: 1px solid var(--border-color); background: var(--form-bg); color: var(--text-color); font-size: 1rem; width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; margin: 5px 0; }
.check-row input { width: auto; }
.check-row a { color: var(--accent-color); text-decoration: underline; cursor: pointer; }
.btn-submit { background: var(--accent-color); border: none; padding: 12px; font-weight: bold; cursor: pointer; border-radius: 5px; transition: 0.3s; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }

.modal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; overflow-y: auto; padding: 20px; }
.modal-content { background: var(--bg-color); padding: 30px; border-radius: 15px; width: 100%; max-width: 650px; position: relative; border: 1px solid var(--accent-color); margin-top: auto; margin-bottom: auto; }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; }
#termsModal .modal-content { max-width: 900px; max-height: 85vh; overflow-y: auto; }

/* REVISED FOOTER */
footer { background: var(--header-footer-bg); padding: 15px 20px; text-align: center; border-top: 1px solid var(--border-color); margin-top: 50px; }
.footer-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.5px; }
.footer-info span { display: flex; align-items: center; gap: 8px; }
.footer-info i { color: var(--accent-color); font-size: 1.1rem; }
[data-theme="light"] .footer-info { color: #555566; }
[data-theme="light"] .footer-info i { color: var(--accent-color); }


/* =========================================
   7. Sidebar Dashboard Layout
   ========================================= */
.page-with-sidebar { display: flex; padding-top: 90px; min-height: 100vh; align-items: stretch; }

.global-sidebar { 
    flex: 0 0 320px; position: sticky; top: 90px; height: calc(100vh - 90px); 
    background: rgba(11, 5, 20, 0.95); border-right: 1px solid var(--border-color); 
    display: flex; flex-direction: column; overflow-y: auto; z-index: 100; backdrop-filter: blur(15px); 
}
.acc-panel { 
    flex-shrink: 0; background: linear-gradient(135deg, rgba(25, 10, 40, 0.4), rgba(10, 5, 20, 0.6)); 
    border-bottom: 1px solid var(--border-color); border-left: 4px solid transparent; 
    overflow: hidden; transition: all 0.4s ease; max-height: 70px; cursor: pointer; 
}
.sidebar-logo { height: 26px; width: auto; object-fit: contain; }
.acc-header { padding: 22px 20px; font-size: 1.3rem; font-weight: bold; color: var(--text-color); display: flex; gap: 15px; align-items: center; transition: 0.3s; }
.acc-panel:hover { max-height: 800px; background: linear-gradient(135deg, rgba(40, 15, 75, 0.8), rgba(15, 5, 30, 0.9)); border-left-color: var(--accent-color); box-shadow: inset 5px 0 15px rgba(0,0,0,0.5); }
.acc-panel:hover .acc-header { color: var(--accent-color); }

.acc-panel.unfolded-panel { max-height: 800px; border-left-color: var(--accent-color); background: linear-gradient(135deg, rgba(255, 204, 0, 0.05), rgba(20, 10, 45, 0.6)); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.acc-panel.unfolded-panel .acc-header { color: var(--accent-color); }
.acc-panel.unfolded-panel:hover { background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(30, 15, 60, 0.8)); }

.acc-content { padding: 0 20px 10px 20px; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 0.3s ease 0.1s; }
.acc-panel:hover .acc-content, .acc-panel.unfolded-panel .acc-content { opacity: 1; }
.acc-content a, .acc-content button, .acc-content p { color: var(--text-color); text-decoration: none; font-size: 0.85rem; transition: 0.3s; display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; padding: 2px 0; width: 100%; line-height: 1.2; }
.index-arrow { color: var(--text-muted); transition: 0.3s; font-size: 0.75rem; }
.acc-content a:hover, .acc-content button:hover { color: var(--accent-hover); }
.acc-content a:hover .index-arrow, .acc-content button:hover .index-arrow { color: var(--accent-hover); transform: translateX(6px); }

.acc-sub-heading { font-size: 0.75rem !important; color: var(--accent-color) !important; padding-left: 5px !important; font-weight: bold; text-transform: uppercase; margin-top: 8px; letter-spacing: 1px; pointer-events: none; }

[data-theme="light"] .global-sidebar { background: var(--header-footer-bg); }
[data-theme="light"] .acc-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 245, 0.8)); }
[data-theme="light"] .acc-panel:hover { background: #ffffff; box-shadow: inset 4px 0 0 var(--accent-color), 0 5px 15px rgba(0,0,0,0.05); }
[data-theme="light"] .acc-panel.unfolded-panel { background: #ffffff; box-shadow: inset 4px 0 0 var(--accent-color); }
[data-theme="light"] .acc-panel.unfolded-panel:hover { background: #fafafa; box-shadow: inset 4px 0 0 var(--accent-color), 0 5px 15px rgba(0,0,0,0.05); }

/* -------------------------------------------------------------
   8. Events & Main Content Specifics
   ------------------------------------------------------------- */
.main-content { flex: 1; padding: 40px 30px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px; }

.event-card { background: var(--panel-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 15px; padding: 30px; transition: transform 0.3s, box-shadow 0.3s; }
.animecon-flashy { background: linear-gradient(135deg, rgba(30, 20, 0, 0.95), rgba(10, 5, 0, 0.95)); border: 1px solid var(--accent-color); box-shadow: 0 0 10px rgba(255, 204, 0, 0.2), inset 0 0 10px rgba(255, 204, 0, 0.1); position: relative; overflow: hidden; }
[data-theme="light"] .animecon-flashy { background: linear-gradient(135deg, #ffffff, #f4f7f6); box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15); border: 2px solid #d4af37; }
.animecon-flashy::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 204, 0, 0.05) 0%, transparent 60%); animation: spinGlow 20s linear infinite; pointer-events: none; z-index: 0; }
[data-theme="light"] .animecon-flashy::before { background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%); }
.animecon-flashy * { position: relative; z-index: 1; }
.event-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
.event-header h3 { font-size: 2.2rem; color: var(--text-color); margin: 0; text-shadow: 0 0 10px rgba(255, 204, 0, 0.3); }
.neon-text { color: var(--accent-color) !important; font-size: 2.8rem !important; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 5px rgba(255, 204, 0, 0.8), 0 0 10px rgba(255, 204, 0, 0.5) !important; }
[data-theme="light"] .animecon-flashy .neon-text { color: #003366 !important; text-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important; }
.countdown-timer { display: flex; gap: 10px; text-align: center; }
.countdown-timer div { background: var(--form-bg); padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border-color); min-width: 75px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.countdown-timer span { display: block; font-size: 2rem; font-weight: bold; color: var(--accent-color); }
.countdown-timer small { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
.animecon-flashy .countdown-timer span { color: var(--accent-color); text-shadow: 0 0 10px rgba(255, 204, 0, 0.5); }
.animecon-flashy .countdown-timer div { border-color: var(--accent-color); }
[data-theme="light"] .animecon-flashy .countdown-timer span { color: #003366; text-shadow: none; }
[data-theme="light"] .animecon-flashy .countdown-timer div { border-color: #d4af37; background: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.event-details p { font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; gap: 15px; }
.event-details i { color: var(--accent-color); width: 25px; text-align: center; font-size: 1.4rem; }
.animecon-flashy .event-details i { color: var(--accent-color); text-shadow: 0 0 10px rgba(255, 204, 0, 0.5); }
[data-theme="light"] .animecon-flashy .event-details i { color: #d4af37; text-shadow: none; }
.future-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.small-card { padding: 25px; }
.small-card h4 { font-size: 1.4rem; margin-bottom: 15px; color: var(--text-color); }
.small-card p { color: var(--text-muted); display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.small-card p i { color: var(--accent-color); }
.small-card:hover { border-color: var(--accent-color); transform: translateY(-3px); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); transition: transform 0.3s, border-color 0.3s; }
.gallery-grid img:hover { transform: scale(1.05); border-color: var(--accent-color); cursor: pointer; }
@keyframes spinGlow { 100% { transform: rotate(360deg); } }

/* =========================================
   9. Crafting Page Specifics 
   ========================================= */
.page-header-flex { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; flex-wrap: wrap; gap: 20px; }
.page-header-flex .section-title { margin: 0; border: none; padding: 0; }

.workbench-block { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 15px; padding: 30px; margin-bottom: 30px; display: flex; gap: 30px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
[data-theme="light"] .workbench-block { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.wb-block-vid { flex: 0 0 300px; height: 180px; border-radius: 10px; overflow: hidden; position: relative; border: 2px solid var(--accent-color); cursor: pointer;}
.wb-block-vid img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.3s; }
.wb-block-vid i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--accent-color); font-size: 3rem; text-shadow: 0 0 10px rgba(0,0,0,0.5); transition: 0.3s; }
.wb-block-vid:hover img { opacity: 1; }
.wb-block-vid:hover i { transform: translate(-50%, -50%) scale(1.1); }
.wb-block-text { flex: 1; }
.wb-block-text h3 { color: var(--accent-color); font-size: 1.8rem; margin-bottom: 10px; }
.wb-block-text h4 { color: var(--text-color); font-size: 1.4rem; margin-bottom: 15px; }
.wb-block-text p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; }

.crafting-columns-container { display: flex; gap: 30px; align-items: flex-start; }
.crafting-column-left { flex: 2.5; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.crafting-column-right { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }

/* FIXED WIDTH CRAFT GRID */
.craft-grid { display: grid; grid-template-columns: repeat(auto-fill, 260px); justify-content: start; gap: 20px; }
.craft-card { width: 100%; background: rgba(20, 10, 45, 0.5); backdrop-filter: blur(5px); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; cursor: pointer; transition: 0.4s var(--spawn-curve); overflow: hidden; position: relative; scroll-margin-top: 100px; }
[data-theme="light"] .craft-card { background: rgba(255, 255, 255, 0.4); }
.craft-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 100% 100%, rgba(255, 204, 0, 0.1), transparent); opacity: 0; transition: 0.4s; z-index: 0; }
.craft-card:hover::before { opacity: 1; }
.craft-thumb { width: 100%; height: 180px; object-fit: cover; transition: 0.3s; z-index: 1; background: var(--form-bg); }
.craft-info { padding: 15px; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.craft-info h4 { font-size: 1.15rem; color: var(--accent-color); margin: 0; }
.craft-info p { color: var(--text-color); font-size: 0.95rem; margin: 0; line-height: 1.4; }
.craft-card:hover { border-color: var(--accent-color); transform: translateY(-8px); background: var(--panel-hover); box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
.craft-card:hover .craft-thumb { transform: scale(1.05); }

/* SLIM RIGHT COLUMN */
.commission-hint { background: linear-gradient(135deg, rgba(20, 10, 45, 0.8), rgba(11, 5, 20, 0.9)); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-color); padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
[data-theme="light"] .commission-hint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 245, 0.9)); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.commission-hint h4 { color: var(--accent-color); font-size: 1.2rem; margin-bottom: 10px; font-style: italic; }
.commission-hint p { color: var(--text-color); font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; }

.crew-hint { background: linear-gradient(135deg, rgba(20, 45, 20, 0.8), rgba(5, 20, 10, 0.9)); border: 1px solid var(--border-color); border-left: 4px solid #43E660; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
[data-theme="light"] .crew-hint { background: linear-gradient(135deg, rgba(240, 255, 240, 0.9), rgba(245, 250, 245, 0.9)); }
.crew-hint h4 { color: #43E660; font-size: 1.2rem; margin-bottom: 10px; font-style: italic; }
.crew-hint p { color: var(--text-color); font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; }

.crafting-modal-content { max-width: 900px; }
.crafting-modal-body { display: flex; gap: 30px; margin-top: 20px; align-items: flex-start; }
.craft-modal-media-container { display: flex; flex-direction: column; gap: 15px; width: 300px; flex-shrink: 0; }
.craft-modal-media-item { width: 100%; border-radius: 12px; object-fit: cover; border: 2px solid var(--accent-color); }
.craft-modal-text { flex: 1; }
.craft-modal-text h3 { color: var(--accent-color); font-size: 2rem; margin-bottom: 15px; }
.craft-modal-text p { color: var(--text-color); font-size: 1.2rem; line-height: 1.8; margin-bottom: 20px; }


/* =========================================
   10. Official Store Layout
   ========================================= */
.store-hero {
    background: url('https://images.unsplash.com/photo-1612487528505-d2338264c821?q=80&w=1600') center/cover;
    position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 50px;
    border: 2px solid var(--accent-color); box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}
.store-hero-overlay {
    background: linear-gradient(90deg, rgba(10,5,20,0.95) 0%, rgba(30,10,40,0.8) 100%);
    padding: 60px 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
[data-theme="light"] .store-hero-overlay {
    background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(240,240,250,0.8) 100%);
}

.hero-badge {
    background: #5e17eb; color: white; padding: 6px 15px; border-radius: 30px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(94,23,235,0.5);
}

.store-hero h2 { font-size: 3rem; color: var(--accent-color); margin-bottom: 15px; text-shadow: 0 0 20px rgba(255, 204, 0, 0.4); line-height: 1.1; max-width: 800px; font-weight: 900;}
[data-theme="light"] .store-hero h2 { color: #d4af37; text-shadow: none; }
.store-hero p { font-size: 1.2rem; color: var(--text-color); max-width: 700px; margin-bottom: 25px; line-height: 1.6; }
[data-theme="light"] .store-hero p { color: #333; }

.hero-perks { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-perks span { 
    background: rgba(255,255,255,0.1); padding: 8px 15px; border-radius: 8px; 
    color: var(--text-color); font-weight: bold; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.2);
}
[data-theme="light"] .hero-perks span { background: #fff; color: #333; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.hero-perks i { color: var(--accent-color); }

.sub-category-title { font-size: 1.6rem; margin: 30px 0 15px 0; padding-bottom: 5px; scroll-margin-top: 100px; }

.homey-title { color: #d95d39; border-bottom: 2px dashed rgba(217, 93, 57, 0.5); }
.cool-title { color: #00f0ff; border-bottom: 2px solid rgba(0, 240, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; scroll-margin-top: 100px; }
[data-theme="light"] .cool-title { color: #0055ff; border-bottom-color: rgba(0, 85, 255, 0.5); }

/* STORE GRID: FIXED WIDTH, NO STRETCHING */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, 280px); justify-content: start; gap: 30px; }
.product-card { width: 100%; overflow: hidden; transition: 0.4s var(--spawn-curve); display: flex; flex-direction: column; position: relative; }
.product-badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; font-weight: bold; z-index: 2; font-size: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* STORE IMAGE FIX */
.product-img-wrapper { position: relative; width: 100%; height: 250px; overflow: hidden; background: var(--form-bg); }
.product-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product-card:hover .product-img-wrapper img { transform: scale(1.08); }

.product-info { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.product-title { font-size: 1.2rem; color: var(--text-color); margin-bottom: 8px; line-height: 1.3;}
.product-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; line-height: 1.4; flex: 1; }

/* Handmade Vibe */
.homey-vibe { border-radius: 20px; border: 2px dashed rgba(217, 93, 57, 0.6); background: linear-gradient(145deg, rgba(45, 20, 15, 0.8), rgba(25, 10, 5, 0.9)); }
[data-theme="light"] .homey-vibe { background: linear-gradient(145deg, rgba(255, 245, 235, 0.9), rgba(255, 250, 245, 0.95)); border: 2px dashed rgba(217, 93, 57, 0.5); }
.homey-vibe .product-img-wrapper { border-radius: 20px 20px 0 0; }
.homey-vibe .btn-handmade { background: #d95d39; color: #fff; border: none; border-radius: 8px; padding: 10px 15px; font-weight: bold; font-size: 0.95rem; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-shadow: 0 4px 10px rgba(217, 93, 57, 0.3); }
.homey-vibe .btn-handmade:hover { background: #b54b2d; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(217, 93, 57, 0.5); }
.homey-vibe .product-badge { background: #d95d39; color: white; border-radius: 15px; }

/* Merch Vibe */
.cool-vibe { border-radius: 4px; border: 1px solid #00f0ff; background: linear-gradient(135deg, rgba(5, 10, 25, 0.9), rgba(5, 5, 15, 0.95)); box-shadow: 0 0 15px rgba(0, 240, 255, 0.1); }
[data-theme="light"] .cool-vibe { background: linear-gradient(135deg, #f0f8ff, #ffffff); border: 1px solid #0055ff; }
.cool-vibe .product-img-wrapper { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); }
.cool-vibe .btn-buy { background: transparent; color: #00f0ff; border: 1px solid #00f0ff; border-radius: 0; text-transform: uppercase; letter-spacing: 1px; clip-path: polygon(0 0, 100% 0, 100% 75%, 90% 100%, 0 100%); font-size: 0.9rem; padding: 8px 15px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.cool-vibe .btn-buy:hover { background: rgba(0, 240, 255, 0.2); box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); }
[data-theme="light"] .cool-vibe .btn-buy { color: #0055ff; border-color: #0055ff; }
[data-theme="light"] .cool-vibe .btn-buy:hover { background: rgba(0, 85, 255, 0.1); box-shadow: 0 0 15px rgba(0, 85, 255, 0.3); }
.cool-vibe .product-badge { background: #00f0ff; color: #000; border-radius: 0; top: 10px; right: 10px; }
[data-theme="light"] .cool-vibe .product-badge { background: #0055ff; color: white; }

/* Uniform Product Footer */
.product-footer { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
[data-theme="light"] .product-footer { border-top-color: rgba(0,0,0,0.05); }
.product-price { font-size: 1.4rem; font-weight: 800; color: var(--text-color); margin: 0; }
[data-theme="light"] .product-price { color: #333; }
.product-card:hover { transform: translateY(-8px); }

/* SLEEK EPIC ORDER BUTTON FOR MODAL */
.btn-epic-order { background: transparent; color: var(--accent-color); font-weight: bold; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border: 1px solid var(--accent-color); border-radius: 5px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn-epic-order:hover { background: var(--accent-color); color: #000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3); }

.store-item-readonly { background: rgba(255, 204, 0, 0.05) !important; color: var(--accent-color) !important; font-weight: bold; border: 1px solid var(--accent-color) !important; text-align: center; font-size: 1.1rem; }
[data-theme="light"] .store-item-readonly { background: rgba(212, 175, 55, 0.05) !important; color: #d4af37 !important; border-color: #d4af37 !important; }

/* =========================================
   11. Crew Page Layout (COMPACT & MAGICAL)
   ========================================= */
.about-guild { background: var(--panel-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 15px; padding: 30px; margin-bottom: 40px; text-align: center; line-height: 1.6; font-size: 1.05rem; color: var(--text-color); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.about-guild h2 { color: var(--accent-color); font-size: 2rem; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px;}

.crew-category-title { color: var(--accent-color); font-size: 1.8rem; margin: 30px 0 15px 0; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
[data-theme="light"] .crew-category-title { color: #d4af37; }

/* FIXED WIDTH CREW GRID */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, 260px); justify-content: start; gap: 25px; margin-bottom: 50px; }

.crew-card { width: 100%; background: linear-gradient(145deg, rgba(20, 10, 45, 0.8), rgba(11, 5, 20, 0.9)); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-align: center; cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
[data-theme="light"] .crew-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 245, 0.9)); border-color: rgba(212, 175, 55, 0.5); }

.crew-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px transparent; transition: 0.5s ease; pointer-events: none; z-index: 10; }
.crew-card:hover { transform: translateY(-10px) scale(1.03); border-color: var(--accent-color); box-shadow: 0 15px 30px rgba(255, 204, 0, 0.3), 0 0 15px rgba(255,204,0,0.5); }
.crew-card:hover::after { box-shadow: inset 0 0 15px 2px var(--accent-color), 0 0 20px rgba(255,204,0,0.5); }

.crew-img-wrapper { position: relative; width: 100%; height: 250px; overflow: hidden; border-bottom: 2px solid var(--accent-color); background: #000; }
.crew-img-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(255,204,0,0.8) 0%, transparent 60%); opacity: 0; transition: opacity 0.5s, transform 0.5s; mix-blend-mode: overlay; z-index: 3; pointer-events: none; }
.crew-card:hover .crew-img-wrapper::before { opacity: 1; transform: scale(1.5); }

.crew-img-normal, .crew-img-magical { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.crew-img-normal { transition: opacity 0.4s ease, transform 0.5s ease, filter 0.5s ease; z-index: 2; }
.crew-card:hover .crew-img-normal { opacity: 0; transform: scale(0.8); filter: brightness(0); }

.crew-img-magical { opacity: 0; transform: scale(1.3) rotate(5deg); filter: brightness(2) blur(10px); z-index: 1; transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); }
.crew-card:hover .crew-img-magical { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1) blur(0px); }

.crew-info { padding: 20px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 5; }
.crew-name { font-size: 1.3rem; color: var(--text-color); margin-bottom: 5px; text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.crew-alias { font-size: 1rem; color: var(--accent-color); font-style: italic; margin-bottom: 10px; font-weight: bold; }
.crew-role { display: inline-block; background: rgba(255,204,0,0.1); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; color: var(--accent-color); margin: 0 auto 10px auto; border: 1px solid rgba(255,204,0,0.3); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
[data-theme="light"] .crew-role { background: rgba(212,175,55,0.1); color: #d4af37; border-color: rgba(212,175,55,0.3); }
.crew-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

.crew-modal-body { display: flex; gap: 30px; align-items: flex-start; }
.crew-modal-left { flex: 0 0 250px; }
.crew-modal-left img { width: 100%; border-radius: 12px; border: 2px solid var(--accent-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.crew-modal-right { flex: 1; }
.crew-modal-right h3 { color: var(--accent-color); font-size: 2rem; margin-bottom: 5px; text-shadow: 0 0 15px rgba(255, 204, 0, 0.3); }
.crew-modal-right h4 { color: var(--text-muted); font-style: italic; font-size: 1.1rem; margin-bottom: 15px; }
.crew-modal-right p { color: var(--text-color); font-size: 1.05rem; line-height: 1.6; margin-bottom: 20px; }
.crew-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 15px; }
.crew-portfolio-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); transition: 0.3s; cursor: pointer; }
.crew-portfolio-grid img:hover { transform: scale(1.1); border-color: var(--accent-color); box-shadow: 0 5px 15px rgba(255,204,0,0.4); z-index: 10; position: relative;}

/* =========================================
   12. Entertainment Layout (YouTube Sketch)
   ========================================= */
.live-hub-container { display: flex; gap: 20px; justify-content: center; margin-bottom: 50px; flex-wrap: wrap; }
.live-portal { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px 25px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: 0.3s; min-width: 220px; flex: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.2); text-decoration: none; }
.live-portal i { font-size: 2rem; }
.live-portal h4 { color: var(--text-color); font-size: 1.1rem; margin: 0; }
.live-portal span { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

.portal-yt { border-color: rgba(255,0,0,0.5); }
.portal-yt i, .portal-yt span { color: #FF0000; }
.portal-yt:hover { background: rgba(255,0,0,0.1); border-color: #FF0000; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(255,0,0,0.3); }

.portal-twitch { border-color: rgba(145, 70, 255, 0.5); }
.portal-twitch i, .portal-twitch span { color: #9146FF; }
.portal-twitch:hover { background: rgba(145, 70, 255, 0.1); border-color: #9146FF; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(145, 70, 255, 0.3); }

/* INDIVIDUAL PORTAL GLOW ANIMATIONS */
.portal-yt.is-live { border-color: #FF0000; box-shadow: 0 0 20px rgba(255,0,0,0.8); animation: pulseYT 2s infinite; }
.portal-twitch.is-live { border-color: #9146FF; box-shadow: 0 0 20px rgba(145, 70, 255, 0.8); animation: pulseTwitch 2s infinite; }

@keyframes pulseYT { 0% { box-shadow: 0 0 10px rgba(255,0,0,0.4); } 50% { box-shadow: 0 0 20px rgba(255,0,0,0.8); } 100% { box-shadow: 0 0 10px rgba(255,0,0,0.4); } }
@keyframes pulseTwitch { 0% { box-shadow: 0 0 10px rgba(145,70,255,0.4); } 50% { box-shadow: 0 0 20px rgba(145,70,255,0.8); } 100% { box-shadow: 0 0 10px rgba(145,70,255,0.4); } }

/* YouTube Featured Layout (FIXED SIZE, NO STRETCH) */
.yt-featured-container {
    display: flex; gap: 25px; margin-bottom: 40px; align-items: center;
    background: var(--panel-bg); padding: 25px; border-radius: 15px; border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    max-width: 1000px; margin-left: auto; margin-right: auto;
}
[data-theme="light"] .yt-featured-container { background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.yt-featured-text { flex: 1; }
.yt-featured-text h2 { color: #FF0000; font-size: 2rem; margin-bottom: 10px; text-transform: uppercase; }
.yt-featured-text p { color: var(--text-color); font-size: 1.05rem; line-height: 1.5; margin-bottom: 20px; }
.yt-featured-vid { flex: 0 0 450px; height: 260px; border-radius: 10px; overflow: hidden; border: 2px solid var(--accent-color); box-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; cursor: pointer; }
.yt-featured-vid img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.8); transition: 0.3s; }
.yt-featured-vid i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FF0000; font-size: 3rem; transition: 0.3s; }
.yt-featured-vid:hover img { filter: brightness(1); }
.yt-featured-vid:hover i { transform: translate(-50%, -50%) scale(1.1); color: #fff; }

.yt-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 60px; max-width: 1000px; margin-left: auto; margin-right: auto;}
.yt-recent-card { background: var(--form-bg); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); transition: 0.3s; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.yt-recent-card:hover { transform: translateY(-5px); border-color: #FF0000; box-shadow: 0 8px 15px rgba(255,0,0,0.2); }
.yt-recent-card img { width: 100%; height: 130px; object-fit: cover; }
.yt-recent-info { padding: 12px; }
.yt-recent-info h4 { color: var(--text-color); font-size: 1rem; margin-bottom: 5px; }
.yt-recent-info p { color: var(--text-muted); font-size: 0.85rem; }

/* Responsive merging */
@media (max-width: 1200px) {
    .crafting-columns-container { flex-direction: column; }
    .crafting-column-right { position: static; width: 100%; }
}
@media (max-width: 900px) {
    .page-with-sidebar { flex-direction: column; }
    .global-sidebar { width: 100%; height: auto; position: static; flex: none; border-right: none; border-bottom: 2px solid var(--accent-color); }
    .acc-panel { max-height: 70px; }
    .event-header { flex-direction: column; align-items: flex-start; }
    .countdown-timer { width: 100%; justify-content: space-between; }
    .neon-text { font-size: 2rem !important; }
    .main-content { padding: 30px 20px; gap: 30px; }
    .crafting-modal-body { flex-direction: column; }
    .craft-modal-media-container { width: 100%; }
    .winner-spotlight { flex-direction: column; text-align: center; }
    .winner-info { text-align: center; }
    .winner-card { flex: 0 0 auto; height: auto; width: 100%; max-width: 400px; transform: rotate(0); }
    .store-hero h2 { font-size: 2.5rem; }
    .store-hero-overlay { padding: 30px 20px; }
    .crew-modal-body { flex-direction: column; }
    .crew-modal-left { width: 100%; flex: none; }
    .yt-featured-container { flex-direction: column; } 
    .yt-featured-vid { flex: auto; width: 100%; }
    .workbench-block { flex-direction: column; }
    .wb-block-vid { flex: auto; width: 100%; }
    .discord-hero { flex-direction: column; text-align: center; padding: 30px 20px; }
    .discord-icon-bg { display: none; }
    .yt-recent-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Mobile Panel Adjustments */
    .panel-container { flex-direction: column; padding-top: 120px; gap: 20px; perspective: none;}
    .wrapper-left-1, .wrapper-left-2, .wrapper-center, .wrapper-right-1, .wrapper-right-2 { 
        animation: dropDown 0.8s ease forwards; opacity: 1; transform: none !important; height: 180px; max-width: 100%; width: 90%; margin: 0; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    }
    .panel:hover { transform: scale(1.05) !important; }
    .panel-container:hover .panel { opacity: 1; filter: none; transform: none; }
    #panel-events, #panel-crafting, #panel-crew, #panel-entertainment, #panel-official { clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); -webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);}
}

/* =========================================
   14. CUSTOM SCROLLBAR
   ========================================= */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }