/* =========================================================
   TAI CHI CO — DESIGN SYSTEM
   ------------------------------------------------------------
   Premium cinematic identity layer.
   Loaded AFTER theme.css, so it wins the cascade.

   Palette tokens are declared once in theme.css :root —
   --bg-primary --bg-secondary --bg-card --gold --gold-hover
   --blue --blue-deep --text-primary --text-secondary
   --text-muted --border --success --error

   This layer only sets colour, depth and motion.
   Layout / breakpoints stay in theme.css.
   ========================================================= */


/* =========================================================
   1. ATMOSPHERE — midnight black with gold & icy-blue light
   ========================================================= */

body {

    background:

        radial-gradient(
            circle at 50% -18%,
            rgba(217, 164, 65, .15),
            transparent 42%
        ),

        radial-gradient(
            circle at 8% 72%,
            rgba(59, 130, 246, .10),
            transparent 38%
        ),

        radial-gradient(
            circle at 92% 58%,
            rgba(217, 164, 65, .07),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #090D16 0%,
            #0B1120 48%,
            #090D16 100%
        );

    color: var(--text-secondary);

}

::selection {

    background: rgba(217, 164, 65, .34);

    color: #fff;

}

/* --- keyboard accessibility ------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {

    outline: 2px solid var(--gold-hover);

    outline-offset: 3px;

    border-radius: 4px;

}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {

    outline: none;

}

/* --- scrollbars -------------------------------------------------- */

::-webkit-scrollbar {

    width: 11px;

    height: 11px;

}

::-webkit-scrollbar-track {

    background: var(--bg-primary);

}

::-webkit-scrollbar-thumb {

    background: #222B3C;

    border: 2px solid var(--bg-primary);

    border-radius: 8px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--gold-deep);

}


/* =========================================================
   2. HEADER & NAVIGATION
   ========================================================= */

header {

    background:

        linear-gradient(
            180deg,
            rgba(9, 13, 22, .97),
            rgba(11, 17, 32, .92)
        );

    border-bottom:

        1px solid rgba(217, 164, 65, .22);

    box-shadow:

        0 18px 50px rgba(0, 0, 0, .75);

}

header::after {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-deep),
            var(--gold-hover),
            var(--blue),
            var(--gold-hover),
            var(--gold-deep),
            transparent
        );

    box-shadow:

        0 0 14px rgba(217, 164, 65, .45);

}

/* brand mark */

.server-logo {

    color: var(--text-primary);

    text-shadow:

        0 0 26px rgba(217, 164, 65, .28);

}

.server-logo span {

    color: var(--gold-hover);

    text-shadow:

        0 0 22px rgba(240, 198, 106, .55);

}

/* navigation links — white by default, gold when active */

nav a {

    color: var(--text-primary);

}

nav a:hover {

    color: var(--gold-hover);

    text-shadow:

        0 0 16px rgba(240, 198, 106, .55);

}

nav a.active {

    color: var(--gold-hover);

    text-shadow:

        0 0 18px rgba(240, 198, 106, .65);

}

nav a::before {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-hover),
            transparent
        );

    box-shadow:

        0 0 10px rgba(240, 198, 106, .75);

}

nav a:hover::before,
nav a.active::before {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-hover),
            var(--blue),
            var(--gold-hover),
            transparent
        );

}

nav .donate {

    color: var(--gold-hover);

}


/* =========================================================
   3. HERO — cinematic stage, full 16:9 frame preserved
   ========================================================= */

.hero {

    height: auto;

    margin-top: 0;

    padding: 18px 0 10px;

    background: transparent;

    animation: none;

}

.hero-stage {

    position: relative;

    width: min(100%, calc(78vh * 16 / 9));

    margin: 0 auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);

}

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    /* the source is exactly 16:9 - contain keeps the whole frame
       visible and never stretches or distorts it */
    object-fit: contain;

    object-position: center;

    display: block;

    background: var(--bg-primary);

}

/* --- hero copy --------------------------------------------------- */

.hero-content {

    position: relative;

    z-index: 3;

    max-width: 860px;

    margin: 0 auto;

    padding: 46px 24px 34px;

    text-align: center;

}

.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 6px 16px;

    border: 1px solid var(--gold-line);

    border-radius: 999px;

    background: var(--gold-soft);

    color: var(--gold-hover);

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;

}

.hero-eyebrow::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--success);

    box-shadow: 0 0 10px rgba(53, 201, 138, .9);

}

.hero-title {

    margin: 0 0 16px;

    color: var(--gold);

    font-size: 54px;

    font-weight: bold;

    letter-spacing: 12px;

    line-height: 1.05;

    text-shadow:

        0 0 40px rgba(217, 164, 65, .35);

}

.hero-title span {

    color: var(--text-primary);

    text-shadow:

        0 0 30px rgba(59, 130, 246, .45);

}

.hero-text {

    max-width: 620px;

    margin: 0 auto 28px;

    color: var(--text-primary);

    font-size: 14px;

    line-height: 26px;

    letter-spacing: .4px;

    opacity: .92;

}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 14px;

}


/* =========================================================
   4. BUTTONS
   ========================================================= */

.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding: 0 30px;

    border-radius: 8px;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    text-decoration: none;

    cursor: pointer;

    transition:

        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}

/* primary — gold with dark text */

.btn-primary {

    background: var(--gold);

    border: 1px solid var(--gold);

    color: var(--bg-primary);

    box-shadow: 0 8px 26px rgba(217, 164, 65, .22);

}

.btn-primary:hover {

    background: var(--gold-hover);

    border-color: var(--gold-hover);

    color: var(--bg-primary);

    box-shadow: 0 10px 32px rgba(240, 198, 106, .38);

    transform: translateY(-2px);

}

.btn-primary:active {

    transform: translateY(0);

}

/* secondary — dark with a thin blue border */

.btn-secondary {

    background: rgba(23, 29, 42, .85);

    border: 1px solid var(--blue);

    color: var(--text-primary);

}

.btn-secondary:hover {

    background: var(--blue-soft);

    border-color: var(--blue-hover);

    color: #fff;

    box-shadow: 0 0 22px rgba(59, 130, 246, .32);

    transform: translateY(-2px);

}

.btn-secondary:active {

    transform: translateY(0);

}

/* --- the site's existing form / action buttons ------------------- */

.btn-custom,
.download-button,
.register-button {

    border-radius: 8px;

    background: var(--gold);

    border: 1px solid var(--gold);

    color: var(--bg-primary);

    box-shadow: 0 8px 24px rgba(217, 164, 65, .22);

}

.btn-custom:hover,
.download-button:hover,
.register-button:hover {

    background: var(--gold-hover);

    border-color: var(--gold-hover);

    color: var(--bg-primary);

    box-shadow: 0 10px 30px rgba(240, 198, 106, .38);

    transform: translateY(-2px);

}

/* --- download button with no link yet (kept as a placeholder) --- */

.download-button.is-empty {

    opacity: .45;

    box-shadow: none;

    pointer-events: none;

    cursor: not-allowed;

}

/* --- donation item icon (item picture / glyph) ------------------- */

.donation-icon {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    background: rgba(217, 164, 65, .08);

    border: 1px solid rgba(217, 164, 65, .28);

    box-shadow: 0 0 18px rgba(240, 198, 106, .10);

}

.donation-icon img {

    width: 42px;

    height: 42px;

    object-fit: contain;

}

.donation-icon-emoji {

    font-size: 28px;

    line-height: 1;

}

/* --- buy button using the Buy-Now picture ------------------------ */

.donation-buy-image {

    background: none;

    border: 0;

    box-shadow: none;

    padding: 0;

    display: inline-block;

    line-height: 0;

}

.donation-buy-image:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(217, 164, 65, .35);

}

.donation-buy-image img {

    width: 130px;

    height: auto;

    display: block;

}


/* =========================================================
   5. CARDS & PANELS
   ========================================================= */

.box,
.status-card,
.command,
.ranking-box,
.notice,
.download-card,
.contact-card,
.donation-card,
.download-hero,
.donate-notice,
.patch-notes,
.register-wrapper,
.box-form {

    background:

        linear-gradient(
            145deg,
            var(--bg-card),
            var(--bg-secondary)
        );

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

}

/* =========================================================
   5b. SURFACE GEOMETRY
   ------------------------------------------------------------
   One radius scale for the whole site so panels, buttons,
   inputs and the cinematic video feel like the same object.
   ========================================================= */

.box,
.status-card,
.command,
.ranking-box,
.notice,
.download-card,
.contact-card,
.donation-card,
.download-hero,
.donate-notice,
.patch-notes,
.register-wrapper,
.register-box,
.box-form {

    border-radius: 10px;

}

/* inputs keep a slightly tighter radius than the panels */

.form-control,
.input-wrap input {

    border-radius: 6px;

}

/* the page shell (body container) stays sharp-edged */

.container {

    border-radius: 0;

}


/* gold hairline on top of the primary cards */

.box,
.ranking-box,
.download-card,
.contact-card,
.donation-card {

    position: relative;

    overflow: hidden;

}

.box::before,
.ranking-box::before,
.download-card::before,
.contact-card::before,
.donation-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(217, 164, 65, .65),
            transparent
        );

}

/* hover highlight — restrained */

.box:hover,
.status-card:hover,
.command:hover,
.download-card:hover,
.contact-card:hover,
.donation-card:hover {

    border-color: rgba(217, 164, 65, .38);

    box-shadow:

        0 18px 46px rgba(0, 0, 0, .55),
        0 0 26px rgba(217, 164, 65, .10);

    transform: translateY(-3px);

}

/* section titles */

.box-title,
.download-title,
.register-title,
.ranking-title,
.patch-notes-title,
.notice-title,
.donate-notice-title,
.page-title h1 {

    color: var(--gold);

}

.box-title {

    border-bottom: 1px solid rgba(217, 164, 65, .30);

}

.section-heading span {

    color: var(--gold-hover);

}

.ornament-line {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-deep)
        );

}

.ornament-line.right {

    background:

        linear-gradient(
            90deg,
            var(--gold-deep),
            transparent
        );

}

.diamond {

    border-color: var(--gold-hover);

    box-shadow: 0 0 15px rgba(240, 198, 106, .7);

}

/* --- icons: gold for primary features, blue for technical ------- */

.download-icon,
.box-title i,
.download-title i,
.notice-title i,
.patch-notes-title i,
.donate-notice-title i,
.download-card-title i {

    color: var(--gold);

}

.contact-type,
.download-info span,
.status-label,
.info-status-label,
.server-name-small,
.status-card-title,
.command-sub,
.info-row span,
.download-card-description,
.donate-notice-text,
.contact-description {

    color: var(--text-secondary);

}

.info-row b,
.download-info b,
.status-card-value,
.server-name-big,
.command-main,
.download-card-title,
.contact-name,
.donation-name,
.donation-price {

    color: var(--text-primary);

}

.status-card-value {

    text-shadow: 0 0 22px rgba(240, 198, 106, .22);

}

.info-row {

    border-bottom: 1px solid var(--border-soft);

}

.server-footer {

    border-top: 1px solid rgba(217, 164, 65, .34);

    color: var(--text-muted);

}

/* status dots */

.online-dot,
.info-status-dot {

    background: var(--success);

    box-shadow: 0 0 10px rgba(53, 201, 138, .9);

}

.status-online,
.info-status-online {

    color: var(--text-primary);

}

/* --- contact owner (صورة دائرة جنب الاسم) -------------------------- */

.contact-owner {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 20px;

}

.contact-owner .contact-name {

    margin-bottom: 0;

}

.contact-avatar {

    flex: 0 0 auto;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--gold);

    box-shadow:

        0 0 0 4px rgba(9, 13, 22, .9),

        0 0 22px rgba(217, 164, 65, .35);

}

@media (max-width: 480px) {

    .contact-avatar {

        width: 60px;

        height: 60px;

    }

}

/* --- ranking table ----------------------------------------------- */
.ranking-table-wrapper,
.table-bordered,
.ranking-table {

    background: transparent;

    border-color: var(--border);

}

.ranking-table th,
.table-bordered th {

    background: var(--bg-secondary);

    color: var(--gold);

    border-color: var(--border);

}

.ranking-table td,
.table-bordered td {

    background: rgba(9, 13, 22, .45);

    border-color: var(--border-soft);

    color: var(--text-secondary);

}

.ranking-table tr:hover td,
.table-bordered tbody tr:hover td {

    background: rgba(217, 164, 65, .06);

    color: var(--text-primary);

}

/* حالة "مفيش بيانات" في جداول الرانك */
.ranking-table td.ranking-empty {

    text-align: center;

    padding: 18px;

    color: var(--text-muted);

    font-style: italic;

}

/* --- forms -------------------------------------------------------- */

/* the register / contact fields: refined gold hairline instead of a
   hard gold outline, so a page full of inputs stays calm */

.input-wrap input {

    background: rgba(9, 13, 22, .86);

    border: 1px solid rgba(217, 164, 65, .34);

    color: var(--text-primary);

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.input-wrap input::placeholder {

    color: var(--text-muted);

    opacity: .75;

}

.input-wrap input:focus {

    background: rgba(9, 13, 22, .96);

    border-color: var(--gold);

    box-shadow:

        0 0 0 3px rgba(217, 164, 65, .12),

        0 0 24px rgba(217, 164, 65, .10);

    outline: none;

}

.form-control {

    background: var(--bg-primary);

    border-color: var(--border);

    color: var(--text-primary);

    border-radius: 6px;

}

.form-control:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(217, 164, 65, .14);

}

.form-control::placeholder {

    color: var(--text-muted);

    opacity: .8;

}

.form-message.error,
.form-message.alert-error,
.alert-error {

    color: var(--error);

    border-color: rgba(240, 100, 100, .45);

}

.form-message.success,
.form-message.alert-success,
.alert-success {

    color: var(--success);

    border-color: rgba(53, 201, 138, .45);

}

.captcha-wrap {

    border-color: var(--border);

}


/* =========================================================
   6. FOOTER — brand accents, cinematic video
   ========================================================= */

footer {

    background:

        linear-gradient(
            180deg,
            #0B1120 0%,
            #090D16 60%
        );

    border-top: 1px solid var(--border);

    padding-bottom: 34px;

}

.footer-logo {

    color: var(--gold);

    text-shadow: 0 0 26px rgba(217, 164, 65, .30);

}

.footer-links a {

    color: var(--text-primary);

}

.footer-links a:hover {

    color: var(--gold-hover);

    text-shadow: 0 0 14px rgba(240, 198, 106, .55);

}

/* secondary / community links use the cool accent */

.footer-links a[href*="gtop100"],
.footer-top-badge:hover .footer-top-text small {

    color: var(--blue-hover);

}

.copyright {

    color: var(--text-secondary);

}

.developer {

    color: var(--gold-hover);

}

/* --- GTop100 badge ------------------------------------------------ */

.footer-top-badge {

    border-color: var(--border);

    background: rgba(23, 29, 42, .70);

}

.footer-top-badge:hover {

    border-color: var(--blue);

    background: var(--blue-soft);

    box-shadow: 0 0 22px rgba(59, 130, 246, .28);

}

.footer-top-icon {

    color: var(--gold-hover);

}

.footer-top-text b {

    color: var(--gold);

}

.footer-top-text small {

    color: var(--text-secondary);

}


/* =========================================================
   7. FLOATING ACTIONS & SOCIAL
   ========================================================= */

.social-fab button,
.fab-music {

    background: linear-gradient(135deg, var(--gold), var(--gold-deep));

}

.fab-whatsapp {

    background: var(--whatsapp);

}

.social-button {

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 8px;

    color: var(--text-primary);

}

.social-button:hover {

    border-color: var(--gold);

    color: var(--gold-hover);

    box-shadow: 0 0 18px rgba(217, 164, 65, .22);

}

.social-button.whatsapp:hover {

    border-color: var(--whatsapp);

    color: var(--whatsapp);

    box-shadow: 0 0 18px rgba(37, 211, 102, .28);

}


/* =========================================================
   8. BOOT LOADER
   ========================================================= */

.boot-loader {

    background:

        radial-gradient(
            circle at 50% 38%,
            rgba(217, 164, 65, .10),
            transparent 55%
        ),

        radial-gradient(
            circle at 50% 78%,
            rgba(59, 130, 246, .10),
            transparent 50%
        ),

        #090D16;

}

.boot-logo {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            var(--text-primary),
            var(--blue)
        );

    -webkit-background-clip: text;

            background-clip: text;

    color: transparent;

}

.boot-bar {

    background: rgba(23, 29, 42, .85);

    border: 1px solid var(--border);

}

.boot-bar-fill {

    background:

        linear-gradient(
            90deg,
            var(--gold-deep),
            var(--gold),
            var(--gold-hover)
        );

    box-shadow: 0 0 18px rgba(240, 198, 106, .55);

}

.boot-sub {

    color: var(--text-secondary);

}

.boot-percent {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            var(--text-primary),
            var(--blue)
        );

    -webkit-background-clip: text;

            background-clip: text;

    color: transparent;

}

.boot-ring {

    border-color: rgba(217, 164, 65, .28);

}

.boot-spark {

    background: var(--gold-hover);

}


/* =========================================================
   9. RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .hero-title {

        font-size: 42px;

        letter-spacing: 8px;

    }

    /* the nav used to overflow the viewport on tablets, clipping the
       first links — let it wrap into a second row instead */

    nav {

        flex-wrap: wrap;

        justify-content: center;

        row-gap: 2px;

        column-gap: 0;

    }

}

@media (max-width: 700px) {

    nav a {

        padding: 10px 8px;

        font-size: 9px;

        letter-spacing: 1px;

    }

    .hero-content {

        padding: 34px 18px 26px;

    }

    .hero-title {

        font-size: 30px;

        letter-spacing: 5px;

    }

    .hero-text {

        font-size: 13px;

        line-height: 23px;

    }

    .hero-actions {

        gap: 10px;

    }

    .btn-primary,
    .btn-secondary {

        flex: 1 1 100%;

        padding: 0 18px;

    }

}

@media (max-width: 500px) {

    .hero-title {

        font-size: 24px;

        letter-spacing: 3px;

    }

    .hero-eyebrow {

        font-size: 8px;

        letter-spacing: 2px;

    }

}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

        scroll-behavior: auto !important;

    }

    .hero-video {

        animation: none !important;

    }

    .reveal {

        opacity: 1 !important;

        transform: none !important;

    }

}