/*
 * FelixMyko Kingdom
 * Homeko Sehri esintili, mevcut dinamik panel altyapisini koruyan tema katmani.
 */

:root {
    --kingdom-ink: #070806;
    --kingdom-panel: rgba(13, 13, 10, .9);
    --kingdom-panel-soft: rgba(22, 21, 16, .82);
    --kingdom-gold: #d8b467;
    --kingdom-gold-bright: #f5e7b6;
    --kingdom-line: rgba(216, 180, 103, .32);
    --kingdom-muted: #a7a69f;
}

html {
    background: #050604;
}

body {
    --modern-status-height: 0px !important;
    background:
        radial-gradient(circle at 50% 0, rgba(126, 99, 45, .12), transparent 28rem),
        var(--kingdom-ink) !important;
    color: #f3f0e6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

/* Header */
.modern-status-bar {
    display: none !important;
}

.modern-site-header {
    min-height: 112px !important;
    height: 112px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 50% 0, rgba(216, 180, 103, .13), transparent 34%),
        rgba(7, 8, 7, .97) !important;
    border-bottom: 1px solid var(--kingdom-line) !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.46) !important;
}

.modern-site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 3px;
    opacity: .55;
    background: linear-gradient(90deg, transparent, var(--kingdom-gold), transparent);
}

.modern-nav-shell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
    gap: 26px !important;
    max-width: 1480px !important;
    min-height: 112px;
}

.modern-brand {
    grid-column: 2;
    justify-self: center;
    position: relative;
    z-index: 2;
}

.modern-brand::before {
    content: "";
    position: absolute;
    inset: -24px -46px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 180, 103, .14), transparent 68%);
}

.modern-brand-picture {
    width: 210px !important;
    max-width: 210px !important;
    height: 92px !important;
    justify-content: center;
}

.modern-brand-picture img {
    max-width: 210px !important;
    max-height: 88px !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.7));
}

.modern-nav-menu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    gap: 5px !important;
}

.modern-nav-menu > a[href*="anasayfa"],
.modern-nav-menu > a[href*="download"],
.modern-nav-menu > .cash-nav-dropdown {
    display: none !important;
}

.modern-nav-menu .nav-item {
    min-height: 42px;
    padding: 10px 9px !important;
    color: #d7d5ce !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: .25px;
    white-space: nowrap;
}

.modern-nav-menu .nav-item > i:first-child {
    color: var(--kingdom-gold);
    font-size: 12px;
}

.modern-nav-menu .nav-item:hover,
.modern-nav-menu .nav-active {
    color: var(--kingdom-gold-bright) !important;
}

.modern-nav-menu .nav-item::after {
    right: 9px;
    bottom: 4px;
    left: 9px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kingdom-gold), transparent) !important;
}

.modern-nav-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 9px !important;
}

.modern-nav-socials a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    color: #d7d5ce !important;
    background: rgba(255,255,255,.04) !important;
}

.kingdom-login-button,
.kingdom-register-button,
.kingdom-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 8px;
    color: #fff;
    font: 800 12px "Oxanium", sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .2s ease, filter .2s ease;
}

.kingdom-nav-auth {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kingdom-login-button {
    border: 1px solid rgba(216,180,103,.4);
    background: rgba(216,180,103,.07);
    color: var(--kingdom-gold-bright);
}

.kingdom-register-button {
    background: linear-gradient(135deg, #d8b467, #9f702e);
    color: #110e08;
    box-shadow: 0 8px 22px rgba(216,180,103,.2);
}

.kingdom-download-button {
    background: linear-gradient(135deg, #ef363b, #ba171f);
    box-shadow: 0 8px 22px rgba(214, 33, 40, .25);
}

.kingdom-login-button:hover,
.kingdom-register-button:hover,
.kingdom-download-button:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Dropdowns and the large ranking menu */
.modern-nav-menu .dropdown-menu {
    top: calc(100% + 12px) !important;
    padding: 12px !important;
    border: 1px solid var(--kingdom-line) !important;
    border-radius: 0 0 9px 9px !important;
    background:
        radial-gradient(circle at 30% 0, rgba(216,180,103,.08), transparent 38%),
        rgba(7, 8, 7, .98) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.58) !important;
}

.modern-nav-menu .dropdown-menu a {
    border-radius: 5px;
    color: #cbc8bf !important;
}

.modern-nav-menu .dropdown-menu a:hover {
    color: var(--kingdom-gold-bright) !important;
    background: rgba(216,180,103,.08) !important;
}

.modern-nav-menu .dropdown:has(> a[href$="siralama"]),
.modern-nav-menu .dropdown:has(> a[href$="siralama/"]),
.modern-nav-menu .ranking-nav-dropdown {
    position: static !important;
}

.modern-nav-menu .dropdown:has(> a[href$="siralama"]) > .dropdown-menu,
.modern-nav-menu .dropdown:has(> a[href$="siralama/"]) > .dropdown-menu,
.modern-nav-menu .kingdom-ranking-mega {
    left: 12px !important;
    width: min(1080px, calc(100vw - 64px)) !important;
    min-width: min(1080px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 12px;
    padding: 20px !important;
    overflow: visible !important;
}

.kingdom-ranking-mega section {
    min-width: 0;
}

.kingdom-ranking-mega h3 {
    margin: 0 0 10px;
    padding: 0 8px 11px;
    border-bottom: 1px solid rgba(216,180,103,.3);
    color: var(--kingdom-gold);
    font: 800 15px Georgia, "Times New Roman", serif;
    letter-spacing: .35px;
}

.modern-nav-menu .dropdown:has(> a[href$="siralama"]) > .dropdown-menu a,
.modern-nav-menu .dropdown:has(> a[href$="siralama/"]) > .dropdown-menu a,
.modern-nav-menu .kingdom-ranking-mega a {
    min-height: 42px;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    white-space: normal !important;
    line-height: 1.25 !important;
}

body.modern-nav-reveal .modern-site-header {
    top: 0 !important;
    min-height: 82px !important;
    height: 82px !important;
}

body.modern-nav-reveal .modern-nav-shell {
    min-height: 82px;
}

body.modern-nav-reveal .modern-brand-picture {
    height: 70px !important;
}

body.modern-nav-reveal .modern-brand-picture img {
    max-height: 66px !important;
}

/* Hero */
.home-notice-ticker {
    min-height: 42px;
    border-color: rgba(216,180,103,.22) !important;
    background: #090a08 !important;
}

.home-notice-heading {
    color: var(--kingdom-gold-bright) !important;
    background: linear-gradient(90deg, rgba(216,180,103,.2), transparent) !important;
}

.home-hero-split-section {
    display: none !important;
}

.container.home-hero-split {
    max-width: 1320px !important;
    gap: 12px !important;
    padding: 0 18px !important;
}

.home-countdown-card,
.slider-container {
    border: 1px solid rgba(216,180,103,.28) !important;
    border-radius: 3px !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.55) !important;
}

.home-countdown-card {
    background-position: center !important;
}

.home-countdown-card::after {
    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.54)),
        linear-gradient(90deg, transparent, rgba(216,180,103,.1), transparent) !important;
}

.home-countdown-title,
.home-countdown-date {
    font-family: Georgia, "Times New Roman", serif !important;
    color: var(--kingdom-gold) !important;
    text-shadow: 0 5px 22px #000;
}

.home-countdown-units b {
    color: #fffce9 !important;
    text-shadow: 0 6px 18px rgba(0,0,0,.75);
}

.home-countdown-subtitle,
.home-countdown-units small,
.home-countdown-date-label {
    color: #dedbd0 !important;
}

.slider-container {
    overflow: hidden;
    background: #090a08 !important;
}

.slider-slide::after,
.slider-slide-database::after {
    background:
        linear-gradient(90deg, rgba(3,4,3,.88), rgba(3,4,3,.3) 56%, rgba(3,4,3,.66)),
        linear-gradient(0deg, rgba(0,0,0,.48), transparent 60%) !important;
}

.slider-crown {
    border-radius: 3px !important;
    color: var(--kingdom-gold-bright) !important;
    background: rgba(10,10,8,.65) !important;
}

.slider-title {
    font-family: Georgia, "Times New Roman", serif !important;
    color: #fff9df !important;
    text-shadow: 0 8px 24px #000;
}

.slider-title span {
    color: var(--kingdom-gold) !important;
    -webkit-text-fill-color: var(--kingdom-gold) !important;
}

.slider-desc {
    color: #dedbd2 !important;
}

.slider-actions .btn {
    border-radius: 4px !important;
}

/* Launch countdown and KN_WEB slider mosaic */
.kingdom-launch-hero {
    position: relative;
    z-index: 4;
    padding: 0 0 38px;
    background:
        linear-gradient(180deg, rgba(4,5,4,.96), rgba(5,6,5,.99));
}

.kingdom-launch-shell {
    width: min(1540px, calc(100% - 36px)) !important;
    max-width: none !important;
    padding: 0 !important;
}

.kingdom-launch-countdown {
    left: 50%;
    width: 100vw;
    height: clamp(300px, 21vw, 360px);
    margin: 0 0 14px;
    transform: translateX(-50%);
}

.kingdom-launch-countdown .home-countdown-card {
    border: 0 !important;
    border-radius: 0 !important;
    background-position: center 38% !important;
    box-shadow: none !important;
    animation: none !important;
}

.kingdom-launch-countdown .home-countdown-card::before {
    opacity: 1;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255,249,216,.2) 0, rgba(255,249,216,.08) 25%, transparent 54%),
        linear-gradient(90deg, rgba(0,0,0,.72) 0, rgba(0,0,0,.18) 28%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.74) 100%),
        linear-gradient(180deg, rgba(0,0,0,.2), transparent 32%, rgba(0,0,0,.25));
    animation: none;
    transform: none;
}

.kingdom-launch-countdown .home-countdown-card::after {
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), transparent 44%, rgba(0,0,0,.2)) !important;
    mix-blend-mode: normal;
    animation: none;
}

.kingdom-launch-countdown .home-countdown-inner {
    gap: 13px;
    width: min(92%, 560px);
    padding: 22px;
}

.kingdom-launch-countdown .home-countdown-inner::before {
    display: none;
}

.kingdom-launch-countdown .home-countdown-title {
    color: #d9ae5b !important;
    font: 700 clamp(48px, 3.4vw, 62px)/.92 Georgia, "Times New Roman", serif !important;
    letter-spacing: 1px;
    text-shadow: 0 4px 18px rgba(0,0,0,.8);
}

.kingdom-launch-countdown .home-countdown-subtitle {
    grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
    gap: 14px;
    color: #f7f2dc !important;
    font-size: 10px;
    letter-spacing: 3.4px;
}

.kingdom-launch-countdown .home-countdown-subtitle i {
    background: linear-gradient(90deg, transparent, rgba(238,219,170,.76));
}

.kingdom-launch-countdown .home-countdown-units {
    gap: 18px;
    margin-top: 5px;
}

.kingdom-launch-countdown .home-countdown-units span {
    gap: 11px;
}

.kingdom-launch-countdown .home-countdown-units b {
    color: #fffdeb !important;
    font-size: clamp(42px, 3.3vw, 54px);
    line-height: .88;
    text-shadow: 0 5px 16px rgba(0,0,0,.78);
}

.kingdom-launch-countdown .home-countdown-units small,
.kingdom-launch-countdown .home-countdown-date-label {
    color: rgba(255,255,255,.68) !important;
    font-size: 9px;
    letter-spacing: 3.6px;
}

.kingdom-launch-countdown .home-countdown-date {
    color: #f6f0d7 !important;
    font: 700 clamp(27px, 2.7vw, 39px)/1 Georgia, "Times New Roman", serif !important;
    letter-spacing: .5px;
}

.kingdom-slider-mosaic {
    position: relative;
}

.kingdom-slider-layout {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(420px, 2.12fr) minmax(190px, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "leftTop main rightTop"
        "leftBottom main rightBottom";
    gap: 10px;
    height: clamp(470px, 38vw, 590px);
}

.kingdom-slider-layout.slider-wrapper-mobile {
    display: none;
}

.kingdom-slider-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(216,180,103,.4);
    background: #090a08;
    box-shadow: 0 16px 34px rgba(0,0,0,.38);
}

.kingdom-slider-side-left-top { grid-area: leftTop; }
.kingdom-slider-side-left-bottom { grid-area: leftBottom; }
.kingdom-slider-main { grid-area: main; }
.kingdom-slider-side-right-top { grid-area: rightTop; }
.kingdom-slider-side-right-bottom { grid-area: rightBottom; }

.kingdom-mosaic-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.035);
    transition: opacity .7s ease, visibility .7s ease, transform 5.5s ease;
}

.kingdom-mosaic-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.kingdom-mosaic-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.82));
}

.kingdom-slider-main .kingdom-mosaic-slide::after {
    background:
        linear-gradient(90deg, rgba(0,0,0,.18), transparent 32%, transparent 68%, rgba(0,0,0,.18)),
        linear-gradient(180deg, transparent 55%, rgba(0,0,0,.8));
}

.kingdom-mosaic-slide > a {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.kingdom-mosaic-caption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 16px;
    left: 18px;
    display: grid;
    gap: 4px;
    color: #fff;
    text-shadow: 0 3px 10px #000;
    pointer-events: none;
}

.kingdom-mosaic-caption small {
    color: var(--kingdom-gold-bright);
    font: 800 10px/1.2 "Oxanium", sans-serif;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.kingdom-mosaic-caption strong {
    overflow: hidden;
    font: 800 clamp(13px, 1.1vw, 19px)/1.2 "Oxanium", sans-serif;
    text-overflow: ellipsis;
}

.kingdom-slider-main .kingdom-mosaic-caption {
    right: 30px;
    bottom: 26px;
    left: 30px;
}

.kingdom-slider-main .kingdom-mosaic-caption strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.3vw, 40px);
}

/* Feature tape */
.kingdom-feature-tape {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border-top: 1px solid rgba(216,180,103,.24);
    border-bottom: 1px solid rgba(216,180,103,.24);
    background: #050604;
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
}

.kingdom-feature-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 54px);
    min-width: max-content;
    min-height: 66px;
    padding: 0 26px;
    margin: 0 auto;
    color: #ded8bd;
    font: 900 12px "Oxanium", sans-serif;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.kingdom-feature-track i {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 1px solid var(--kingdom-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 0 5px rgba(216,180,103,.05);
}

/* Homepage showcase and rankings */
.home-stage {
    position: relative;
    padding: 62px 0 88px !important;
    background:
        linear-gradient(180deg, rgba(6,7,6,.82), rgba(6,7,6,.55) 40%, rgba(6,7,6,.92)),
        url("../../Public/Web/img/bg/third_about_bg.jpg") center top/cover fixed no-repeat !important;
}

.home-stage::before {
    background:
        radial-gradient(circle at 50% 20%, rgba(216,180,103,.12), transparent 35%),
        linear-gradient(180deg, #050604 0, transparent 110px) !important;
}

.container.home-container {
    max-width: 1240px !important;
}

.home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 18px !important;
    margin-top: 0;
}

.kingdom-showcase-grid {
    display: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 145px 145px 105px;
    gap: 10px !important;
    margin: 0 !important;
}

.kingdom-showcase-grid .home-promo-card {
    min-height: 0 !important;
    border: 1px solid rgba(216,180,103,.35) !important;
    border-radius: 2px !important;
    background-position: center !important;
    box-shadow: 0 15px 34px rgba(0,0,0,.34);
}

.kingdom-showcase-grid .home-promo-card:nth-child(1) {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

.kingdom-showcase-grid .home-promo-card:nth-child(2) { grid-column: 1; grid-row: 1; }
.kingdom-showcase-grid .home-promo-card:nth-child(3) { grid-column: 1; grid-row: 2; }
.kingdom-showcase-grid .home-promo-card:nth-child(4) { grid-column: 4; grid-row: 1; }
.kingdom-showcase-grid .home-promo-card:nth-child(5) { grid-column: 4; grid-row: 2; }
.kingdom-showcase-grid .home-promo-card:nth-child(6) { grid-column: 1; grid-row: 3; }
.kingdom-showcase-grid .home-promo-card:nth-child(7) { grid-column: 2; grid-row: 3; }
.kingdom-showcase-grid .home-promo-card:nth-child(8) { grid-column: 3; grid-row: 3; }
.kingdom-showcase-grid .home-promo-card:nth-child(9) { grid-column: 4; grid-row: 3; }

.kingdom-showcase-grid .home-promo-card:nth-child(n+10) {
    display: none;
}

.kingdom-showcase-grid .home-promo-card:nth-child(1) .home-promo-title {
    max-width: 560px;
    font-size: clamp(20px, 2vw, 31px);
}

.kingdom-showcase-grid .home-promo-card:not(:first-child) .home-promo-content {
    padding: 14px 15px;
}

.kingdom-showcase-grid .home-promo-card:not(:first-child) .home-promo-title {
    font-family: "Oxanium", sans-serif !important;
    font-size: 13px;
    line-height: 1.25;
}

.kingdom-showcase-grid .home-promo-card:nth-child(n+6) .home-promo-kicker {
    display: none;
}

.kingdom-showcase-grid .home-promo-card:nth-child(n+6) .home-promo-title {
    font-size: 11px;
}

.home-promo-card::before {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.88)) !important;
}

.home-promo-card::after {
    border-color: rgba(245,231,182,.52) !important;
}

.home-promo-kicker {
    color: var(--kingdom-gold-bright) !important;
}

.home-promo-title {
    font-family: Georgia, "Times New Roman", serif !important;
    color: #fff8df !important;
}

.kingdom-rank-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 66px 0 28px;
    text-align: left;
}

.kingdom-rank-intro > span {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid var(--kingdom-line);
    border-radius: 50%;
    color: var(--kingdom-gold-bright);
    font-size: 27px;
    background: rgba(216,180,103,.07);
}

.kingdom-rank-intro p,
.kingdom-rank-intro h1,
.kingdom-rank-intro small {
    margin: 0;
}

.kingdom-rank-intro p {
    color: var(--kingdom-gold);
    font: 800 10px "Oxanium", sans-serif;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.kingdom-rank-intro h1 {
    color: #fff9df;
    font: 800 clamp(32px, 4vw, 52px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.kingdom-rank-intro small {
    color: var(--kingdom-muted);
    font-size: 12px;
}

.home-panel,
.home-side-panel {
    overflow: hidden;
    border: 1px solid rgba(216,180,103,.25) !important;
    border-radius: 5px !important;
    background:
        radial-gradient(circle at 50% 0, rgba(216,180,103,.06), transparent 35%),
        var(--kingdom-panel) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
}

.home-ranking-table-head,
.home-side-heading {
    background: linear-gradient(90deg, rgba(216,180,103,.14), transparent) !important;
    border-color: rgba(216,180,103,.18) !important;
}

.home-ranking-title,
.home-side-heading {
    font-family: Georgia, "Times New Roman", serif !important;
    color: #fff4cf !important;
}

.home-ranking-row {
    border-color: rgba(255,255,255,.045) !important;
}

.home-ranking-row:hover {
    background: rgba(216,180,103,.07) !important;
}

.home-rank-index,
.home-ranking-score,
.home-online-box strong {
    color: var(--kingdom-gold-bright) !important;
}

.home-online-box {
    border-color: rgba(216,180,103,.22) !important;
    background: rgba(216,180,103,.06) !important;
}

.home-event-visual {
    min-height: 215px !important;
    border: 1px solid rgba(216,180,103,.18);
}

/* Character hall of fame */
.kingdom-character-ranking {
    position: relative;
    margin-top: 72px;
    overflow: hidden;
    border: 1px solid rgba(216,180,103,.28);
    background: #080a08;
    box-shadow: 0 24px 55px rgba(0,0,0,.48);
}

.kingdom-character-hero {
    width: min(1680px, calc(100% - 36px));
    margin: 22px auto 30px;
}

.kingdom-character-hero .kingdom-character-stage {
    height: clamp(620px, 72vh, 760px);
}

.kingdom-character-hero .kingdom-character-lineup {
    bottom: 54px;
    height: 550px;
}

.kingdom-character-hero .kingdom-character-figure-1 img,
.kingdom-character-hero .kingdom-character-figure-5 img {
    max-height: 420px;
}

.kingdom-character-hero .kingdom-character-figure-2 img,
.kingdom-character-hero .kingdom-character-figure-4 img {
    max-height: 475px;
}

.kingdom-character-hero .kingdom-character-figure-3 img {
    max-height: 540px;
}

.kingdom-character-hero .kingdom-character-label-1,
.kingdom-character-hero .kingdom-character-label-5 {
    top: 205px;
}

.kingdom-character-hero .kingdom-character-label-2,
.kingdom-character-hero .kingdom-character-label-4 {
    top: 145px;
}

.kingdom-character-hero .kingdom-character-label-3 {
    top: 90px;
}

.kingdom-character-ranking > header {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 5;
    width: min(520px, calc(100% - 30px));
    text-align: center;
    transform: translateX(-50%);
}

.kingdom-character-ranking > header span {
    color: var(--kingdom-gold);
    font: 900 10px "Oxanium", sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.kingdom-character-ranking > header h2 {
    margin: 5px 0 4px;
    color: #fff9df;
    font: 800 clamp(28px, 4vw, 46px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 7px 22px #000;
}

.kingdom-character-ranking > header p {
    margin: 0;
    color: #b9b7ad;
    font-size: 12px;
}

.kingdom-character-stage {
    position: relative;
    height: 650px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(5,7,6,.55), rgba(5,7,6,.08) 48%, rgba(5,7,6,.68)),
        url("../../Public/Web/img/bg/third_about_bg.jpg") center/cover no-repeat;
}

.kingdom-character-stage::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 34%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(216,180,103,.2), transparent 52%),
        linear-gradient(0deg, rgba(0,0,0,.58), transparent);
}

.kingdom-character-lineup {
    position: absolute;
    right: 2%;
    bottom: 44px;
    left: 2%;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    width: 96%;
    height: 450px;
}

.kingdom-character-figure {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.kingdom-character-figure::before {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 2%;
    left: 50%;
    width: 82%;
    z-index: -1;
    opacity: .62;
    background: radial-gradient(ellipse at 50% 65%, var(--character-glow, rgba(216,180,103,.3)), transparent 68%);
    filter: blur(12px);
    transform: translateX(-50%);
}

.kingdom-character-figure::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    z-index: -1;
    width: 72%;
    height: 30px;
    border: 1px solid rgba(245,231,182,.55);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(216,180,103,.22), transparent 68%);
    box-shadow: 0 0 22px rgba(216,180,103,.12);
    transform: translateX(-50%);
}

.kingdom-character-figure img {
    display: block;
    width: auto;
    max-width: 118%;
    height: auto;
    max-height: 390px;
    object-fit: contain;
    object-position: center bottom;
    filter:
        drop-shadow(0 0 11px var(--character-glow, rgba(216,180,103,.34)))
        drop-shadow(0 18px 18px rgba(0,0,0,.88));
}

.kingdom-character-figure.job-warrior { --character-glow: rgba(255, 102, 58, .48); }
.kingdom-character-figure.job-rogue { --character-glow: rgba(194, 75, 255, .46); }
.kingdom-character-figure.job-mage { --character-glow: rgba(75, 171, 255, .5); }
.kingdom-character-figure.job-priest { --character-glow: rgba(255, 220, 111, .52); }

.kingdom-character-figure-1 img,
.kingdom-character-figure-5 img {
    max-height: 330px;
}

.kingdom-character-figure-2 img,
.kingdom-character-figure-4 img {
    max-height: 375px;
}

.kingdom-character-figure-3 img {
    max-height: 440px;
}

.kingdom-character-missing {
    display: grid;
    width: 150px;
    height: 250px;
    place-items: center;
    border: 1px dashed rgba(216,180,103,.28);
    color: rgba(245,231,182,.35);
    font-size: 52px;
    background: linear-gradient(180deg, rgba(216,180,103,.05), transparent);
}

.kingdom-character-beams {
    position: absolute;
    inset: 108px 5% 0;
    z-index: 1;
    opacity: .55;
    background:
        linear-gradient(90deg,
            transparent 19.8%, rgba(255,249,215,.75) 20%, transparent 20.2%,
            transparent 39.8%, rgba(255,249,215,.75) 40%, transparent 40.2%,
            transparent 59.8%, rgba(255,249,215,.75) 60%, transparent 60.2%,
            transparent 79.8%, rgba(255,249,215,.75) 80%, transparent 80.2%);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

.kingdom-character-labels {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.kingdom-character-label {
    position: absolute;
    width: 18%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 3px 12px #000, 0 3px 20px #000;
    pointer-events: auto;
}

.kingdom-character-label-1 { top: 205px; left: 1%; }
.kingdom-character-label-2 { top: 145px; left: 21%; }
.kingdom-character-label-3 { top: 92px; left: 41%; }
.kingdom-character-label-4 { top: 145px; left: 61%; }
.kingdom-character-label-5 { top: 205px; left: 81%; }

.kingdom-character-label > i {
    display: block;
    margin-bottom: 2px;
    color: var(--kingdom-gold-bright);
    font-size: 20px;
}

.kingdom-character-label > b {
    display: block;
    color: #fff9df;
    font: 900 36px/1 "Oxanium", sans-serif;
}

.kingdom-character-label > strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 7px;
    overflow: hidden;
    font: 900 14px "Oxanium", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kingdom-character-label > strong img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    image-rendering: pixelated;
}

.kingdom-character-label > small {
    display: block;
    margin-top: 5px;
    color: var(--kingdom-gold-bright);
    font: 800 11px "Oxanium", sans-serif;
}

.kingdom-character-label.rank-1 > b {
    font-size: 48px;
}

.kingdom-character-all {
    position: absolute;
    bottom: 22px;
    left: 50%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 24px;
    border: 1px solid rgba(245,231,182,.45);
    border-radius: 7px;
    color: #fff9df;
    background: rgba(7,8,7,.68);
    font: 900 11px "Oxanium", sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
    backdrop-filter: blur(7px);
}

.kingdom-character-all:hover {
    color: #16120a;
    background: var(--kingdom-gold-bright);
}

.home-stage + .home-features-section {
    background:
        linear-gradient(rgba(5,6,4,.86), rgba(5,6,4,.96)),
        url("../../Public/Web/img/bg/cta_bg.jpg") center/cover no-repeat !important;
}

/* Mobile */
@media (max-width: 1100px) {
    .kingdom-nav-auth {
        display: none;
    }

    .kingdom-launch-shell {
        width: min(100% - 24px, 980px) !important;
    }

    .kingdom-slider-layout {
        grid-template-columns: minmax(150px, .9fr) minmax(360px, 2fr) minmax(150px, .9fr);
        height: clamp(430px, 52vw, 540px);
        gap: 8px;
    }

    .modern-site-header {
        min-height: 104px !important;
        height: 104px !important;
    }

    .modern-nav-shell {
        display: flex !important;
        justify-content: center !important;
        min-height: 104px;
        padding: 8px 16px !important;
    }

    .modern-brand {
        position: static;
        margin: 0 auto;
    }

    .modern-brand-picture {
        width: 180px !important;
        max-width: 180px !important;
        height: 86px !important;
    }

    .modern-brand-picture img {
        max-width: 180px !important;
        max-height: 82px !important;
    }

    .modern-nav-actions {
        position: absolute;
        inset: 0;
        display: flex !important;
        pointer-events: none;
    }

    .modern-nav-actions > * {
        pointer-events: auto;
    }

    .modern-nav-socials {
        display: none !important;
    }

    .modern-mobile-menu-toggle {
        position: absolute;
        top: 29px;
        left: 16px;
        width: 48px !important;
        height: 48px !important;
        border-color: rgba(216,180,103,.32) !important;
        background: rgba(10,11,9,.8) !important;
        color: #fff9df !important;
    }

    .kingdom-discord-button {
        position: absolute;
        top: 29px;
        right: 126px;
        width: 48px;
        min-width: 48px;
        padding: 0;
        font-size: 19px;
    }

    .kingdom-download-button {
        position: absolute;
        top: 29px;
        right: 16px;
        min-width: 100px;
    }

    .kingdom-discord-button span {
        display: none;
    }

    .modern-mobile-drawer {
        border-color: rgba(216,180,103,.3) !important;
        background:
            radial-gradient(circle at 30% 0, rgba(216,180,103,.14), transparent 34%),
            #080906 !important;
    }

    .modern-mobile-link,
    .modern-mobile-group > summary {
        border-radius: 4px !important;
        border-color: rgba(216,180,103,.18) !important;
        background: rgba(216,180,103,.035) !important;
    }

    .modern-mobile-link i,
    .modern-mobile-group > summary i:first-child {
        color: var(--kingdom-gold) !important;
    }

    .home-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .kingdom-showcase-grid {
        grid-template-rows: 132px 132px 96px;
    }
}

@media (max-width: 760px) {
    .kingdom-launch-hero {
        padding: 0 0 24px;
    }

    .kingdom-launch-shell {
        width: calc(100% - 20px) !important;
    }

    .kingdom-launch-countdown {
        height: clamp(290px, 76vw, 350px);
        margin-bottom: 10px;
    }

    .kingdom-slider-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
            "main main"
            "leftTop rightTop"
            "leftBottom rightBottom";
        height: auto;
        gap: 7px;
    }

    .kingdom-slider-mosaic.has-mobile-sliders .slider-wrapper-pc {
        display: none;
    }

    .kingdom-slider-mosaic.has-mobile-sliders .slider-wrapper-mobile {
        display: grid;
    }

    .kingdom-slider-cell {
        aspect-ratio: 16 / 9;
    }

    .kingdom-slider-main {
        min-height: clamp(220px, 58vw, 390px);
        aspect-ratio: auto;
    }

    .kingdom-mosaic-caption {
        right: 10px;
        bottom: 9px;
        left: 10px;
    }

    .kingdom-slider-main .kingdom-mosaic-caption {
        right: 18px;
        bottom: 16px;
        left: 18px;
    }

    .modern-site-header {
        min-height: 94px !important;
        height: 94px !important;
    }

    .modern-nav-shell {
        min-height: 94px;
        padding: 7px 10px !important;
    }

    .modern-brand-picture {
        width: 145px !important;
        max-width: 145px !important;
        height: 78px !important;
    }

    .modern-brand-picture img {
        max-width: 145px !important;
        max-height: 74px !important;
    }

    .modern-mobile-menu-toggle,
    .kingdom-discord-button,
    .kingdom-download-button {
        top: 25px;
        min-height: 44px;
        height: 44px;
    }

    .modern-mobile-menu-toggle {
        left: 10px;
        width: 44px !important;
    }

    .kingdom-discord-button {
        right: 94px;
        width: 44px;
        min-width: 44px;
    }

    .kingdom-download-button {
        right: 10px;
        min-width: 76px;
        padding: 0 10px;
        font-size: 10px;
    }

    .home-hero-split-section {
        padding: 12px 0 20px !important;
    }

    .container.home-hero-split {
        padding: 0 10px !important;
    }

    .home-countdown-card,
    .slider-container {
        border-radius: 2px !important;
    }

    .kingdom-feature-tape {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .kingdom-feature-tape::-webkit-scrollbar {
        display: none;
    }

    .kingdom-feature-track {
        justify-content: flex-start;
        min-height: 58px;
        font-size: 11px;
    }

    .home-stage {
        padding: 34px 0 60px !important;
        background-attachment: scroll !important;
    }

    .kingdom-showcase-grid {
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 220px repeat(4, 130px);
    }

    .kingdom-showcase-grid .home-promo-card:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .kingdom-showcase-grid .home-promo-card:nth-child(2) { grid-column: 1; grid-row: 2; }
    .kingdom-showcase-grid .home-promo-card:nth-child(3) { grid-column: 2; grid-row: 2; }
    .kingdom-showcase-grid .home-promo-card:nth-child(4) { grid-column: 1; grid-row: 3; }
    .kingdom-showcase-grid .home-promo-card:nth-child(5) { grid-column: 2; grid-row: 3; }
    .kingdom-showcase-grid .home-promo-card:nth-child(6) { grid-column: 1; grid-row: 4; }
    .kingdom-showcase-grid .home-promo-card:nth-child(7) { grid-column: 2; grid-row: 4; }
    .kingdom-showcase-grid .home-promo-card:nth-child(8) { grid-column: 1; grid-row: 5; }
    .kingdom-showcase-grid .home-promo-card:nth-child(9) { grid-column: 2; grid-row: 5; }

    .home-dashboard-grid {
        margin-top: 0;
    }

    .kingdom-rank-intro {
        justify-content: flex-start;
        margin: 48px 8px 24px;
    }

    .kingdom-rank-intro > span {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        font-size: 21px;
    }

    .kingdom-rank-intro h1 {
        font-size: 30px;
    }

    .home-sidebar {
        grid-template-columns: 1fr !important;
    }

    .kingdom-character-ranking {
        margin-top: 48px;
        overflow-x: auto;
    }

    .kingdom-character-ranking > header {
        position: sticky;
        left: 50%;
    }

    .kingdom-character-stage {
        width: 100%;
        height: clamp(520px, 92vw, 620px);
    }

    .kingdom-character-label-1,
    .kingdom-character-label-5 { top: 174px; }

    .kingdom-character-label-2,
    .kingdom-character-label-4 { top: 128px; }

    .kingdom-character-label-3 { top: 85px; }

    .kingdom-character-label > b { font-size: 28px; }
    .kingdom-character-label.rank-1 > b { font-size: 38px; }
    .kingdom-character-all { position: sticky; left: 50%; }
}

@media (max-width: 430px) {
    .modern-brand-picture {
        width: 126px !important;
        max-width: 126px !important;
    }

    .modern-brand-picture img {
        max-width: 126px !important;
    }

    .kingdom-download-button span {
        display: none;
    }

    .kingdom-download-button {
        min-width: 44px;
        width: 44px;
        padding: 0;
        font-size: 16px;
    }

    .kingdom-discord-button {
        right: 60px;
    }

    .slider-title {
        font-size: 22px !important;
    }

    .kingdom-showcase-grid {
        display: none !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 210px repeat(8, 140px);
    }

    .kingdom-showcase-grid .home-promo-card:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kingdom-login-button,
    .kingdom-register-button,
    .kingdom-download-button,
    .home-promo-card,
    .kingdom-mosaic-slide {
        transition: none !important;
    }
}