/* custom.css */

/* ─── Countdown + Status Wrapper ───────────────────────────────────────────── */
.countdown-wrap {
    display: none;
    pointer-events: none;
    position: absolute;
    right: 12%;
    top: 6.25rem;
}
.countdown-wrap > * { pointer-events: all; }
.countdown-wrap .countdown-main {
    position: static !important;
    right: auto   !important;
    top:   auto   !important;
    display: block !important;
}
@media (min-width: 1300px) {
    .countdown-wrap { display: block; }
}
@media (max-width: 600px) {
    .header {
        padding-top: 1rem!important;    margin-top: 6rem;}

    .countdown_pos {
        display: none!important;
    }
}

/* ════════════════════════════════════════════════════
   SERVER STATUS — same design as countdown box
   #665945 inner border | #907b5b outer frame
   ════════════════════════════════════════════════════ */

.srv-status {
    position: relative;
    width: 100%;
    margin-top: 6px;
    background-color: rgba(0,0,0,.33);
    border-left:   1px solid #665945;
    border-right:  1px solid #665945;
    border-bottom: 1px solid #665945;
    box-sizing: border-box;
}

/* outer decorative frame — same as .countdown__decor */
.srv-status__frame {
    position: absolute;
    top:    -.5rem;
    right:  -.5rem;
    bottom: -.5rem;
    left:   -.5rem;
    border-left:   2px solid #907b5b;
    border-right:  2px solid #907b5b;
    border-bottom: 2px solid #907b5b;
    pointer-events: none;
    z-index: 1;
}

/* top gradient line — same as .countdown__decor-top */
.srv-status__frame-top {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(
        270deg,
        #907b5b 0%, #907b5b 40%,
        rgba(144,123,91,0) 40%, rgba(144,123,91,0) 60%,
        #907b5b 60%, #907b5b 100%
    );
}

/* ── Head row ────────────────────────────────────── */
.srv-status__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
}

.srv-status__name {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #fff4e1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srv-status__rate {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #f4d398;
    border: 1px solid #665945;
    padding: 2px 7px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.srv-status__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid;
    flex-shrink: 0;
}
.srv-status--on  .srv-status__badge { color: #6ee868; border-color: rgba(80,200,70,.40); background: rgba(50,160,45,.10); }
.srv-status--off .srv-status__badge { color: #e86868; border-color: rgba(200,70,70,.40); background: rgba(160,45,45,.10); }

.srv-status__badge-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.srv-status--on  .srv-status__badge-dot { background: #6ee868; box-shadow: 0 0 5px rgba(110,232,104,.9); animation: srvBlink 2s ease-in-out infinite; }
.srv-status--off .srv-status__badge-dot { background: #e86868; }

@keyframes srvBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ── Separator ───────────────────────────────────── */
.srv-status__sep {
    height: 1px;
    margin: 0 14px;
    background: linear-gradient(90deg, transparent, #665945 30%, #665945 70%, transparent);
}

/* ── Stats grid ──────────────────────────────────── */
.srv-status__grid {
    display: flex;
    align-items: center;
    padding: 10px 0 12px;
}

.srv-status__cell {
    flex: 1;
    text-align: center;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.srv-status__vline {
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent, #665945 25%, #665945 75%, transparent);
    flex-shrink: 0;
}

.srv-status__num {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: #fff4e1;
    text-shadow: 0 0 20px rgba(255,244,225,.20);
    font-variant-numeric: tabular-nums;
    display: block;
}
.srv-status__num--sm {
    font-size: 14px;
    font-weight: 700;
    color: #f4d398;
    text-shadow: none;
    letter-spacing: .04em;
}

.srv-status__caption {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f4d398;
    opacity: .55;
    line-height: 1;
}

/* ════════════════════════════════════════════════════
   SITE FOOTER
   ════════════════════════════════════════════════════ */
.site-footer {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 26px 24px 20px;
    text-align: center;
    box-sizing: border-box;
}
.site-footer::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    top: 0;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,.2);
    width: 100vw;
    z-index: -2;
    pointer-events: none;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

/* copyright */
.site-footer__copy {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #dfc683;
    text-shadow: 0 0 18px rgba(223,198,131,0.30);
    margin: 0;
    line-height: 1.3;
}

/* subtitle */
.site-footer__sub {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,170,110,0.50);
    margin: 0 0 4px;
    line-height: 1.3;
}

/* links row */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.site-footer__link {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196,160,70,0.60);
    text-decoration: none;
    padding: 0 1rem;
    position: relative;
    transition: color 0.2s;
    line-height: 1.5;
}
.site-footer__link:hover { color: #dfc683; }

/* | separator between links */
.site-footer__link + .site-footer__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(144,123,91,0.35);
}

@media (max-width: 640px) {
    .site-footer__copy { font-size: 12px; letter-spacing: 2px; }
    .site-footer__link { padding: 3px 10px; font-size: 9px; }
}