/* ============================================================
 * THEME HALLOWEEN — Spooky yet modern (dark fantasy)
 * ------------------------------------------------------------
 * Design system untuk portal game. Suasana malam Halloween yang
 * gelap dan sinematik, tetap mudah dibaca. Tata letak situs
 * (flex/grid/ukuran) tidak diubah — hanya warna, huruf, cahaya,
 * dan dekorasi.
 *
 * PALET
 *   Midnight void     #0c0614  dasar malam / overlay
 *   Deep purple       #1a0b28  kartu, header, permukaan
 *   Pumpkin           #ff6a1a  aksen utama, CTA
 *   Ember             #c2410c  CTA hover / aksen gelap
 *   Candle gold       #ffc14a  highlight, garis lilin, web
 *   Ghost white       #f6f1e8  teks utama
 *   Ash               #cbb8a4  teks sekunder
 *   Witch violet      #a855f7  aksen kedua (kabut, glow)
 *   Slime             #7dff6a  status sukses / online
 *
 * TIPOGRAFI
 *   Heading  Cinzel     — serif gothic, terbaca di judul UI
 *   Body     Outfit     — sans modern, teks panjang & form
 *
 * HERO (struktur yang sudah ada di landing)
 *   Header tetap di atas.
 *   Ilustrasi utama = carousel (.slider-frame).
 *   Headline = caption slide (.carousel-caption).
 *   CTA = tombol .btn-primary di kartu login.
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
    --font-display: "Cinzel", "Palatino Linotype", Palatino, serif;
    --font-body: "Outfit", "Segoe UI", sans-serif;

    --hw-void: #0c0614;
    --hw-purple: #1a0b28;
    --hw-purple-deep: #120818;
    --hw-pumpkin: #ff6a1a;
    --hw-ember: #c2410c;
    --hw-gold: #ffc14a;
    --hw-ghost: #f6f1e8;
    --hw-ash: #cbb8a4;
    --hw-violet: #a855f7;
    --hw-slime: #7dff6a;

    /* Sudut sarang laba-laba, dipakai sebagai lapisan kartu */
    --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffc14a' stroke-opacity='0.55' stroke-width='0.7'%3E%3Cpath d='M100 0 L0 0 M100 0 L0 28 M100 0 L0 56 M100 0 L0 84 M100 0 L0 100 M100 0 L28 100 M100 0 L56 100 M100 0 L84 100 M100 0 L100 100'/%3E%3Cpath d='M100 14 C78 18 62 34 58 58'/%3E%3Cpath d='M86 0 C80 24 64 42 42 52'/%3E%3Cpath d='M100 36 C82 40 70 52 66 74'/%3E%3Cpath d='M72 0 C70 20 60 34 46 40'/%3E%3C/g%3E%3C/svg%3E");

    /* Overlay: malam ungu + kabut labu + sentuhan slime di kaki halaman */
    --page-overlay: radial-gradient(ellipse 42% 32% at 12% 18%, rgba(168, 85, 247, 0.22), transparent 70%),
        radial-gradient(ellipse 38% 30% at 88% 78%, rgba(255, 106, 26, 0.30), transparent 68%),
        radial-gradient(ellipse 46% 24% at 50% 100%, rgba(125, 255, 106, 0.07), transparent 62%),
        linear-gradient(165deg, rgba(12, 6, 20, 0.90) 0%, rgba(26, 11, 40, 0.80) 46%, rgba(62, 24, 8, 0.62) 100%);

    --card-bg: rgba(22, 12, 32, 0.94);
    --card-text: var(--hw-ghost);
    --card-border: rgba(255, 140, 40, 0.28);
    --muted-text: var(--hw-ash);
    --heading-color: #ffb15a;

    --accent: var(--hw-pumpkin);
    --accent-dark: var(--hw-ember);
    --accent-contrast: #1a0a08;
    --accent-2: var(--hw-violet);
    --accent-soft: rgba(255, 106, 26, 0.14);
    --accent-gold: var(--hw-gold);

    --header-bg: linear-gradient(90deg, rgba(12, 6, 20, 0.96) 0%, rgba(36, 14, 18, 0.96) 100%);
    --header-text: #ffe7c2;
    --header-border: rgba(255, 193, 74, 0.35);

    --table-head-bg: linear-gradient(90deg, #3b1a0a, #2a1038);
    --table-head-text: #ffc78a;
    --table-border: rgba(255, 140, 40, 0.18);

    --input-bg: #24161c;
    --input-border: #7c3a12;
    --input-text: var(--hw-ghost);

    --link-color: #ffb040;

    --status-green: var(--hw-slime);
    --status-red: #f87171;
    --status-orange: #fb923c;
    --status-purple: #c084fc;
    --status-teal: #2dd4bf;
    --status-yellow: #fbbf24;

    --footer-bg: linear-gradient(135deg, #1a0b28 0%, #4a1c0a 42%, #0c0614 100%);
    --footer-headline: #ffb040;
    --footer-text: #e8c9a0;
    --footer-muted: #a88870;
    --footer-accent: var(--hw-pumpkin);

    --card-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 193, 74, 0.28);
}

/* ------------------------------------------------------------
 * 1. ATMOSFER
 * Kabut di overlay (body::before sudah di-set engine).
 * Sepuluh hantu melayang di belakang konten.
 * ------------------------------------------------------------ */
body {
    font-family: var(--font-body);
    color: var(--card-text);
}

body::before {
    background: var(--page-overlay) !important;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    --hw-ghost-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 80'%3E%3Cpath fill='%23f6f1e8' fill-opacity='0.72' d='M32 4C18 4 8 16 8 32v36c4-8 8-8 12 0s8 8 12 0 8-8 12 0 8 8 12 0V32C56 16 46 4 32 4z'/%3E%3Ccircle cx='24' cy='34' r='3' fill='%231a0b28'/%3E%3Ccircle cx='40' cy='34' r='3' fill='%231a0b28'/%3E%3Cpath d='M27 46c2.2 3 7.8 3 10 0' fill='none' stroke='%231a0b28' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --hw-ghost-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 80'%3E%3Cpath fill='%23ffe7c2' fill-opacity='0.45' d='M32 4C18 4 8 16 8 32v36c4-8 8-8 12 0s8 8 12 0 8-8 12 0 8 8 12 0V32C56 16 46 4 32 4z'/%3E%3Ccircle cx='24' cy='34' r='3' fill='%231a0b28'/%3E%3Ccircle cx='40' cy='34' r='3' fill='%231a0b28'/%3E%3Cpath d='M27 46c2.2 3 7.8 3 10 0' fill='none' stroke='%231a0b28' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-image:
        var(--hw-ghost-img), var(--hw-ghost-dim), var(--hw-ghost-img), var(--hw-ghost-dim), var(--hw-ghost-img),
        var(--hw-ghost-dim), var(--hw-ghost-img), var(--hw-ghost-dim), var(--hw-ghost-img), var(--hw-ghost-dim);
    background-repeat: no-repeat;
    background-size:
        46px 64px, 32px 44px, 40px 56px, 28px 38px, 52px 72px,
        36px 50px, 44px 60px, 30px 42px, 48px 66px, 38px 52px;
    background-position:
        4% 12%, 16% 8%, 30% 24%, 44% 6%, 58% 18%,
        74% 10%, 8% 68%, 28% 76%, 52% 70%, 86% 62%;
    animation: hw-drift 18s ease-in-out infinite;
}

@keyframes hw-drift {
    0%, 100% {
        background-position:
            4% 12%, 16% 8%, 30% 24%, 44% 6%, 58% 18%,
            74% 10%, 8% 68%, 28% 76%, 52% 70%, 86% 62%;
    }
    50% {
        background-position:
            7% 8%, 13% 14%, 34% 18%, 41% 11%, 62% 14%,
            70% 16%, 12% 74%, 24% 70%, 56% 76%, 82% 58%;
    }
}

.hw-jacks {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.hw-jack {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
    animation: hw-jack-float 5.5s ease-in-out infinite alternate;
}

.hw-jack:nth-child(2) { animation-duration: 6.4s; }
.hw-jack:nth-child(3) { animation-duration: 4.8s; }
.hw-jack:nth-child(4) { animation-duration: 7s; }

@keyframes hw-jack-float {
    from { transform: translateY(0); }
    to { transform: translateY(-14px); }
}

::selection {
    background: rgba(255, 106, 26, 0.45);
    color: #fff8ef;
}

/* ------------------------------------------------------------
 * 2. TIPOGRAFI
 * ------------------------------------------------------------ */
h1, h2, h3, h4,
.news-title,
.main-title,
.card-title,
.footer-headline,
.carousel-caption {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

h1, h2, h3 {
    text-shadow: 0 0 18px rgba(255, 106, 26, 0.28);
}

p, li, label, input, button, select, textarea, .news-content {
    font-family: var(--font-body);
}

a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    text-shadow: 0 0 10px rgba(255, 176, 64, 0.45);
}

/* ------------------------------------------------------------
 * 3. HEADER
 * Garis lilin di bawah nav. Link aktif menyala.
 * ------------------------------------------------------------ */
.main-header {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 106, 26, 0.85);
    animation: hw-candle 3.6s ease-in-out infinite;
}

@keyframes hw-candle {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 106, 26, 0.9); }
    50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 193, 74, 0.4); }
}

.left-menu a,
.right-menu a {
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}

.left-menu a:hover,
.left-menu a.active,
.right-menu a:hover {
    text-shadow: 0 0 12px rgba(255, 106, 26, 0.7);
}

/* ------------------------------------------------------------
 * 4. KARTU
 * Sudut web + cahaya labu. Hover: kabut oranye, tanpa geser layout.
 * ------------------------------------------------------------ */
.container,
.box,
.main-box,
.login-box,
.container-large,
.container-small,
.account-info-box,
.status-feed-box,
.news-section,
.calendar-box,
.patcher-news-card,
.char-card,
.news-list-wrapper {
    background-color: var(--card-bg) !important;
    background-image:
        var(--hw-web),
        radial-gradient(160px 100px at 100% 0%, rgba(255, 106, 26, 0.16), transparent 72%) !important;
    background-repeat: no-repeat !important;
    background-position: right top, right top, center !important;
    background-size: 108px 108px, 200px 140px, auto !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 14px;
    box-shadow: var(--card-shadow) !important;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.news-section:hover,
.box:hover,
.status-feed-box:hover,
.calendar-box:hover,
.news-list-wrapper:hover,
.char-card:hover {
    border-color: rgba(255, 193, 74, 0.55) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 26px rgba(255, 106, 26, 0.22),
        inset 0 1px 0 rgba(255, 193, 74, 0.4) !important;
}

/* ------------------------------------------------------------
 * 5. TOMBOL CTA
 * Pumpkin solid + neon glow saat hover. Lebar tombol tetap.
 * ------------------------------------------------------------ */
.btn-primary,
.btn-login {
    font-family: var(--font-body) !important;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 225, 170, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(255, 193, 74, 0.28),
        0 8px 20px rgba(255, 106, 26, 0.4) !important;
    text-shadow: 0 1px 0 rgba(255, 236, 210, 0.35);
}

.btn-primary:hover,
.btn-login:hover {
    box-shadow:
        0 0 22px rgba(255, 106, 26, 0.75),
        0 0 36px rgba(168, 85, 247, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.35) !important;
    filter: brightness(1.08);
}

/* ------------------------------------------------------------
 * 6. HERO — carousel + kartu masuk
 * ------------------------------------------------------------ */
.slider-frame,
.carousel-container {
    border: 1px solid rgba(255, 140, 40, 0.5) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 0 1px rgba(26, 11, 40, 0.85),
        0 0 28px rgba(255, 106, 26, 0.28),
        0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.carousel-caption {
    background: linear-gradient(90deg, rgba(12, 6, 20, 0.88), rgba(90, 28, 8, 0.72)) !important;
    color: var(--hw-ghost) !important;
    text-shadow: 0 0 14px rgba(255, 106, 26, 0.55);
    border-top: 1px solid rgba(255, 193, 74, 0.35);
}

.login-section h2 {
    color: var(--heading-color) !important;
}

.logo-floating,
.hero-logo-corner img,
.hero-logo-corner video {
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(255, 106, 26, 0.35));
}

/* ------------------------------------------------------------
 * 7. RANKING — panggung sprite & tabel
 * Panel ini bawaan terang (putih/abu). Di tema ini jadi permukaan
 * malam ungu, supaya tidak menyala abu di atas kartu gelap.
 * ------------------------------------------------------------ */
.hw-split-visual {
    background: linear-gradient(180deg, rgba(48, 22, 68, 0.72), rgba(16, 8, 26, 0.92)) !important;
    border: 1px solid rgba(255, 140, 40, 0.28) !important;
    color: var(--card-text);
    box-shadow: inset 0 1px 0 rgba(255, 193, 74, 0.16);
}

.hw-split-visual .hw-map-wrap,
.hw-map-placeholder {
    background: rgba(12, 6, 20, 0.55) !important;
    border-color: rgba(255, 140, 40, 0.22) !important;
    color: var(--muted-text) !important;
}

.hw-split-table .hw-table-scroll {
    background: rgba(14, 8, 22, 0.72) !important;
    border: 1px solid rgba(255, 140, 40, 0.22) !important;
}

.hw-tab-content th,
.hw-tab-content td {
    border-bottom-color: rgba(255, 140, 40, 0.12) !important;
}

.hw-split-visual h4,
.hw-split-table h4 {
    color: var(--heading-color) !important;
}

.hw-rank-foot {
    background: rgba(255, 106, 26, 0.1) !important;
    border-color: rgba(255, 193, 74, 0.28) !important;
    color: var(--hw-gold) !important;
}

.hw-rank-foot .hw-i {
    background: var(--hw-pumpkin) !important;
    color: #1a0a08 !important;
}

/* ------------------------------------------------------------
 * 8. FORM, TABEL, SCROLLBAR
 * ------------------------------------------------------------ */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 1px rgba(255, 193, 74, 0.45), 0 0 14px rgba(255, 106, 26, 0.35) !important;
}

tr:hover td {
    background-color: rgba(255, 106, 26, 0.08);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-violet));
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(12, 6, 20, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    .main-header,
    .hw-jack {
        animation: none !important;
    }
}