/*
 * WoK 3D player-facing theme
 * Shared by every page rendered through layouts.app.
 */
:root {
    --wok-bg: #070706;
    --wok-panel: rgba(12, 12, 10, .92);
    --wok-panel-soft: rgba(23, 21, 16, .82);
    --wok-panel-deep: rgba(5, 5, 4, .96);
    --wok-gold: #d7bd72;
    --wok-gold-bright: #fff0b4;
    --wok-gold-dark: #74551d;
    --wok-bronze: #9a6126;
    --wok-red: #a53825;
    --wok-green: #5c8f5b;
    --wok-text: #f4f0e4;
    --wok-muted: #aaa493;
    --wok-line: rgba(215, 189, 114, .28);
    --wok-line-strong: rgba(255, 224, 139, .52);
    --wok-look-x: 0;
    --wok-look-y: 0;
    --wok-header-height: 82px;
    --wok-shell-max: 1720px;
    --wok-stage-max: 1680px;
    --wok-news-max: 1560px;
}

html {
    min-height: 100%;
    background: var(--wok-bg);
}

body.wok-3d-shell {
    position: relative;
    min-height: 100vh;
    color: var(--wok-text);
    background: var(--wok-bg) !important;
    overflow-x: hidden;
    perspective: none;
}

body.wok-3d-shell::before {
    content: "";
    position: fixed;
    z-index: -3;
    inset: -3vh -3vw;
    background:
        linear-gradient(180deg, rgba(3, 3, 3, .34), rgba(3, 3, 2, .84)),
        url("/images/wok/wok-guide-city.png") center / cover no-repeat;
    transform: translate3d(calc(var(--wok-look-x) * -8px), calc(var(--wok-look-y) * -6px), -30px) scale(1.06);
    filter: saturate(.82) contrast(1.08);
    transition: transform .22s ease-out;
}

body.wok-3d-shell.route-download::before {
    background-image:
        linear-gradient(180deg, rgba(3, 3, 3, .28), rgba(3, 3, 2, .88)),
        url("/images/wok/wok-factions-battle.png");
}

body.wok-3d-shell.route-landing::before,
body.wok-3d-shell.route-home::before {
    display: none;
}

body.wok-3d-shell::after {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: .68;
    background:
        radial-gradient(circle at 15% 20%, rgba(205, 126, 42, .16) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 35%, rgba(255, 184, 68, .13) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 75%, rgba(205, 126, 42, .12) 0 1px, transparent 2px);
    background-size: 170px 170px, 230px 230px, 310px 310px;
    animation: wokEmbers 18s linear infinite;
}

body.wok-3d-shell.route-landing::after,
body.wok-3d-shell.route-home::after {
    display: none;
}

@keyframes wokEmbers {
    from { background-position: 0 120px, 0 260px, 0 80px; }
    to { background-position: 35px -240px, -55px -170px, 70px -300px; }
}

/* Main page shell */
body.wok-3d-shell:not(.route-landing):not(.route-home) > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) > .container > .row {
    margin: 0 !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .main {
    position: relative;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Shared page stage */
body.wok-3d-shell:not(.route-landing):not(.route-home) .cont-items {
    position: relative;
    width: min(var(--wok-stage-max), 100%);
    max-width: none !important;
    box-sizing: border-box !important;
    min-height: calc(100vh - 124px);
    margin: 0 auto !important;
    padding: clamp(34px, 5vw, 76px) clamp(14px, 3vw, 34px) 90px !important;
    background: transparent !important;
    transform-style: preserve-3d;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .cont-items::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 22px 14px 42px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 5, 4, .12), rgba(5, 5, 4, .46));
    border-left: 1px solid rgba(215, 189, 114, .1);
    border-right: 1px solid rgba(215, 189, 114, .1);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .44);
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .line-top,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-top-right,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-top-left,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-left,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-right,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-bottom,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-bottom-right,
body.wok-3d-shell:not(.route-landing):not(.route-home) .line-bottom-left {
    display: none !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .page-section,
body.wok-3d-shell:not(.route-landing):not(.route-home) .ranking-container,
body.wok-3d-shell:not(.route-landing):not(.route-home) .clan-ranking-container,
body.wok-3d-shell:not(.route-landing):not(.route-home) .clan-detail-container,
body.wok-3d-shell:not(.route-landing):not(.route-home) .news-list-container,
body.wok-3d-shell:not(.route-landing):not(.route-home) .news-detail-container,
body.wok-3d-shell:not(.route-landing):not(.route-home) .account-dashboard,
body.wok-3d-shell:not(.route-landing):not(.route-home) .detail-page,
body.wok-3d-shell:not(.route-landing):not(.route-home) .admin-page {
    float: none !important;
    width: 100% !important;
    max-width: 1360px;
    margin: 0 auto !important;
    color: var(--wok-text);
    transform-style: preserve-3d;
}

body.wok-3d-shell.route-news .news-list-container {
    max-width: var(--wok-news-max) !important;
    box-sizing: border-box !important;
}

/* Universal 3D surfaces */
body.wok-3d-shell:not(.route-landing):not(.route-home) .panel,
body.wok-3d-shell:not(.route-landing):not(.route-home) .well,
body.wok-3d-shell:not(.route-landing):not(.route-home) .modal-content,
body.wok-3d-shell:not(.route-landing):not(.route-home) .ranking-block,
body.wok-3d-shell:not(.route-landing):not(.route-home) .character-block,
body.wok-3d-shell:not(.route-landing):not(.route-home) .gamemasters-block,
body.wok-3d-shell:not(.route-landing):not(.route-home) .new__ticket-block,
body.wok-3d-shell:not(.route-landing):not(.route-home) .chat,
body.wok-3d-shell:not(.route-landing):not(.route-home) .faq-container {
    color: var(--wok-text) !important;
    background:
        linear-gradient(145deg, rgba(32, 29, 22, .93), rgba(7, 7, 6, .97)) padding-box,
        linear-gradient(135deg, rgba(255, 239, 175, .5), rgba(92, 62, 22, .34), rgba(255, 239, 175, .13)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow:
        0 22px 45px rgba(0, 0, 0, .56),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -16px 28px rgba(0, 0, 0, .25) !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) h1,
body.wok-3d-shell:not(.route-landing):not(.route-home) .page-title,
body.wok-3d-shell:not(.route-landing):not(.route-home) .title-header h1 {
    color: var(--wok-gold-bright) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 900 !important;
    letter-spacing: .08em;
    text-shadow: 0 3px 0 #3c2a11, 0 8px 20px #000, 0 0 24px rgba(215, 189, 114, .22) !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) h2,
body.wok-3d-shell:not(.route-landing):not(.route-home) h3 {
    color: #eee6cf;
    text-shadow: 0 2px 8px #000;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) a {
    color: var(--wok-gold);
}

body.wok-3d-shell:not(.route-landing):not(.route-home) a:hover {
    color: var(--wok-gold-bright);
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .btn,
body.wok-3d-shell:not(.route-landing):not(.route-home) button:not(.close):not(.mobile-menu-toggle),
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="submit"] {
    color: #fff6d6 !important;
    font-weight: 800;
    text-shadow: 0 1px 2px #000;
    background: linear-gradient(180deg, #8e6128 0%, #4e3011 54%, #2b1909 100%) !important;
    border: 1px solid #b88a45 !important;
    border-bottom-color: #2b1909 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255, 241, 190, .27), 0 6px 0 #1b1007, 0 10px 20px rgba(0, 0, 0, .42) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .btn:hover,
body.wok-3d-shell:not(.route-landing):not(.route-home) button:not(.close):not(.mobile-menu-toggle):hover,
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="submit"]:hover {
    color: #fff !important;
    filter: brightness(1.16);
    transform: translateY(-2px) translateZ(10px);
    box-shadow: inset 0 1px 0 rgba(255, 241, 190, .35), 0 8px 0 #1b1007, 0 15px 26px rgba(0, 0, 0, .52) !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .form-control,
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="text"],
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="email"],
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="password"],
body.wok-3d-shell:not(.route-landing):not(.route-home) input[type="number"],
body.wok-3d-shell:not(.route-landing):not(.route-home) select,
body.wok-3d-shell:not(.route-landing):not(.route-home) textarea {
    color: #eee9dc !important;
    background: linear-gradient(180deg, rgba(5, 5, 4, .95), rgba(20, 18, 14, .94)) !important;
    border: 1px solid rgba(215, 189, 114, .3) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .72), 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) .form-control:focus,
body.wok-3d-shell:not(.route-landing):not(.route-home) input:focus,
body.wok-3d-shell:not(.route-landing):not(.route-home) select:focus,
body.wok-3d-shell:not(.route-landing):not(.route-home) textarea:focus {
    border-color: var(--wok-gold) !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .72), 0 0 0 2px rgba(215, 189, 114, .1), 0 0 18px rgba(215, 189, 114, .14) !important;
    outline: none !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) select option {
    color: #eee9dc;
    background: #11100d;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) table {
    color: #ded9cd;
    background: rgba(8, 8, 7, .78) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid rgba(215, 189, 114, .22) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.wok-3d-shell:not(.route-landing):not(.route-home) table th {
    color: var(--wok-gold-bright) !important;
    background: linear-gradient(180deg, rgba(111, 78, 30, .46), rgba(22, 18, 12, .88)) !important;
    border-color: rgba(215, 189, 114, .2) !important;
    text-shadow: 0 2px 4px #000;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) table td {
    border-color: rgba(215, 189, 114, .11) !important;
}

body.wok-3d-shell:not(.route-landing):not(.route-home) table tr:hover td {
    background: rgba(215, 189, 114, .06) !important;
}

body.wok-3d-shell .modal-backdrop.in {
    opacity: .82;
}

body.wok-3d-shell .modal-content {
    transform: perspective(1200px) rotateX(.5deg) translateZ(20px);
}

body.wok-3d-shell .social-media-bar {
    filter: drop-shadow(0 12px 13px #000);
}

body.wok-3d-shell .social-media-bar a {
    border: 1px solid rgba(215, 189, 114, .3) !important;
    background: linear-gradient(135deg, rgba(38, 32, 22, .96), rgba(7, 7, 6, .98)) !important;
    transform: perspective(300px) rotateY(8deg);
}

body.wok-3d-shell .forum-banner-image {
    display: none !important;
}

/* Responsive page spacing */
@media (max-width: 1100px) {
    :root { --wok-header-height: 70px; }

    body.wok-3d-shell:not(.route-landing):not(.route-home) .cont-items {
        padding: 28px 12px 64px !important;
    }

    body.wok-3d-shell:not(.route-landing):not(.route-home) .cont-items::before {
        inset: 10px 4px 24px;
    }
}

@media (max-width: 520px) {
    body.wok-3d-shell:not(.route-landing):not(.route-home) h1,
    body.wok-3d-shell:not(.route-landing):not(.route-home) .page-title {
        letter-spacing: .035em;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.wok-3d-shell::after { animation: none; }
    body.wok-3d-shell::before { transition: none; transform: none; }
    body.wok-3d-shell *,
    body.wok-3d-shell *::before,
    body.wok-3d-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}