@charset "UTF-8";

/*
 * K2Network New Player Guide Center — R34
 * Namespace: k2gc-* (guide center), k2gd-nav-* (global header CTA only)
 * Visual direction: obsidian, forged metal, parchment, gold runes and restrained
 * class energy. No external image or font dependency is introduced here.
 */

/* --------------------------------------------------------------------------
   Header CTA
   -------------------------------------------------------------------------- */

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 18px minmax(0, auto);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 9px;
    width: auto;
    min-width: 218px;
    height: 50px;
    min-height: 50px;
    margin: 0 4px;
    padding: 6px 12px !important;
    overflow: hidden;
    border: 1px solid rgba(237, 190, 75, .62) !important;
    border-radius: 9px;
    background:
        linear-gradient(112deg, rgba(93, 25, 17, .94), rgba(29, 17, 12, .97) 48%, rgba(10, 12, 17, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 187, .12),
        inset 0 -1px 0 rgba(0, 0, 0, .6),
        0 0 18px rgba(204, 71, 30, .2);
    box-sizing: border-box;
    white-space: nowrap;
    transform: translateZ(0);
}

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 50%, rgba(255, 78, 43, .27), transparent 35%),
        linear-gradient(90deg, transparent, rgba(255, 216, 111, .12), transparent);
    opacity: .65;
    transform: scaleX(.94);
    animation: k2gd-nav-energy 3.2s ease-in-out infinite;
}

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(255, 227, 143, .08);
    border-radius: 6px;
}

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a:hover,
.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a:focus,
.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta.active > a {
    border-color: rgba(255, 218, 115, .92) !important;
    background:
        linear-gradient(112deg, rgba(117, 31, 18, .98), rgba(42, 22, 12, .98) 52%, rgba(13, 15, 20, .99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 187, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .65),
        0 0 24px rgba(224, 91, 34, .34);
}

.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a:hover::before,
.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a:focus::before,
.header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta.active > a::before {
    opacity: 1;
    transform: scaleX(1);
}

.header-navigation-wrapper .k2gd-nav-cta .header-menu-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 18px;
    margin: 0 !important;
    color: #f4c85e !important;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 10px rgba(244, 136, 50, .58);
}

.header-navigation-wrapper .k2gd-nav-copy {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.header-navigation-wrapper .k2gd-nav-cta .header-menu-text {
    display: block;
    max-width: none;
    overflow: visible;
    color: #ffe3a0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: .035em;
    text-overflow: clip;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
    white-space: nowrap;
}

.header-navigation-wrapper .k2gd-nav-badge {
    display: block;
    color: #f2b94d;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes k2gd-nav-energy {
    0%, 100% { opacity: .48; transform: scaleX(.94); }
    50% { opacity: .9; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Guide design tokens and document base
   -------------------------------------------------------------------------- */

.k2gc {
    --k2gc-obsidian-1000: #050609;
    --k2gc-obsidian-950: #080a0f;
    --k2gc-obsidian-900: #0d1017;
    --k2gc-iron-850: #141820;
    --k2gc-iron-800: #1a202a;
    --k2gc-iron-700: #252d39;
    --k2gc-parchment: #e8ddc5;
    --k2gc-parchment-dim: #b9ad98;
    --k2gc-gold-300: #ffe4a0;
    --k2gc-gold-400: #f6cc68;
    --k2gc-gold-500: #d9a83e;
    --k2gc-gold-600: #a87322;
    --k2gc-blood-400: #f05a45;
    --k2gc-blood-500: #be392b;
    --k2gc-ice-400: #75c9ef;
    --k2gc-arcane-400: #aa7df2;
    --k2gc-verdant-400: #71d38d;
    --k2gc-warning: #ffad62;
    --k2gc-danger: #ff756c;
    --k2gc-line: rgba(230, 202, 144, .14);
    --k2gc-line-strong: rgba(240, 202, 107, .38);
    --k2gc-panel: rgba(12, 15, 22, .94);
    --k2gc-panel-soft: rgba(18, 22, 31, .84);
    --k2gc-text: #eee7da;
    --k2gc-muted: #aaa99f;
    --k2gc-shadow: 0 22px 60px rgba(0, 0, 0, .42);
    --k2gc-radius-sm: 8px;
    --k2gc-radius: 14px;
    --k2gc-radius-lg: 22px;
    --k2gc-accent: var(--k2gc-gold-400);
    --k2gc-accent-rgb: 246, 204, 104;
    position: relative;
    min-height: 100vh;
    overflow: clip;
    color: var(--k2gc-text);
    background:
        radial-gradient(90% 55% at 50% -4%, rgba(120, 43, 25, .22), transparent 68%),
        radial-gradient(55% 45% at 95% 38%, rgba(85, 55, 123, .11), transparent 72%),
        linear-gradient(180deg, var(--k2gc-obsidian-950), #090b10 58%, #06070a);
    color-scheme: dark;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.55;
    isolation: isolate;
}

.k2gc::before,
.k2gc::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.k2gc::before {
    inset: 0;
    opacity: .22;
    background:
        repeating-linear-gradient(115deg, transparent 0 58px, rgba(255, 230, 164, .022) 59px 60px),
        repeating-linear-gradient(25deg, transparent 0 91px, rgba(255, 255, 255, .014) 92px 93px);
}

.k2gc::after {
    top: 280px;
    right: -180px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(176, 128, 57, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 58px rgba(176, 128, 57, .018),
        0 0 0 116px rgba(176, 128, 57, .012);
    opacity: .48;
    transform: rotate(14deg);
}

.k2gc *,
.k2gc *::before,
.k2gc *::after {
    box-sizing: border-box;
}

.k2gc img {
    max-width: 100%;
}

.k2gc a {
    color: inherit;
    text-decoration: none;
}

.k2gc button,
.k2gc input,
.k2gc select,
.k2gc textarea {
    color: inherit;
    font: inherit;
}

.k2gc button,
.k2gc [role="button"],
.k2gc a.k2gc-button,
.k2gc input,
.k2gc select {
    min-height: 44px;
}

.k2gc :focus {
    outline: none;
}

.k2gc :focus-visible,
.k2gd-nav-cta > a:focus-visible {
    outline: 3px solid var(--k2gc-focus, #ffd76a);
    outline-offset: 3px;
}

.k2gc [hidden] {
    display: none !important;
}

.k2gc .k2gc-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.k2gc.is-warrior { --k2gc-accent: #ef684c; --k2gc-accent-rgb: 239, 104, 76; }
.k2gc.is-rogue { --k2gc-accent: #78d594; --k2gc-accent-rgb: 120, 213, 148; }
.k2gc.is-priest { --k2gc-accent: #f4ce72; --k2gc-accent-rgb: 244, 206, 114; }
.k2gc.is-mage { --k2gc-accent: #8bcff2; --k2gc-accent-rgb: 139, 207, 242; }

/* --------------------------------------------------------------------------
   Shell and 12-column page architecture
   -------------------------------------------------------------------------- */

.k2gc-shell {
    width: 96vw;
    width: min(96vw, 1840px);
    max-width: 1840px;
    margin: 0 auto;
    padding: 0 16px 64px;
}

.k2gc-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(16px, 1.25vw, 24px);
    align-items: start;
    margin-top: 24px;
}

.k2gc-side-nav {
    grid-column: 1 / span 2;
    position: sticky;
    top: 76px;
    z-index: 20;
    max-height: calc(100vh - 96px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-main {
    grid-column: 3 / span 7;
    min-width: 0;
}

.k2gc-progress-panel {
    grid-column: 10 / span 3;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-side-nav,
.k2gc-progress-panel,
.k2gc-panel,
.k2gc-card {
    border: 1px solid var(--k2gc-line);
    border-radius: var(--k2gc-radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 36%),
        var(--k2gc-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 38px rgba(0, 0, 0, .2);
}

.k2gc-side-nav {
    padding: 10px;
}

.k2gc-side-nav__title {
    margin: 8px 10px 12px;
    color: var(--k2gc-gold-400);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.k2gc-side-nav__list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k2gc-side-nav__link {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--k2gc-muted);
    font-size: 13px;
    font-weight: 650;
}

.k2gc-side-nav__link::before {
    content: "";
    width: 3px;
    height: 20px;
    flex: 0 0 3px;
    border-radius: 3px;
    background: var(--k2gc-accent);
    opacity: 0;
    transform: scaleY(.3);
    transition: transform .18s ease, opacity .18s ease;
}

.k2gc-side-nav__link:hover,
.k2gc-side-nav__link.is-active,
.k2gc-side-nav__link[aria-current="true"] {
    color: var(--k2gc-text);
    background: rgba(var(--k2gc-accent-rgb), .09);
}

.k2gc-side-nav__link:hover::before,
.k2gc-side-nav__link.is-active::before,
.k2gc-side-nav__link[aria-current="true"]::before {
    opacity: 1;
    transform: scaleY(1);
}

.k2gc-progress-panel {
    padding: 18px;
}

.k2gc-progress-panel__eyebrow,
.k2gc-eyebrow {
    display: block;
    margin: 0 0 6px;
    color: var(--k2gc-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.k2gc-progress-panel__title {
    margin: 0 0 16px;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.18;
}

.k2gc-progress-panel__identity {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .22);
    border-radius: 12px;
    background: rgba(var(--k2gc-accent-rgb), .055);
}

.k2gc-progress-panel__crest {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .5);
    border-radius: 50%;
    background: var(--k2gc-iron-850);
    color: var(--k2gc-accent);
    font-size: 22px;
}

.k2gc-progress-panel__crest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k2gc-progress-list {
    display: grid;
    gap: 0;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.k2gc-progress-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    color: var(--k2gc-muted);
    font-size: 12px;
}

.k2gc-progress-list strong {
    color: var(--k2gc-text);
    font-size: 12px;
    text-align: right;
}

.k2gc-progress-target {
    position: relative;
    margin-top: 16px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .34);
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(var(--k2gc-accent-rgb), .12), rgba(255, 255, 255, .015));
}

.k2gc-progress-target::after {
    content: "";
    position: absolute;
    top: -35%;
    right: -20%;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .22);
    border-radius: 50%;
    opacity: .6;
    transform: rotate(25deg);
}

.k2gc-progress-target strong,
.k2gc-progress-target span {
    position: relative;
    z-index: 1;
    display: block;
}

.k2gc-progress-target strong {
    margin-top: 3px;
    color: #fff5df;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Hero, search and primary actions
   -------------------------------------------------------------------------- */

.k2gc-hero {
    position: relative;
    min-height: 520px;
    min-height: clamp(520px, 36vw, 700px);
    overflow: hidden;
    border: 1px solid rgba(230, 187, 89, .26);
    border-top: 0;
    border-radius: 0 0 var(--k2gc-radius-lg) var(--k2gc-radius-lg);
    background:
        linear-gradient(90deg, rgba(6, 7, 10, .95) 0%, rgba(8, 10, 14, .56) 48%, rgba(6, 7, 10, .9) 100%),
        radial-gradient(ellipse at 50% 76%, rgba(172, 57, 26, .23), transparent 53%),
        linear-gradient(180deg, #15161b, #090a0e 72%);
    box-shadow: var(--k2gc-shadow);
    isolation: isolate;
}

.k2gc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 50%, rgba(4, 5, 8, .9)),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(246, 204, 104, .025) 120px 121px);
}

.k2gc-hero::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: -210px;
    z-index: -1;
    width: 620px;
    height: 620px;
    pointer-events: none;
    border: 1px solid rgba(247, 197, 80, .16);
    border-radius: 50%;
    box-shadow:
        0 0 0 58px rgba(247, 197, 80, .018),
        0 0 0 116px rgba(247, 197, 80, .012);
    opacity: .62;
    transform: rotate(-10deg);
    animation: k2gc-rune-drift 12s ease-in-out infinite alternate;
}

.k2gc-hero__backdrop,
.k2gc-hero__class-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.k2gc-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
}

.k2gc-hero__class-art {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    padding: 12px 3% 0 37%;
}

.k2gc-hero__class-art img {
    width: 27%;
    max-height: 94%;
    margin-left: -5%;
    object-fit: contain;
    object-position: center bottom;
    opacity: .86;
    transform: translateY(2%);
}

.k2gc-hero__class-art img:nth-child(2),
.k2gc-hero__class-art img:nth-child(3) {
    z-index: 2;
    width: 30%;
}

.k2gc-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    width: min(760px, 62%);
    min-height: inherit;
    flex-direction: column;
    justify-content: center;
    padding: clamp(46px, 5vw, 88px);
}

.k2gc-hero__title {
    max-width: 720px;
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 3.35vw, 64px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.025em;
    text-wrap: balance;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .88);
}

.k2gc-hero__title em {
    display: block;
    color: var(--k2gc-gold-400);
    font-style: normal;
}

.k2gc-hero__lead {
    max-width: 660px;
    margin: 18px 0 0;
    color: #c7c0b3;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.65;
    text-shadow: 0 2px 12px #000;
}

.k2gc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.k2gc-button {
    position: relative;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 17px;
    overflow: hidden;
    border: 1px solid var(--k2gc-line-strong);
    border-radius: 9px;
    background: var(--k2gc-iron-850);
    color: var(--k2gc-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .025em;
    text-align: center;
    transform: translateZ(0);
    transition: transform .18s ease, opacity .18s ease;
}

.k2gc-button::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .16), transparent 78%);
    opacity: 0;
    transform: translateX(-65%);
    transition: transform .28s ease, opacity .18s ease;
}

.k2gc-button:hover {
    color: #fff;
    transform: translateY(-2px);
}

.k2gc-button:hover::after {
    opacity: .8;
    transform: translateX(65%);
}

.k2gc-button--primary {
    border-color: #f5d17c;
    background: linear-gradient(180deg, #ffe8a8, #d5a13a);
    color: #1d1308;
    box-shadow: 0 8px 24px rgba(189, 115, 31, .22);
}

.k2gc-button--danger {
    border-color: rgba(240, 90, 69, .58);
    background: linear-gradient(180deg, #d64d39, #8e251e);
    color: #fff6ed;
}

.k2gc-search {
    position: relative;
    z-index: 30;
    width: min(680px, 100%);
    margin-top: 22px;
}

.k2gc-search__field {
    position: relative;
}

.k2gc-search__input {
    width: 100%;
    height: 52px;
    padding: 0 52px 0 17px;
    border: 1px solid rgba(235, 201, 123, .3);
    border-radius: 10px;
    background: rgba(7, 9, 13, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .23);
    color: #fff8e9;
    font-size: 14px;
}

.k2gc-search__input::placeholder {
    color: #8f8c84;
    opacity: 1;
}

.k2gc-search__input:focus {
    border-color: var(--k2gc-gold-400);
    box-shadow: 0 0 0 3px rgba(246, 204, 104, .14), 0 12px 30px rgba(0, 0, 0, .28);
}

.k2gc-search__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    color: var(--k2gc-gold-400);
    transform: translateY(-50%);
}

.k2gc-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 80;
    max-height: min(520px, 65vh);
    overflow: auto;
    border: 1px solid rgba(235, 201, 123, .32);
    border-radius: 12px;
    background: #0b0e14;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .62);
    opacity: 0;
    transform: translateY(-7px) scale(.99);
    pointer-events: none;
    transition: transform .16s ease, opacity .16s ease;
}

.k2gc-search-results.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.k2gc-search-results__group {
    padding: 9px 14px 6px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: var(--k2gc-gold-400);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.k2gc-search-results__group:first-child {
    border-top: 0;
}

.k2gc-search-results a,
.k2gc-search-results button,
.k2gc-search-result {
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--k2gc-text);
    text-align: left;
}

.k2gc-search-results a:hover,
.k2gc-search-results button:hover,
.k2gc-search-result.is-keyboard-active {
    background: rgba(246, 204, 104, .075);
}

.k2gc-search-result__meta {
    color: var(--k2gc-muted);
    font-size: 11px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Portal navigation and shared sections
   -------------------------------------------------------------------------- */

.k2gc-quick-portals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.k2gc-quick-portal {
    position: relative;
    display: grid;
    min-height: 112px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--k2gc-line);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .03), transparent 50%),
        rgba(13, 16, 23, .94);
    transform: translateZ(0);
    transition: transform .2s ease, opacity .2s ease;
}

.k2gc-quick-portal::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -45px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .22);
    border-radius: 50%;
    opacity: .45;
    transform: scale(.88);
    transition: transform .2s ease, opacity .2s ease;
}

.k2gc-quick-portal:hover {
    transform: translateY(-4px);
}

.k2gc-quick-portal:hover::after {
    opacity: .9;
    transform: scale(1);
}

.k2gc-quick-portal__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .33);
    border-radius: 50%;
    background: rgba(var(--k2gc-accent-rgb), .08);
    color: var(--k2gc-accent);
    font-size: 18px;
}

.k2gc-quick-portal strong,
.k2gc-quick-portal small {
    display: block;
}

.k2gc-quick-portal strong {
    color: #fff8e9;
    font-size: 13px;
    line-height: 1.25;
}

.k2gc-quick-portal small {
    margin-top: 4px;
    color: var(--k2gc-muted);
    font-size: 11px;
    line-height: 1.35;
}

.k2gc-section {
    position: relative;
    margin-top: 38px;
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
}

.k2gc-section:first-child {
    margin-top: 0;
}

.k2gc-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--k2gc-line);
}

.k2gc-section-header__title {
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2vw, 34px);
    line-height: 1.1;
}

.k2gc-section-header__lead {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--k2gc-muted);
    font-size: 13px;
}

.k2gc-card {
    position: relative;
    padding: 18px;
}

.k2gc-card--legendary {
    border-color: rgba(170, 125, 242, .44);
    background:
        radial-gradient(circle at 82% 15%, rgba(170, 125, 242, .16), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 36%),
        var(--k2gc-panel);
}

.k2gc-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--k2gc-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--k2gc-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.k2gc-badge--gold { border-color: rgba(246, 204, 104, .36); color: var(--k2gc-gold-400); background: rgba(246, 204, 104, .08); }
.k2gc-badge--solo { border-color: rgba(113, 211, 141, .34); color: var(--k2gc-verdant-400); background: rgba(113, 211, 141, .08); }
.k2gc-badge--party { border-color: rgba(117, 201, 239, .34); color: var(--k2gc-ice-400); background: rgba(117, 201, 239, .08); }
.k2gc-badge--danger { border-color: rgba(240, 90, 69, .4); color: #ff8f7f; background: rgba(240, 90, 69, .09); }
.k2gc-badge--arcane { border-color: rgba(170, 125, 242, .4); color: #c4a4f8; background: rgba(170, 125, 242, .09); }

/* --------------------------------------------------------------------------
   Class portals
   -------------------------------------------------------------------------- */

.k2gc-class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.3vw, 22px);
}

.k2gc-class-portal {
    --portal-accent: var(--k2gc-gold-400);
    position: relative;
    min-height: clamp(460px, 32vw, 600px);
    overflow: hidden;
    border: 1px solid rgba(230, 202, 144, .17);
    border-radius: 16px;
    background: #0a0c11;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .24s ease, opacity .24s ease;
}

.k2gc-class-portal.is-warrior { --portal-accent: #ef684c; }
.k2gc-class-portal.is-rogue { --portal-accent: #78d594; }
.k2gc-class-portal.is-priest { --portal-accent: #f4ce72; }
.k2gc-class-portal.is-mage { --portal-accent: #8bcff2; }

.k2gc-class-portal:hover,
.k2gc-class-portal:focus-within {
    transform: translateY(-7px);
}

.k2gc-class-portal__art,
.k2gc-class-portal__shade,
.k2gc-class-portal__energy {
    position: absolute;
    inset: 0;
}

.k2gc-class-portal__art {
    z-index: -3;
}

.k2gc-class-portal__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.001);
    transition: transform .36s ease, opacity .2s ease;
}

.k2gc-class-portal:hover .k2gc-class-portal__art img {
    transform: scale(1.045);
}

.k2gc-class-portal__shade {
    z-index: -2;
    background: linear-gradient(180deg, rgba(4, 5, 8, .04) 18%, rgba(4, 5, 8, .38) 52%, rgba(4, 5, 8, .98) 88%);
}

.k2gc-class-portal__energy {
    z-index: -1;
    background: radial-gradient(85% 52% at 50% 102%, color-mix(in srgb, var(--portal-accent) 42%, transparent), transparent 72%);
    opacity: .55;
    transform: scale(.96);
    transition: transform .24s ease, opacity .24s ease;
}

.k2gc-class-portal:hover .k2gc-class-portal__energy {
    opacity: .86;
    transform: scale(1.03);
}

.k2gc-class-portal__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 22px;
}

.k2gc-class-portal__title {
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1;
    text-shadow: 0 3px 16px #000;
}

.k2gc-class-portal__role {
    display: block;
    margin-top: 7px;
    color: var(--portal-accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.k2gc-class-portal__summary {
    margin: 10px 0 0;
    color: #c2beb4;
    font-size: 12px;
    line-height: 1.5;
}

.k2gc-class-portal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 15px;
}

.k2gc-class-portal__actions .k2gc-button:first-child {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Development constellation, stats and skills
   -------------------------------------------------------------------------- */

.k2gc-constellation {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 22px 16px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--k2gc-line);
    border-radius: var(--k2gc-radius-lg);
    background:
        radial-gradient(circle at 22% 18%, rgba(246, 204, 104, .075), transparent 30%),
        radial-gradient(circle at 78% 74%, rgba(170, 125, 242, .07), transparent 30%),
        #090c12;
}

.k2gc-constellation::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 12%, rgba(246, 204, 104, .08) 12.2% 12.4%, transparent 12.6%),
        linear-gradient(0deg, transparent 49%, rgba(246, 204, 104, .07) 49.2% 49.4%, transparent 49.6%);
    opacity: .42;
}

.k2gc-milestone {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 154px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-content: start;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(14, 18, 26, .9);
    opacity: .72;
    transform: translateZ(0);
    transition: transform .2s ease, opacity .2s ease;
}

.k2gc-milestone:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.k2gc-milestone.is-complete {
    border-color: rgba(246, 204, 104, .34);
    opacity: 1;
}

.k2gc-milestone.is-current {
    border-color: rgba(240, 90, 69, .58);
    background: linear-gradient(135deg, rgba(190, 57, 43, .18), rgba(14, 18, 26, .94) 58%);
    box-shadow: 0 0 28px rgba(190, 57, 43, .14);
    opacity: 1;
}

.k2gc-milestone.is-legendary {
    border-color: rgba(170, 125, 242, .48);
    background: linear-gradient(135deg, rgba(125, 79, 190, .16), rgba(14, 18, 26, .94) 60%);
    opacity: 1;
}

.k2gc-milestone__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(246, 204, 104, .3);
    border-radius: 50%;
    background: #171c27;
    color: var(--k2gc-gold-400);
    font-size: 18px;
}

.k2gc-milestone.is-current .k2gc-milestone__icon { border-color: var(--k2gc-blood-400); color: #ff9a83; }
.k2gc-milestone.is-legendary .k2gc-milestone__icon { border-color: var(--k2gc-arcane-400); color: #c4a4f8; }

.k2gc-milestone__title {
    margin: 1px 0 0;
    color: #fff8e9;
    font-size: 13px;
    line-height: 1.25;
}

.k2gc-milestone__meta,
.k2gc-milestone__next {
    grid-column: 1 / -1;
    color: var(--k2gc-muted);
    font-size: 11px;
    line-height: 1.45;
}

.k2gc-milestone__next {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    color: #c7b98e;
}

.k2gc-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 14px;
}

.k2gc-stat-core {
    display: grid;
    min-height: 190px;
    place-items: center;
    padding: 18px;
    text-align: center;
}

.k2gc-stat-core__ring {
    --stat-value: 0%;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #10141d 58%, transparent 60%),
        conic-gradient(var(--k2gc-accent) var(--stat-value), rgba(255, 255, 255, .075) 0);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .6), 0 0 24px rgba(var(--k2gc-accent-rgb), .12);
}

.k2gc-stat-core__ring strong,
.k2gc-stat-core__ring small {
    display: block;
}

.k2gc-stat-core__ring strong {
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1;
}

.k2gc-stat-core__ring small {
    margin-top: 3px;
    color: var(--k2gc-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
}

.k2gc-threshold {
    margin-top: 14px;
}

.k2gc-threshold__labels,
.k2gc-progress-meter__labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--k2gc-muted);
    font-size: 11px;
}

.k2gc-threshold__track,
.k2gc-progress-meter__track {
    height: 8px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.k2gc-threshold__fill,
.k2gc-progress-meter__fill {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--k2gc-accent), var(--k2gc-gold-300));
    transform-origin: left center;
}

.k2gc-skill-tree {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(118px, 1fr));
    gap: 26px 16px;
    min-width: 820px;
    padding: 26px;
    border: 1px solid var(--k2gc-line);
    border-radius: var(--k2gc-radius);
    background: #090c12;
}

.k2gc-skill-tree-wrap {
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-skill-node {
    position: relative;
    display: grid;
    min-height: 136px;
    place-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: #141923;
    text-align: center;
    scroll-snap-align: start;
    opacity: .58;
}

.k2gc-skill-node.is-unlocked,
.k2gc-skill-node.is-milestone {
    border-color: rgba(var(--k2gc-accent-rgb), .4);
    opacity: 1;
}

.k2gc-skill-node__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .4);
    border-radius: 9px;
    background: #090b10;
    color: var(--k2gc-accent);
}

.k2gc-skill-node__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k2gc-skill-node strong {
    color: #fff8e9;
    font-size: 11px;
    line-height: 1.25;
}

.k2gc-skill-node small {
    color: var(--k2gc-muted);
    font-size: 10px;
}

/* --------------------------------------------------------------------------
   Monster Codex and item system
   -------------------------------------------------------------------------- */

.k2gc-codex-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.k2gc-monster-card {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    padding: 0;
    transform: translateZ(0);
    transition: transform .22s ease, opacity .22s ease;
}

.k2gc-monster-card:hover,
.k2gc-monster-card:focus-within {
    transform: translateY(-5px);
}

.k2gc-monster-card__visual {
    position: relative;
    display: grid;
    min-height: 280px;
    place-items: end center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 84%, rgba(var(--k2gc-accent-rgb), .18), transparent 56%),
        linear-gradient(180deg, #171b22, #0a0d13);
}

.k2gc-monster-card__visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(7, 9, 13, .98));
}

.k2gc-monster-card__visual img {
    width: 100%;
    height: 100%;
    max-height: 330px;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.001);
    transition: transform .3s ease, opacity .2s ease;
}

.k2gc-monster-card:hover .k2gc-monster-card__visual img {
    transform: scale(1.04) translateY(-3px);
}

.k2gc-monster-card__threat {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.k2gc-monster-card__body {
    padding: 17px;
}

.k2gc-monster-card__family {
    color: var(--k2gc-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.k2gc-monster-card__title {
    margin: 4px 0 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.05;
}

.k2gc-monster-card__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.k2gc-monster-card__meta span {
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
    color: var(--k2gc-muted);
    font-size: 10px;
    text-align: center;
}

.k2gc-monster-card__meta b {
    display: block;
    margin-top: 2px;
    color: var(--k2gc-text);
    font-size: 11px;
}

.k2gc-threat-meter {
    display: flex;
    gap: 3px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(240, 90, 69, .34);
    border-radius: 999px;
    background: rgba(8, 10, 14, .82);
}

.k2gc-threat-meter i {
    width: 6px;
    height: 14px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .14);
}

.k2gc-threat-meter i.is-on {
    background: var(--k2gc-blood-400);
    box-shadow: 0 0 7px rgba(240, 90, 69, .5);
}

.k2gc-drop-strip {
    display: flex;
    gap: 9px;
    margin-top: 14px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-item {
    --rarity: rgba(174, 181, 192, .52);
    position: relative;
    display: grid;
    min-width: 150px;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    scroll-snap-align: start;
}

.k2gc-item.is-uncommon { --rarity: rgba(113, 211, 141, .68); }
.k2gc-item.is-rare { --rarity: rgba(117, 201, 239, .72); }
.k2gc-item.is-epic { --rarity: rgba(170, 125, 242, .78); }
.k2gc-item.is-legendary { --rarity: rgba(246, 164, 73, .84); }

.k2gc-item-icon {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--rarity, rgba(174, 181, 192, .52));
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity, #aaa) 18%, transparent), transparent 68%),
        #111621;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .56), 0 0 15px color-mix(in srgb, var(--rarity, #aaa) 16%, transparent);
}

.k2gc-item-icon--small { width: 48px; height: 48px; flex-basis: 48px; border-radius: 8px; }
.k2gc-item-icon--showcase { width: 112px; height: 112px; flex-basis: 112px; border-radius: 14px; }

.k2gc-item-icon img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
}

.k2gc-item-icon__upgrade {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 23px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 234, 174, .52);
    border-radius: 5px;
    background: rgba(7, 8, 11, .94);
    color: var(--k2gc-gold-300);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.k2gc-item__name {
    color: #fff8e9;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
}

.k2gc-item__meta {
    margin-top: 3px;
    color: var(--k2gc-muted);
    font-size: 10px;
    line-height: 1.35;
}

.k2gc-item-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.k2gc-item-showcase .k2gc-item {
    min-width: 0;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 13px;
}

/* --------------------------------------------------------------------------
   Daily quests, collection race and quest progress
   -------------------------------------------------------------------------- */

.k2gc-q-callout {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(246, 204, 104, .4);
    border-radius: var(--k2gc-radius);
    background:
        radial-gradient(circle at 7% 50%, rgba(246, 204, 104, .18), transparent 20%),
        linear-gradient(110deg, #211a0f, #10131a 62%);
}

.k2gc-q-callout__key {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 2px solid var(--k2gc-gold-400);
    border-radius: 17px;
    background: linear-gradient(145deg, #393121, #13151a);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .4), 0 0 22px rgba(246, 204, 104, .2);
    color: var(--k2gc-gold-300);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 700;
}

.k2gc-q-callout h2 {
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2vw, 31px);
    line-height: 1.1;
}

.k2gc-q-callout p {
    max-width: 760px;
    margin: 7px 0 0;
    color: #bdb5a5;
    font-size: 13px;
}

.k2gc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.k2gc-filter {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--k2gc-line);
    border-radius: 999px;
    background: #11151e;
    color: var(--k2gc-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.k2gc-filter:hover,
.k2gc-filter.is-active,
.k2gc-filter[aria-pressed="true"] {
    border-color: rgba(246, 204, 104, .48);
    background: rgba(246, 204, 104, .1);
    color: var(--k2gc-gold-300);
}

.k2gc-quest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.k2gc-quest-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 72px;
    gap: 14px;
    align-items: center;
    padding: 15px;
}

.k2gc-quest-card__monster {
    width: 104px;
    height: 112px;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 70%, rgba(var(--k2gc-accent-rgb), .16), transparent 60%), #0b0e14;
}

.k2gc-quest-card__monster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.k2gc-quest-card h3 {
    margin: 0;
    color: #fff8e9;
    font-size: 16px;
    line-height: 1.2;
}

.k2gc-quest-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.k2gc-quest-card__reward {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
}

.k2gc-progress-ring {
    --progress: 0%;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #11151d 58%, transparent 60%),
        conic-gradient(var(--k2gc-accent) var(--progress), rgba(255, 255, 255, .08) 0);
    color: #fff8e9;
    font-size: 11px;
    font-weight: 850;
}

/* --------------------------------------------------------------------------
   Shozin forge and Cold Evil upgrade path
   -------------------------------------------------------------------------- */

.k2gc-forge {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 170px minmax(240px, 1fr);
    gap: 20px;
    align-items: stretch;
    padding: clamp(18px, 2.4vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(170, 125, 242, .34);
    border-radius: var(--k2gc-radius-lg);
    background:
        radial-gradient(circle at 50% 50%, rgba(125, 79, 190, .16), transparent 26%),
        radial-gradient(circle at 50% 108%, rgba(190, 57, 43, .13), transparent 48%),
        #090b11;
}

.k2gc-forge::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 270px;
    height: 270px;
    pointer-events: none;
    border: 1px solid rgba(170, 125, 242, .17);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(170, 125, 242, .015), 0 0 0 68px rgba(170, 125, 242, .01);
    opacity: .8;
    transform: translate(-50%, -50%) rotate(8deg);
}

.k2gc-forge__ingredients,
.k2gc-forge__result {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 14px;
    background: rgba(14, 17, 25, .88);
}

.k2gc-forge__title {
    margin: 0 0 13px;
    color: var(--k2gc-gold-400);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.k2gc-forge__ingredient {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.k2gc-forge__ingredient:last-child {
    border-bottom: 0;
}

.k2gc-forge__ingredient.is-missing {
    opacity: .5;
}

.k2gc-forge__ingredient strong {
    color: #fff8e9;
    font-size: 12px;
}

.k2gc-forge__ingredient small {
    display: block;
    color: var(--k2gc-muted);
    font-size: 10px;
}

.k2gc-forge__quantity {
    color: var(--k2gc-gold-400);
    font-size: 13px;
    font-weight: 900;
}

.k2gc-forge__core {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 230px;
    place-items: center;
}

.k2gc-forge__sigil {
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
    border: 1px solid rgba(170, 125, 242, .5);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 125, 242, .24), rgba(15, 13, 24, .92) 62%);
    box-shadow: 0 0 38px rgba(170, 125, 242, .18), inset 0 0 26px rgba(170, 125, 242, .12);
    color: #c8aafa;
    font-size: 35px;
    opacity: .9;
    transform: rotate(0deg);
    animation: k2gc-forge-breathe 4.6s ease-in-out infinite;
}

.k2gc-forge__rate {
    position: absolute;
    bottom: 16px;
    min-width: 118px;
    padding: 7px 10px;
    border: 1px solid rgba(113, 211, 141, .32);
    border-radius: 999px;
    background: rgba(9, 14, 12, .9);
    color: var(--k2gc-verdant-400);
    font-size: 11px;
    font-weight: 850;
    text-align: center;
}

.k2gc-forge__result {
    display: grid;
    place-items: center;
    text-align: center;
}

.k2gc-forge__result .k2gc-item-icon {
    margin: 8px auto 14px;
}

.k2gc-forge__result h3 {
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.k2gc-upgrade-path {
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow-x: auto;
    padding: 16px 4px 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-upgrade-node {
    position: relative;
    flex: 1 0 210px;
    padding: 18px;
    border: 1px solid var(--k2gc-line);
    border-radius: 14px;
    background: var(--k2gc-panel);
    scroll-snap-align: start;
}

.k2gc-upgrade-node:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: -14px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(246, 204, 104, .35);
    border-radius: 50%;
    background: #0b0e14;
    color: var(--k2gc-gold-400);
    font-size: 21px;
    line-height: 22px;
    text-align: center;
    transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Rebirth, Logos and bonuses
   -------------------------------------------------------------------------- */

.k2gc-rebirth-journey {
    position: relative;
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 34px 14px 28px;
    border: 1px solid var(--k2gc-line);
    border-radius: var(--k2gc-radius-lg);
    background:
        radial-gradient(circle at 100% 50%, rgba(170, 125, 242, .11), transparent 26%),
        #090c12;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--k2gc-gold-600) transparent;
}

.k2gc-rebirth-node {
    position: relative;
    flex: 0 0 92px;
    min-width: 92px;
    text-align: center;
    scroll-snap-align: center;
}

.k2gc-rebirth-node::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .09);
}

.k2gc-rebirth-node:first-child::before {
    display: none;
}

.k2gc-rebirth-node__orb {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: #161b25;
    color: #858992;
    font-size: 12px;
    font-weight: 900;
}

.k2gc-rebirth-node.is-complete::before,
.k2gc-rebirth-node.is-complete .k2gc-rebirth-node__orb {
    border-color: rgba(246, 204, 104, .68);
    background-color: var(--k2gc-gold-500);
    color: #211607;
}

.k2gc-rebirth-node.is-complete::before {
    background: var(--k2gc-gold-500);
}

.k2gc-rebirth-node.is-current .k2gc-rebirth-node__orb {
    border-color: #ff9b71;
    background: #9f2e23;
    color: #fff;
    box-shadow: 0 0 20px rgba(240, 90, 69, .35);
}

.k2gc-rebirth-node.is-milestone .k2gc-rebirth-node__orb {
    width: 56px;
    height: 56px;
    margin-top: -4px;
    border-color: var(--k2gc-arcane-400);
    color: #d2b8ff;
}

.k2gc-rebirth-node small {
    display: block;
    margin-top: 8px;
    color: var(--k2gc-muted);
    font-size: 9px;
}

.k2gc-logos-showcase {
    position: relative;
    display: grid;
    min-height: 380px;
    grid-template-columns: minmax(200px, .8fr) minmax(300px, 1.2fr);
    gap: 28px;
    align-items: center;
    padding: clamp(24px, 3vw, 46px);
    overflow: hidden;
    border: 1px solid rgba(170, 125, 242, .5);
    border-radius: var(--k2gc-radius-lg);
    background:
        radial-gradient(circle at 20% 50%, rgba(170, 125, 242, .22), transparent 30%),
        radial-gradient(circle at 88% 20%, rgba(246, 204, 104, .12), transparent 26%),
        linear-gradient(125deg, #191126, #0a0c12 58%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.k2gc-logos-showcase::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 22%;
    width: 290px;
    height: 290px;
    pointer-events: none;
    border: 1px solid rgba(195, 157, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(170, 125, 242, .018), 0 0 55px rgba(170, 125, 242, .18);
    opacity: .8;
    transform: translate(-50%, -50%) rotate(10deg);
    animation: k2gc-logos-aura 4.8s ease-in-out infinite;
}

.k2gc-logos-showcase__item,
.k2gc-logos-showcase__body {
    position: relative;
    z-index: 1;
}

.k2gc-logos-showcase__item {
    display: grid;
    place-items: center;
}

.k2gc-logos-showcase__body h2 {
    margin: 0;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1;
}

.k2gc-logos-showcase__body p {
    max-width: 690px;
    margin: 14px 0 0;
    color: #c5bdd0;
    font-size: 14px;
    line-height: 1.65;
}

.k2gc-upgrade-simulation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.2fr;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

.k2gc-upgrade-simulation__slot {
    min-height: 92px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(8, 9, 14, .55);
    color: #fff8e9;
    font-size: 12px;
    text-align: center;
}

.k2gc-upgrade-simulation__operator {
    color: var(--k2gc-gold-400);
    font-size: 22px;
    font-weight: 900;
}

.k2gc-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.k2gc-feature-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    padding: 22px;
}

.k2gc-feature-card::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -66px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(var(--k2gc-accent-rgb), .2);
    border-radius: 50%;
    opacity: .5;
}

.k2gc-feature-card__value {
    display: block;
    margin-top: 12px;
    color: var(--k2gc-accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 700;
    line-height: 1;
}

.k2gc-feature-card h3 {
    margin: 0;
    color: #fff8e9;
    font-size: 16px;
}

.k2gc-feature-card p {
    max-width: 580px;
    margin: 12px 0 0;
    color: var(--k2gc-muted);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Drawer, loading, empty and asset states
   -------------------------------------------------------------------------- */

body.k2gc-drawer-open {
    overflow: hidden;
}

.k2gc-drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(3, 4, 7, .82);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.k2gc-drawer-mask.is-open {
    opacity: 1;
    pointer-events: auto;
}

.k2gc-drawer {
    position: fixed;
    inset: 24px;
    z-index: 1090;
    display: flex;
    max-width: 1640px;
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(235, 201, 123, .34);
    border-radius: 18px;
    background: #090c12;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .76);
    opacity: 0;
    transform: translateY(18px) scale(.985);
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}

.k2gc-drawer.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.k2gc-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(7, 9, 13, .88);
    color: #fff;
    cursor: pointer;
    font-size: 21px;
}

.k2gc-drawer__content {
    width: 100%;
    overflow: auto;
}

.k2gc-monster-detail {
    display: grid;
    min-height: 100%;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr) minmax(310px, 1fr);
}

.k2gc-monster-detail__visual,
.k2gc-monster-detail__combat,
.k2gc-monster-detail__drops {
    min-width: 0;
    padding: clamp(24px, 2.6vw, 42px);
}

.k2gc-monster-detail__visual {
    display: flex;
    min-height: 520px;
    flex-direction: column;
    justify-content: flex-end;
    background: radial-gradient(circle at 50% 70%, rgba(var(--k2gc-accent-rgb), .17), transparent 48%), #10141b;
}

.k2gc-monster-detail__visual img {
    width: 100%;
    height: min(54vh, 560px);
    object-fit: contain;
    object-position: center bottom;
}

.k2gc-monster-detail__combat {
    border-right: 1px solid var(--k2gc-line);
    border-left: 1px solid var(--k2gc-line);
}

.k2gc-loading,
.k2gc-empty,
.k2gc-asset-missing {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 28px;
    border: 1px solid var(--k2gc-line);
    border-radius: var(--k2gc-radius);
    background: rgba(12, 15, 22, .9);
    color: var(--k2gc-muted);
    text-align: center;
}

.k2gc-empty__icon,
.k2gc-asset-missing__icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid var(--k2gc-line-strong);
    border-radius: 50%;
    color: var(--k2gc-gold-400);
    font-size: 23px;
}

.k2gc-asset-missing {
    border-style: dashed;
    background: rgba(12, 15, 22, .66);
}

.k2gc-skeleton {
    position: relative;
    min-height: 64px;
    overflow: hidden;
    border-radius: 9px;
    background: #151a23;
}

.k2gc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .075) 48%, transparent 68%);
    transform: translateX(-100%);
    animation: k2gc-skeleton-sweep 1.35s ease-in-out infinite;
}

.k2gc-lazy {
    opacity: 0;
    transition: opacity .22s ease;
}

.k2gc-lazy.is-loaded {
    opacity: 1;
}

.k2gc-lazy.is-error {
    opacity: .3;
}

@keyframes k2gc-rune-drift {
    from { opacity: .38; transform: rotate(-10deg) translate3d(-8px, 4px, 0); }
    to { opacity: .68; transform: rotate(-7deg) translate3d(9px, -7px, 0); }
}

@keyframes k2gc-forge-breathe {
    0%, 100% { opacity: .68; transform: scale(.96) rotate(-2deg); }
    50% { opacity: 1; transform: scale(1.025) rotate(2deg); }
}

@keyframes k2gc-logos-aura {
    0%, 100% { opacity: .52; transform: translate(-50%, -50%) scale(.96) rotate(8deg); }
    50% { opacity: .88; transform: translate(-50%, -50%) scale(1.025) rotate(12deg); }
}

@keyframes k2gc-skeleton-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   Responsive matrix: 2560 → 360
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .k2gc-shell {
        padding-right: 20px;
        padding-left: 20px;
    }

    .k2gc-codex-grid {
        grid-template-columns: repeat(3, minmax(320px, 1fr));
    }
}

@media (max-width: 1439px) {
    .header-navigation-wrapper .header-menu-navigation > li.k2gd-nav-cta > a {
        min-width: 192px;
        padding-right: 9px !important;
        padding-left: 9px !important;
    }

    .header-navigation-wrapper .k2gd-nav-cta .header-menu-text {
        font-size: 9px !important;
        letter-spacing: .01em;
    }

    .header-navigation-wrapper .k2gd-nav-badge {
        font-size: 7.5px;
        letter-spacing: .12em;
    }

    .k2gc-main {
        grid-column: 3 / span 7;
    }

    .k2gc-progress-panel {
        grid-column: 10 / span 3;
    }

    .k2gc-quick-portals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .k2gc-constellation {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }
}

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

    .k2gc-layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .k2gc-side-nav {
        grid-column: 1 / span 2;
    }

    .k2gc-main {
        grid-column: 3 / -1;
    }

    .k2gc-progress-panel {
        position: relative;
        top: auto;
        grid-column: 3 / -1;
        max-height: none;
    }

    .k2gc-class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k2gc-class-portal {
        min-height: 540px;
    }

    .k2gc-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k2gc-codex-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k2gc-quest-grid {
        grid-template-columns: 1fr;
    }

    .k2gc-forge {
        grid-template-columns: minmax(220px, 1fr) 145px minmax(220px, 1fr);
    }

    .k2gc-monster-detail {
        grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
    }

    .k2gc-monster-detail__drops {
        grid-column: 1 / -1;
        border-top: 1px solid var(--k2gc-line);
    }
}

@media (max-width: 979px) {
    .k2gc-shell {
        width: 94vw;
        padding-right: 8px;
        padding-left: 8px;
    }

    .k2gc-hero__content {
        width: 75%;
        padding: 48px 36px;
    }

    .k2gc-layout {
        display: block;
    }

    .k2gc-side-nav {
        position: sticky;
        top: 58px;
        z-index: 50;
        display: block;
        max-height: none;
        margin-bottom: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 7px;
    }

    .k2gc-side-nav__title {
        display: none;
    }

    .k2gc-side-nav__list {
        display: flex;
        min-width: max-content;
        gap: 4px;
    }

    .k2gc-side-nav__link {
        white-space: nowrap;
    }

    .k2gc-side-nav__link::before {
        width: 16px;
        height: 3px;
        flex-basis: 16px;
        transform: scaleX(.3);
    }

    .k2gc-side-nav__link:hover::before,
    .k2gc-side-nav__link.is-active::before,
    .k2gc-side-nav__link[aria-current="true"]::before {
        transform: scaleX(1);
    }

    .k2gc-progress-panel {
        margin-top: 22px;
    }

    .k2gc-constellation {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    .k2gc-forge {
        grid-template-columns: 1fr 110px 1fr;
        gap: 12px;
        padding: 18px;
    }

    .k2gc-forge__sigil {
        width: 92px;
        height: 92px;
    }

    .k2gc-logos-showcase {
        grid-template-columns: .65fr 1.35fr;
    }

    .k2gc-drawer {
        inset: 12px;
    }
}

@media (max-width: 767px) {
    .header-navigation-wrapper #header-menu .header-menu-navigation {
        display: flex !important;
        width: 100%;
        flex-direction: column;
    }

    .header-navigation-wrapper #header-menu .header-menu-navigation > li {
        float: none;
        width: 100%;
    }

    .header-navigation-wrapper #header-menu .header-menu-navigation > li.k2gd-nav-cta {
        order: -100;
        width: 100%;
        padding: 7px 0;
    }

    .header-navigation-wrapper #header-menu .header-menu-navigation > li.k2gd-nav-cta > a {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 64px;
        margin: 0;
        padding: 9px 15px !important;
        border-radius: 10px;
    }

    .header-navigation-wrapper #header-menu .k2gd-nav-cta .header-menu-text {
        font-size: 12px !important;
        letter-spacing: .035em;
    }

    .header-navigation-wrapper #header-menu .k2gd-nav-badge {
        font-size: 9px;
        letter-spacing: .17em;
    }

    .k2gc-shell {
        width: 100%;
        padding: 0 12px 44px;
    }

    .k2gc-hero {
        min-height: 520px;
        border-radius: 0 0 16px 16px;
    }

    .k2gc-hero__class-art {
        padding: 115px 0 0 23%;
        opacity: .42;
    }

    .k2gc-hero__content {
        width: 100%;
        min-height: 520px;
        justify-content: flex-end;
        padding: 34px 22px;
        background: linear-gradient(90deg, rgba(7, 8, 11, .9), rgba(7, 8, 11, .4));
    }

    .k2gc-hero__title {
        font-size: clamp(34px, 10vw, 48px);
    }

    .k2gc-actions .k2gc-button {
        flex: 1 1 150px;
    }

    .k2gc-quick-portals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k2gc-quick-portal {
        min-height: 104px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }

    .k2gc-quick-portal__icon {
        width: 36px;
        height: 36px;
    }

    .k2gc-section {
        margin-top: 30px;
    }

    .k2gc-section-header {
        display: block;
    }

    .k2gc-class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .k2gc-class-portal {
        min-height: 470px;
    }

    .k2gc-class-portal__body {
        padding: 16px;
    }

    .k2gc-class-portal__title {
        font-size: 24px;
    }

    .k2gc-class-portal__actions {
        grid-template-columns: 1fr;
    }

    .k2gc-class-portal__actions .k2gc-button:first-child {
        grid-column: auto;
    }

    .k2gc-constellation {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 18px;
        scroll-snap-type: x mandatory;
    }

    .k2gc-milestone {
        flex: 0 0 240px;
        scroll-snap-align: start;
    }

    .k2gc-codex-grid {
        grid-template-columns: 1fr;
    }

    .k2gc-monster-card {
        min-height: 430px;
    }

    .k2gc-monster-card__visual {
        min-height: 250px;
    }

    .k2gc-q-callout {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    .k2gc-q-callout__key {
        width: 68px;
        height: 68px;
        font-size: 34px;
    }

    .k2gc-q-callout .k2gc-button {
        grid-column: 1 / -1;
    }

    .k2gc-quest-card {
        grid-template-columns: 86px minmax(0, 1fr) 64px;
        gap: 10px;
    }

    .k2gc-quest-card__monster {
        width: 86px;
        height: 100px;
    }

    .k2gc-forge {
        display: block;
    }

    .k2gc-forge__core {
        min-height: 160px;
    }

    .k2gc-forge__rate {
        bottom: 8px;
    }

    .k2gc-feature-grid,
    .k2gc-logos-showcase {
        grid-template-columns: 1fr;
    }

    .k2gc-logos-showcase::before {
        top: 24%;
        left: 50%;
    }

    .k2gc-upgrade-simulation {
        grid-template-columns: 1fr;
    }

    .k2gc-upgrade-simulation__operator {
        transform: rotate(90deg);
        text-align: center;
    }

    .k2gc-drawer {
        inset: 0;
        border: 0;
        border-radius: 0;
    }

    .k2gc-monster-detail {
        display: block;
    }

    .k2gc-monster-detail__visual {
        min-height: 430px;
    }

    .k2gc-monster-detail__combat {
        border: 0;
        border-top: 1px solid var(--k2gc-line);
        border-bottom: 1px solid var(--k2gc-line);
    }
}

@media (max-width: 599px) {
    .k2gc-hero {
        min-height: 500px;
    }

    .k2gc-hero__content {
        min-height: 500px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .k2gc-search__input {
        height: 50px;
        font-size: 13px;
    }

    .k2gc-class-grid,
    .k2gc-stat-grid {
        grid-template-columns: 1fr;
    }

    .k2gc-class-portal {
        min-height: 530px;
    }

    .k2gc-quest-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .k2gc-quest-card__monster {
        width: 74px;
        height: 90px;
    }

    .k2gc-quest-card .k2gc-progress-ring {
        grid-column: 1 / -1;
        width: 100%;
        height: 44px;
        border-radius: 9px;
        background: rgba(var(--k2gc-accent-rgb), .12);
    }

    .k2gc-item-showcase {
        grid-template-columns: 1fr;
    }

    .k2gc-monster-detail__visual,
    .k2gc-monster-detail__combat,
    .k2gc-monster-detail__drops {
        padding: 22px 16px;
    }
}

@media (max-width: 430px) {
    .k2gc-shell {
        padding-right: 10px;
        padding-left: 10px;
    }

    .k2gc-hero__title {
        font-size: 37px;
    }

    .k2gc-hero__lead {
        font-size: 13px;
    }

    .k2gc-quick-portals {
        grid-template-columns: 1fr;
    }

    .k2gc-quick-portal {
        min-height: 86px;
    }

    .k2gc-section-header__title {
        font-size: 25px;
    }

    .k2gc-class-portal {
        min-height: 500px;
    }

    .k2gc-q-callout {
        display: block;
        text-align: center;
    }

    .k2gc-q-callout__key {
        margin: 0 auto 14px;
    }

    .k2gc-q-callout .k2gc-button {
        width: 100%;
        margin-top: 14px;
    }

    .k2gc-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .k2gc-filter {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .k2gc-monster-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gc-search-results .gd-sr-group { padding: 9px 14px 6px; border-top: 1px solid rgba(255,255,255,.06); color: var(--gc-gold); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.gc-search-results .gd-sr-item { display: grid; min-height: 52px; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px 14px; color: #eee6d8; text-decoration: none; }
.gc-search-results .gd-sr-item:hover, .gc-search-results .gd-sr-item.is-keyboard-active { background: rgba(246,204,104,.075); }
.gc-search-results .gd-sr-item > i { color: var(--gc-gold); text-align: center; }
.gc-search-results .gd-sr-item img { width: 38px; height: 38px; object-fit: contain; border-radius: 6px; }
.gc-search-results .gd-sr-item small { display: block; margin-top: 2px; color: #85827c; font-size: 8px; }
.gc-search-results .gd-sr-empty { padding: 22px; color: var(--gc-muted); font-size: 11px; text-align: center; }

.gc-monster-detail { padding: 8px; }
.gc-monster-detail-hero { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); overflow: hidden; border: 1px solid var(--gc-line); border-radius: 16px; background: #090d14; }
.gc-monster-detail-visual { min-height: 380px; background: radial-gradient(circle at 50% 70%,rgba(187,52,33,.15),transparent 45%),#070a0f; }
.gc-monster-detail-visual img { width: 100%; height: 430px; object-fit: contain; object-position: center bottom; }
.gc-monster-detail-title { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.gc-monster-detail-title h2 { margin: 7px 0 10px; color: #fff0d0; font: 700 clamp(30px,4vw,52px)/1 Georgia,serif; }
.gc-monster-detail-title p { color: var(--gc-muted); font-size: 12px; line-height: 1.55; }
.gc-monster-live-stats dl { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin: 14px 0; }
.gc-monster-live-stats dl > div { padding: 12px; border: 1px solid var(--gc-line); border-radius: 9px; background: #0c1017; }
.gc-monster-live-stats dt { color: #777a80; font-size: 7px; text-transform: uppercase; }
.gc-monster-live-stats dd { margin: 4px 0 0; color: #eee3cf; font-size: 11px; font-weight: 850; }
.gc-monster-spawns, .gc-monster-drop-showcase { margin-top: 18px; }
.gc-monster-spawns h3, .gc-monster-drop-showcase h3 { color: #fff0d0; font: 700 22px/1.1 Georgia,serif; }
.gc-spawn-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; }
.gc-spawn-card { padding: 11px; border: 1px solid var(--gc-line); border-radius: 9px; background: #0c1017; }
.gc-spawn-card strong, .gc-spawn-card span, .gc-spawn-card small { display: block; }
.gc-spawn-card strong { color: #eee3cf; font-size: 10px; }
.gc-spawn-card span { margin-top: 4px; color: var(--gc-gold); font-size: 9px; }
.gc-spawn-card small { color: #777a80; font-size: 8px; }
.gc-drop-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.gc-drop-card { display: grid; min-height: 108px; grid-template-columns: 80px minmax(0,1fr); gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--gc-line); border-radius: 11px; background: #0c1017; }
.gc-drop-icon { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(237,195,86,.25); border-radius: 9px; background: #111620; }
.gc-drop-icon img { width: 100%; height: 100%; object-fit: contain; }
.gc-drop-card strong, .gc-drop-card span { display: block; }
.gc-drop-card strong { color: #eee4d3; font-size: 10px; }
.gc-drop-card span, .gc-drop-card small { margin-top: 4px; color: var(--gc-muted); font-size: 8px; }
.gc-drop-pool { display: block; grid-column: 1 / -1; }
.gc-pool-items { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 6px; margin-top: 10px; }
.gc-pool-items > span { display: flex; gap: 7px; align-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 7px; }
.gc-pool-items img { width: 44px; height: 44px; object-fit: contain; }

@media (max-width: 767px) {
    .gc-monster-detail-hero { grid-template-columns: 1fr; }
    .gc-monster-detail-visual { min-height: 300px; }
    .gc-monster-live-stats dl { grid-template-columns: repeat(2,1fr); }
    .gc-drop-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .header-navigation-wrapper #header-menu .k2gd-nav-cta .header-menu-text {
        font-size: 11px !important;
    }

    .header-navigation-wrapper #header-menu .k2gd-nav-badge {
        font-size: 8px;
    }

    .k2gc-hero__content {
        padding-right: 16px;
        padding-left: 16px;
    }

    .k2gc-hero__title {
        font-size: 34px;
    }

    .k2gc-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .k2gc-item {
        min-width: 142px;
    }
}

@media (max-width: 360px) {
    .header-navigation-wrapper #header-menu .header-menu-navigation > li.k2gd-nav-cta > a {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .header-navigation-wrapper #header-menu .k2gd-nav-cta .header-menu-text {
        font-size: 10px !important;
        letter-spacing: 0;
    }

    .k2gc-hero__title {
        font-size: 32px;
    }

    .k2gc-milestone {
        flex-basis: 218px;
    }

    .k2gc-quest-card {
        display: block;
    }

    .k2gc-quest-card__monster {
        width: 100%;
        height: 170px;
        margin-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k2gd-nav-cta > a::before,
    .k2gc *,
    .k2gc *::before,
    .k2gc *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   R34 live PHP composition layer
   -------------------------------------------------------------------------- */

body.guide-center-page {
    background: #05070b;
}

.gc-page {
    position: relative;
    isolation: isolate;
    width: min(96vw, 1840px);
    margin: 18px auto 64px;
    padding: 0 clamp(10px, 1vw, 18px) 60px;
    box-sizing: border-box;
}

.gc-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgba(181, 44, 28, .13), transparent 27%),
        radial-gradient(circle at 84% 34%, rgba(80, 145, 191, .1), transparent 28%),
        linear-gradient(180deg, #07090e, #050609 46%, #09070a);
}

.gc-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    opacity: .55;
}

.gc-atmosphere i {
    position: absolute;
    width: 34vw;
    height: 34vw;
    border: 1px solid rgba(230, 188, 91, .055);
    border-radius: 50%;
    transform: translateZ(0);
    animation: gc-rune-drift 18s linear infinite;
}

.gc-atmosphere i:nth-child(1) { top: 8%; left: -12%; }
.gc-atmosphere i:nth-child(2) { top: 34%; right: -17%; animation-duration: 25s; animation-direction: reverse; }
.gc-atmosphere i:nth-child(3) { bottom: -18%; left: 34%; animation-duration: 31s; }

@keyframes gc-rune-drift { to { transform: rotate(360deg) translateZ(0); } }

.gc-cinematic-hero,
.gc-section-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 193, 105, .2);
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(7, 9, 14, .98), rgba(13, 12, 17, .88) 46%, rgba(7, 9, 14, .42)),
        radial-gradient(circle at 78% 42%, rgba(179, 45, 29, .2), transparent 32%),
        #080b11;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 240, 190, .06);
}

.gc-cinematic-hero {
    display: grid;
    min-height: clamp(540px, 34vw, 680px);
    grid-template-columns: minmax(390px, .82fr) minmax(720px, 1.55fr);
    align-items: stretch;
}

.gc-cinematic-hero::after,
.gc-section-hero::after {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border: 1px solid rgba(255, 226, 148, .055);
    border-radius: 17px;
}

.gc-hero-copy {
    position: relative;
    z-index: 4;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 4vw, 76px);
}

.gc-hero-copy h1,
.gc-section-hero h1 {
    margin: 10px 0 18px;
    color: #fff8e8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4vw, 68px);
    line-height: .98;
    letter-spacing: -.025em;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .85);
}

.gc-hero-copy p {
    max-width: 680px;
    margin: 0;
    color: #c6c0b5;
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.65;
}

.gc-eyebrow {
    display: inline-block;
    color: var(--gc-gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    line-height: 1.35;
    text-transform: uppercase;
}

.gc-hero-actions,
.gc-anchor-actions,
.gc-class-actions,
.gc-evidence-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.gc-hero-actions { margin-top: 26px; }
.gc-evidence-row { margin-top: 16px; }

.gc-btn,
.gc-text-link,
.gc-anchor-actions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--gc-line-strong);
    border-radius: 9px;
    color: #f6dfaa;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gc-btn:hover,
.gc-text-link:hover,
.gc-anchor-actions a:hover {
    border-color: rgba(255, 220, 126, .75);
    color: #fff5d7;
    transform: translateY(-2px);
}

.gc-btn-primary {
    border-color: rgba(245, 190, 70, .68);
    background: linear-gradient(135deg, #9e2c20, #5e1d18 48%, #8b5c1a);
    box-shadow: 0 10px 28px rgba(151, 37, 26, .26);
}

.gc-btn-ghost,
.gc-text-link,
.gc-anchor-actions a { background: rgba(255, 255, 255, .035); }

.gc-hero-class-fan {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 30px 28px 0 0;
    align-items: end;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
}

.gc-hero-class {
    position: relative;
    display: block;
    height: 88%;
    min-height: 470px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    filter: saturate(.88) contrast(1.04);
    transform: translateZ(0);
    transition: transform .25s ease, filter .25s ease;
}

.gc-hero-class:nth-child(even) { height: 96%; }
.gc-hero-class:hover { z-index: 5; filter: saturate(1.12) contrast(1.08); transform: translateY(-10px) scale(1.025); }
.gc-hero-class img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.gc-hero-class::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(5, 6, 9, .88)); box-shadow: inset 0 0 38px rgba(0, 0, 0, .62); }
.gc-hero-warrior::before { background: rgba(221, 62, 37, .28); }
.gc-hero-rogue::before { background: rgba(79, 180, 132, .2); }
.gc-hero-priest::before { background: rgba(237, 194, 86, .18); }
.gc-hero-mage::before { background: rgba(91, 160, 232, .24); }
.gc-hero-class::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; }

.gc-section-hero {
    min-height: 210px;
    padding: clamp(30px, 4vw, 62px);
}

.gc-section-hero h1 { max-width: 1000px; font-size: clamp(34px, 4vw, 60px); }
.gc-back-link { position: relative; z-index: 2; color: var(--gc-gold); font-size: 12px; font-weight: 800; text-decoration: none; }

.gc-search {
    position: sticky;
    top: 8px;
    z-index: 80;
    display: grid;
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: min(1040px, calc(100% - 24px));
    margin: -18px auto 24px;
    padding: 8px 14px;
    border: 1px solid rgba(230, 193, 105, .28);
    border-radius: 12px;
    background: rgba(10, 13, 19, .96);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
}

.gc-search input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 14px; }
.gc-search > i { color: var(--gc-gold); text-align: center; }
.gc-search kbd { padding: 5px 7px; border: 1px solid var(--gc-line); border-radius: 6px; background: #171b24; color: var(--gc-muted); font-size: 9px; }
.gc-search-results { position: absolute; top: calc(100% + 7px); left: 0; right: 0; display: none; max-height: min(65vh, 580px); overflow: auto; border: 1px solid var(--gc-line-strong); border-radius: 12px; background: #0b0e15; box-shadow: var(--k2gc-shadow, 0 20px 60px rgba(0,0,0,.55)); }
.gc-search-results.is-open, .gc-search-results.open { display: block; }

.gc-left-rail { grid-column: 1 / span 2; min-width: 0; }
.gc-main { grid-column: 3 / span 7; }
.gc-right-rail { grid-column: 10 / span 3; min-width: 0; }
.gc-side-nav { position: sticky; top: 78px; display: grid; gap: 5px; padding: 12px; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); background: rgba(10, 13, 19, .9); }
.gc-side-label { padding: 7px 8px 10px; color: #827d72; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.gc-side-nav a { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; color: #aaa69d; font-size: 11px; font-weight: 750; text-decoration: none; }
.gc-side-nav a:hover, .gc-side-nav a.is-active { border-color: rgba(239, 197, 92, .25); background: linear-gradient(90deg, rgba(161, 46, 31, .22), rgba(219, 166, 53, .06)); color: #ffe7a8; }
.gc-side-nav a i { width: 18px; color: var(--gc-gold); text-align: center; }

.gc-progress-panel { top: 78px; padding: 20px; border: 1px solid var(--gc-line); border-radius: 16px; background: linear-gradient(150deg, rgba(23, 20, 20, .96), rgba(9, 12, 18, .96)); box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.gc-progress-panel h2 { margin: 8px 0; color: #fff4d8; font: 700 23px/1.1 Georgia, serif; }
.gc-progress-panel p { color: var(--gc-muted); font-size: 12px; line-height: 1.55; }
.gc-progress-orbit { display: grid; width: 92px; height: 92px; margin: 0 0 18px auto; place-items: center; border-radius: 50%; background: radial-gradient(circle, #11151d 58%, transparent 60%), conic-gradient(var(--gc-gold) var(--progress), rgba(255,255,255,.07) 0); text-align: center; }
.gc-progress-orbit span { display: block; color: #fff2c7; font: 700 22px/1 Georgia, serif; }
.gc-progress-orbit small { display: block; color: var(--gc-muted); font-size: 8px; text-transform: uppercase; }
.gc-character-meta { display: flex; gap: 7px; margin-bottom: 14px; }
.gc-character-meta span { padding: 4px 8px; border: 1px solid var(--gc-line); border-radius: 999px; color: #c8c0b0; font-size: 9px; }
.gc-progress-facts { display: grid; gap: 8px; margin: 0 0 16px; }
.gc-progress-facts div { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.gc-progress-facts dt { color: #77766f; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.gc-progress-facts dd { margin: 3px 0 0; color: #f3e8d2; font-size: 11px; line-height: 1.35; }
.gc-next-target { margin: 14px 0; padding: 13px; border-left: 2px solid var(--gc-red); background: rgba(190, 57, 43, .08); }
.gc-next-target span, .gc-next-target strong { display: block; }
.gc-next-target span { color: #e66c5e; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gc-next-target strong { margin-top: 5px; color: #fff2d3; font-size: 12px; line-height: 1.45; }

.gc-section-head { margin-bottom: 18px; }
.gc-section-head h2 { margin: 6px 0 8px; color: #fff5dc; font: 700 clamp(26px, 2.4vw, 40px)/1.08 Georgia, serif; }
.gc-section-head p { max-width: 840px; margin: 0; color: var(--gc-muted); font-size: 13px; line-height: 1.65; }
.gc-muted { color: var(--gc-muted); font-size: 12px; line-height: 1.55; }
.gc-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.gc-portal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 30px; }
.gc-mini-portal { display: flex; min-height: 92px; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--gc-line); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), #0c1017; color: #eee5d4; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.gc-mini-portal:hover { border-color: rgba(244, 198, 85, .52); transform: translateY(-3px); }
.gc-mini-portal > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(239, 194, 84, .23); border-radius: 50%; color: var(--gc-gold); background: rgba(212, 154, 42, .07); }
.gc-mini-portal span { min-width: 0; }
.gc-mini-portal strong, .gc-mini-portal small { display: block; }
.gc-mini-portal strong { font-size: 11px; line-height: 1.3; }
.gc-mini-portal small { margin-top: 4px; color: var(--gc-muted); font-size: 9px; line-height: 1.35; }
.gc-mini-portal > b { margin-left: auto; color: #a9782c; }

.gc-onboarding-panel { margin-top: 32px; padding: clamp(22px, 2.4vw, 38px); border: 1px solid var(--gc-line); border-radius: 18px; background: radial-gradient(circle at 0 0, rgba(165,45,29,.13), transparent 35%), #0a0d13; }
.gc-onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gc-onboarding-steps li { display: flex; min-height: 118px; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(255,255,255,.02); }
.gc-onboarding-steps li > b { color: #8f6326; font: 700 21px/1 Georgia, serif; }
.gc-onboarding-steps strong, .gc-onboarding-steps small { display: block; }
.gc-onboarding-steps strong { color: #f7ecd8; font-size: 12px; }
.gc-onboarding-steps small { margin-top: 7px; color: var(--gc-muted); font-size: 10px; line-height: 1.5; }

.gc-class-section { margin-top: 40px; }
.gc-class-portals { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.gc-class-portal { position: relative; min-height: 560px; overflow: hidden; border: 1px solid var(--gc-line); border-radius: 18px; background: #080a0e; box-shadow: 0 22px 52px rgba(0,0,0,.3); }
.gc-class-portal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .35s ease, filter .35s ease; }
.gc-class-portal:hover > img { transform: scale(1.035); filter: saturate(1.12); }
.gc-class-portal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(6,7,10,.38) 47%, rgba(5,7,10,.98) 84%); }
.gc-class-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 32%, rgba(235, 189, 85, .13), transparent 30%); mix-blend-mode: screen; }
.gc-class-warrior .gc-class-light { background: radial-gradient(circle at 50% 30%, rgba(237,67,42,.24), transparent 33%); }
.gc-class-rogue .gc-class-light { background: radial-gradient(circle at 50% 30%, rgba(74,194,133,.18), transparent 33%); }
.gc-class-priest .gc-class-light { background: radial-gradient(circle at 50% 30%, rgba(242,202,96,.22), transparent 33%); }
.gc-class-mage .gc-class-light { background: radial-gradient(circle at 50% 30%, rgba(89,163,234,.24), transparent 33%); }
.gc-class-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(20px, 2.5vw, 34px); }
.gc-class-copy h3 { margin: 6px 0 8px; color: #fff5de; font: 700 34px/1 Georgia, serif; }
.gc-class-copy p { max-width: 620px; margin: 0; color: #c0baae; font-size: 12px; line-height: 1.5; }
.gc-class-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 0; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.gc-class-stat small { color: #857f75; font-size: 9px; text-transform: uppercase; }
.gc-class-stat strong { color: var(--gc-gold-soft); font-size: 12px; }

.gc-constellation-section { margin-top: 42px; }
.gc-constellation { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0; padding: 18px; border: 1px solid var(--gc-line); border-radius: 18px; background: radial-gradient(circle at center, rgba(161,44,31,.07), transparent 48%), #090c12; list-style: none; }
.gc-constellation li { position: relative; display: grid; min-height: 142px; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; background: rgba(255,255,255,.018); }
.gc-node { position: relative; display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid #424650; border-radius: 50%; background: #141923; color: #858890; }
.gc-node b { position: absolute; right: -4px; bottom: -4px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #242a34; color: #aaa; font-size: 8px; }
.gc-constellation strong, .gc-constellation small { display: block; }
.gc-constellation strong { color: #ded8ce; font-size: 11px; }
.gc-constellation small { margin-top: 5px; color: #777a80; font-size: 9px; line-height: 1.4; }
.gc-constellation li.is-done .gc-node { border-color: #f0c85f; background: #a87122; color: #fff6d8; box-shadow: 0 0 18px rgba(216,169,55,.24); }
.gc-constellation li.is-current { border-color: rgba(235,83,55,.38); background: rgba(155,42,31,.08); }
.gc-constellation li.is-current .gc-node { border-color: #ef755d; color: #fff; box-shadow: 0 0 20px rgba(224,65,42,.33); }
.gc-constellation [data-guide-milestone-toggle] { min-height: 32px; margin-top: 9px; padding: 5px 8px; border: 1px solid rgba(239,197,92,.2); border-radius: 6px; background: rgba(255,255,255,.025); color: #bdb5a5; cursor: pointer; font-size: 8px; font-weight: 800; }
.gc-constellation [data-guide-milestone-toggle][aria-pressed="true"] { color: #f2ce73; }
.gc-constellation [data-guide-milestone-toggle]:disabled { cursor: default; opacity: .75; }

.gc-system-triad { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.gc-feature-panel { min-height: 210px; padding: 22px; border: 1px solid var(--gc-line); border-radius: 14px; background: #0d1118; }
.gc-feature-panel > strong { display: block; margin: 12px 0 8px; color: #fff3d0; font: 700 30px/1 Georgia, serif; }
.gc-feature-panel p { color: var(--gc-muted); font-size: 11px; line-height: 1.55; }
.gc-feature-panel a { color: var(--gc-gold); font-size: 10px; font-weight: 800; }
.gc-feature-solo { background: radial-gradient(circle at 100% 0, rgba(78,189,125,.12), transparent 40%), #0d1118; }
.gc-feature-daily { background: radial-gradient(circle at 100% 0, rgba(84,161,225,.14), transparent 40%), #0d1118; }
.gc-feature-clan { background: radial-gradient(circle at 100% 0, rgba(181,53,36,.15), transparent 40%), #0d1118; }

.gc-class-showcase { display: grid; min-height: 590px; grid-template-columns: minmax(320px,.78fr) minmax(390px,1.22fr); overflow: hidden; border: 1px solid var(--gc-line); border-radius: 20px; background: #080b11; }
.gc-class-showcase-art { position: relative; min-height: 590px; }
.gc-class-showcase-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gc-class-showcase-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, #080b11), linear-gradient(180deg, transparent, rgba(8,11,17,.8)); }
.gc-class-showcase-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,4vw,68px); }
.gc-class-showcase-copy h2 { margin: 8px 0 15px; color: #fff3d7; font: 700 clamp(34px,4vw,58px)/1 Georgia, serif; }
.gc-class-showcase-copy p { max-width: 670px; color: var(--gc-muted); font-size: 14px; line-height: 1.65; }
.gc-anchor-actions { margin-top: 18px; }

.gc-warrior-stat-lock { display: grid; grid-template-columns: 170px 78px 170px minmax(280px,1fr); gap: 16px; align-items: center; padding: 22px; border: 1px solid rgba(221,72,44,.22); border-radius: 16px; background: radial-gradient(circle at 0 50%, rgba(192,45,29,.13), transparent 34%), #0b0e15; }
.gc-stat-ring { display: grid; width: 150px; height: 150px; place-items: center; border-radius: 50%; background: radial-gradient(circle,#10141c 57%,transparent 59%),conic-gradient(var(--gc-gold) calc(var(--value)*1%),rgba(255,255,255,.07) 0); text-align: center; }
.gc-stat-ring span, .gc-stat-ring strong, .gc-stat-ring small { display: block; }
.gc-stat-ring span { color: var(--gc-gold); font-size: 11px; font-weight: 900; }
.gc-stat-ring strong { color: #fff; font: 700 28px/1 Georgia,serif; }
.gc-stat-ring small { color: var(--gc-muted); font-size: 8px; }
.gc-stat-transfer { display: grid; justify-items: center; gap: 5px; color: #8a6a32; font-size: 9px; }
.gc-stat-lock-copy h3 { margin: 6px 0; color: #fff0d1; font: 700 24px/1.1 Georgia,serif; }
.gc-stat-lock-copy p { color: var(--gc-muted); font-size: 12px; line-height: 1.55; }
.gc-threshold-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.gc-threshold-card { padding: 18px; border: 1px solid var(--gc-line); border-radius: 13px; background: #0d1118; }
.gc-threshold-card h3 { margin: 6px 0 10px; color: #fff0d3; font: 700 20px/1.1 Georgia,serif; }
.gc-threshold-value { margin-bottom: 12px; color: var(--gc-gold); font-size: 12px; font-weight: 850; }
.gc-threshold-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gc-threshold-card li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: #858078; font-size: 9px; }
.gc-threshold-card li strong { color: #ded6c8; text-align: right; }
.gc-source-chip { display: block; margin-top: 12px; color: #6f8290; font-size: 8px; line-height: 1.4; }

.gc-equipment-columns, .gc-integrity-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.gc-equipment-columns > div, .gc-integrity-columns > div { min-width: 0; padding: 18px; border: 1px solid var(--gc-line); border-radius: 14px; background: #0b0f16; }
.gc-equipment-columns h3, .gc-integrity-columns h3 { margin: 0 0 14px; color: #fff0d2; font: 700 19px/1.2 Georgia,serif; }

.gc-skill-section { margin-top: 34px; }
.gc-skill-toolbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 16px; }
.gc-skill-toolbar button { min-height: 42px; padding: 8px 13px; border: 1px solid var(--gc-line); border-radius: 8px; background: #10141c; color: #aaa69d; cursor: pointer; }
.gc-skill-toolbar button.is-active { border-color: rgba(239,195,87,.5); color: #ffe3a0; background: rgba(203,145,35,.1); }
.gc-skill-toolbar > span { margin-left: auto; color: var(--gc-muted); font-size: 10px; }
.gc-skill-tree { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-height: 780px; overflow: auto; padding: 2px; }
.gc-skill-node { display: grid; min-height: 130px; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 14px; border: 1px solid var(--gc-line); border-radius: 12px; background: linear-gradient(145deg,rgba(255,255,255,.02),transparent),#0b0f16; }
.gc-skill-level { display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid rgba(235,192,84,.42); border-radius: 50%; color: var(--gc-gold); font-weight: 900; }
.gc-skill-node h3 { margin: 4px 0 6px; color: #f7ead0; font-size: 13px; }
.gc-skill-node p { margin: 0; color: var(--gc-muted); font-size: 10px; line-height: 1.45; }
.gc-skill-node small, .gc-skill-node b { color: #777f8b; font-size: 8px; }

.gc-farm-section { margin-top: 36px; }
.gc-farm-route { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.gc-farm-route > li { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px; }
.gc-route-index { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid rgba(237,191,78,.32); border-radius: 50%; color: var(--gc-gold); font: 700 16px/1 Georgia,serif; }
.gc-route-card { display: grid; grid-template-columns: minmax(300px,1.1fr) minmax(250px,.9fr); gap: 0; overflow: hidden; border: 1px solid var(--gc-line); border-radius: 16px; background: #090d14; }
.gc-route-evidence { padding: 22px; border-left: 1px solid var(--gc-line); }
.gc-route-evidence h3 { margin: 6px 0 10px; color: #ffe9b7; font: 700 20px/1.1 Georgia,serif; }
.gc-route-evidence p { color: var(--gc-muted); font-size: 11px; line-height: 1.55; }
.gc-route-evidence > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.055); font-size: 9px; }
.gc-route-evidence > div b { color: #8e867a; }
.gc-integrity-note, .gc-warning-card, .gc-asset-missing-state { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; padding: 15px; border: 1px solid rgba(234,174,68,.22); border-radius: 11px; background: rgba(128,79,15,.07); }
.gc-integrity-note > i, .gc-warning-card > i, .gc-asset-missing-state > i { color: var(--gc-gold); font-size: 19px; }
.gc-integrity-note strong, .gc-warning-card strong, .gc-asset-missing-state strong { color: #f3e6ca; font-size: 11px; }
.gc-integrity-note p, .gc-warning-card p, .gc-asset-missing-state p { margin: 5px 0 0; color: var(--gc-muted); font-size: 10px; line-height: 1.5; }

.gc-monster-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.gc-monster-card { overflow: hidden; border: 1px solid var(--gc-line); border-radius: 16px; background: #090d14; box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.gc-monster-visual { position: relative; min-height: 290px; overflow: hidden; background: radial-gradient(circle at 50% 70%,rgba(195,59,36,.16),transparent 43%),#080a0e; }
.gc-monster-visual > img { width: 100%; height: 310px; object-fit: contain; object-position: center bottom; transition: transform .25s ease; }
.gc-monster-card:hover .gc-monster-visual > img { transform: scale(1.035) translateY(-4px); }
.gc-monster-dossier { position: relative; display: grid; min-height: 290px; place-items: center; overflow: hidden; color: #cfb56f; text-align: center; background: radial-gradient(circle,rgba(203,151,40,.09),transparent 56%),#090c12; }
.gc-monster-dossier > span { position: absolute; top: 18px; left: 18px; color: #7e6a44; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.gc-monster-dossier > b { position: relative; z-index: 2; font: 700 46px/1 Georgia,serif; text-shadow: 0 0 26px rgba(226,181,70,.18); }
.gc-monster-dossier > small { position: absolute; right: 18px; bottom: 16px; left: 18px; color: #736f66; font-size: 9px; line-height: 1.4; }
.gc-dossier-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(235,190,78,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(235,190,78,.1) 1px,transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle,#000,transparent 70%); }
.gc-threat { position: absolute; right: 13px; bottom: 13px; z-index: 3; padding: 8px 10px; border: 1px solid rgba(239,100,70,.26); border-radius: 8px; background: rgba(6,8,12,.82); }
.gc-threat > span { display: block; margin-bottom: 4px; color: #a68072; font-size: 7px; text-transform: uppercase; }
.gc-threat > div { display: flex; gap: 3px; }
.gc-threat i { width: 14px; height: 4px; border-radius: 2px; background: #373b42; }
.gc-threat i.is-on { background: linear-gradient(90deg,#a92f26,#ef7a56); box-shadow: 0 0 7px rgba(224,77,50,.35); }
.gc-monster-body { padding: 18px; }
.gc-monster-body h3 { margin: 5px 0 12px; color: #fff0d0; font: 700 24px/1.1 Georgia,serif; }
.gc-monster-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 0 15px; }
.gc-monster-stats div { padding: 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 7px; background: rgba(255,255,255,.018); }
.gc-monster-stats dt { color: #74767d; font-size: 7px; text-transform: uppercase; }
.gc-monster-stats dd { margin: 3px 0 0; color: #e8ddc9; font-size: 10px; font-weight: 800; }

.gc-item-card { position: relative; overflow: hidden; }
.gc-rarity-frame { position: relative; display: grid; width: 72px; height: 72px; min-width: 72px; place-items: center; border: 1px solid rgba(237,195,86,.32); border-radius: 10px; background: radial-gradient(circle,rgba(234,184,66,.1),transparent 67%),#111621; box-shadow: inset 0 0 16px rgba(0,0,0,.45); }
.gc-rarity-frame img { width: 100%; height: 100%; border: 0; background: transparent; object-fit: contain; }
.gc-item-count { position: absolute; right: 4px; bottom: 3px; padding: 2px 4px; border-radius: 4px; background: rgba(4,6,9,.88); color: #fff0c7; font-size: 8px; font-weight: 900; }
.gc-item-copy { min-width: 0; }
.gc-item-copy strong { display: block; color: #f2e9da; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.gc-category-badge { display: inline-flex; margin-top: 6px; padding: 3px 6px; border: 1px solid rgba(116,184,222,.23); border-radius: 999px; color: #8dc8e8; font-size: 7px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.gc-item-large { grid-template-columns: 108px minmax(0,1fr); min-height: 146px; }
.gc-item-large .gc-rarity-frame { width: 108px; height: 108px; min-width: 108px; }
.gc-item-small { grid-template-columns: 48px minmax(0,1fr); min-height: 76px; padding: 9px; }
.gc-item-small .gc-rarity-frame { width: 48px; height: 48px; min-width: 48px; }

.gc-category-compare { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 10px; align-items: center; }
.gc-category-compare > div > span { display: block; margin-bottom: 8px; color: var(--gc-gold); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.gc-category-compare > i { color: var(--gc-red); font: 700 28px/1 Georgia,serif; text-align: center; }

.gc-q-onboarding, .gc-forge-intro, .gc-solo-hero, .gc-pus-hero, .gc-cr-hero, .gc-stat-hero, .gc-rebirth-hero { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(20px,3vw,46px); align-items: center; min-height: 250px; padding: clamp(24px,3vw,46px); border: 1px solid var(--gc-line); border-radius: 18px; background: radial-gradient(circle at 0 50%,rgba(181,50,31,.13),transparent 32%),#090d14; }
.gc-q-onboarding h2, .gc-forge-intro h2, .gc-solo-hero h2, .gc-pus-hero h2, .gc-cr-hero h2, .gc-stat-hero h2, .gc-rebirth-hero h2 { margin: 7px 0 10px; color: #fff1d1; font: 700 clamp(28px,3.2vw,48px)/1.05 Georgia,serif; }
.gc-q-onboarding p, .gc-forge-intro p, .gc-solo-hero p, .gc-pus-hero p, .gc-cr-hero p, .gc-stat-hero p, .gc-rebirth-hero p { max-width: 920px; margin: 0; color: var(--gc-muted); font-size: 13px; line-height: 1.65; }
.gc-q-key { position: relative; width: 116px; height: 116px; min-height: 116px; }
.gc-q-key span { position: relative; z-index: 2; }
.gc-q-key i { position: absolute; inset: -13px; border: 1px solid rgba(244,200,96,.16); border-radius: 22px; animation: gc-q-pulse 2.4s ease-in-out infinite; }
@keyframes gc-q-pulse { 50% { opacity: .25; transform: scale(1.07); } }

.gc-quest-card { display: flex; min-height: 0; flex-direction: column; align-items: stretch; padding: 18px; }
.gc-quest-card > header, .gc-forge-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gc-quest-card > header h3, .gc-forge-card > header h3 { margin-top: 5px; font: 700 20px/1.15 Georgia,serif; }
.gc-quest-level { display: grid; min-width: 68px; padding: 8px; border: 1px solid var(--gc-line); border-radius: 8px; text-align: center; }
.gc-quest-level small { color: #777; font-size: 7px; }
.gc-quest-level b { color: var(--gc-gold); font-size: 11px; }
.gc-quest-meta, .gc-event-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.gc-quest-meta span, .gc-event-meta span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; color: #9c9a94; font-size: 8px; }
.gc-quest-meta .is-rare { color: var(--gc-ice); border-color: rgba(117,201,239,.25); }
.gc-quest-targets, .gc-quest-rewards { margin-top: 10px; }
.gc-quest-targets h4, .gc-quest-rewards h4, .gc-event-targets h4, .gc-event-rewards h4 { margin: 0 0 9px; color: #8d8579; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gc-quest-target { display: grid; grid-template-columns: 48px minmax(0,1fr) auto 26px; gap: 9px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.055); }
.gc-target-model { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(237,192,79,.19); border-radius: 8px; background: #10141b; }
.gc-target-model span { color: #74623c; font-size: 6px; }
.gc-target-model b { color: #c79d46; font-size: 9px; }
.gc-quest-target strong, .gc-quest-target small { display: block; }
.gc-quest-target strong { color: #eee5d4; font-size: 10px; }
.gc-quest-target small { margin-top: 3px; color: #777b82; font-size: 8px; }
.gc-count-compare { display: grid; grid-template-columns: auto auto; gap: 1px 6px; text-align: right; }
.gc-count-compare small { font-size: 6px; }
.gc-count-compare del { color: #93645d; font-size: 9px; }
.gc-count-compare b { color: var(--gc-green); font-size: 10px; }
.gc-quest-card footer, .gc-forge-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.055); color: #73767d; font-size: 8px; }
.gc-quest-card footer a { color: var(--gc-gold); text-decoration: none; }

.gc-forge-sigil, .gc-pus-crystal, .gc-trophy-sigil, .gc-bonus-orb { position: relative; display: grid; width: 132px; height: 132px; place-items: center; border: 2px solid rgba(217,169,62,.42); border-radius: 50%; background: radial-gradient(circle,rgba(197,56,36,.18),#10141b 66%); color: var(--gc-gold); font-size: 40px; box-shadow: 0 0 36px rgba(190,54,35,.16); }
.gc-forge-sigil i, .gc-pus-crystal i { position: absolute; inset: -12px; border: 1px solid rgba(218,174,67,.13); border-radius: 50%; }
.gc-forge-sigil i:nth-child(2), .gc-pus-crystal i:nth-child(2) { inset: 10px; border-style: dashed; }
.gc-trophy-sigil { grid-template-rows: 1fr auto; }
.gc-trophy-sigil span { font-size: 14px; font-weight: 900; }
.gc-bonus-orb { grid-template-rows: 1fr auto; }
.gc-bonus-orb strong { align-self: end; color: #b7efc7; font: 700 30px/1 Georgia,serif; }
.gc-bonus-orb span { align-self: start; color: #73c78a; font-size: 10px; font-weight: 900; }

.gc-forge-flow { grid-template-columns: minmax(0,1.25fr) 50px minmax(220px,.75fr); }
.gc-forge-side { min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: rgba(7,9,14,.72); }
.gc-forge-side > span { display: block; margin-bottom: 9px; color: #8c7c9f; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gc-forge-operator { width: 48px; height: 48px; }
.gc-forge-card footer span { color: #777985; }
.gc-status { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #a6a4a0; font-size: 8px; font-weight: 850; }
.gc-status.is-active { border-color: rgba(113,211,141,.3); color: var(--gc-green); }
.gc-status.is-danger { border-color: rgba(240,90,69,.3); color: #ef806e; }
.gc-status-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.gc-cold-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; padding: 18px; border: 1px solid var(--gc-line); border-radius: 14px; background: radial-gradient(circle,rgba(91,167,225,.1),transparent 55%),#090d14; }
.gc-cold-summary > div { text-align: center; }
.gc-cold-summary > div strong, .gc-cold-summary > div span { display: block; }
.gc-cold-summary > div strong { color: #9ed9f1; font: 700 28px/1 Georgia,serif; }
.gc-cold-summary > div span { margin-top: 4px; color: var(--gc-muted); font-size: 8px; }
.gc-cold-summary .is-guaranteed strong { color: var(--gc-green); }
.gc-upgrade-path-list { display: grid; gap: 10px; margin-top: 14px; }
.gc-upgrade-path { align-items: center; margin: 0; padding: 12px; border: 1px solid var(--gc-line); border-radius: 13px; background: #090d14; }
.gc-upgrade-node { min-height: 0; padding: 0; border: 0; background: transparent; }
.gc-upgrade-plus { display: flex; flex: 0 0 230px; gap: 8px; align-items: center; }
.gc-upgrade-arrow { display: flex; flex: 0 0 82px; flex-direction: column; }
.gc-upgrade-arrow span { color: var(--gc-gold); font-size: 9px; font-weight: 900; }
.gc-mini-recipe { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 14px; }

.gc-rebirth-orb { display: grid; width: 150px; height: 150px; place-items: center; border-radius: 50%; background: radial-gradient(circle,#11151d 55%,transparent 57%),conic-gradient(var(--gc-gold) calc(var(--rebirth) * 3.333%),rgba(255,255,255,.07) 0); }
.gc-rebirth-orb strong { color: #fff0c8; font: 700 42px/1 Georgia,serif; }
.gc-rebirth-orb span { color: #8d8373; font-size: 13px; }
.gc-rebirth-node.is-milestone { flex-basis: 112px; }
.gc-rebirth-node.is-milestone > span:first-child { width: 58px; height: 58px; border-color: rgba(246,204,104,.5); }
.gc-rebirth-node b { display: block; margin-top: 4px; color: #9e7940; font-size: 7px; text-transform: uppercase; }
.gc-rebirth-node.is-reward > span:first-child { border-color: #b987e8; background: #39234c; color: #d8b7f5; }
.gc-cycle-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.gc-logos-showcase { overflow: hidden; padding: clamp(24px,3vw,44px); border: 1px solid rgba(173,123,225,.3); border-radius: 20px; background: radial-gradient(circle at 50% 0,rgba(160,102,219,.18),transparent 34%),#090b12; }
.gc-logos-showcase > header { max-width: 900px; margin: 0 auto 24px; text-align: center; }
.gc-logos-showcase > header h2 { margin: 7px 0; color: #f0d9ff; font: 700 clamp(34px,4vw,56px)/1 Georgia,serif; }
.gc-logos-showcase > header p { color: #b2a6ba; line-height: 1.6; }
.gc-upgrade-simulator { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; padding: 22px; border: 1px solid rgba(183,128,231,.22); border-radius: 14px; background: rgba(8,8,14,.72); }
.gc-sim-item, .gc-sim-result { display: grid; min-width: 130px; min-height: 112px; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #11141c; text-align: center; }
.gc-sim-item span, .gc-sim-result span { color: #92879a; font-size: 8px; }
.gc-sim-item strong, .gc-sim-result strong { color: #e9c6ff; font: 700 34px/1 Georgia,serif; }
.gc-system-card > i { color: var(--gc-gold); font-size: 22px; }
.gc-system-card > strong { display: block; margin-top: 10px; color: #fff0cd; font: 700 27px/1 Georgia,serif; }

.gc-live-stat-console { min-width: 360px; padding: 18px; border: 1px solid var(--gc-line); border-radius: 14px; background: #0c1017; }
.gc-live-stat-console > span { color: #827b70; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.gc-live-stat-console h3 { margin: 5px 0 12px; color: #fff1d2; font-size: 16px; }
.gc-live-stat-console > div { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.gc-live-stat-console b { display: grid; min-height: 54px; place-items: center; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; color: #f3dfae; font-size: 14px; }
.gc-live-stat-console b small { color: #777; font-size: 7px; }
.gc-bonus-lights { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; }
.gc-bonus-lights > div { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 8px; padding: 14px; border: 1px solid var(--gc-line); border-radius: 10px; background: #0c1017; }
.gc-bonus-lights i { width: 10px; height: 10px; margin-top: 2px; border-radius: 50%; background: #4b4e55; }
.gc-bonus-lights .is-on i { background: var(--gc-green); box-shadow: 0 0 12px rgba(113,211,141,.5); }
.gc-bonus-lights span, .gc-bonus-lights strong { display: block; grid-column: 2; }
.gc-bonus-lights span { color: #918b81; font-size: 9px; }
.gc-bonus-lights strong { color: #e8dfd0; font-size: 11px; }
.gc-class-stat-section { padding: clamp(22px,3vw,40px); border: 1px solid var(--gc-line); border-radius: 18px; background: #090d14; }
.gc-class-stat-section.is-warrior { background: radial-gradient(circle at 0 0,rgba(188,47,31,.13),transparent 34%),#090d14; }
.gc-class-stat-section.is-mage { background: radial-gradient(circle at 0 0,rgba(74,147,211,.14),transparent 34%),#090d14; }
.gc-class-stat-section.is-priest { background: radial-gradient(circle at 0 0,rgba(205,158,50,.12),transparent 34%),#090d14; }
.gc-class-stat-head { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 20px; align-items: center; margin-bottom: 20px; }
.gc-stat-emblem { display: grid; width: 88px; height: 88px; place-items: center; border: 2px solid rgba(235,190,78,.36); border-radius: 50%; color: var(--gc-gold); font: 700 19px/1.1 Georgia,serif; text-align: center; }
.gc-class-stat-head h2 { margin: 5px 0 7px; color: #fff0d1; font: 700 30px/1.08 Georgia,serif; }
.gc-class-stat-head p { margin: 0; color: var(--gc-muted); font-size: 12px; line-height: 1.55; }
.gc-stat-core-grid { display: grid; grid-template-columns: minmax(150px,1fr) 90px minmax(150px,1fr); gap: 14px; align-items: center; }
.gc-stat-core-grid-three { grid-template-columns: repeat(3,minmax(150px,1fr)); }
.gc-stat-core span, .gc-stat-core strong, .gc-stat-core small { display: block; }
.gc-stat-core span { color: var(--gc-gold); font-size: 11px; font-weight: 900; }
.gc-stat-core strong { color: #fff1d0; font: 700 28px/1 Georgia,serif; }
.gc-stat-core small { color: var(--gc-muted); font-size: 8px; }
.gc-formula-panel { margin-top: 15px; padding: 16px; border: 1px solid rgba(116,184,222,.2); border-radius: 11px; background: rgba(63,129,177,.065); }
.gc-formula-panel code { display: block; color: #9bd4ee; font-size: 11px; overflow-wrap: anywhere; }
.gc-formula-panel > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gc-formula-panel b { padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.035); color: #c7dce7; font-size: 9px; }
.gc-stat-burst { color: #9fd8f0; font: 700 38px/1 Georgia,serif; }
.gc-priest-builds { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.gc-priest-builds article { padding: 18px; border: 1px solid var(--gc-line); border-radius: 12px; background: rgba(255,255,255,.018); }
.gc-priest-builds article > span { color: var(--gc-gold); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.gc-priest-builds h3 { margin: 6px 0; color: #fff0d1; font: 700 20px/1.1 Georgia,serif; }
.gc-priest-builds p, .gc-priest-builds small { color: var(--gc-muted); font-size: 9px; line-height: 1.5; }
.gc-priest-builds > article > strong { display: block; margin-top: 10px; color: #eee1c6; font-size: 10px; }
.gc-threshold-meter { position: relative; height: 8px; margin: 13px 0 22px; border-radius: 99px; background: rgba(255,255,255,.07); }
.gc-threshold-meter i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#a86f21,#f1ca62); }
.gc-threshold-meter b { position: absolute; top: 12px; left: 0; color: #897f70; font-size: 7px; }

.gc-element-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.gc-element-row span { padding: 6px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; color: #8e9299; font-size: 8px; }
.gc-element-row b { color: #d7d4cd; }
.gc-codex-detail > aside { min-width: 0; padding: clamp(22px,2.5vw,40px); overflow: auto; }
.gc-codex-visual { position: relative; background: radial-gradient(circle at 50% 70%,rgba(189,54,34,.16),transparent 45%),#080b10; }
.gc-codex-visual > img { width: 100%; height: min(620px,72vh); object-fit: contain; object-position: center bottom; }
.gc-monster-dossier-large { min-height: 540px; }
.gc-codex-main h2 { margin: 7px 0 12px; color: #fff0d0; font: 700 clamp(34px,3.4vw,54px)/1 Georgia,serif; }
.gc-lead { color: var(--gc-muted); font-size: 13px; line-height: 1.65; }
.gc-codex-side h3 { margin: 0 0 13px; color: #fff0d0; font: 700 20px/1.1 Georgia,serif; }
.gc-spawn-list { display: grid; gap: 8px; }
.gc-spawn-list > div { padding: 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(255,255,255,.018); }
.gc-spawn-list strong, .gc-spawn-list span, .gc-spawn-list small { display: block; }
.gc-spawn-list strong { color: #e9dfcc; font-size: 10px; }
.gc-spawn-list span { margin-top: 4px; color: var(--gc-gold); font-size: 9px; }
.gc-spawn-list small { margin-top: 3px; color: #777a80; font-size: 8px; }
.gc-drop-groups { display: grid; gap: 14px; }
.gc-drop-group { display: block; padding: 18px; border: 1px solid var(--gc-line); border-radius: 14px; background: #090d14; }
.gc-drop-group > header { display: flex; justify-content: space-between; gap: 12px; }
.gc-drop-group h3 { margin: 5px 0; color: #fff0d0; font: 700 18px/1.1 Georgia,serif; }
.gc-drop-group > p { color: var(--gc-muted); font-size: 10px; line-height: 1.5; }
.gc-rate { color: var(--gc-gold); font-weight: 900; }

.gc-clan-console { display: grid; grid-template-columns: minmax(280px,1fr) minmax(220px,.7fr) minmax(220px,.7fr); gap: 14px; padding: 19px; border: 1px solid var(--gc-line); border-radius: 14px; background: #0a0e15; }
.gc-clan-range label { display: flex; justify-content: space-between; color: #b7afa2; font-size: 11px; }
.gc-clan-range output { color: var(--gc-gold); font-size: 18px; font-weight: 900; }
.gc-clan-range input { width: 100%; margin-top: 20px; accent-color: #d7a43c; }
.gc-clan-live, .gc-clan-identity { padding: 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.018); }
.gc-clan-live span, .gc-clan-live strong, .gc-clan-live small { display: block; }
.gc-clan-live span, .gc-clan-identity span { color: #837e76; font-size: 8px; text-transform: uppercase; }
.gc-clan-live strong { margin: 5px 0; color: var(--gc-green); font: 700 28px/1 Georgia,serif; }
.gc-clan-live small, .gc-clan-identity small { color: var(--gc-muted); font-size: 8px; }
.gc-clan-identity { display: flex; gap: 12px; align-items: center; }
.gc-clan-identity i { color: var(--gc-gold); font-size: 26px; }
.gc-clan-identity strong { display: block; margin: 4px 0; color: #fff0d0; }
.gc-premium-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; }
.gc-premium-art { display: grid; min-height: 240px; place-items: center; padding: 20px; border: 1px solid rgba(239,194,84,.32); border-radius: 14px; background: radial-gradient(circle,rgba(189,53,34,.2),transparent 48%),#0b0e14; text-align: center; }
.gc-premium-art span, .gc-premium-art strong, .gc-premium-art b { display: block; }
.gc-premium-art span { color: #9a8371; font-size: 12px; letter-spacing: .18em; }
.gc-premium-art strong { color: #ffe4a0; font: 700 28px/1 Georgia,serif; }
.gc-premium-art b, .gc-free-ribbon { padding: 5px 8px; border-radius: 999px; background: #347a49; color: #d5f8df; font-size: 8px; }
.gc-onboarding-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; grid-column: 2; }
.gc-onboarding-list > div { display: flex; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; }
.gc-onboarding-list span { color: var(--gc-gold); font-weight: 900; }
.gc-onboarding-list p { margin: 0; color: var(--gc-muted); font-size: 9px; }
.gc-cape-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); gap: 18px; padding: 24px; border: 1px solid var(--gc-line); border-radius: 16px; background: #090d14; }

.gc-free-feature { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: center; }
.gc-pus-card { padding-top: 34px; }
.gc-free-ribbon { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gc-pus-card footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.055); color: #7c7c78; font-size: 8px; }
.gc-pus-card footer strong { color: #9ed6ad; }
.gc-onboarding-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 18px; border: 1px solid var(--gc-line); border-radius: 14px; background: #090d14; }
.gc-onboarding-strip > div { display: flex; gap: 8px; align-items: center; }
.gc-onboarding-strip span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(239,194,84,.34); border-radius: 50%; color: var(--gc-gold); font-size: 9px; }
.gc-onboarding-strip strong { color: #e8dfd0; font-size: 10px; }
.gc-onboarding-strip > i { color: #5e5e5d; }

.gc-event-card { display: flex; flex-direction: column; }
.gc-event-card > header { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.gc-event-card time { color: var(--gc-gold); font: 700 20px/1 Georgia,serif; }
.gc-event-card h3 { margin-top: 4px; font-family: Georgia,serif; }
.gc-event-targets { margin-top: 10px; }
.gc-event-targets > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.055); font-size: 9px; }
.gc-event-targets strong { color: #ddd5c7; }
.gc-event-targets span { display: flex; gap: 7px; }
.gc-event-targets del { color: #8f5a54; }
.gc-event-targets b { color: var(--gc-green); }
.gc-event-rewards { margin-top: 14px; }
.gc-reward-entry { position: relative; }
.gc-reward-entry > .gc-rate { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 3px 5px; border-radius: 999px; background: rgba(7,9,13,.88); font-size: 7px; }
.gc-random-pool { display: grid; min-height: 108px; place-items: center; padding: 12px; border: 1px dashed rgba(170,125,242,.28); border-radius: 11px; background: rgba(93,54,127,.07); text-align: center; }
.gc-random-pool i { color: var(--gc-arcane); font-size: 22px; }
.gc-random-pool strong, .gc-random-pool small { display: block; }
.gc-random-pool strong { color: #d7c1e9; font-size: 10px; }
.gc-random-pool small { color: #877c8e; font-size: 8px; }

.gc-empty-state { display: grid; min-height: 190px; place-items: center; padding: 28px; border: 1px dashed var(--gc-line-strong); border-radius: 14px; background: #0a0d13; color: var(--gc-muted); text-align: center; }
.gc-empty-state i { color: var(--gc-gold); font-size: 28px; }
.gc-empty-state h3 { margin: 7px 0; color: #eee3cf; }
.gc-empty-state p { max-width: 560px; margin: 0; font-size: 11px; line-height: 1.55; }
.gc-icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--gc-line); border-radius: 8px; background: #11151d; color: #e9dfd0; cursor: pointer; }
.gc-drawer-mask { position: fixed; inset: 0; z-index: 9000; background: rgba(2,3,5,.76); backdrop-filter: blur(6px); }
.gc-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001; width: min(92vw,1180px); padding: 62px 18px 18px; overflow: auto; background: #080b11; transform: translateX(105%); transition: transform .23s ease; }
.gc-drawer.is-open { transform: translateX(0); }
.gc-drawer > .gc-icon-button { position: absolute; top: 10px; right: 12px; }
.gc-item-drawer { display: none; }
.gc-loading-skeleton { display: grid; gap: 10px; padding: 24px; }
.gc-loading-skeleton i { display: block; height: 70px; border-radius: 10px; background: linear-gradient(90deg,#11151d,#1a2029,#11151d); background-size: 200% 100%; animation: gc-shimmer 1.3s linear infinite; }
@keyframes gc-shimmer { to { background-position: -200% 0; } }

@media (max-width: 1380px) {
    .gc-cinematic-hero { grid-template-columns: minmax(340px,.8fr) minmax(590px,1.2fr); }
    .gc-portal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .gc-main { grid-column: 3 / span 10; }
    .gc-right-rail { grid-column: 3 / -1; }
    .gc-right-rail .gc-progress-panel { position: relative; top: auto; display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(220px,.7fr); gap: 16px; margin-top: 20px; }
}

@media (max-width: 1100px) {
    .gc-page { width: min(98vw,1100px); }
    .gc-cinematic-hero { grid-template-columns: 1fr; }
    .gc-hero-class-fan { min-height: 440px; padding: 0 18px; mask-image: linear-gradient(180deg,transparent,#000 12%,#000); }
    .gc-hero-class { min-height: 390px; }
    .gc-left-rail { grid-column: 1 / -1; }
    .gc-main { grid-column: 1 / -1; }
    .gc-right-rail { grid-column: 1 / -1; }
    .gc-side-nav { position: relative; top: auto; display: flex; overflow-x: auto; }
    .gc-side-nav a { flex: 0 0 auto; }
    .gc-side-label { display: none; }
    .gc-class-portals { grid-template-columns: 1fr 1fr; }
    .gc-constellation { grid-template-columns: repeat(3,1fr); }
    .gc-threshold-grid, .gc-priest-builds, .gc-skill-tree { grid-template-columns: repeat(2,1fr); }
    .gc-route-card { grid-template-columns: 1fr; }
    .gc-route-evidence { border-top: 1px solid var(--gc-line); border-left: 0; }
    .gc-codex-detail > aside { border-top: 1px solid var(--gc-line); }
    .gc-clan-console { grid-template-columns: 1fr 1fr; }
    .gc-clan-identity { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .gc-page { width: 100%; margin-top: 10px; padding-right: 9px; padding-left: 9px; }
    .gc-cinematic-hero { min-height: 0; }
    .gc-hero-copy { padding: 28px 20px; }
    .gc-hero-copy h1 { font-size: 38px; }
    .gc-hero-class-fan { min-height: 560px; grid-template-columns: repeat(2,1fr); gap: 4px; padding: 0 8px; }
    .gc-hero-class, .gc-hero-class:nth-child(even) { min-height: 275px; height: 275px; border-radius: 10px; }
    .gc-search { top: 4px; width: calc(100% - 12px); margin-top: -12px; }
    .gc-search kbd { display: none; }
    .gc-portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gc-mini-portal { min-height: 86px; padding: 11px; }
    .gc-onboarding-steps, .gc-system-triad, .gc-class-portals, .gc-constellation, .gc-monster-grid, .gc-equipment-columns, .gc-integrity-columns, .gc-threshold-grid, .gc-priest-builds, .gc-skill-tree, .gc-data-grid, .gc-system-grid, .gc-pus-grid, .gc-event-grid { grid-template-columns: 1fr; }
    .gc-class-portal { min-height: 500px; }
    .gc-constellation li { min-height: 116px; }
    .gc-class-showcase { grid-template-columns: 1fr; }
    .gc-class-showcase-art { min-height: 430px; }
    .gc-class-showcase-art::after { background: linear-gradient(180deg,transparent 40%,#080b11); }
    .gc-warrior-stat-lock { grid-template-columns: 1fr; justify-items: center; }
    .gc-stat-lock-copy { text-align: center; }
    .gc-stat-core-grid, .gc-stat-core-grid-three { grid-template-columns: 1fr; }
    .gc-stat-transfer { transform: rotate(90deg); }
    .gc-farm-route > li { grid-template-columns: 1fr; }
    .gc-route-index { margin-left: 8px; }
    .gc-q-onboarding, .gc-forge-intro, .gc-solo-hero, .gc-pus-hero, .gc-cr-hero, .gc-stat-hero, .gc-rebirth-hero { grid-template-columns: 1fr; text-align: left; }
    .gc-forge-sigil, .gc-pus-crystal, .gc-trophy-sigil, .gc-bonus-orb, .gc-rebirth-orb { width: 100px; height: 100px; }
    .gc-forge-flow { display: flex; flex-direction: column; }
    .gc-forge-side { width: 100%; }
    .gc-forge-operator { transform: rotate(90deg); }
    .gc-upgrade-plus { flex-basis: 190px; }
    .gc-upgrade-path { min-width: 720px; }
    .gc-upgrade-path-list { overflow-x: auto; }
    .gc-live-stat-console { min-width: 0; }
    .gc-class-stat-head { grid-template-columns: 70px 1fr; }
    .gc-stat-emblem { width: 64px; height: 64px; }
    .gc-clan-console, .gc-premium-layout, .gc-cape-section, .gc-free-feature { grid-template-columns: 1fr; }
    .gc-onboarding-list { grid-column: auto; grid-template-columns: 1fr; }
    .gc-right-rail .gc-progress-panel { display: block; }
    .gc-category-compare { grid-template-columns: 1fr; }
    .gc-category-compare > i { transform: rotate(90deg); }
    .gc-codex-detail > div, .gc-codex-detail > aside { padding: 18px; }
    .gc-monster-dossier-large { min-height: 360px; }
    .gc-event-card > header { grid-template-columns: 62px 1fr; }
    .gc-event-card > header .gc-status { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 430px) {
    .gc-portal-grid { grid-template-columns: 1fr; }
    .gc-mini-portal { min-height: 72px; }
    .gc-hero-copy h1 { font-size: 33px; }
    .gc-class-showcase-art { min-height: 360px; }
    .gc-class-portal { min-height: 460px; }
    .gc-class-actions { align-items: stretch; }
    .gc-class-actions > * { width: 100%; }
    .gc-monster-stats { grid-template-columns: repeat(2,1fr); }
    .gc-quest-target { grid-template-columns: 44px minmax(0,1fr); }
    .gc-count-compare { grid-column: 2; text-align: left; }
    .gc-quest-target > a { position: absolute; right: 12px; }
    .gc-cycle-card { display: block; }
    .gc-data-grid-six, .gc-data-grid-four, .gc-data-grid-three, .gc-data-grid-two { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
    .k2gd-nav-cta > a,
    .k2gc-card,
    .k2gc-panel,
    .k2gc-button,
    .k2gc-item-icon,
    .k2gc-drawer {
        border: 1px solid CanvasText !important;
    }

    .k2gc :focus-visible,
    .k2gd-nav-cta > a:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* --------------------------------------------------------------------------
   R34 PHP view contract (gc-* classes)
   These aliases let the server-rendered PHP partials consume the same visual
   system without requiring a framework or duplicating component CSS.
   -------------------------------------------------------------------------- */

.gc-page,
.gc-guide-root,
.k2gd {
    --gc-obsidian: #080a0f;
    --gc-panel: rgba(12, 15, 22, .94);
    --gc-panel-soft: rgba(18, 22, 31, .84);
    --gc-iron: #1a202a;
    --gc-gold: #f6cc68;
    --gc-gold-soft: #ffe4a0;
    --gc-red: #f05a45;
    --gc-ice: #75c9ef;
    --gc-arcane: #aa7df2;
    --gc-green: #71d38d;
    --gc-text: #eee7da;
    --gc-muted: #aaa99f;
    --gc-line: rgba(230, 202, 144, .14);
    --gc-line-strong: rgba(240, 202, 107, .38);
    --gc-radius: 14px;
    --gc-radius-lg: 20px;
    color: var(--gc-text);
}

.gc-shell {
    width: 96vw;
    width: min(96vw, 1840px);
    max-width: 1840px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
}

.gc-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(16px, 1.25vw, 24px);
    align-items: start;
}

.gc-side-nav {
    grid-column: 1 / span 2;
    position: sticky;
    top: 76px;
}

.gc-main {
    grid-column: 3 / span 7;
    min-width: 0;
}

.gc-progress-panel {
    grid-column: 10 / span 3;
    position: sticky;
    top: 76px;
}

.gc-section {
    position: relative;
    margin-top: 34px;
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

.gc-section:first-child {
    margin-top: 0;
}

.gc-section > h2,
.gc-section > h3,
.gc-section-title {
    margin: 0 0 6px;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2vw, 34px);
    line-height: 1.12;
}

.gc-section-subtitle,
.gc-section > p:first-of-type {
    max-width: 780px;
    margin: 0 0 16px;
    color: var(--gc-muted);
    font-size: 13px;
    line-height: 1.6;
}

.gc-data-grid,
.gc-system-grid,
.gc-pus-grid,
.gc-event-grid,
.gc-item-grid,
.gc-drop-group {
    display: grid;
    gap: 14px;
}

.gc-data-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gc-system-grid,
.gc-pus-grid,
.gc-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gc-item-grid,
.gc-drop-group {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.gc-feature-card,
.gc-system-card,
.gc-pus-card,
.gc-event-card,
.gc-item-card,
.gc-quest-card,
.gc-forge-card,
.gc-stat-console,
.gc-source-note,
.gc-codex-detail,
.gc-drawer-detail {
    position: relative;
    min-width: 0;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 38%),
        var(--gc-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 38px rgba(0, 0, 0, .2);
}

.gc-feature-card,
.gc-system-card,
.gc-pus-card,
.gc-event-card {
    min-height: 190px;
    padding: 19px;
    overflow: hidden;
}

.gc-feature-card::after,
.gc-system-card::after,
.gc-pus-card::after,
.gc-event-card::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -64px;
    width: 170px;
    height: 170px;
    pointer-events: none;
    border: 1px solid rgba(246, 204, 104, .13);
    border-radius: 50%;
    opacity: .55;
    transform: scale(.9);
    transition: transform .2s ease, opacity .2s ease;
}

.gc-feature-card:hover::after,
.gc-system-card:hover::after,
.gc-pus-card:hover::after,
.gc-event-card:hover::after {
    opacity: .9;
    transform: scale(1);
}

.gc-feature-card h3,
.gc-system-card h3,
.gc-pus-card h3,
.gc-event-card h3,
.gc-item-card h3,
.gc-quest-card h3,
.gc-forge-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff8e9;
    font-size: 16px;
    line-height: 1.25;
}

.gc-feature-card p,
.gc-system-card p,
.gc-pus-card p,
.gc-event-card p {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    color: var(--gc-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.gc-evidence-chip {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(113, 211, 141, .35);
    border-radius: 999px;
    background: rgba(113, 211, 141, .08);
    color: var(--gc-green);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.gc-source-note {
    margin-top: 12px;
    padding: 12px 14px 12px 38px;
    color: #bbb4a7;
    font-size: 11px;
    line-height: 1.5;
}

.gc-source-note::before {
    content: "i";
    position: absolute;
    top: 12px;
    left: 13px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid rgba(117, 201, 239, .4);
    border-radius: 50%;
    color: var(--gc-ice);
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: 700;
}

.gc-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 18px;
}

.gc-filter-row button,
.gc-filter-row a,
.gc-filter-row [role="button"] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--gc-line);
    border-radius: 999px;
    background: #11151e;
    color: var(--gc-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.gc-filter-row button:hover,
.gc-filter-row button.is-active,
.gc-filter-row button[aria-pressed="true"],
.gc-filter-row a:hover,
.gc-filter-row a.is-active {
    border-color: rgba(246, 204, 104, .48);
    background: rgba(246, 204, 104, .1);
    color: var(--gc-gold-soft);
}

.gc-q-key {
    display: grid;
    width: 82px;
    height: 82px;
    min-height: 82px;
    place-items: center;
    border: 2px solid var(--gc-gold);
    border-radius: 17px;
    background: linear-gradient(145deg, #393121, #13151a);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .4), 0 0 22px rgba(246, 204, 104, .2);
    color: var(--gc-gold-soft);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 700;
}

.gc-quest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.gc-quest-card {
    display: grid;
    min-height: 174px;
    grid-template-columns: minmax(96px, 122px) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
}

.gc-quest-card img,
.gc-quest-card__monster {
    width: 100%;
    min-width: 96px;
    height: 126px;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 72%, rgba(246, 204, 104, .12), transparent 62%), #0b0e14;
}

.gc-quest-card p,
.gc-quest-card small {
    color: var(--gc-muted);
    font-size: 11px;
    line-height: 1.45;
}

.gc-item-card {
    display: grid;
    min-height: 108px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px;
}

.gc-item-card img,
.gc-item-card__icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    object-fit: contain;
    border: 1px solid var(--gc-line-strong);
    border-radius: 10px;
    background: radial-gradient(circle, rgba(246, 204, 104, .09), transparent 68%), #111621;
}

.gc-item-card.is-showcase {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 144px;
}

.gc-item-card.is-showcase img,
.gc-item-card.is-showcase .gc-item-card__icon {
    width: 112px;
    height: 112px;
    min-width: 112px;
}

.gc-item-card small,
.gc-item-card__meta {
    display: block;
    margin-top: 4px;
    color: var(--gc-muted);
    font-size: 10px;
    line-height: 1.4;
}

.gc-forge-list {
    display: grid;
    gap: 17px;
}

.gc-forge-card {
    padding: clamp(17px, 2vw, 26px);
    overflow: hidden;
    border-color: rgba(170, 125, 242, .3);
    background:
        radial-gradient(circle at 50% 50%, rgba(170, 125, 242, .09), transparent 30%),
        var(--gc-panel);
}

.gc-forge-flow {
    position: relative;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto minmax(190px, 1.1fr);
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.gc-forge-node {
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(9, 12, 18, .8);
    text-align: center;
}

.gc-forge-node img {
    width: 72px;
    height: 72px;
    min-width: 72px;
    object-fit: contain;
    border-radius: 9px;
}

.gc-forge-node strong,
.gc-forge-node small {
    display: block;
}

.gc-forge-node strong {
    color: #fff8e9;
    font-size: 12px;
}

.gc-forge-node small {
    margin-top: 4px;
    color: var(--gc-muted);
    font-size: 10px;
}

.gc-forge-operator {
    display: grid;
    width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    border: 1px solid rgba(170, 125, 242, .4);
    border-radius: 50%;
    background: #11121b;
    color: #c4a4f8;
    font-size: 20px;
    font-weight: 900;
}

.gc-upgrade-path {
    display: flex;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    padding: 16px 3px 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #a87322 transparent;
}

.gc-upgrade-node {
    flex: 1 0 210px;
    min-height: 160px;
    padding: 17px;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    background: var(--gc-panel);
    scroll-snap-align: start;
}

.gc-upgrade-arrow {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    min-height: 44px;
    place-items: center;
    align-self: center;
    color: var(--gc-gold);
    font-size: 24px;
}

.gc-rebirth-track {
    display: flex;
    overflow-x: auto;
    padding: 32px 12px 24px;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-lg);
    background: radial-gradient(circle at 100% 50%, rgba(170, 125, 242, .1), transparent 28%), #090c12;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #a87322 transparent;
}

.gc-rebirth-node {
    position: relative;
    flex: 0 0 88px;
    min-width: 88px;
    text-align: center;
    scroll-snap-align: center;
}

.gc-rebirth-node::before {
    content: "";
    position: absolute;
    top: 23px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .09);
}

.gc-rebirth-node:first-child::before {
    display: none;
}

.gc-rebirth-node > span:first-child,
.gc-rebirth-node__orb {
    position: relative;
    z-index: 1;
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: #161b25;
    color: #8d9199;
    font-size: 11px;
    font-weight: 900;
}

.gc-rebirth-node.is-complete::before {
    background: #d9a83e;
}

.gc-rebirth-node.is-complete > span:first-child,
.gc-rebirth-node.is-complete .gc-rebirth-node__orb {
    border-color: #f6cc68;
    background: #d9a83e;
    color: #211607;
}

.gc-rebirth-node.is-current > span:first-child,
.gc-rebirth-node.is-current .gc-rebirth-node__orb {
    border-color: #ff9b71;
    background: #9f2e23;
    color: #fff;
    box-shadow: 0 0 20px rgba(240, 90, 69, .35);
}

.gc-rebirth-node small {
    display: block;
    margin-top: 7px;
    color: var(--gc-muted);
    font-size: 9px;
}

.gc-stat-console {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
    padding: 18px;
}

.gc-stat-core {
    display: grid;
    min-height: 178px;
    place-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
    text-align: center;
}

.gc-stat-core__ring {
    --value: 0%;
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #11151d 58%, transparent 60%), conic-gradient(var(--gc-gold) var(--value), rgba(255, 255, 255, .08) 0);
    color: #fff8e9;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
}

.gc-stat-meter {
    width: 100%;
    margin-top: 12px;
}

.gc-stat-meter__labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--gc-muted);
    font-size: 10px;
}

.gc-stat-meter__track {
    height: 8px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
}

.gc-stat-meter__fill {
    display: block;
    width: var(--value, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gc-gold), var(--gc-gold-soft));
}

.gc-codex-detail,
.gc-drawer-detail {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr) minmax(300px, 1fr);
    min-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
}

.gc-codex-detail > section,
.gc-codex-detail > div,
.gc-drawer-detail > section,
.gc-drawer-detail > div {
    min-width: 0;
    padding: clamp(22px, 2.5vw, 40px);
    overflow: auto;
}

.gc-codex-detail > :not(:first-child),
.gc-drawer-detail > :not(:first-child) {
    border-left: 1px solid var(--gc-line);
}

.gc-codex-detail__visual img,
.gc-drawer-detail__visual img {
    width: 100%;
    min-height: 320px;
    max-height: 560px;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 1179px) {
    .gc-main {
        grid-column: 3 / -1;
    }

    .gc-progress-panel {
        position: relative;
        top: auto;
        grid-column: 3 / -1;
    }

    .gc-system-grid,
    .gc-pus-grid,
    .gc-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gc-stat-console {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .gc-codex-detail,
    .gc-drawer-detail {
        grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
    }

    .gc-codex-detail > :last-child,
    .gc-drawer-detail > :last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--gc-line);
        border-left: 0;
    }
}

@media (max-width: 979px) {
    .gc-layout {
        display: block;
    }

    .gc-side-nav {
        position: sticky;
        top: 58px;
        z-index: 40;
        margin-bottom: 18px;
        overflow-x: auto;
    }

    .gc-progress-panel {
        margin-top: 20px;
    }

    .gc-forge-flow {
        grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
    }

    .gc-forge-flow > :nth-last-child(-n+2) {
        margin-top: 10px;
    }

    .gc-codex-detail,
    .gc-drawer-detail {
        display: block;
    }

    .gc-codex-detail > :not(:first-child),
    .gc-drawer-detail > :not(:first-child),
    .gc-codex-detail > :last-child,
    .gc-drawer-detail > :last-child {
        border-top: 1px solid var(--gc-line);
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .gc-shell {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .gc-data-grid,
    .gc-system-grid,
    .gc-pus-grid,
    .gc-event-grid,
    .gc-quest-grid,
    .gc-item-grid,
    .gc-drop-group,
    .gc-stat-console {
        grid-template-columns: 1fr;
    }

    .gc-feature-card,
    .gc-system-card,
    .gc-pus-card,
    .gc-event-card {
        min-height: 166px;
    }

    .gc-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .gc-filter-row > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .gc-quest-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .gc-quest-card > :last-child {
        grid-column: 1 / -1;
    }

    .gc-forge-flow {
        display: flex;
        flex-direction: column;
    }

    .gc-forge-node {
        width: 100%;
    }

    .gc-forge-operator {
        transform: rotate(90deg);
    }

    .gc-upgrade-path,
    .gc-rebirth-track {
        scroll-snap-type: x mandatory;
    }

    .gc-codex-detail,
    .gc-drawer-detail {
        min-height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 430px) {
    .gc-quest-card {
        display: block;
    }

    .gc-quest-card img,
    .gc-quest-card__monster {
        width: 100%;
        height: 190px;
        margin-bottom: 12px;
    }

    .gc-item-card,
    .gc-item-card.is-showcase {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .gc-item-card.is-showcase img,
    .gc-item-card.is-showcase .gc-item-card__icon {
        width: 72px;
        height: 72px;
        min-width: 72px;
    }

    .gc-q-key {
        width: 72px;
        height: 72px;
        min-height: 72px;
        font-size: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-page *,
    .gc-page *::before,
    .gc-page *::after,
    .gc-guide-root *,
    .gc-guide-root *::before,
    .gc-guide-root *::after,
    .k2gd .gc-feature-card::after,
    .k2gd .gc-system-card::after,
    .k2gd .gc-pus-card::after,
    .k2gd .gc-event-card::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Final cascade corrections for the concrete server-rendered R34 views. */
.gc-quest-card {
    display: flex;
    min-height: 0;
    grid-template-columns: none;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
}

.gc-forge-flow {
    grid-template-columns: minmax(0, 1.25fr) 50px minmax(220px, .75fr);
}

.gc-item-large {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 146px;
}

.gc-item-small {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 76px;
}

@media (max-width: 1100px) {
    .gc-left-rail,
    .gc-main,
    .gc-right-rail {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .gc-quest-card { display: flex; }
    .gc-forge-flow { display: flex; flex-direction: column; }
    .gc-forge-side { width: 100%; }
    .gc-item-grid { grid-template-columns: 1fr; }
}

.gc-item-card[role="button"] { cursor: pointer; }
.gc-item-card[role="button"]:hover, .gc-item-card[role="button"]:focus-visible { border-color: rgba(246,204,104,.5); outline: 0; box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 0 2px rgba(246,204,104,.08); }
.gc-item-detail { max-width: 980px; margin: 0 auto; padding: clamp(18px,3vw,34px); }
.gc-item-detail > header { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 20px; align-items: center; }
.gc-item-detail-icon { display: grid; width: 128px; height: 128px; place-items: center; border: 1px solid rgba(246,204,104,.4); border-radius: 14px; background: radial-gradient(circle,rgba(246,204,104,.1),transparent 68%),#111620; }
.gc-item-detail-icon img { width: 100%; height: 100%; object-fit: contain; }
.gc-item-detail-icon i { color: var(--gc-gold); font-size: 34px; }
.gc-item-detail h2 { margin: 7px 0; color: #fff0d0; font: 700 clamp(28px,4vw,46px)/1 Georgia,serif; }
.gc-item-recipes { margin-top: 18px; }
.gc-item-recipes h3 { color: #fff0d0; font: 700 20px/1.1 Georgia,serif; }
.gc-item-recipes > div { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.gc-item-recipes span, .gc-item-recipes small { color: var(--gc-muted); font-size: 8px; }
.gc-item-recipes strong { color: #e8decc; font-size: 10px; }
@media (max-width: 560px) { .gc-item-detail > header { grid-template-columns: 1fr; } .gc-item-recipes > div { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   R34.3 cinematic first-run journey
   -------------------------------------------------------------------------- */

/* Onboarding overlay'in gorunmesi icin DIKEY tasma serbest birakilir; ancak
   kisayol olarak overflow: visible yazmak YATAY tasma korumasini da (Aether
   html/body overflow-x:hidden) iptal ediyordu ve /Guide 360px'te tasmayi aciga
   cikariyordu. Yalnizca ihtiyac duyulan eksen serbest birakilir. */
body.gc-onboarding-open { overflow-x: hidden; }

.gc-start-journey[hidden],
.gc-journey-step[hidden] { display: none !important; }

.gc-start-journey {
    position: relative;
    z-index: 50;
    display: block;
    margin: 0 0 18px;
    padding: 0;
    box-sizing: border-box;
}

.gc-start-journey-mask {
    display: none;
}

.gc-start-journey-panel {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-height: none;
    overflow: hidden;
    border: 1px solid rgba(245, 199, 93, .46);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 14%, rgba(190, 54, 30, .18), transparent 31%),
        radial-gradient(circle at 88% 80%, rgba(71, 111, 174, .14), transparent 32%),
        linear-gradient(145deg, rgba(18, 14, 17, .99), rgba(7, 10, 16, .995) 52%, rgba(13, 9, 15, .995));
    box-shadow: 0 34px 110px rgba(0, 0, 0, .82), inset 0 1px 0 rgba(255, 239, 184, .1), 0 0 42px rgba(187, 55, 28, .18);
    scrollbar-width: thin;
    scrollbar-color: #8e6328 transparent;
}

.gc-start-journey-panel::before,
.gc-start-journey-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.gc-start-journey-panel::before {
    inset: 10px;
    border: 1px solid rgba(255, 221, 135, .08);
    border-radius: 15px;
}

.gc-start-journey-panel::after {
    top: 82px;
    right: 9%;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(248, 204, 101, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(248, 204, 101, .018), 0 0 0 84px rgba(248, 204, 101, .012);
}

.gc-journey-runes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gc-journey-runes i { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(246, 204, 104, .055); transform: rotate(45deg); animation: gc-journey-rune 18s linear infinite; }
.gc-journey-runes i:nth-child(1) { top: -125px; left: -60px; }
.gc-journey-runes i:nth-child(2) { right: -110px; bottom: 5%; animation-duration: 25s; animation-direction: reverse; }
.gc-journey-runes i:nth-child(3) { bottom: -165px; left: 38%; animation-duration: 31s; }
@keyframes gc-journey-rune { to { transform: rotate(405deg); } }

.gc-journey-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 28px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.gc-journey-header > div { display: flex; align-items: center; gap: 14px; }
.gc-journey-header strong { color: #f7d980; font: 800 13px/1 Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.gc-journey-close { display: inline-flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.035); color: #d4cbbd; font-size: 13px; font-weight: 800; }
.gc-journey-close:hover, .gc-journey-close:focus { border-color: rgba(246,204,104,.42); color: #ffe6a5; }

.gc-journey-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px 28px 0; }
.gc-journey-progress i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.075); box-shadow: inset 0 1px 2px rgba(0,0,0,.7); transition: background .25s ease, box-shadow .25s ease; }
.gc-journey-progress i.is-active { background: linear-gradient(90deg, #a72c20, #f0bb4b); box-shadow: 0 0 12px rgba(230, 136, 43, .3); }
.gc-journey-progress i.is-done { background: #a47727; }

.gc-journey-stage { min-height: 520px; padding: clamp(26px, 4vw, 52px); }
.gc-journey-step { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 58px); align-items: center; animation: gc-journey-enter .34s ease both; }
.gc-journey-step[data-guide-onboarding-step="0"] { grid-template-columns: 1fr; gap: 24px; }
@keyframes gc-journey-enter { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }

.gc-journey-step-copy { min-width: 0; }
.gc-journey-step[data-guide-onboarding-step="0"] .gc-journey-step-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.gc-journey-number { display: block; margin-bottom: 8px; color: rgba(247, 202, 98, .32); font: 900 28px/1 Georgia, serif; letter-spacing: .08em; }
.gc-journey-step h2 { margin: 8px 0 13px; color: #fff0cc; font: 700 clamp(34px, 4.5vw, 58px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.025em; text-transform: none; }
.gc-journey-step p { max-width: 680px; margin: 0; color: #c8c2b7; font-size: 16px; line-height: 1.68; }
.gc-journey-step[data-guide-onboarding-step="0"] p { margin-inline: auto; }

.gc-journey-class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gc-journey-class { position: relative; display: grid; grid-template-columns: 66px minmax(0,1fr) 20px; min-height: 92px; align-items: center; gap: 11px; padding: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.026); color: #eee5d6; text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.gc-journey-class::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(246,204,104,.065)); opacity: 0; transition: opacity .2s ease; }
.gc-journey-class:hover, .gc-journey-class:focus { transform: translateY(-2px); border-color: rgba(246,204,104,.46); background: rgba(246,204,104,.055); }
.gc-journey-class.is-selected { border-color: #e8b84f; background: linear-gradient(120deg, rgba(141,43,25,.2), rgba(232,184,79,.075)); box-shadow: 0 0 24px rgba(202,91,35,.16), inset 0 0 0 1px rgba(255,230,155,.08); }
.gc-journey-class.is-selected::before { opacity: 1; }
.gc-journey-class img { width: 66px; height: 74px; border-radius: 9px; object-fit: cover; object-position: top center; filter: saturate(.9) contrast(1.06); }
.gc-journey-class span, .gc-journey-class strong, .gc-journey-class small { display: block; min-width: 0; }
.gc-journey-class strong { overflow: hidden; color: #fff0d0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.gc-journey-class small { margin-top: 5px; color: #aaa397; font-size: 11px; line-height: 1.25; }
.gc-journey-class > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: transparent; font-size: 10px; }
.gc-journey-class.is-selected > i { border-color: #e9bb53; background: #8f2e20; color: #ffe39a; }

.gc-journey-emblem { position: relative; display: grid; width: 190px; height: 190px; place-items: center; border: 1px solid rgba(246,204,104,.28); border-radius: 50%; color: #ffd879; background: radial-gradient(circle, rgba(246,204,104,.14), rgba(255,255,255,.015) 54%, transparent 55%); box-shadow: inset 0 0 40px rgba(0,0,0,.52), 0 0 38px rgba(224,111,35,.12); }
.gc-journey-emblem::before, .gc-journey-emblem::after { content: ""; position: absolute; border: 1px solid currentColor; opacity: .15; transform: rotate(45deg); }
.gc-journey-emblem::before { inset: 19px; }
.gc-journey-emblem::after { inset: 38px; transform: rotate(22.5deg); }
.gc-journey-emblem > i { font-size: 54px; text-shadow: 0 0 22px currentColor; }
.gc-journey-emblem > span { font: 900 64px/1 Georgia, serif; text-shadow: 0 0 24px currentColor; }
.gc-journey-emblem-red { color: #ff765a; border-color: rgba(224,70,42,.42); background: radial-gradient(circle, rgba(190,44,30,.22), transparent 62%); }
.gc-journey-emblem-blue { color: #76c4ff; border-color: rgba(92,168,224,.4); background: radial-gradient(circle, rgba(64,131,184,.19), transparent 62%); }
.gc-journey-emblem-purple { color: #c190ff; border-color: rgba(152,91,218,.42); background: radial-gradient(circle, rgba(116,58,176,.2), transparent 62%); }
.gc-journey-emblem-ice { color: #9ee9ff; border-color: rgba(112,215,238,.42); background: radial-gradient(circle, rgba(67,164,193,.2), transparent 62%); }

.gc-journey-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.065); }
.gc-journey-step[data-guide-onboarding-step="0"] .gc-journey-actions { justify-content: center; }
.gc-journey-actions .gc-btn { min-width: 170px; min-height: 48px; }
.gc-journey-actions .gc-btn[disabled] { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.gc-journey-info-link { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin-top: 18px; color: #f2c65d; font-size: 14px; font-weight: 800; }

.gc-journey-callout { display: inline-flex; align-items: center; gap: 15px; margin-top: 22px; padding: 14px 17px; border: 1px solid rgba(111,190,239,.24); border-radius: 11px; background: rgba(60,121,164,.08); }
.gc-journey-callout strong, .gc-journey-callout span { display: block; }
.gc-journey-callout strong { color: #9bdcff; font-size: 18px; }
.gc-journey-callout span { color: #b9b6b0; font-size: 13px; }
.gc-journey-callout.is-ready { border-color: rgba(240,189,72,.35); background: rgba(164,104,31,.1); }
.gc-journey-callout.is-ready strong { color: #ffd977; }

.gc-journey-command { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 24px; }
.gc-journey-command b { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(243,188,69,.4); border-radius: 50%; background: rgba(139,37,24,.24); color: #ffd77d; }
.gc-journey-command span { color: #ded5c6; font-size: 13px; font-weight: 800; }
.gc-journey-command i { width: 28px; height: 1px; background: linear-gradient(90deg, rgba(243,188,69,.15), rgba(243,188,69,.55)); }

@media (max-width: 760px) {
    .gc-start-journey { padding: 0; }
    .gc-start-journey-panel { width: 100%; max-height: none; border-radius: 16px; }
    .gc-journey-header { padding: 17px 18px 12px; }
    .gc-journey-header .gc-eyebrow { font-size: 9px; }
    .gc-journey-close { min-height: 38px; padding: 0 10px; font-size: 11px; }
    .gc-journey-progress { padding: 11px 18px 0; }
    .gc-journey-stage { min-height: 0; padding: 23px 18px 20px; }
    .gc-journey-step { grid-template-columns: 1fr; gap: 20px; }
    .gc-journey-emblem { width: 112px; height: 112px; margin: 0 auto; }
    .gc-journey-emblem > i { font-size: 34px; }
    .gc-journey-emblem > span { font-size: 42px; }
    .gc-journey-step-copy { text-align: center; }
    .gc-journey-step h2 { margin-top: 6px; font-size: clamp(29px, 9vw, 40px); }
    .gc-journey-step p { font-size: 14px; line-height: 1.58; }
    .gc-journey-class-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
    .gc-journey-class { grid-template-columns: 48px minmax(0,1fr) 18px; min-height: 72px; gap: 7px; padding: 7px; }
    .gc-journey-class img { width: 48px; height: 56px; }
    .gc-journey-class strong { font-size: 12px; }
    .gc-journey-class small { font-size: 9px; }
    .gc-journey-actions { justify-content: stretch; margin-top: 5px; padding-top: 16px; }
    .gc-journey-actions .gc-btn { flex: 1 1 auto; min-width: 0; min-height: 46px; padding-inline: 10px; font-size: 12px; }
    .gc-journey-info-link, .gc-journey-callout { justify-content: center; }
    .gc-journey-command { justify-content: center; }
}

@media (max-width: 390px) {
    .gc-journey-header { gap: 8px; }
    .gc-journey-header .gc-eyebrow { letter-spacing: .08em; }
    .gc-journey-close { font-size: 0; }
    .gc-journey-close i { font-size: 14px; }
    .gc-journey-stage { padding-inline: 13px; }
    .gc-journey-class { grid-template-columns: 44px minmax(0,1fr) 16px; }
    .gc-journey-class img { width: 44px; height: 52px; }
    .gc-journey-command i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gc-journey-runes i, .gc-journey-step { animation: none !important; }
    .gc-journey-class, .gc-journey-progress i { transition: none !important; }
}

/* --------------------------------------------------------------------------
   R34.2 player-first readability and inline monster/drop composition
   -------------------------------------------------------------------------- */

.gc-page,
.gc-guide-root {
    --gc-muted: #c1beb5;
    font-size: 16px;
    line-height: 1.55;
}

.gc-left-rail { grid-column: 1 / span 2; }
.gc-main { grid-column: 3 / span 8; }
.gc-right-rail { grid-column: 11 / span 2; min-width: 0; }
.gc-left-rail,
.gc-right-rail { position: sticky; top: 76px; align-self: start; }
.gc-left-rail .gc-side-nav,
.gc-right-rail .gc-progress-panel { position: relative; top: auto; }

.gc-eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: .13em; }
.gc-section-head p,
.gc-lead { color: var(--gc-muted); font-size: 15px; line-height: 1.65; }
.gc-btn,
.gc-text-link,
.gc-anchor-actions a { min-height: 46px; font-size: 14px; }
.gc-muted { color: var(--gc-muted); font-size: 14px; }

.gc-side-label { font-size: 11px; }
.gc-side-nav a { min-height: 46px; font-size: 13px; }
.gc-progress-panel { padding: 16px; }
.gc-progress-panel p { font-size: 14px; }
.gc-character-meta span,
.gc-progress-facts dt,
.gc-next-target span { font-size: 11px; }
.gc-progress-facts dd,
.gc-next-target strong { font-size: 14px; }

.gc-mini-portal strong { font-size: 14px; }
.gc-mini-portal small { font-size: 12px; line-height: 1.45; }
.gc-onboarding-steps strong { font-size: 15px; }
.gc-onboarding-steps small { font-size: 13px; line-height: 1.55; }

.gc-cinematic-hero { min-height: clamp(480px, 30vw, 590px); }
.gc-hero-class { min-height: 390px; }
.gc-class-portal { min-height: 470px; }
.gc-class-copy p { font-size: 15px; line-height: 1.55; }
.gc-class-stat small { font-size: 11px; }
.gc-class-stat strong { font-size: 14px; }

.gc-class-showcase,
.gc-class-showcase-art { min-height: 420px; }
.gc-class-showcase { grid-template-columns: minmax(260px, .7fr) minmax(420px, 1.3fr); }
.gc-class-showcase-copy { padding: clamp(24px, 3vw, 48px); }
.gc-class-showcase-copy h2 { font-size: clamp(34px, 3.3vw, 52px); }
.gc-class-showcase-copy p { font-size: 16px; }

.gc-stat-ring { width: 128px; height: 128px; }
.gc-warrior-stat-lock { grid-template-columns: 144px 60px 144px minmax(260px, 1fr); padding: 18px; }
.gc-stat-ring small,
.gc-stat-transfer { font-size: 11px; }
.gc-stat-lock-copy p,
.gc-threshold-card li { font-size: 14px; line-height: 1.5; }
.gc-threshold-value { font-size: 15px; }

.gc-equipment-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.gc-equipment-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--gc-line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%), #0a0e15;
}

.gc-equipment-panel > header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.gc-equipment-panel > header > i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(246,204,104,.28);
    border-radius: 12px;
    color: var(--gc-gold);
    background: rgba(246,204,104,.07);
    font-size: 20px;
}

.gc-equipment-panel header span { color: var(--gc-gold); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.gc-equipment-panel h3 { margin: 2px 0; color: #fff2d4; font: 700 26px/1.05 Georgia, serif; }
.gc-equipment-panel header p { margin: 0; color: var(--gc-muted); font-size: 13px; line-height: 1.45; }
.gc-equipment-panel .gc-item-grid { grid-template-columns: 1fr; }
.gc-equipment-panel .gc-btn { width: 100%; margin-top: 14px; box-sizing: border-box; }
.gc-equipment-panel.is-weapon { border-top-color: rgba(240,90,69,.55); }
.gc-equipment-panel.is-armor { border-top-color: rgba(117,201,239,.55); }
.gc-equipment-panel.is-accessory { border-top-color: rgba(170,125,242,.6); }

.gc-monster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gc-monster-card { min-width: 0; }
.gc-monster-visual { min-height: 190px; }
.gc-monster-visual > img { height: 210px; }
.gc-monster-dossier { min-height: 210px; padding: 20px; }
.gc-monster-dossier > i { position: relative; z-index: 2; color: var(--gc-gold); font-size: 46px; opacity: .82; }
.gc-monster-dossier > strong { position: relative; z-index: 2; display: block; margin-top: 8px; color: #f5e3b8; font: 700 22px/1.15 Georgia, serif; }
.gc-monster-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
.gc-monster-body h3 { margin: 4px 0 0; font-size: 23px; }
.gc-monster-body .gc-btn { flex: 0 0 auto; }

.gc-featured-monster-drops {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
    overflow: hidden;
    border: 1px solid rgba(246,204,104,.24);
    border-radius: 18px;
    background: radial-gradient(circle at 0 20%, rgba(185,52,34,.12), transparent 34%), #090d14;
}

.gc-featured-monster { min-width: 0; padding: 16px; border-right: 1px solid var(--gc-line); }
.gc-featured-monster .gc-monster-card { box-shadow: none; }
.gc-featured-monster .gc-monster-body .gc-btn { display: none; }
.gc-featured-monster > div:last-child { padding: 18px 4px 4px; }
.gc-featured-monster > div:last-child > span,
.gc-featured-drop-pane > header span,
.gc-route-drop-pane > header span { color: var(--gc-gold); font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.gc-featured-monster > div:last-child h3 { margin: 5px 0 8px; color: #fff1d1; font: 700 26px/1.08 Georgia, serif; }
.gc-featured-monster > div:last-child p { color: var(--gc-muted); font-size: 15px; line-height: 1.6; }
.gc-featured-monster > div:last-child a { color: var(--gc-gold); font-size: 14px; font-weight: 800; }
.gc-featured-drop-pane,
.gc-route-drop-pane { min-width: 0; padding: 18px; }
.gc-featured-drop-pane > header,
.gc-route-drop-pane > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.gc-featured-drop-pane > header strong,
.gc-route-drop-pane > header strong { color: #d5c8ae; font-size: 12px; font-weight: 700; }
.gc-monster-grid-secondary { margin-top: 16px; }

.gc-drop-board { display: grid; gap: 12px; }
.gc-drop-pool {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(255,255,255,.022);
}
.gc-drop-pool > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gc-drop-pool h3 { margin: 4px 0 2px; color: #fff0cf; font: 700 20px/1.12 Georgia, serif; }
.gc-drop-pool header > div > small { color: var(--gc-muted); font-size: 12px; }
.gc-drop-pool > p { margin: 12px 0 0; color: var(--gc-muted); font-size: 13px; line-height: 1.5; }
.gc-rate-stack { flex: 0 0 auto; text-align: right; }
.gc-rate-stack strong,
.gc-rate-stack span,
.gc-rate-stack small { display: block; }
.gc-rate-stack strong { color: var(--gc-gold-soft); font-size: 19px; font-variant-numeric: tabular-nums; }
.gc-rate-stack strong small { color: #f08b70; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.gc-rate-stack span { margin-top: 3px; color: var(--gc-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.gc-drop-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-top: 13px; }
.gc-drop-board.is-compact .gc-drop-pool { padding: 13px; }
.gc-drop-board.is-compact .gc-drop-items { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.gc-item-card { min-height: 98px; }
.gc-item-copy strong { font-size: 14px; line-height: 1.42; }
.gc-category-badge { font-size: 10px; line-height: 1.2; }
.gc-item-card small,
.gc-item-card__meta { font-size: 12px; }
.gc-item-small { min-height: 80px; grid-template-columns: 56px minmax(0, 1fr); }
.gc-item-small .gc-rarity-frame { width: 56px; height: 56px; min-width: 56px; }
.gc-item-small .gc-rarity-frame img { width: 56px; height: 56px; min-width: 56px; }
.gc-item-small .gc-item-copy strong { font-size: 13px; }

.gc-route-card-drops {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
    gap: 0;
}
.gc-route-intro { min-width: 0; border-right: 1px solid var(--gc-line); }
.gc-route-intro .gc-monster-card { border: 0; border-radius: 0; box-shadow: none; }
.gc-route-intro .gc-monster-body { padding: 14px; }
.gc-route-intro .gc-monster-body .gc-btn { display: none; }
.gc-route-evidence { padding: 18px; border: 0; border-top: 1px solid var(--gc-line); }
.gc-route-evidence p { color: var(--gc-muted); font-size: 15px; line-height: 1.58; }
.gc-route-evidence > div { grid-template-columns: 108px minmax(0,1fr); font-size: 13px; line-height: 1.45; }
.gc-route-evidence > div b { color: #d0c4ae; }

.gc-monster-focus {
    display: grid;
    grid-template-columns: minmax(220px, .62fr) minmax(300px, 1.15fr) minmax(220px, .72fr);
    align-items: start;
    overflow: hidden;
    border: 1px solid var(--gc-line);
    border-radius: 18px;
    background: #090d14;
}
.gc-monster-focus > * { min-width: 0; padding: 20px; }
.gc-monster-focus > :not(:first-child) { border-left: 1px solid var(--gc-line); }
.gc-monster-focus-visual { display: grid; height: 320px; align-items: stretch; padding: 0; }
.gc-monster-focus-visual > img { width: 100%; height: 320px; min-height: 0; object-fit: contain; object-position: center bottom; }
.gc-monster-focus-visual .gc-monster-dossier { min-height: 320px; }
.gc-monster-focus-copy h2 { margin: 5px 0 12px; color: #fff0d0; font: 700 clamp(32px, 3vw, 50px)/1 Georgia, serif; }
.gc-monster-location h3 { margin: 0 0 14px; color: #fff0d0; font: 700 20px/1.1 Georgia, serif; }
.gc-spawn-list strong { font-size: 14px; }
.gc-spawn-list span { font-size: 13px; }
.gc-spawn-list small { font-size: 12px; }
.gc-spawn-summary-list { display: grid; gap: 9px; }
.gc-spawn-summary { padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.022); }
.gc-spawn-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-spawn-summary > header strong { color: #eee2cc; font-size: 14px; }
.gc-spawn-summary > header span { color: var(--gc-gold); font-size: 11px; font-weight: 900; }
.gc-spawn-summary > small { display: block; margin-top: 9px; color: var(--gc-muted); font-size: 12px; }
.gc-spawn-coordinates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gc-spawn-coordinates span { padding: 5px 7px; border: 1px solid rgba(246,204,104,.13); border-radius: 6px; background: rgba(246,204,104,.035); color: #e6bd59; font-size: 11px; font-variant-numeric: tabular-nums; }
.gc-monster-drop-showcase > p { color: var(--gc-muted); font-size: 14px; }

.gc-progress-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: var(--gc-muted); font-size: 13px; }
.gc-progress-note i { color: var(--gc-green); }

#monster-codex,
#equipment-targets,
#farm-route,
#stat-core,
#cold-evil-path { scroll-margin-top: 92px; }

.gc-quest-level small,
.gc-quest-meta span,
.gc-event-meta span,
.gc-quest-targets h4,
.gc-quest-rewards h4 { font-size: 11px; }
.gc-quest-level b { font-size: 14px; }
.gc-quest-card p,
.gc-quest-card small { font-size: 13px; }
.gc-quest-target strong { font-size: 14px; }
.gc-feature-panel p { font-size: 14px; }
.gc-feature-panel a { font-size: 13px; }
.gc-item-recipes span,
.gc-item-recipes small { font-size: 12px; }
.gc-item-recipes strong { font-size: 14px; }

@media (max-width: 1450px) {
    .gc-main { grid-column: 3 / -1; }
    .gc-right-rail { grid-column: 3 / -1; position: relative; top: auto; }
    .gc-right-rail .gc-progress-panel { position: relative; top: auto; margin-top: 20px; }
    .gc-equipment-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-equipment-panel.is-accessory { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .gc-left-rail,
    .gc-main,
    .gc-right-rail { grid-column: 1 / -1; }
    .gc-left-rail { position: relative; top: auto; }
    .gc-featured-monster-drops,
    .gc-route-card-drops { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); }
    .gc-monster-focus { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); }
    .gc-monster-location { grid-column: 1 / -1; border-top: 1px solid var(--gc-line); border-left: 0 !important; }
    .gc-monster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .gc-page,
    .gc-guide-root { font-size: 16px; }
    .gc-cinematic-hero { min-height: 0; }
    .gc-hero-class-fan { min-height: 340px; }
    .gc-hero-class,
    .gc-hero-class:nth-child(even) { min-height: 168px; height: 168px; }
    .gc-class-portal { min-height: 420px; }
    .gc-class-showcase,
    .gc-class-showcase-art { min-height: 330px; }
    .gc-class-showcase { grid-template-columns: 1fr; }
    .gc-equipment-selector,
    .gc-featured-monster-drops,
    .gc-route-card-drops,
    .gc-monster-focus { grid-template-columns: 1fr; }
    .gc-equipment-panel.is-accessory { grid-column: auto; }
    .gc-featured-monster,
    .gc-route-intro { border-right: 0; border-bottom: 1px solid var(--gc-line); }
    .gc-monster-focus > :not(:first-child) { border-top: 1px solid var(--gc-line); border-left: 0; }
    .gc-monster-focus-visual { height: 220px; }
    .gc-monster-focus-visual > img { height: 220px; }
    .gc-monster-focus-visual .gc-monster-dossier { min-height: 220px; }
    .gc-monster-location { grid-column: auto; }
    .gc-monster-grid { grid-template-columns: 1fr; }
    .gc-drop-pool > header { display: block; }
    .gc-rate-stack { margin-top: 10px; text-align: left; }
    .gc-drop-items,
    .gc-drop-board.is-compact .gc-drop-items { grid-template-columns: 1fr; }
    .gc-farm-route > li { grid-template-columns: 1fr; }
    .gc-route-index { margin-left: 6px; }
    .gc-warrior-stat-lock { grid-template-columns: 1fr; justify-items: center; }
    .gc-monster-body { align-items: flex-start; flex-direction: column; }
    .gc-monster-body .gc-btn { width: 100%; box-sizing: border-box; }
}

/* --------------------------------------------------------------------------
   R34.4 class-first starter gateway
   -------------------------------------------------------------------------- */

.gc-class-gateway [data-guide-starter-plan][hidden],
.gc-class-gateway [data-guide-class-picker][hidden] { display: none !important; }

.gc-class-gateway .gc-start-journey-panel { overflow: hidden; }
.gc-class-gateway :focus-visible { outline: 2px solid #f2c65d; outline-offset: 3px; }

.gc-class-picker { padding: clamp(30px, 4vw, 58px); }
.gc-starter-intro { max-width: 820px; margin: 0 auto 26px; text-align: center; }
.gc-starter-intro h2 { margin: 8px 0 12px; color: #fff0cc; font: 700 clamp(38px, 5vw, 66px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.gc-starter-intro p { max-width: 720px; margin: 0 auto; color: #d0c9bd; font-size: 17px; line-height: 1.62; }

.gc-class-gateway .gc-journey-class-grid { max-width: 1180px; margin: 0 auto; }
.gc-class-gateway .gc-journey-class { min-height: 108px; padding: 12px; cursor: pointer; }
.gc-class-gateway .gc-journey-class strong { font-size: 16px; }
.gc-class-gateway .gc-journey-class small { font-size: 13px; line-height: 1.4; }
.gc-class-gateway .gc-journey-class > i { color: #c9a85c; }
.gc-class-gateway .gc-journey-class.is-selected > i { color: #ffe39a; }

.gc-starter-plan { padding: clamp(26px, 3.6vw, 50px); animation: gc-starter-reveal .28s ease-out both; }
@keyframes gc-starter-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gc-starter-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.075); }
.gc-starter-plan-header > div { max-width: 940px; }
.gc-starter-plan-header h2 { margin: 7px 0 10px; color: #fff0cc; font: 700 clamp(34px, 4vw, 54px)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.gc-starter-plan-header h2:focus { outline: none; }
.gc-starter-plan-header p { margin: 0; color: #c9c2b7; font-size: 16px; line-height: 1.6; }
.gc-change-class { display: inline-flex; min-width: 156px; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid rgba(246,204,104,.28); border-radius: 10px; background: rgba(246,204,104,.055); color: #f2d78e; font-size: 14px; font-weight: 800; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.gc-change-class:hover { border-color: rgba(246,204,104,.62); background: rgba(246,204,104,.1); }

.gc-starter-priorities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.gc-starter-action { position: relative; min-height: 250px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.gc-starter-action::after { content: ""; position: absolute; right: -42px; bottom: -52px; width: 150px; height: 150px; border: 1px solid currentColor; border-radius: 50%; opacity: .06; pointer-events: none; }
.gc-starter-action > span { display: block; padding-right: 48px; color: #d8b966; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.gc-starter-action > i,
.gc-starter-action > b { position: absolute; top: 17px; right: 18px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #e8c468; background: rgba(0,0,0,.2); font-size: 17px; line-height: 1; }
.gc-starter-action > b { font-family: Georgia, serif; font-weight: 900; }
.gc-starter-action h3 { margin: 30px 0 10px; color: #fff0d2; font: 700 23px/1.16 Georgia, "Times New Roman", serif; }
.gc-starter-action p { margin: 0 0 20px; color: #cbc5ba; font-size: 15px; line-height: 1.58; }
.gc-starter-action a { position: absolute; left: 22px; right: 22px; bottom: 18px; display: inline-flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.075); color: #f1ca68; font-size: 14px; font-weight: 900; text-decoration: none; }
.gc-starter-action.is-red { background: radial-gradient(circle at 100% 0, rgba(180,47,30,.17), transparent 42%), rgba(255,255,255,.018); }
.gc-starter-action.is-ice { background: radial-gradient(circle at 100% 0, rgba(52,145,185,.16), transparent 42%), rgba(255,255,255,.018); }
.gc-starter-action.is-ice > i,
.gc-starter-action.is-ice > b { color: #91dff5; }

.gc-starter-class-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.gc-starter-class-route article { display: grid; grid-template-columns: 46px minmax(0,1fr); align-content: start; gap: 4px 13px; min-height: 160px; padding: 18px; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: rgba(5,8,13,.48); }
.gc-starter-class-route article > i { grid-row: 1 / span 3; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(241,193,78,.25); border-radius: 11px; color: #e4bc5b; background: rgba(204,135,29,.07); font-size: 18px; }
.gc-starter-class-route span { color: #a9a397; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.gc-starter-class-route strong { color: #f4ead8; font-size: 16px; line-height: 1.42; }
.gc-starter-class-route a { grid-column: 2; align-self: end; min-height: 34px; padding-top: 8px; color: #e9bc54; font-size: 13px; font-weight: 900; text-decoration: none; }

.gc-starter-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 18px 20px; border: 1px solid rgba(239,188,67,.22); border-radius: 13px; background: linear-gradient(90deg, rgba(139,37,24,.13), rgba(211,148,43,.07)); }
.gc-starter-footer span,
.gc-starter-footer strong { display: block; }
.gc-starter-footer span { color: #bda862; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.gc-starter-footer strong { margin-top: 5px; color: #e8dece; font-size: 15px; line-height: 1.4; }
.gc-starter-footer .gc-btn { min-width: 220px; min-height: 48px; }

.gc-portal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .gc-starter-priorities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-starter-action:last-child { grid-column: 1 / -1; min-height: 220px; }
    .gc-starter-class-route { grid-template-columns: 1fr; }
    .gc-starter-class-route article { min-height: 128px; }
    .gc-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .gc-class-picker,
    .gc-starter-plan { padding: 22px 14px; }
    .gc-starter-intro { margin-bottom: 20px; }
    .gc-starter-intro h2 { font-size: clamp(34px, 11vw, 46px); }
    .gc-starter-intro p { font-size: 15px; }
    .gc-class-gateway .gc-journey-class { grid-template-columns: 50px minmax(0,1fr) 18px; min-height: 82px; padding: 8px; }
    .gc-class-gateway .gc-journey-class img { width: 50px; height: 62px; }
    .gc-class-gateway .gc-journey-class strong { font-size: 14px; }
    .gc-class-gateway .gc-journey-class small { font-size: 12px; }
    .gc-starter-plan-header { display: block; text-align: left; }
    .gc-starter-plan-header h2 { font-size: clamp(31px, 9vw, 42px); }
    .gc-starter-plan-header p { font-size: 15px; }
    .gc-change-class { width: 100%; min-height: 48px; margin-top: 18px; }
    .gc-starter-priorities { grid-template-columns: 1fr; }
    .gc-starter-action,
    .gc-starter-action:last-child { grid-column: auto; min-height: 250px; }
    .gc-starter-action h3 { font-size: 21px; }
    .gc-starter-action p { font-size: 15px; }
    .gc-starter-class-route article { min-height: 148px; }
    .gc-starter-footer { align-items: stretch; flex-direction: column; }
    .gc-starter-footer .gc-btn { width: 100%; min-width: 0; box-sizing: border-box; }
}

@media (max-width: 430px) {
    .gc-class-gateway .gc-journey-class-grid { grid-template-columns: 1fr; }
    .gc-class-gateway .gc-journey-class { grid-template-columns: 58px minmax(0,1fr) 20px; }
    .gc-class-gateway .gc-journey-class img { width: 58px; height: 66px; }
    .gc-portal-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .gc-starter-plan { animation: none !important; }
    .gc-change-class,
    .gc-starter-action { transition: none !important; }
}

/* --------------------------------------------------------------------------
   R34.5 Perks Center + inventory item tooltip
   -------------------------------------------------------------------------- */

.gc-portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gc-mini-portal.is-perks { border-color: rgba(242, 190, 65, .48); background: radial-gradient(circle at 8% 10%, rgba(227, 70, 38, .2), transparent 44%), linear-gradient(135deg, rgba(225, 163, 42, .14), rgba(72, 17, 20, .14)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 24px rgba(206,88,28,.09); }
.gc-mini-portal.is-perks > i { color: #ffd36b; box-shadow: 0 0 24px rgba(233, 148, 40, .22); }
.gc-mini-portal.is-perks strong::after { content: "YENİ"; display: inline-flex; margin-left: 8px; padding: 3px 6px; border-radius: 999px; background: #a93122; color: #fff4dd; font-size: 9px; letter-spacing: .1em; vertical-align: 2px; }

.gc-perks-hero { position: relative; display: grid; grid-template-columns: minmax(220px,.54fr) minmax(0,1.46fr); min-height: 360px; align-items: center; gap: clamp(28px,4vw,70px); padding: clamp(30px,5vw,70px); overflow: hidden; border-color: rgba(232,176,54,.28); background: radial-gradient(circle at 12% 42%, rgba(193,47,27,.22), transparent 30%), radial-gradient(circle at 82% 15%, rgba(72,99,181,.16), transparent 33%), linear-gradient(125deg,#090c12 0%,#17100e 45%,#090d15 100%); }
.gc-perks-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(90deg,transparent 49.7%,rgba(232,186,69,.14) 50%,transparent 50.3%), linear-gradient(transparent 49.7%,rgba(232,186,69,.1) 50%,transparent 50.3%); background-size: 84px 84px; mask-image: radial-gradient(circle at 25% 50%,#000,transparent 69%); }
.gc-perks-hero-sigil { position: relative; z-index: 1; display: grid; justify-items: center; gap: 15px; }
.gc-perks-hero-sigil > div { position: relative; display: grid; width: clamp(150px,16vw,220px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,210,100,.48); border-radius: 50%; background: radial-gradient(circle,rgba(255,181,48,.2),rgba(135,31,24,.13) 42%,rgba(2,5,9,.88) 70%); box-shadow: inset 0 0 0 14px rgba(239,181,54,.025), inset 0 0 45px rgba(233,69,27,.16), 0 0 60px rgba(220,114,27,.14); }
.gc-perks-hero-sigil > div::before,.gc-perks-hero-sigil > div::after { content: ""; position: absolute; inset: -12px; border: 1px dashed rgba(255,202,85,.25); border-radius: 50%; animation: gc-perk-orbit 24s linear infinite; }
.gc-perks-hero-sigil > div::after { inset: 22px; border-style: solid; animation-direction: reverse; animation-duration: 17s; }
@keyframes gc-perk-orbit { to { transform: rotate(360deg); } }
.gc-perks-hero-sigil i { color: #ffd773; font-size: clamp(46px,5vw,72px); filter: drop-shadow(0 0 16px rgba(255,178,46,.46)); }
.gc-perks-hero-sigil span { position: absolute; right: 13%; bottom: 17%; display: grid; min-width: 44px; height: 44px; place-items: center; border: 2px solid #f0c35c; border-radius: 50%; background: #8f291d; color: #fff5da; font-size: 18px; font-weight: 900; }
.gc-perks-hero-sigil > b { color: #e8c66f; font-size: 12px; letter-spacing: .2em; }
.gc-perks-hero-copy { position: relative; z-index: 1; max-width: 900px; }
.gc-perks-hero-copy h2 { margin: 9px 0 16px; color: #fff0ce; font: 700 clamp(38px,4.3vw,66px)/1.02 Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
.gc-perks-hero-copy > p { max-width: 760px; margin: 0; color: #d2cbc0; font-size: 17px; line-height: 1.66; }
.gc-perks-location-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.gc-perks-location-list span { padding: 8px 11px; border: 1px solid rgba(121,169,207,.18); border-radius: 8px; background: rgba(10,22,31,.48); color: #b8c9d4; font-size: 13px; }
.gc-perks-location-list strong { color: #e6f3f8; }
.gc-perks-hero-runes { position: absolute; inset: 0; pointer-events: none; }
.gc-perks-hero-runes i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffd56f; box-shadow: 0 0 18px #ed7e34; animation: gc-perk-spark 3.8s ease-in-out infinite; }
.gc-perks-hero-runes i:nth-child(1) { top: 20%; left: 42%; }.gc-perks-hero-runes i:nth-child(2) { right: 9%; bottom: 18%; animation-delay: -1.3s; }.gc-perks-hero-runes i:nth-child(3) { right: 28%; top: 14%; animation-delay: -2.1s; }
@keyframes gc-perk-spark { 0%,100% { opacity:.2; transform:scale(.7); } 50% { opacity:1; transform:scale(1.25); } }

.gc-perks-requirement-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) minmax(170px,.8fr); gap: 12px; align-items: stretch; }
.gc-perks-requirement { position: relative; display: flex; min-width: 0; min-height: 142px; align-items: center; gap: 13px; padding: 18px 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.gc-perks-requirement::after { content: "+"; position: absolute; right: -11px; bottom: -24px; color: rgba(237,190,75,.055); font: 900 100px/1 Georgia,serif; }
.gc-perks-requirement-index { position: absolute; top: 9px; right: 10px; color: rgba(232,190,91,.48); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.gc-perks-requirement > div:not(.gc-item-card):not(.gc-perks-requirement-icon) { min-width: 0; }
.gc-perks-requirement small,.gc-perks-requirement strong { display: block; }
.gc-perks-requirement small { color: #a9a398; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gc-perks-requirement strong { margin-top: 6px; color: #f1e6d2; font-size: 15px; line-height: 1.35; }
.gc-perks-requirement-icon { display: grid; width: 58px; height: 58px; min-width: 58px; place-items: center; border: 1px solid rgba(239,191,75,.3); border-radius: 12px; color: #efc664; background: radial-gradient(circle,rgba(228,159,42,.17),rgba(5,8,12,.66)); font-size: 22px; }
.gc-perks-requirement .gc-item-card { width: 100%; min-height: 92px; padding: 8px; border: 0; background: transparent; box-shadow: none; }
.gc-perks-reward { display: grid; min-height: 142px; align-content: center; justify-items: center; gap: 8px; padding: 16px; border: 1px solid rgba(245,195,69,.46); border-radius: 13px; background: radial-gradient(circle at 50% 38%,rgba(235,159,35,.2),transparent 48%),rgba(100,29,20,.24); text-align: center; }
.gc-perks-reward i { color: #ffcf60; font-size: 25px; filter: drop-shadow(0 0 10px rgba(255,166,46,.45)); }.gc-perks-reward span { color: #bda968; font-size: 10px; font-weight: 900; letter-spacing: .16em; }.gc-perks-reward strong { color: #fff0c9; font-size: 18px; }

.gc-perks-console { padding: clamp(20px,3vw,36px); border-color: rgba(217,164,48,.26); background: radial-gradient(circle at 100% 0,rgba(92,45,139,.1),transparent 30%),linear-gradient(150deg,rgba(12,16,24,.97),rgba(9,10,15,.97)); }
.gc-perks-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.075); }
.gc-perks-console-head > div:first-child { max-width: 860px; }.gc-perks-console-head h2 { margin: 6px 0 9px; color: #fff0d0; font: 700 clamp(32px,3.5vw,49px)/1.05 Georgia,serif; }.gc-perks-console-head p { margin: 0; color: #c9c3b9; font-size: 16px; line-height: 1.58; }
.gc-perks-points { display: grid; min-width: 190px; justify-items: end; padding: 14px 16px; border: 1px solid rgba(237,186,61,.24); border-radius: 11px; background: rgba(220,147,33,.055); }.gc-perks-points span { color: #b6a979; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.gc-perks-points strong { margin-top: 4px; color: #fff1cc; font-size: 25px; }.gc-perks-points b { color: #ffc952; }
.gc-perks-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }.gc-perks-toolbar .gc-btn { min-height: 46px; }
.gc-perks-status { min-height: 1px; }
.gc-perks-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.gc-perk-row { position: relative; display: grid; grid-template-columns: minmax(190px,1fr) auto minmax(120px,.5fr); min-height: 112px; align-items: center; gap: 16px; padding: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.gc-perk-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #6d5631; opacity: .45; }.gc-perk-row.is-maxed { border-color: rgba(241,185,51,.36); background: linear-gradient(135deg,rgba(219,146,32,.075),rgba(116,38,24,.035)); }.gc-perk-row.is-maxed::before { background: #f1bc45; opacity: 1; box-shadow: 0 0 13px #e47f2d; }
.gc-perk-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }.gc-perk-icon { display: grid; width: 48px; height: 48px; min-width: 48px; place-items: center; border: 1px solid rgba(235,187,73,.24); border-radius: 10px; color: #e9bc58; background: rgba(190,112,24,.065); font-size: 18px; }.gc-perk-identity small { color: #867e70; font-size: 9px; font-weight: 900; letter-spacing: .14em; }.gc-perk-identity h3 { margin: 3px 0; color: #f4ead7; font: 700 17px/1.18 Georgia,serif; }.gc-perk-identity span:not(.gc-perk-icon) { color: #b7afa2; font-size: 12px; }
.gc-perk-stepper { display: grid; grid-template-columns: 44px 44px 44px; align-items: center; gap: 5px; }.gc-perk-stepper button,.gc-perk-stepper output { display: grid; width: 44px; min-width: 44px; height: 44px; place-items: center; box-sizing: border-box; border: 1px solid rgba(237,189,72,.25); border-radius: 9px; background: #111722; color: #f2cf78; font-size: 20px; font-weight: 900; }.gc-perk-stepper button { cursor: pointer; }.gc-perk-stepper button:hover:not(:disabled),.gc-perk-stepper button:focus-visible { border-color: #efbf51; background: #241b13; outline: 2px solid rgba(242,193,80,.22); outline-offset: 2px; }.gc-perk-stepper button:disabled { cursor: not-allowed; color: #5e5b56; opacity: .45; }.gc-perk-stepper output { color: #fff0c8; background: radial-gradient(circle,rgba(191,100,30,.18),#10141c); font-size: 17px; }
.gc-perk-gain { display: grid; justify-items: end; text-align: right; }.gc-perk-gain small { color: #8f8a81; font-size: 11px; }.gc-perk-gain strong { margin: 3px 0; color: #f3c660; font-size: 20px; }.gc-perk-gain span { color: #aaa398; font-size: 10px; }
.gc-perk-disabled-note { grid-column: 1 / -1; display: flex; min-height: 32px; align-items: center; gap: 7px; margin: -5px 0 -8px; padding: 6px 9px; border-radius: 7px; background: rgba(118,38,37,.18); color: #d9aaa3; font-size: 11px; }.gc-perk-row.is-effect-disabled { border-style: dashed; }
.gc-perks-totals { margin-top: 16px; padding: 20px; border: 1px solid rgba(147,113,219,.27); border-radius: 13px; background: radial-gradient(circle at 100% 0,rgba(113,71,181,.15),transparent 45%),rgba(11,10,19,.7); outline: none; }.gc-perks-totals:focus { box-shadow: 0 0 0 2px rgba(188,145,255,.18); }.gc-perks-totals h3 { margin: 0 0 12px; color: #e8ddff; font: 700 23px/1.2 Georgia,serif; }.gc-perks-totals ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }.gc-perks-totals li { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: rgba(255,255,255,.025); }.gc-perks-totals li span,.gc-perks-totals li small { display: block; }.gc-perks-totals li span { color: #ddd5e8; font-size: 13px; font-weight: 800; }.gc-perks-totals li small { margin-top: 2px; color: #8e8798; font-size: 10px; }.gc-perks-totals li strong { color: #f1c660; white-space: nowrap; }.gc-perks-totals li em { color: #d28d86; font-size: 10px; font-style: normal; }.gc-perks-totals li.is-disabled-effect { grid-template-columns: 1fr auto; flex-wrap: wrap; }.gc-perks-totals li.is-empty { grid-column: 1 / -1; color: #aca5b2; }

.gc-perks-upgrade { position: relative; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr); align-items: center; gap: 28px; min-height: 260px; padding: clamp(24px,3vw,42px); overflow: hidden; border-color: rgba(117,164,207,.25); background: radial-gradient(circle at 75% 50%,rgba(59,123,183,.17),transparent 34%),linear-gradient(135deg,#0b1118,#0f0c17); }.gc-perks-upgrade-copy { position: relative; z-index: 1; }.gc-perks-upgrade-copy h2 { margin: 6px 0 10px; color: #e8f6ff; font: 700 clamp(30px,3vw,45px)/1.08 Georgia,serif; }.gc-perks-upgrade-copy p { max-width: 760px; color: #bbc7d0; font-size: 15px; line-height: 1.58; }.gc-perks-upgrade-copy label { display: block; margin: 18px 0 7px; color: #dcebf4; font-size: 13px; font-weight: 900; }.gc-perks-upgrade-copy input { width: min(250px,100%); height: 50px; box-sizing: border-box; border: 1px solid rgba(108,179,224,.42); border-radius: 9px; padding: 0 14px; background: rgba(4,12,18,.72); color: #dff5ff; font-size: 19px; font-weight: 900; }.gc-perks-upgrade-copy input:focus { border-color: #73c9f0; outline: 3px solid rgba(76,179,225,.16); }
.gc-perks-upgrade-result { position: relative; z-index: 1; display: grid; min-height: 170px; align-content: center; justify-items: center; padding: 20px; border: 1px solid rgba(103,189,230,.28); border-radius: 15px; background: radial-gradient(circle,rgba(75,154,204,.15),rgba(4,10,16,.77)); text-align: center; }.gc-perks-upgrade-result > span { color: #92b9cd; font-size: 10px; font-weight: 900; letter-spacing: .16em; }.gc-perks-upgrade-result > strong { margin: 8px 0 5px; color: #bcecff; font-size: 46px; line-height: 1; text-shadow: 0 0 24px rgba(69,182,230,.3); }.gc-perks-upgrade-result > small { color: #e4f4fa; font-size: 14px; }.gc-perks-upgrade-result > div { margin-top: 13px; color: #8ba6b2; font-size: 11px; }
.gc-perks-upgrade-orbit { position: absolute; right: -80px; width: 360px; height: 360px; border: 1px solid rgba(109,193,230,.07); border-radius: 50%; pointer-events: none; }.gc-perks-upgrade-orbit i { position: absolute; inset: 30px; border: 1px dashed rgba(122,192,226,.09); border-radius: 50%; }.gc-perks-upgrade-orbit i:nth-child(2) { inset: 72px; }.gc-perks-upgrade-orbit i:nth-child(3) { inset: 116px; }
.gc-perks-demo-notice { margin-bottom: 0; }

/* Quantity belongs to the item copy, never on top of the icon. */
.gc-item-copy .gc-item-count { position: static; display: inline-flex; width: fit-content; min-height: 27px; align-items: center; margin-top: 5px; padding: 4px 9px; border: 1px solid rgba(240,190,71,.3); border-radius: 999px; background: rgba(113,61,21,.3); color: #ffe09a; font-size: 13px; font-weight: 900; line-height: 1; }
.gc-item-copy .gc-item-count b { font-size: 13px; }

.gc-item-tooltip { position: fixed; z-index: 10050; width: min(350px,calc(100vw - 20px)); padding: 10px; box-sizing: border-box; border: 1px solid rgba(233,188,79,.44); border-radius: 12px; background: linear-gradient(145deg,rgba(18,24,34,.98),rgba(7,9,14,.99)); box-shadow: 0 18px 55px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.055); color: #e9e2d6; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .14s ease,transform .14s ease; }
.gc-item-tooltip.is-visible { opacity: 1; transform: none; }.gc-item-tooltip-loading { min-height: 60px; display: grid; place-items: center; color: #afa99e; font-size: 13px; }
.gc-item-tooltip-card > header { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }.gc-item-tooltip-icon { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(235,188,73,.3); border-radius: 9px; background: radial-gradient(circle,rgba(218,151,39,.11),#0e141e); color: #d4b462; font-size: 24px; }.gc-item-tooltip-icon img { width: 64px; height: 64px; object-fit: contain; }.gc-item-tooltip-card header strong,.gc-item-tooltip-card header small { display: block; }.gc-item-tooltip-card header strong { color: #fff0ca; font-size: 15px; line-height: 1.28; }.gc-item-tooltip-card header small { margin-top: 5px; color: #b6a783; font-size: 11px; }.gc-item-tooltip-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 12px; margin: 10px 0 0; }.gc-item-tooltip-card dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.045); }.gc-item-tooltip-card dt { color: #8f9298; font-size: 10px; }.gc-item-tooltip-card dd { margin: 0; color: #e5ddd0; font-size: 11px; font-weight: 800; }.gc-item-tooltip-card footer { margin-top: 8px; color: #8c897f; font-size: 10px; text-align: right; }

@media (max-width: 1380px) {
    .gc-perks-requirement-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gc-perks-reward { grid-column: 1 / -1; min-height: 110px; }
    .gc-perks-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .gc-portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gc-perks-hero { grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr); }
}
@media (max-width: 760px) {
    .gc-perks-hero { grid-template-columns: 1fr; min-height: 0; text-align: center; }.gc-perks-hero-sigil > div { width: 145px; }.gc-perks-hero-copy > p { font-size: 15px; }.gc-perks-location-list,.gc-perks-hero-copy .gc-evidence-row { justify-content: center; }
    .gc-perks-requirement-flow { grid-template-columns: 1fr; }.gc-perks-reward { grid-column: auto; }.gc-perks-requirement { min-height: 118px; }
    .gc-perks-console-head { display: block; }.gc-perks-points { justify-items: start; margin-top: 16px; }.gc-perks-toolbar { display: grid; grid-template-columns: 1fr; }.gc-perks-toolbar .gc-btn { width: 100%; box-sizing: border-box; }
    .gc-perk-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }.gc-perk-gain { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }.gc-perk-gain span { display: none; }.gc-perk-gain strong { justify-self: end; }.gc-perk-disabled-note { grid-column: 1 / -1; }
    .gc-perks-totals ul { grid-template-columns: 1fr; }.gc-perks-upgrade { grid-template-columns: 1fr; }.gc-perks-upgrade-result { min-height: 150px; }
    .gc-item-tooltip { display: none !important; }
}
@media (max-width: 430px) {
    .gc-portal-grid { grid-template-columns: 1fr; }
    .gc-perks-hero,.gc-perks-console,.gc-perks-upgrade { padding: 20px 14px; }.gc-perks-hero-copy h2 { font-size: 36px; }.gc-perks-location-list { display: grid; }
    .gc-perk-row { grid-template-columns: 1fr; }.gc-perk-stepper { justify-content: start; }.gc-perk-gain { grid-column: auto; }.gc-perk-disabled-note { grid-column: auto; }.gc-perk-identity h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .gc-perks-hero-sigil > div::before,.gc-perks-hero-sigil > div::after,.gc-perks-hero-runes i { animation: none !important; }
    .gc-perk-row,.gc-item-tooltip { transition: none !important; }
}