/* DARK2 × SAYA
   Purchased Saya presentation layer integrated with the existing DARK2 portal.
   The application and security styles remain in dark2-chronicle.css; this file
   owns the public shell, visual identity and responsive composition. */

@font-face {
    font-family: "Saya Friz";
    src: url("/assets/saya-friz.ttf") format("truetype");
    font-display: swap;
}

:root {
    --saya-ink: #141619;
    --saya-ink-soft: #1f2226;
    --saya-line: #343638;
    --saya-gold: #d99030;
    --saya-gold-bright: #f2c666;
    --saya-cream: #fff6db;
    --saya-muted: #b9b6ad;
    --saya-shadow: 0 16px 38px rgba(0, 0, 0, .35);
    --saya-shell-max: 1760px;
    --saya-sidebar-max: 260px;
}

html {
    background: #1a1c20;
}

body.saya-theme {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    color: #f4f1e8;
    background:
        url("/assets/saya-fon-top.jpg") center top / 1920px auto no-repeat,
        url("/assets/saya-fon-bottom.jpg") center bottom / 100% auto no-repeat,
        #1a1c20;
    font-family: "Saya Friz", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

body.saya-theme::before,
body.saya-theme::after {
    display: none !important;
}

.saya-top-panel {
    position: relative;
    z-index: 100;
    min-height: 80px;
}

.saya-top-inner {
    width: min(var(--saya-shell-max), calc(100% - 32px));
    min-height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.saya-mini-brand {
    display: inline-flex;
    width: 112px;
    flex: 0 0 112px;
    align-items: center;
}

.saya-mini-brand img {
    width: 112px;
    height: auto;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .28));
}

.saya-nav {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.saya-nav > a:not(.saya-account-link) {
    position: relative;
    display: inline-flex;
    min-height: 79px;
    padding: 0 17px;
    align-items: center;
    color: #1a1c20;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.saya-nav > a:not(.saya-account-link)::after {
    position: absolute;
    right: 17px;
    bottom: 18px;
    left: 17px;
    height: 2px;
    content: "";
    background: var(--saya-gold);
    opacity: 0;
    transform: scaleX(.25);
    transition: opacity .2s ease, transform .2s ease;
}

.saya-nav > a:hover,
.saya-nav > a.active {
    color: #b86b10;
}

.saya-nav > a:hover::after,
.saya-nav > a.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.saya-account-link {
    display: inline-flex;
    min-height: 42px;
    margin-left: 12px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    color: #17130d;
    background: linear-gradient(135deg, #d88a24, #f2c666);
    box-shadow: 0 5px 13px rgba(110, 69, 15, .3);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.saya-account-link:hover {
    color: #000;
    filter: brightness(1.12);
}

.saya-nav .language-toggle {
    min-width: 55px;
    margin-left: 12px;
    color: #2b2114;
    border-color: rgba(50, 35, 18, .25);
    background: rgba(255, 255, 255, .32);
}

.saya-top-panel .nav-toggle {
    display: none;
}

.saya-wrapper {
    width: min(var(--saya-shell-max), calc(100% - 24px));
    margin: 0 auto;
    position: relative;
}

.saya-header {
    position: relative;
    min-height: 590px;
}

.saya-main-logo {
    position: absolute;
    top: 115px;
    left: 4%;
    width: min(430px, 40vw);
}

.saya-main-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .25));
    transition: filter .2s ease, transform .2s ease;
}

.saya-main-logo:hover img {
    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .32)) brightness(1.08);
    transform: translateY(-2px);
}

.saya-server-status {
    position: absolute;
    top: 320px;
    left: 11%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 210px;
    height: 210px;
    min-height: 0;
    padding: 0 20px;
    color: var(--saya-cream);
    background: url("/assets/saya-server-icon.png") center top / 200px 210px no-repeat;
    text-align: center;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .28));
}

.saya-server-status strong {
    display: block;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}

.saya-server-status span {
    display: block;
    margin-top: 8px;
    color: #f4f4f4;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .12em;
    white-space: nowrap;
    text-transform: uppercase;
}

.saya-server-status.online span {
    color: #e7bd65;
}

.saya-server-status.offline span {
    color: #d4776e;
}

.saya-theme .maintenance-ribbon {
    width: min(1280px, calc(100% - 24px));
    margin: -45px auto 24px;
    border: 1px solid rgba(217, 144, 48, .45);
    background: rgba(20, 22, 25, .96);
    box-shadow: var(--saya-shadow);
}

.saya-grid {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(220px, var(--saya-sidebar-max)) minmax(0, 1fr) minmax(220px, var(--saya-sidebar-max));
    gap: 20px;
    align-items: start;
    padding-bottom: 70px;
}

.saya-main {
    min-width: 0;
    min-height: 520px;
    padding: 34px;
    border-bottom: 4px solid var(--saya-line);
    background: rgba(20, 22, 25, .98);
    box-shadow: var(--saya-shadow);
}

.saya-sidebar {
    min-width: 0;
}

.saya-widget {
    margin-bottom: 28px;
    color: #fff;
    background: #141619 url("/assets/saya-widget-bg.jpg") center bottom / cover no-repeat;
    border-bottom: 4px solid var(--saya-line);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.saya-widget-title {
    padding: 18px 20px;
    color: #fff;
    border-bottom: 4px solid var(--saya-line);
    background: url("/assets/saya-widget-title-bg.jpg") center / 100% 100% no-repeat;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.saya-widget-content {
    padding: 20px;
}

.saya-widget-kicker {
    display: block;
    margin: 0 0 18px;
    color: var(--saya-gold);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.saya-login-form {
    display: grid;
    gap: 14px;
}

.saya-login-form label {
    display: block;
    color: #d9d9d7;
    font-size: 12px;
}

.saya-login-form input {
    width: 100%;
    min-height: 46px;
    margin-top: 5px;
    padding: 11px 12px 11px 42px;
    color: #fff;
    border: 1px solid #303338;
    border-radius: 0;
    background-color: #1f2226;
    background-position: 16px center;
    background-repeat: no-repeat;
    font: 500 13px/1.2 "Segoe UI", Arial, sans-serif;
}

.saya-login-form input[name="login"] {
    background-image: url("/assets/saya-user-icon.png");
}

.saya-login-form input[name="password"] {
    background-image: url("/assets/saya-pass-icon.png");
}

.saya-login-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.saya-login-links a {
    color: #c68a3d;
}

.saya-login-form .button,
.saya-widget .button {
    width: 100%;
}

.saya-account-summary {
    text-align: center;
}

.saya-account-summary strong {
    display: block;
    margin-bottom: 6px;
    color: var(--saya-gold-bright);
    font-size: 20px;
}

.saya-account-summary p {
    margin: 0 0 16px;
    color: #ccc;
    font-size: 12px;
}

.saya-mini-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: "Segoe UI", Arial, sans-serif;
}

.saya-mini-table th,
.saya-mini-table td {
    padding: 9px 5px;
    color: #eee;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 11px;
    text-align: left;
}

.saya-mini-table th {
    color: #8d704c;
    font-weight: 600;
}

.saya-mini-table td:first-child,
.saya-mini-table th:first-child {
    width: 26px;
    color: var(--saya-gold);
    text-align: center;
}

.saya-mini-table td:last-child,
.saya-mini-table th:last-child {
    text-align: right;
}

.saya-widget-empty {
    margin: 0;
    color: #aaa;
    font-size: 12px;
    text-align: center;
}

.saya-stat-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.saya-stat-list li {
    display: flex;
    padding: 10px 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #dededc;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font: 500 12px/1.4 "Segoe UI", Arial, sans-serif;
}

.saya-stat-list strong {
    color: var(--saya-gold);
    font-weight: 700;
    text-align: right;
}

body.saya-theme .button,
body.saya-theme button.button {
    display: inline-flex;
    width: auto;
    min-width: 120px;
    min-height: 44px;
    padding: 10px 18px;
    align-items: center;
    justify-content: center;
    color: #17130c;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #d88a24 0%, #f2c666 100%);
    box-shadow: 0 5px 9px rgba(0, 0, 0, .45);
    font-family: "Saya Friz", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

body.saya-theme .button:hover,
body.saya-theme button.button:hover {
    color: #000;
    filter: brightness(1.18);
    transform: translateY(-1px);
}

body.saya-theme .button.ghost,
body.saya-theme .button.discord,
body.saya-theme .button.danger {
    color: #f1dfbd;
    border: 1px solid rgba(217, 144, 48, .5);
    background: #22252a;
}

body.saya-theme input,
body.saya-theme textarea,
body.saya-theme select {
    color: #fff;
    border: 1px solid #343638;
    border-radius: 0;
    background-color: #1f2226;
}

.saya-home-hero {
    position: relative;
    min-height: 290px;
    margin: -34px -34px 32px;
    overflow: hidden;
    display: flex;
    padding: 38px;
    align-items: flex-end;
    background:
        linear-gradient(0deg, rgba(10, 11, 13, .94), rgba(10, 11, 13, .08) 76%),
        url("/assets/saya-slider-img.jpg") center / cover no-repeat;
    box-shadow: 0 9px 14px rgba(0, 0, 0, .35);
}

.saya-home-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(242, 198, 102, .16);
    pointer-events: none;
}

.saya-home-hero-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.saya-home-hero small {
    display: block;
    margin-bottom: 7px;
    color: var(--saya-gold-bright);
    font: 700 11px/1.4 "Segoe UI", Arial, sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.saya-home-hero h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.05;
    text-shadow: 0 4px 12px #000;
}

.saya-home-hero p {
    max-width: 520px;
    margin: 0 0 20px;
    color: #f5eedf;
    font: 500 14px/1.6 "Segoe UI", Arial, sans-serif;
    text-shadow: 0 2px 6px #000;
}

.saya-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.saya-section-title {
    display: flex;
    margin: 0 0 24px;
    padding: 0 0 20px;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    border-bottom: 2px solid var(--saya-line);
}

.saya-section-title span {
    font: 700 15px/1.2 "Segoe UI", Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.saya-section-title a {
    color: var(--saya-gold);
    font-size: 12px;
}

.saya-feature-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 30px;
}

.saya-feature-strip article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #303338;
    background: #1f2226;
    text-align: center;
}

.saya-feature-strip small {
    display: block;
    color: #918574;
    font: 700 10px/1.3 "Segoe UI", Arial, sans-serif;
    letter-spacing: .1em;
}

.saya-feature-strip strong {
    display: block;
    margin-top: 5px;
    color: var(--saya-gold-bright);
    font-size: 18px;
    font-weight: 500;
}

.saya-home-news {
    display: grid;
    gap: 12px;
}

.saya-home-news .news-card {
    min-height: 0;
    padding: 18px;
    border: 0;
    border-left: 3px solid var(--saya-gold);
    background: #1f2226;
}

.saya-home-news .news-card h3 {
    margin: 4px 0 7px;
    color: #fff;
    font-size: 17px;
}

.saya-home-news .news-card p {
    margin: 0;
    color: #c8c8c4;
    font-size: 13px;
}

.saya-theme .page-hero,
.saya-theme .simple-page,
.saya-theme .form-layout,
.saya-theme .account-hero,
.saya-theme .presentation-intro {
    border-color: rgba(217, 144, 48, .26);
    background-color: #17191d;
}

.saya-theme .page-hero h1,
.saya-theme .simple-page h1,
.saya-theme .form-intro h1,
.saya-theme .account-hero h1,
.saya-theme .presentation-intro h1 {
    color: #f4ead6;
}

.saya-theme .eyebrow,
.saya-theme .kicker {
    color: var(--saya-gold);
}

.saya-theme .portal-card,
.saya-theme .form-card,
.saya-theme .settings-card,
.saya-theme .account-panel,
.saya-theme .admin-card,
.saya-theme .wiki-card,
.saya-theme .shop-feature,
.saya-theme .download-card,
.saya-theme .requirements article,
.saya-theme .ranking-live,
.saya-theme .status-board,
.saya-theme .notice,
.saya-theme .event-panel {
    border-color: #343638;
    border-radius: 0;
    background: #1a1c20;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.saya-theme .ranking-row,
.saya-theme .character-card,
.saya-theme .journey-road article,
.saya-theme .patchnote-timeline article {
    border-color: rgba(217, 144, 48, .18);
    background: #1f2226;
}

.saya-theme .text-link,
.saya-theme .ranking-tabs .active,
.saya-theme .wiki-filters .active {
    color: var(--saya-gold-bright);
}

.saya-theme .presentation-frame img {
    width: 100%;
}

.saya-footer {
    padding: 0;
    color: #ddd;
    background: rgba(26, 28, 32, .98);
}

.saya-social {
    padding: 42px 20px 32px;
    text-align: center;
}

.saya-social h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    text-shadow: 0 2px 6px #000;
}

.saya-social .button {
    min-width: 210px;
}

.saya-footer-menu {
    display: flex;
    margin: 0;
    padding: 15px 24px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 32px;
    border-bottom: 1px solid #3b3d42;
    background: #212428;
    list-style: none;
}

.saya-footer-menu a {
    color: #fff;
    font: 500 12px/1.3 "Segoe UI", Arial, sans-serif;
}

.saya-footer-menu a:hover {
    color: var(--saya-gold);
}

.saya-footer-end {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    padding: 28px 0;
    align-items: center;
    font: 500 11px/1.6 "Segoe UI", Arial, sans-serif;
}

.saya-footer-credits {
    color: #969696;
    text-align: right;
}

.saya-footer-verification {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.saya-footer-verification img {
    max-height: 48px;
    width: auto;
}

.saya-theme .back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 0;
    background: #27292c url("/assets/saya-arrow-up.png") center 13px no-repeat;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .35);
    font-size: 0;
    opacity: .82;
}

.saya-theme .back-to-top span {
    display: none;
}

.saya-theme .back-to-top:hover {
    opacity: 1;
}

body[data-route="/vorstellung"] .saya-grid,
body[data-route="/wiki"] .saya-grid,
body[data-route="/konto"] .saya-grid,
body[data-route="/admin"] .saya-grid {
    grid-template-columns: 1fr;
}

body[data-route="/vorstellung"] .saya-sidebar,
body[data-route="/wiki"] .saya-sidebar,
body[data-route="/konto"] .saya-sidebar,
body[data-route="/admin"] .saya-sidebar {
    display: none;
}

body[data-route="/vorstellung"] .saya-main,
body[data-route="/wiki"] .saya-main,
body[data-route="/konto"] .saya-main,
body[data-route="/admin"] .saya-main {
    width: min(1480px, 100%);
    margin: 0 auto;
}

@media (max-width: 1220px) {
    .saya-top-inner {
        width: min(1120px, calc(100% - 28px));
    }

    .saya-nav > a:not(.saya-account-link) {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 13px;
    }

    .saya-grid {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .saya-sidebar.right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 900px) {
    body.saya-theme {
        background-image:
            url("/assets/saya-fon-top-mobile.jpg"),
            url("/assets/saya-fon-bottom.jpg");
        background-position: center top, center bottom;
        background-size: 100% auto, 100% auto;
        background-repeat: no-repeat;
    }

    .saya-top-panel {
        min-height: 64px;
    }

    .saya-top-inner {
        min-height: 64px;
        justify-content: space-between;
    }

    .saya-mini-brand {
        width: 100px;
        flex-basis: 100px;
    }

    .saya-mini-brand img {
        width: 100px;
    }

    .saya-top-panel .nav-toggle {
        position: relative;
        z-index: 120;
        display: grid;
        width: 45px;
        min-width: 45px;
        height: 45px;
        min-height: 45px;
        padding: 10px;
        gap: 5px;
        align-content: center;
        border: 1px solid rgba(40, 30, 18, .28);
        background: rgba(26, 28, 32, .88);
        box-shadow: none;
    }

    .saya-top-panel .nav-toggle span {
        display: block;
        width: 25px;
        height: 2px;
        background: #f2c666;
    }

    .saya-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 110;
        width: min(340px, 86vw);
        padding: 90px 24px 30px;
        display: flex;
        overflow-y: auto;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        background: rgba(15, 16, 19, .98);
        box-shadow: 15px 0 40px rgba(0, 0, 0, .35);
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

    .saya-nav.open {
        transform: translateX(0);
    }

    .saya-nav > a:not(.saya-account-link) {
        min-height: 52px;
        padding: 0 10px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        font-size: 15px;
    }

    .saya-nav > a:not(.saya-account-link)::after {
        display: none;
    }

    .saya-account-link {
        margin: 18px 0 0;
    }

    .saya-nav .language-toggle {
        margin: 18px 0 0;
        color: #fff;
        background: #24262a;
    }

    .saya-wrapper {
        width: min(100% - 20px, 760px);
    }

    .saya-header {
        min-height: 440px;
    }

    .saya-main-logo {
        top: 165px;
        left: 3%;
        width: min(330px, 62vw);
    }

    .saya-server-status {
        top: 270px;
        left: 9%;
        transform: scale(.78);
        transform-origin: top left;
    }

    .saya-grid {
        grid-template-columns: 1fr;
    }

    .saya-main {
        grid-row: 1;
    }

    .saya-sidebar.left {
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .saya-sidebar.right {
        grid-row: 3;
    }
}

@media (max-width: 620px) {
    .saya-header {
        min-height: 390px;
    }

    .saya-main-logo {
        top: 175px;
        width: min(280px, 72vw);
    }

    .saya-server-status {
        top: 275px;
        left: 4%;
        transform: scale(.62);
    }

    .saya-theme .maintenance-ribbon {
        margin-top: -20px;
    }

    .saya-main {
        padding: 18px;
    }

    .saya-home-hero {
        min-height: 310px;
        margin: -18px -18px 26px;
        padding: 24px 20px;
    }

    .saya-feature-strip {
        grid-template-columns: 1fr;
    }

    .saya-sidebar.left,
    .saya-sidebar.right {
        display: block;
    }

    .saya-footer-end {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .saya-footer-credits {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saya-main-logo img,
    .saya-nav,
    .saya-nav a,
    .saya-theme .button {
        transition: none !important;
    }
}