/*
    Novus Astra / Conflict of Darkness - Gothic Website Skin
    Drop-in replacement for maincss.css

    Recommended image path:
    /images/misc/gothic-bg.png

    Optional:
    If your header currently uses the parchment scroll image, this CSS hides it
    and replaces it with a dark stone/bronze title plaque using pure CSS.
*/

:root {
    --bg-black: #040404;
    --panel-black: rgba(5, 5, 5, 0.88);
    --panel-black-heavy: rgba(0, 0, 0, 0.94);
    --panel-brown: rgba(20, 12, 8, 0.92);
    --bronze-dark: #3b2413;
    --bronze: #8a5f2f;
    --bronze-light: #c49a55;
    --gold: #d7b46a;
    --gold-light: #f0d996;
    --ivory: #e8dfcf;
    --muted: #b8aa91;
    --blood: #7d1111;
    --blood-bright: #b31313;
    --shadow: rgba(0, 0, 0, 0.82);
}

* {
    box-sizing: border-box;
    scrollbar-color: var(--bronze) #090909;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background-color: var(--bg-black);
    background-image:
        radial-gradient(circle at top center, rgba(96, 24, 24, 0.14), transparent 36%),
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.56)),
        url("/images/misc/background.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--ivory);
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 1px 2px #000;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.72), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.72)),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent 38%, rgba(0, 0, 0, 0.72));
    z-index: -1;
}

/* Links */
a,
a:link,
a:visited,
a:active {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.18s ease, text-shadow 0.18s ease, background 0.18s ease;
}

a:hover {
    color: var(--gold-light);
    text-shadow: 0 0 8px rgba(179, 19, 19, 0.85), 0 0 3px #000;
}

/* Header / Logo Area */
.header {
    position: relative;
    min-height: 205px;
    margin: 0 0 34px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Hide old parchment/scroll logo image if it exists inside the header */
.header img {
    display: none !important;
}

.header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 230px;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.85)),
        radial-gradient(circle at center, rgba(90, 28, 20, 0.18), transparent 55%);
    border-bottom: 1px solid rgba(196, 154, 85, 0.28);
    box-shadow: inset 0 -45px 60px rgba(0, 0, 0, 0.82);
    z-index: 0;
}

.header::after {
    content: "Novus Astra";
    position: relative;
    z-index: 1;
    display: block;
    min-width: min(680px, 78vw);
    padding: 26px 58px 30px;
    margin-top: 22px;
    text-align: center;
    font-size: clamp(42px, 5.2vw, 86px);
    line-height: 1;
    letter-spacing: 0.04em;
    color: #b87942;
    text-shadow:
        0 2px 0 #170b06,
        0 -1px 0 #f2cf93,
        0 0 14px rgba(0, 0, 0, 0.92),
        0 0 22px rgba(125, 17, 17, 0.35);
    background:
        linear-gradient(to bottom, rgba(45, 31, 22, 0.96), rgba(8, 8, 8, 0.96)),
        radial-gradient(circle at top, rgba(196, 154, 85, 0.2), transparent 58%);
    border: 2px solid var(--bronze);
    outline: 1px solid rgba(0,0,0,.95);
    box-shadow:
        inset 0 0 0 1px rgba(220, 174, 93, 0.24),
        inset 0 0 36px rgba(0,0,0,.85),
        0 0 0 3px rgba(0,0,0,.5),
        0 18px 38px rgba(0,0,0,.78);
    clip-path: polygon(4% 0, 96% 0, 100% 18%, 100% 82%, 96% 100%, 4% 100%, 0 82%, 0 18%);
}

/* Shared Panel Skin */
.leftpanel,
.centerpanel,
.rightpanel,
.forumcenterpanel,
.postpanel,
.userinfo,
.replybox,
.categorybox,
.datetimebox,
.content,
.caption-container {
    background: linear-gradient(to bottom, rgba(18, 13, 10, 0.93), rgba(3, 3, 3, 0.93));
    color: var(--ivory);
    border: 2px solid var(--bronze);
    outline: 1px solid rgba(0, 0, 0, 0.95);
    box-shadow:
        inset 0 0 0 1px rgba(226, 176, 92, 0.15),
        inset 0 0 26px rgba(0, 0, 0, 0.88),
        0 8px 24px var(--shadow);
}

.leftpanel {
    float: left;
    width: 13%;
    padding: 10px;
    margin-left: 30px;
}

.centerpanel {
    float: left;
    width: 70%;
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 125px;
}

.rightpanel {
    float: left;
    width: 13%;
    padding: 10px;
    margin-left: 10px;
}

.leftpaneltitle,
.centerpaneltitle,
.rightpaneltitle,
.forumcenterpaneltitle,
.forumtitle,
.dateandtimestamp {
    background:
        linear-gradient(to right, rgba(10, 6, 4, 0.98), rgba(52, 31, 17, 0.95), rgba(10, 6, 4, 0.98));
    border: 1px solid var(--bronze-light);
    color: var(--gold-light);
    padding: 3px 8px;
    font-weight: bold;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 12px rgba(0,0,0,.85);
}

.newstitle {
    float: left;
    font-size: 18px;
    color: var(--gold-light);
    font-weight: bold;
}

.timestamp {
    float: right;
    font-size: 18px;
    color: var(--gold);
    font-weight: bold;
}

.newsbody {
    font-size: 14px;
    text-align: left;
    line-height: 1.45;
    color: var(--ivory);
}

/* Navigation */
.navul {
    list-style-type: none;
    margin: 12px 0 0;
    padding: 6px 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(196, 154, 85, 0.45);
}

.navli {
    position: relative;
    text-align: center;
    border-bottom: 1px solid rgba(196, 154, 85, 0.16);
}

.navli:last-child {
    border-bottom: none;
}

.navli::before {
    content: "✦";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blood-bright);
    font-size: 10px;
    opacity: 0.85;
    text-shadow: 0 0 6px rgba(179, 19, 19, 0.85);
}

.navli a {
    display: block;
    color: var(--ivory);
    padding: 9px 16px;
    text-decoration: none;
}

.navli a.active,
.active,
.collapsible:hover {
    background: linear-gradient(to right, rgba(80, 12, 12, 0.72), rgba(20, 10, 8, 0.88));
    color: var(--gold-light);
}

.navli a:hover:not(.active) {
    background: linear-gradient(to right, rgba(62, 11, 11, 0.64), rgba(12, 8, 6, 0.86));
    color: var(--gold-light);
}

/* Footer */
footer.footer {
    box-sizing: content-box !important;
}

footer.container {
    text-align: center;
}

.footer {
    background: linear-gradient(to bottom, rgba(7, 7, 7, 0.98), rgba(0, 0, 0, 0.98));
    grid-area: footer;
    text-align: center;
    position: fixed;
    float: left;
    bottom: 0;
    border-top: 2px solid var(--bronze);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    height: 75px;
    color: var(--ivory);
    box-shadow: 0 -8px 24px rgba(0,0,0,.78), inset 0 1px 0 rgba(220,174,93,.22);
}

.links {
    position: absolute;
    left: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.visitors {
    font-size: 10px;
    color: var(--muted);
}

.soc-btns {
    position: absolute;
    right: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Buttons / Collapsibles */
.button {
    background: linear-gradient(to bottom, #352113, #0b0b0b);
    border: 1px solid var(--bronze-light);
    color: var(--gold-light);
    padding: 10px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 12px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6);
}

.button:hover {
    background: linear-gradient(to bottom, #4a0f0f, #100908);
}

.collapsible {
    background: linear-gradient(to bottom, rgba(45, 31, 22, 0.96), rgba(8, 8, 8, 0.96));
    color: var(--gold-light);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 1px solid var(--bronze);
    text-align: left;
    outline: none;
    font-size: 15px;
}

/* Gallery */
.gallerycontainer {
    position: relative;
}

.mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: var(--gold-light);
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0,0,0,.35);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
    text-align: center;
    padding: 2px 16px;
}

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

/* Alerts */
.alertred,
.alertyellow,
.alertgreen {
    padding: 20px;
    border: 1px solid rgba(240, 217, 150, 0.4);
    box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}

.alertred {
    background: #4b1111;
    color: #ffd9d9;
}

.alertyellow {
    background: #554410;
    color: #fff2b0;
}

.alertgreen {
    background: #143b19;
    color: #d7ffd8;
}

/* Forum / Category Areas */
.forumuserdisplay {
    float: left;
    display: block;
    border-style: solid;
    border-color: var(--bronze);
}

.forumcontentdisplay {
    float: right;
    display: block;
    border-style: solid;
    border-color: var(--bronze);
}

.newthread {
    float: left;
}

.staffoptions {
    float: right;
}

.categoryheader a {
    color: var(--gold-light);
}

.categorycontent {
    text-align: left;
}

.categorybox {
    text-align: left;
}

.categorybox a {
    color: var(--ivory);
    text-align: left;
}

.categorybox:hover {
    color: var(--ivory);
    text-align: left;
    background: rgba(68, 17, 13, 0.68);
}

.threadcount {
    text-align: right;
}

.categorylastpostcontent {
    float: left;
    top: 0;
    left: 0;
    font-size: 14px;
}

.categorylastpostcontent a {
    color: var(--gold-light);
}

.categorycontenttimestamp {
    float: right;
    bottom: 0;
    right: 0;
    font-size: 12px;
    color: var(--muted);
}

.datetimebox {
    width: 100%;
    height: 50px;
}

.replybox {
    padding: 20px;
    float: left;
    width: 100%;
}

.forumcenterpanel {
    float: center;
    width: 100%;
    padding: 5px;
}

.postpanel {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 5px;
}

.userinfo {
    width: 20%;
    height: auto;
    float: left;
    padding: 1px;
}

.postinfo {
    width: 80%;
    padding: 5px;
    float: right;
    color: var(--ivory);
}

/* Cards / Status */
.row:after,
.row::after,
.cardrow:after,
.cardcontainer::after,
.cardrow::after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 16.66%;
}

.card {
    box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.7);
    background: rgba(0,0,0,.55);
    border: 1px solid var(--bronze);
}

.cardcontainer {
    padding: 5px 16px;
    width: 100%;
    background:
        linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.55)),
        url("../images/misc/status.jpg");
    color: var(--ivory);
}

.cardcolumn {
    float: left;
    width: 20%;
    margin-bottom: 16px;
    padding: 5px 8px;
}

/* Images inside content should not break dark layout */
img {
    max-width: 100%;
}

/* Selection color */
::selection {
    background: var(--blood);
    color: #fff;
}

/* Mobile */
@media screen and (max-width: 800px) {
    .header {
        min-height: 150px;
        margin-bottom: 16px;
    }

    .header::after {
        min-width: 88vw;
        padding: 20px 26px 22px;
    }

    .leftpanel,
    .centerpanel,
    .rightpanel {
        width: calc(100% - 20px);
        margin: 10px;
        float: none;
    }

    .footer {
        position: relative;
        height: auto;
        padding: 14px 10px;
    }

    .links,
    .soc-btns {
        position: static;
        justify-content: center;
        margin: 8px auto;
    }
}