/*
 * Cinematic BattleWorld news theme.
 * This file intentionally changes presentation only: the news page structure,
 * navigation, filters, forms and server-side behavior remain in news.php/news.css.
 */

:root {
    --news-ink: #f1eee8;
    --news-muted: #a9a49a;
    --news-paper: rgba(8, 13, 17, .94);
    --news-paper-deep: rgba(4, 9, 12, .96);
    --news-line: rgba(218, 194, 145, .24);
    --news-accent: #d6b36c;
    --news-accent-dark: #82602f;
    --news-gold: #d8b875;
    --news-green: #6fa98d;
    --news-shadow: 0 24px 60px rgba(0, 0, 0, .46);
    --news-radius: 16px;
    --news-panel: linear-gradient(145deg, rgba(15, 24, 29, .96), rgba(4, 9, 13, .97));
    --news-panel-soft: linear-gradient(145deg, rgba(18, 29, 34, .87), rgba(6, 13, 17, .92));
    --news-gold-line: linear-gradient(90deg, transparent, rgba(224, 196, 137, .8), transparent);
}

/* Item-system guides: isolated article components, without changing legacy news blocks. */
.news-body .news-guide-note {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(215, 179, 99, .28);
    border-left: 3px solid #d7b363;
    border-radius: 8px;
    background: rgba(215, 179, 99, .06);
    color: #d9d1c5;
}

.news-body .news-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0 28px;
}

.news-body .news-item-card {
    min-width: 0;
    margin: 0;
    padding: 14px 12px;
    border: 1px solid rgba(197, 168, 110, .24);
    border-radius: 10px;
    background: linear-gradient(155deg, rgba(20, 28, 31, .96), rgba(9, 15, 18, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 7px 20px rgba(0, 0, 0, .16);
    text-align: center;
}

.news-body .news-item-card img {
    width: 128px;
    height: 128px;
    margin: 0 auto 10px;
    padding: 5px;
    border: 1px solid rgba(185, 154, 94, .42);
    border-radius: 8px;
    background: #fffff0;
    box-shadow: inset 0 0 0 1px rgba(62, 44, 24, .18), 0 7px 16px rgba(0, 0, 0, .28);
    object-fit: contain;
}

.news-body .news-item-card figcaption {
    margin: 0;
    color: #c7c0b6;
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
}

.news-body .news-item-card strong {
    display: block;
    margin-bottom: 5px;
    color: #f0e6d5;
    font-size: 14px;
    line-height: 1.35;
}

.news-body .news-item-card .news-item-meta {
    display: block;
    color: #b6a889;
}

.news-body .news-item-card .news-item-effect {
    display: block;
    margin-top: 6px;
    color: #d6d0c5;
}

.news-body .news-item-card .news-item-status {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    border: 1px solid rgba(110, 190, 145, .36);
    border-radius: 999px;
    color: #9fd4b3;
    font-size: 11px;
    letter-spacing: .03em;
}

.news-body .news-item-card--wide {
    grid-column: span 2;
}

@media (max-width: 720px) {
    .news-body .news-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .news-body .news-item-card,
    .news-body .news-item-card--wide {
        grid-column: auto;
        padding: 10px 8px;
    }

    .news-body .news-item-card img {
        width: min(112px, 100%);
        height: auto;
        aspect-ratio: 1;
    }
}

@media (max-width: 420px) {
    .news-body .news-item-grid {
        grid-template-columns: 1fr;
    }
}

html {
    background: #03070a;
}

body.news-shell {
    color: var(--news-ink);
    background:
        radial-gradient(circle at 12% 16%, rgba(72, 135, 146, .11), transparent 30rem),
        radial-gradient(circle at 88% 38%, rgba(190, 141, 70, .1), transparent 34rem),
        linear-gradient(180deg, #050a0d 0%, #071015 48%, #03070a 100%);
}

body.news-shell::before,
body.news-shell::after {
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(105px);
    opacity: .12;
}

body.news-shell::before {
    top: 12%;
    left: -14rem;
    background: #4d9aaa;
}

body.news-shell::after {
    right: -15rem;
    bottom: 4%;
    background: #ba8847;
}

body.news-shell :focus-visible {
    outline: 2px solid #e4c47f;
    outline-offset: 3px;
}

.news-topbar {
    min-height: 72px;
    color: #f5efe4;
    background: rgba(3, 9, 12, .92);
    border-bottom-color: rgba(220, 194, 139, .28);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
    backdrop-filter: blur(18px) saturate(120%);
}

.news-brand__mark {
    border-color: rgba(229, 204, 150, .72);
    color: #f1d796;
    background:
        radial-gradient(circle at 36% 25%, rgba(255, 238, 191, .22), transparent 28%),
        linear-gradient(145deg, #28434b, #0b171c 68%);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .035),
        inset 0 0 18px rgba(89, 171, 186, .12),
        0 0 20px rgba(216, 184, 117, .1);
}

.news-brand small {
    color: #d8b875;
}

.news-brand strong {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .015em;
}

.news-topbar__nav a,
.news-user-chip {
    border: 1px solid transparent;
    color: #c8c5be;
}

.news-topbar__nav a:hover,
.news-topbar__nav a.is-active {
    color: #fff9ea;
    border-color: rgba(215, 184, 117, .2);
    background: rgba(215, 184, 117, .08);
}

.news-topbar__nav a.is-accent {
    color: #18130a;
    border-color: #d8b875;
    background: linear-gradient(135deg, #f0daa4, #b88742);
    box-shadow: 0 6px 22px rgba(179, 131, 60, .24);
}

.news-user-chip {
    border-color: rgba(225, 199, 142, .34);
    color: #e7cf98;
    background: rgba(8, 19, 24, .58);
}

.news-hero {
    min-height: 290px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(2, 8, 11, .99) 0%, rgba(3, 10, 14, .78) 44%, rgba(3, 9, 12, .18) 73%, rgba(2, 7, 10, .08) 100%),
        linear-gradient(180deg, rgba(2, 8, 11, .02), rgba(2, 8, 11, .44)),
        url("/assets/img/news/battleworld-hall-of-chronicles-v1.webp") right center / contain no-repeat,
        linear-gradient(135deg, #071116, #02070a 76%);
    border-bottom: 1px solid rgba(222, 194, 136, .4);
    box-shadow: inset 0 -60px 75px rgba(1, 5, 7, .68);
}

.news-hero::before {
    width: 410px;
    height: 410px;
    top: -245px;
    right: 11%;
    border-color: rgba(226, 201, 147, .2);
    box-shadow: 0 0 80px rgba(86, 164, 179, .12), inset 0 0 45px rgba(255, 255, 255, .025);
}

.news-hero::after {
    width: 220px;
    height: 220px;
    right: 27%;
    bottom: -165px;
    border-color: rgba(111, 190, 202, .18);
}

.news-hero > div {
    max-width: 710px;
}

.news-hero h1 {
    max-width: 680px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -.02em;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .9);
}

.news-hero p {
    color: #c7c8c4;
    text-shadow: 0 2px 13px rgba(0, 0, 0, .85);
}

.news-eyebrow,
.news-hero .news-eyebrow {
    color: #d9bb78;
    letter-spacing: .2em;
}

.news-layout {
    margin-top: 34px;
}

.news-sidebar {
    border-color: var(--news-line);
    background: var(--news-panel);
    box-shadow: var(--news-shadow), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(18px);
}

.news-sidebar::before,
.news-card::before,
.news-article::before,
.news-comments::before,
.news-state-card::before,
.news-admin-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--news-gold-line);
    pointer-events: none;
}

.news-sidebar__title {
    color: #f2ece1;
    font-family: Georgia, "Times New Roman", serif;
}

.news-category-link {
    color: #b8b5ae;
}

.news-category-link:hover {
    color: #f6f0e5;
    background: rgba(112, 181, 191, .08);
}

.news-category-link.is-active {
    color: #fff7e4;
    border: 1px solid rgba(221, 190, 126, .42);
    background:
        linear-gradient(90deg, rgba(201, 164, 91, .2), rgba(80, 139, 148, .08)),
        rgba(8, 18, 23, .78);
    box-shadow: inset 0 0 22px rgba(216, 184, 117, .055), 0 8px 20px rgba(0, 0, 0, .24);
}

.news-category-link b {
    color: #d6d2ca;
    background: rgba(255, 255, 255, .055);
}

.news-category-link.is-active b {
    color: #f5da9e;
    background: rgba(216, 184, 117, .13);
}

.news-sidebar__note {
    color: #ded8cd;
    border: 1px solid rgba(213, 184, 122, .18);
    background:
        radial-gradient(circle at 85% 15%, rgba(209, 175, 108, .09), transparent 45%),
        rgba(3, 10, 14, .74);
}

.news-sidebar__note span {
    color: #979b98;
}

.news-feed-heading h2,
.news-comments__heading h2,
.news-section-heading h1,
.news-section-heading h2 {
    color: #f6f1e8;
    font-family: Georgia, "Times New Roman", serif;
}

.news-feed-heading > span,
.news-comments__heading > span {
    color: var(--news-muted);
}

.news-card,
.news-article,
.news-comments,
.news-state-card,
.news-admin-card {
    position: relative;
    border-color: var(--news-line);
    background: var(--news-panel);
    box-shadow: var(--news-shadow), inset 0 1px rgba(255, 255, 255, .03);
}

.news-card::after {
    background: linear-gradient(135deg, rgba(218, 184, 117, .44), transparent 42%, rgba(91, 175, 188, .3));
}

.news-card:hover {
    border-color: rgba(224, 194, 132, .42);
    box-shadow: 0 28px 68px rgba(0, 0, 0, .56), 0 0 24px rgba(83, 157, 168, .07);
}

.news-card__image {
    position: relative;
    background: #050b0e;
}

.news-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(3, 8, 11, .74));
    pointer-events: none;
}

.news-card__image.is-placeholder {
    color: #eee3ca;
    background:
        radial-gradient(circle at 50% 36%, rgba(97, 184, 195, .18), transparent 22%),
        radial-gradient(circle at 32% 24%, rgba(214, 178, 108, .13), transparent 36%),
        linear-gradient(145deg, #17272d, #050b0e 72%);
}

.news-card__image.is-placeholder::after {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, .025) 50%, transparent 70%),
        linear-gradient(180deg, transparent 45%, rgba(2, 6, 8, .62));
}

.news-card__image.is-placeholder span {
    position: relative;
    z-index: 1;
    border-color: rgba(224, 195, 134, .48);
    background: rgba(2, 9, 12, .32);
    box-shadow: 0 0 38px rgba(87, 172, 186, .13), inset 0 0 24px rgba(220, 191, 129, .045);
}

.news-card__image.is-placeholder svg {
    stroke: #ead39b;
}

.news-card__meta {
    color: #888e8d;
}

.news-card__meta span,
.news-card__more,
.news-card h3 a:hover {
    color: #d8b875;
}

.news-card h3 {
    color: #f4f0e9;
    font-family: Georgia, "Times New Roman", serif;
}

.news-card p {
    color: #aaa9a4;
}

.news-card__more:hover {
    color: #f0d69a;
}

.news-pagination a {
    color: #bcb9b1;
    border-color: var(--news-line);
    background: rgba(7, 14, 18, .9);
}

.news-pagination a:hover,
.news-pagination a.is-current {
    color: #171208;
    border-color: #d8b875;
    background: linear-gradient(135deg, #f0d99f, #b88642);
}

.news-back-link,
.news-article__meta,
.news-comment__meta,
.news-comment-form small,
.news-muted {
    color: var(--news-muted);
}

.news-back-link:hover,
.news-body a {
    color: #dfbf7a;
}

.news-category-badge {
    color: #171209;
    background: linear-gradient(135deg, #efd89f, #b88540);
    box-shadow: 0 7px 22px rgba(181, 133, 62, .18), inset 0 1px rgba(255, 255, 255, .4);
}

.news-article > h1 {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
}

.news-article__cover {
    border: 1px solid rgba(223, 193, 132, .26);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.news-body {
    color: #cbc8c1;
}

.news-body h2,
.news-body h3,
.news-body h4 {
    color: #f4efe6;
    font-family: Georgia, "Times New Roman", serif;
}

.news-body blockquote {
    color: #c9c1b3;
    border-left-color: #d8b875;
    background: rgba(216, 184, 117, .07);
}

.news-body th,
.news-body td {
    border-color: rgba(218, 194, 145, .22);
}

.news-body th {
    color: #f0e6d3;
    background: rgba(216, 184, 117, .09);
}

.news-comments__heading {
    border-bottom-color: var(--news-line);
}

.news-comments__heading > span {
    color: #171209;
    background: linear-gradient(135deg, #efd89f, #b88540);
}

.news-comments-locked {
    border-color: rgba(216, 184, 117, .25);
    background: rgba(8, 18, 23, .68);
}

.news-comments-locked__icon {
    color: #e3c47e;
    background: rgba(216, 184, 117, .1);
}

.news-comments-locked__icon svg {
    stroke: #d9bb78;
}

.news-comment {
    border-bottom-color: rgba(218, 194, 145, .13);
}

.news-comment__avatar {
    color: #f2d694;
    border: 1px solid rgba(216, 184, 117, .32);
    background: linear-gradient(145deg, #203941, #091318);
}

.news-comment__meta strong {
    color: #f1ede5;
}

.news-comment__meta small {
    color: #d8b875;
}

.news-comment-form {
    border: 1px solid rgba(218, 194, 145, .16);
    background: rgba(4, 11, 15, .66);
}

.news-comment-form textarea,
.news-field input[type="text"],
.news-field input[type="file"],
.news-field textarea,
.news-field select {
    color: #eeeae2;
    border-color: rgba(218, 194, 145, .23);
    background: rgba(2, 8, 11, .76);
}

.news-comment-form textarea:focus,
.news-field input:focus,
.news-field textarea:focus,
.news-field select:focus {
    border-color: #d6b36c;
    box-shadow: 0 0 0 3px rgba(214, 179, 108, .11);
}

.news-button.is-primary {
    color: #181209;
    border-color: #d6b36c;
    background: linear-gradient(135deg, #f0d99f, #b88642);
    box-shadow: 0 6px 18px rgba(177, 129, 59, .2);
}

.news-button.is-primary:hover {
    box-shadow: 0 9px 26px rgba(197, 150, 75, .3), 0 0 18px rgba(222, 194, 135, .12);
}

.news-button.is-ghost {
    color: #d5d0c6;
    border-color: rgba(218, 194, 145, .24);
    background: rgba(8, 17, 21, .82);
}

.news-button.is-ghost:hover {
    color: #efd596;
    border-color: #cfae69;
}

.news-alert.is-success,
.news-toast.is-success {
    color: #b9e0cb;
    border-color: rgba(93, 174, 131, .4);
    background: rgba(24, 76, 49, .55);
}

.news-alert.is-error,
.news-toast.is-error {
    color: #f0bbb5;
    border-color: rgba(207, 91, 80, .4);
    background: rgba(91, 27, 24, .58);
}

.news-state-card code {
    color: #e6d6b5;
    background: rgba(216, 184, 117, .09);
}

.news-footer {
    color: #949690;
    border-top: 1px solid rgba(218, 194, 145, .18);
    background: rgba(2, 7, 10, .96);
}

.news-footer a {
    color: #d9bd7f;
}

/* The administration uses the same shell, while its editable article surface stays neutral. */
.news-field > span {
    color: #d1ccc2;
}

.news-cover-current {
    border: 1px solid rgba(218, 194, 145, .16);
    background: rgba(5, 13, 17, .72);
}

.news-publish-row,
.news-admin-list__item {
    border-color: rgba(218, 194, 145, .15);
}

.news-editor {
    border-color: rgba(218, 194, 145, .28);
    background: #fff;
}

.news-editor__toolbar {
    border-bottom-color: #baa989;
    background: linear-gradient(#ede5d7, #d8cbb8);
}

.news-admin-list__meta,
.news-editor__status {
    color: #98978f;
}

.news-editor__status {
    background: rgba(5, 12, 16, .9);
}

.news-admin-list__actions a,
.news-link-button {
    color: #ddbd79;
}

.news-status.is-live {
    color: #b7dfc7;
    background: rgba(40, 107, 70, .42);
}

.news-status.is-draft {
    color: #e4d5aa;
    background: rgba(120, 93, 37, .4);
}

.news-modal__backdrop {
    background: rgba(1, 5, 7, .82);
    backdrop-filter: blur(7px);
}

.news-modal__close {
    color: #171209;
    border: 1px solid #dfc17d;
    background: linear-gradient(135deg, #efd89f, #b88540);
}

@media (max-width: 820px) {
    .news-hero {
        background:
            linear-gradient(90deg, rgba(2, 8, 11, .96), rgba(3, 10, 14, .16)),
            linear-gradient(180deg, rgba(2, 8, 11, .02), rgba(2, 8, 11, .46)),
            url("/assets/img/news/battleworld-hall-of-chronicles-v1.webp") right center / contain no-repeat,
            linear-gradient(135deg, #071116, #02070a 76%);
    }

    .news-sidebar {
        background: rgba(6, 14, 18, .94);
    }
}

@media (max-width: 560px) {
    .news-hero {
        min-height: 230px;
    }

    .news-card__content {
        padding: 18px 17px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.news-shell::before,
    body.news-shell::after,
    .news-brand__mark {
        animation: none;
    }
}