:root {
    color-scheme: dark;
    --ink: #f7efe4;
    --muted: #c3bbb0;
    --faint: #8d877f;
    --bg: #0b0c10;
    --panel: #1b1c22;
    --panel-soft: #22242b;
    --panel-deep: #111218;
    --line: rgba(247, 239, 228, 0.16);
    --line-strong: rgba(247, 239, 228, 0.28);
    --ruby: #d86a70;
    --gold: #e3bd63;
    --aqua: #78cbd2;
    --green: #48a961;
    --blue: #3f7edb;
    --purple: #8b62d9;
    --orange: #e69431;
    --mythic-red: #ff304f;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    overflow: hidden;
}

body.character-page {
    overflow: hidden;
}

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(9, 10, 14, 0.92);
    backdrop-filter: blur(14px);
}

.brand,
.main-nav,
.identity-grid,
.meter-label,
.party-member,
.info-row {
    display: flex;
    align-items: center;
}

.brand {
    gap: 10px;
    font-weight: 800;
}

.brand-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.55);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
}

.brand-logo {
    width: 43px;
    height: 32px;
    overflow: hidden;
    padding: 1px;
    background: rgba(227, 189, 99, 0.12);
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.main-nav a {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--muted);
}

.nav-logout-form,
.nav-admin-menu-form {
    display: inline-flex;
    margin: 0;
}

.nav-logout-button,
.nav-admin-menu-toggle {
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.nav-admin-menu-toggle {
    border: 1px solid rgba(227, 189, 99, 0.42);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.nav-admin-menu-toggle[aria-pressed="true"] {
    color: #17181d;
    background: var(--gold);
}

.main-nav a.active,
.main-nav a:hover,
.nav-logout-button:hover,
.nav-admin-menu-toggle:hover {
    color: var(--ink);
    background: rgba(247, 239, 228, 0.1);
}

.nav-admin-menu-toggle[aria-pressed="true"]:hover {
    color: #17181d;
    background: #f0cc77;
}

.main-nav a.admin-nav-link {
    color: var(--gold);
}

.main-nav a.admin-nav-link.active,
.main-nav a.admin-nav-link:hover {
    color: #17181d;
    background: var(--gold);
}

.main-nav a[aria-disabled="true"] {
    cursor: default;
    opacity: 0.48;
    pointer-events: none;
}

.main-nav .nav-separator {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(247, 239, 228, 0.28);
}

.world-music-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0;
    order: 10;
}

.world-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    min-height: 68px;
    padding-right: 8px;
}

.world-breadcrumb-row .map-breadcrumb {
    min-width: 0;
}

.world-music-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-height: 26px;
    min-width: 46px;
    padding: 0 8px;
    border: 1px solid rgba(195, 187, 176, 0.22);
    border-radius: 6px;
    color: rgba(247, 239, 228, 0.72);
    background: rgba(247, 239, 228, 0.035);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
}

.world-music-button[hidden] {
    display: none;
}

.world-music-button:hover,
.world-music-button:focus-visible,
.world-music-button[aria-pressed="true"] {
    color: rgba(247, 239, 228, 0.92);
    border-color: rgba(195, 187, 176, 0.42);
    background: rgba(247, 239, 228, 0.11);
}

.world-music-volume {
    width: 86px;
    height: 26px;
    accent-color: #9b948b;
    cursor: pointer;
    opacity: 0.72;
}

.world-music-volume:hover,
.world-music-volume:focus-visible {
    opacity: 0.94;
}

body.landing-page,
body.account-page {
    overflow: auto;
}

.landing-page {
    min-height: 100vh;
    background-color: var(--bg);
}

.creation-ritual-page {
    background-color: var(--bg);
}

.landing-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    min-height: 42px;
    padding: 5px 18px;
}

.landing-shell,
.account-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 72px 18px 34px;
}

.landing-page .landing-shell {
    align-items: start;
    padding-top: 200px;
}

.landing-card,
.account-card {
    width: min(520px, calc(100vw - 28px));
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: rgba(27, 28, 34, 0.94);
    box-shadow: 0 24px 100px rgba(0, 0, 0, 0.58);
}

.landing-card {
    padding: 28px 28px 42px;
    text-align: center;
}

.landing-logo {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.landing-game-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.landing-logo .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    font-size: 1.3rem;
}

.landing-logo h1 {
    padding: 0;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    line-height: 0.96;
}

.landing-logo-title-split {
    gap: 10px;
}

.landing-title-image {
    margin: 0;
    line-height: 0;
}

.landing-title-image img {
    display: block;
    width: min(258px, 72vw);
    height: auto;
}

.landing-title-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.landing-slogan {
    margin: 10px 0 46px;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 800;
}

.landing-login-form,
.register-form,
.backstory-edit-form {
    display: grid;
    gap: 12px;
    text-align: left;
}

.landing-login-form label,
.register-form label,
.backstory-edit-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.landing-login-form input,
.register-form input,
.backstory-edit-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink);
    background: #24262d;
}

.landing-login-form input,
.register-form input {
    min-height: 38px;
}

.backstory-edit-form textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.55;
}

.remember-row {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-start;
    gap: 8px !important;
}

.remember-row input {
    width: auto;
    min-height: auto;
}

.landing-primary-action,
.landing-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(227, 189, 99, 0.62);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 900;
    text-align: center;
}

.landing-primary-action {
    color: #17181d;
    background: var(--gold);
}

.landing-secondary-action {
    color: var(--gold);
    background: rgba(227, 189, 99, 0.08);
}

.landing-secondary-action.registration-closed-trigger {
    color: var(--muted);
    border-color: rgba(247, 239, 228, 0.24);
    background: rgba(247, 239, 228, 0.06);
}

.landing-music-controls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(227, 189, 99, 0.42);
    border-radius: 8px;
    background: rgba(18, 19, 24, 0.92);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.landing-music-fallback,
.landing-music-mute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(227, 189, 99, 0.54);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 900;
}

.landing-music-fallback[hidden] {
    display: none;
}

.landing-music-fallback {
    color: #17181d;
    background: var(--gold);
}

.landing-music-mute {
    min-width: 58px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.08);
}

.landing-music-mute[aria-pressed="true"] {
    color: var(--ink);
    border-color: rgba(247, 239, 228, 0.42);
    background: rgba(247, 239, 228, 0.14);
}

.landing-music-volume {
    width: 94px;
    height: 30px;
    accent-color: var(--gold);
    cursor: pointer;
}

.landing-site-footer {
    position: fixed;
    right: 18px;
    bottom: 14px;
    left: 18px;
    z-index: 7;
    pointer-events: none;
    color: rgba(247, 239, 228, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
}

.landing-version,
.landing-copyright {
    position: absolute;
    bottom: 0;
}

.landing-version {
    left: 0;
    bottom: 20px;
}

.landing-copyright {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    pointer-events: auto;
}

.landing-copyright a {
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
}

.landing-copyright a:hover,
.landing-copyright a:focus-visible {
    color: rgba(247, 239, 228, 0.82);
    outline: none;
    text-decoration: none;
}

.landing-welcome {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.onboarding-page .landing-nav {
    background: transparent;
}

.onboarding-shell {
    align-items: start;
    padding-top: 200px;
}

.intro-card {
    display: grid;
    gap: 18px;
}

.intro-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.creation-shell {
    min-height: 100vh;
    padding: 96px 18px 46px;
}

.creation-card {
    display: grid;
    gap: 16px;
    width: min(1040px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: rgba(27, 28, 34, 0.96);
    box-shadow: 0 24px 100px rgba(0, 0, 0, 0.58);
}

.creation-hero {
    display: grid;
    gap: 10px;
    padding: 8px 6px 2px;
    text-align: center;
}

.creation-hero h1 {
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 0.95;
}

.creation-hero p,
.creation-section h2 {
    margin: 0;
    color: var(--ink);
}

.creation-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(31, 33, 40, 0.78);
}

.creation-section h2 {
    font-size: 1rem;
    text-transform: uppercase;
}

.creation-name,
.creation-fields label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
}

.creation-name {
    width: min(480px, 100%);
    margin: 0 auto;
}

.creation-name input,
.creation-fields select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink);
    background: #24262d;
}

.creation-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.creation-fields h2 {
    grid-column: 1 / -1;
}

.creation-choice-grid {
    display: grid;
    gap: 10px;
}

.creation-choice-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creation-choice-grid.portraits {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.creation-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.creation-choice > span {
    display: grid;
    min-height: 100%;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #22242b;
    cursor: pointer;
}

.creation-choice input:checked + span {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(227, 189, 99, 0.25), 0 0 26px rgba(227, 189, 99, 0.12);
}

.creation-choice strong {
    font-size: 0.95rem;
}

.creation-choice small {
    color: var(--muted);
    line-height: 1.35;
}

.vessel-outline {
    display: block;
    width: 100%;
    aspect-ratio: 1.45;
    border: 1px solid rgba(227, 189, 99, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 28%, rgba(247, 244, 239, 0.92) 0 12%, transparent 13%),
        radial-gradient(ellipse at 50% 72%, rgba(227, 189, 99, 0.18) 0 34%, transparent 35%),
        linear-gradient(140deg, rgba(54, 91, 98, 0.42), rgba(70, 56, 88, 0.34));
}

.vessel-outline.masculine {
    background:
        radial-gradient(circle at 50% 27%, rgba(247, 244, 239, 0.92) 0 11%, transparent 12%),
        radial-gradient(ellipse at 50% 70%, rgba(227, 189, 99, 0.20) 0 30%, transparent 31%),
        linear-gradient(140deg, rgba(88, 58, 48, 0.42), rgba(50, 78, 98, 0.34));
}

.portrait-choice img {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
    border-radius: 7px;
    object-fit: cover;
    object-position: top center;
    background: #f7f4ef;
}

.creation-card > .landing-primary-action {
    width: min(360px, 100%);
    justify-self: center;
}

.auth-errors {
    padding: 10px 12px;
    border: 1px solid rgba(216, 106, 112, 0.55);
    border-radius: 7px;
    color: #ffdadd;
    background: rgba(216, 106, 112, 0.12);
    font-size: 0.86rem;
}

.auth-notice {
    padding: 10px 12px;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 7px;
    color: #f7e8bb;
    background: rgba(227, 189, 99, 0.11);
    font-size: 0.86rem;
}

.registration-closed-message {
    text-align: center;
}

.auth-notice[hidden] {
    display: none;
}

.auth-errors p {
    margin: 0;
}

.auth-errors p + p {
    margin-top: 4px;
}

body.creation-ritual-page {
    overflow: hidden;
}

body.creation-boot-loading::before,
body.creation-boot-loading::after {
    position: fixed;
    pointer-events: auto;
    content: "";
}

body.creation-boot-loading::before {
    inset: 0;
    z-index: 120;
    background: #000;
    opacity: 1;
    transition: opacity 900ms ease;
}

body.creation-boot-loading::after {
    top: 62vh;
    left: 50%;
    z-index: 121;
    color: rgba(247, 239, 228, 0.86);
    content: "Loading...";
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    font-weight: 800;
    letter-spacing: 0;
    transform: translate(-50%, -50%);
    transition: opacity 220ms ease;
}

body.creation-boot-loading.creation-boot-ready::before,
body.creation-boot-loading.creation-boot-ready::after {
    opacity: 0;
}

body.creation-intro-star-warp-revealing .creation-whiteout {
    transition-duration: 900ms;
}

.creation-intro-star-warp {
    position: fixed;
    inset: 0;
    z-index: 130;
    overflow: hidden;
    pointer-events: auto;
    background: #000;
    isolation: isolate;
}

.creation-intro-star-warp[hidden] {
    display: none;
}

.creation-intro-star-warp-black,
.creation-intro-star-warp-white {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.creation-intro-star-warp-black {
    z-index: 6;
    background: #000;
    opacity: 1;
}

.creation-intro-star-warp-field {
    position: absolute;
    inset: -18%;
    z-index: 2;
    overflow: hidden;
    background: #000;
    filter: saturate(1.05) contrast(1.12);
    transform-origin: center;
}

.creation-intro-star-warp-field::before,
.creation-intro-star-warp-field::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.creation-intro-star-warp-field::before {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, #000 0 3%, transparent 7%);
}

.creation-intro-star-warp-field::after {
    z-index: 4;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 0 30%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0.48) 100%);
}

.creation-intro-star-warp-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.creation-intro-star-warp-star {
    --warp-thickness: calc(var(--warp-size, 3px) * 0.875);
    position: absolute;
    top: calc(50% - (var(--warp-thickness) / 2));
    left: 50%;
    width: var(--warp-length, 80px);
    height: var(--warp-thickness);
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(202, 232, 255, 0.18) 10%,
            rgba(247, 252, 255, 0.9) 54%,
            rgba(255, 255, 255, 0.98) 72%,
            rgba(184, 226, 255, 0));
    box-shadow:
        0 0 var(--warp-glow, 10px) rgba(248, 252, 255, 0.92),
        0 0 calc(var(--warp-glow, 10px) + 14px) rgba(152, 210, 255, 0.32);
    opacity: 0;
    filter: blur(0.08px);
    transform: rotate(var(--warp-angle, 0deg)) translateX(var(--warp-start, 0vmin)) scaleX(1.25) scaleY(1);
    transform-origin: left center;
    will-change: opacity, transform;
}

.creation-intro-star-warp-star.is-bright {
    box-shadow:
        0 0 calc(var(--warp-glow, 12px) + 8px) rgba(255, 255, 255, 0.94),
        0 0 calc(var(--warp-glow, 12px) + 26px) rgba(106, 201, 255, 0.44);
}

.creation-intro-star-warp.is-playing .creation-intro-star-warp-star {
    animation: introStarWarpStar var(--warp-duration, 1.5s) linear var(--warp-delay, 0s) infinite;
}

.creation-intro-star-warp-white {
    z-index: 7;
    background: #fff;
    opacity: 0;
}

.creation-intro-star-warp.is-playing .creation-intro-star-warp-black {
    animation: introStarWarpBlack 5600ms linear forwards;
}

.creation-intro-star-warp.is-playing .creation-intro-star-warp-white {
    animation: introStarWarpWhite 5600ms linear forwards;
}

.creation-ritual-shell {
    display: grid;
    min-height: 100vh;
    align-items: start;
    justify-items: center;
    padding: 0;
}

.creation-ritual-form {
    width: 100%;
}

.goddess-scene {
    position: relative;
    display: grid;
    min-height: 100vh;
    justify-items: center;
    align-content: start;
    gap: 16px;
    padding: 0 24px 44px;
    overflow: hidden;
}

.goddess-portrait {
    position: absolute;
    top: clamp(-27px, calc(2vh - 35px), -7px);
    left: 50%;
    z-index: 0;
    display: grid;
    width: min(980px, 82vw);
    height: min(1160px, calc(100vh + 80px));
    place-items: center;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(227, 189, 99, 0.24));
    transform: translateX(-50%);
    animation: goddessLevitate 24s ease-in-out infinite;
}

.goddess-portrait svg {
    width: 100%;
    height: 100%;
}

.goddess-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.goddess-portrait[data-art-size="custom"] {
    width: min(var(--creation-art-width, 980px), 96vw);
    height: min(var(--creation-art-height, calc(100vh + 80px)), calc(100vh + 120px));
}

.creation-goddess-gold-aura {
    position: absolute;
    top: clamp(42px, 5.5vh, 88px);
    left: 50%;
    z-index: 51;
    width: min(560px, 42vw);
    height: min(980px, 92vh);
    border-radius: 48% 48% 45% 45%;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(255, 222, 38, 0.94) 0 12%,
            rgba(255, 193, 0, 0.84) 26%,
            rgba(255, 171, 0, 0.58) 45%,
            rgba(255, 210, 88, 0.28) 64%,
            rgba(255, 234, 156, 0) 82%);
    filter: blur(20px) saturate(1.28);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(1.55, 1.22);
    transform-origin: 50% 50%;
}

.goddess-scene.creation-goddess-gold-aura-playing .creation-goddess-gold-aura {
    animation: goddessGoldAura var(--goddess-gold-aura-duration, 3750ms) linear forwards;
}

.goddess-bubble {
    --ritual-bubble-center: rgb(58, 46, 88);
    --ritual-bubble-side-left: rgba(30, 47, 86, 0.5);
    --ritual-bubble-side-right: rgba(35, 35, 72, 0.5);
    --ritual-bubble-bg:
        linear-gradient(90deg, var(--ritual-bubble-side-left), var(--ritual-bubble-center) 42%, var(--ritual-bubble-center) 58%, var(--ritual-bubble-side-right));
    position: relative;
    z-index: 2;
    width: fit-content;
    min-width: min(760px, calc(100vw - 48px));
    max-width: min(1480px, calc(100vw - 96px));
    margin: clamp(350px, calc(55vh - 40px), 580px) 0 0;
    padding: 20px clamp(30px, 3.4vw, 58px);
    border: 2px solid rgba(247, 244, 239, 0.72);
    border-radius: 28px;
    color: var(--ink);
    background: var(--ritual-bubble-bg);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.42), 0 0 34px rgba(167, 128, 255, 0.14), 0 0 28px rgba(120, 203, 255, 0.1);
    font-size: clamp(1.45rem, 2.05vw, 2.35rem);
    font-weight: 900;
    line-height: 1.22;
    text-align: center;
    white-space: pre-line;
    transition: opacity 220ms ease, visibility 220ms ease;
    -webkit-user-select: none;
    user-select: none;
}

.goddess-bubble.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.goddess-bubble::before {
    position: absolute;
    top: -18px;
    left: calc(50% - 18px);
    width: 34px;
    height: 34px;
    border-top: 2px solid rgba(247, 244, 239, 0.72);
    border-left: 2px solid rgba(247, 244, 239, 0.72);
    background: var(--ritual-bubble-center);
    content: "";
    transform: rotate(45deg);
}

.goddess-bubble.clickable {
    cursor: pointer;
}

.goddess-bubble.clickable::after {
    display: none;
    content: "";
}

.creation-errors {
    position: relative;
    z-index: 3;
    width: min(640px, calc(100vw - 48px));
}

.ritual-step {
    position: relative;
    z-index: 3;
    display: grid;
    width: 100%;
    justify-items: center;
}

.ritual-step[hidden] {
    display: none;
}

.creation-name-card,
.creation-farewell-card {
    --ritual-bubble-center: rgb(58, 46, 88);
    --ritual-bubble-side-left: rgba(30, 47, 86, 0.5);
    --ritual-bubble-side-right: rgba(35, 35, 72, 0.5);
    --ritual-bubble-bg:
        linear-gradient(90deg, var(--ritual-bubble-side-left), var(--ritual-bubble-center) 42%, var(--ritual-bubble-center) 58%, var(--ritual-bubble-side-right));
    position: relative;
    display: grid;
    width: min(760px, calc(100vw - 48px));
    gap: 16px;
    justify-items: center;
    padding: 22px 30px 26px;
    border: 2px solid rgba(247, 244, 239, 0.72);
    border-radius: 28px;
    background: var(--ritual-bubble-bg);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42), 0 0 34px rgba(167, 128, 255, 0.14), 0 0 28px rgba(120, 203, 255, 0.1);
}

.creation-farewell-card {
    appearance: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
}

.creation-farewell-card:focus-visible {
    outline: 2px solid rgba(247, 244, 239, 0.72);
    outline-offset: 6px;
}

.creation-name-card::after,
.creation-farewell-card::after {
    position: absolute;
    bottom: -18px;
    left: calc(50% - 18px);
    width: 34px;
    height: 34px;
    border-right: 2px solid rgba(247, 244, 239, 0.72);
    border-bottom: 2px solid rgba(247, 244, 239, 0.72);
    background: var(--ritual-bubble-center);
    content: "";
    transform: rotate(45deg);
}

.creation-name-card .creation-name {
    width: 100%;
    gap: 14px;
    color: var(--ink);
    text-align: center;
}

.creation-name-card .creation-name span {
    display: block;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.45vw, 2.55rem);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 0 12px rgba(7, 8, 12, 0.72);
}

.creation-name-card .creation-name input {
    justify-self: center;
    width: min(560px, 82%);
    min-height: clamp(60px, 7vh, 82px);
    padding: 6px 22px;
    border: 0;
    border-radius: 999px;
    caret-color: var(--gold);
    color: var(--ink);
    background: rgba(247, 244, 239, 0.1);
    box-shadow: inset 0 0 20px rgba(7, 8, 12, 0.2), 0 0 18px rgba(247, 244, 239, 0.03);
    font-size: clamp(1.45rem, 2.45vw, 2.55rem);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 0 12px rgba(7, 8, 12, 0.72);
}

.creation-name-card .creation-name input:focus {
    background: rgba(247, 244, 239, 0.14);
    box-shadow: inset 0 0 18px rgba(7, 8, 12, 0.18), 0 0 24px rgba(227, 189, 99, 0.12);
    outline: none;
}

.creation-farewell-card > span {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.05vw, 2.35rem);
    font-weight: 900;
    line-height: 1.22;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0 0 12px rgba(7, 8, 12, 0.72);
    -webkit-user-select: none;
    user-select: none;
}

.creation-inline-error {
    min-height: 1.1rem;
    margin: 0;
    color: #ffdadd;
    font-size: 0.82rem;
    font-weight: 800;
}

.silhouette-grid {
    display: grid;
    width: min(920px, calc(100vw - 48px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    padding-top: 18px;
}

.ritual-step[data-step="form"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ritual-step[data-step="form"] .silhouette-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 clamp(56px, 6.4vw, 150px);
    pointer-events: none;
    transform: none;
}

.portal-choice {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(31, 33, 40, 0.78);
    cursor: pointer;
}

.silhouette-choice {
    position: relative;
    display: grid;
    width: fit-content;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    overflow: visible;
    pointer-events: auto;
    animation: classFloat 5.8s ease-in-out infinite;
}

.silhouette-choice:nth-child(2) {
    animation-delay: -1.4s;
}

.silhouette-choice svg {
    position: relative;
    z-index: 1;
    width: var(--creation-art-width, auto);
    height: var(--creation-art-height, auto);
    max-width: min(34vw, 760px);
    max-height: 74vh;
    fill: rgba(247, 244, 239, 0.1);
    stroke: rgba(247, 244, 239, 0.78);
    stroke-width: 5;
    filter: drop-shadow(0 0 18px rgba(120, 203, 210, 0.28));
    object-fit: contain;
}

.silhouette-image {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--creation-art-width, auto);
    height: var(--creation-art-height, auto);
    max-width: min(34vw, 760px);
    max-height: 74vh;
    object-fit: contain;
    filter: drop-shadow(0 0 22px rgba(120, 203, 210, 0.32));
    transition: filter 160ms ease, transform 160ms ease;
}

.silhouette-choice[data-gender="Female"] .silhouette-image,
.silhouette-choice[data-gender="Female"] svg {
    filter:
        drop-shadow(0 0 8px rgba(255, 134, 223, 0.9))
        drop-shadow(0 0 20px rgba(255, 96, 205, 0.68))
        drop-shadow(0 0 42px rgba(207, 93, 255, 0.44));
}

.silhouette-choice[data-gender="Male"] .silhouette-image,
.silhouette-choice[data-gender="Male"] svg {
    filter:
        drop-shadow(0 0 8px rgba(143, 196, 255, 0.9))
        drop-shadow(0 0 22px rgba(69, 126, 255, 0.72))
        drop-shadow(0 0 46px rgba(71, 52, 255, 0.46));
}

.portal-choice:hover,
.portal-choice.selected {
    border-color: rgba(120, 203, 210, 0.86);
    box-shadow: 0 0 0 1px rgba(120, 203, 210, 0.24), 0 0 34px rgba(120, 203, 210, 0.28);
}

.silhouette-choice:hover .silhouette-image,
.silhouette-choice.selected .silhouette-image,
.silhouette-choice:hover svg,
.silhouette-choice.selected svg {
    filter: drop-shadow(0 0 34px rgba(120, 203, 210, 0.64)) drop-shadow(0 0 18px rgba(247, 244, 239, 0.22));
    transform: scale(1.03);
}

.silhouette-choice[data-gender="Female"]:hover .silhouette-image,
.silhouette-choice[data-gender="Female"].selected .silhouette-image,
.silhouette-choice[data-gender="Female"]:hover svg,
.silhouette-choice[data-gender="Female"].selected svg {
    filter:
        drop-shadow(0 0 12px rgba(255, 184, 237, 1))
        drop-shadow(0 0 28px rgba(255, 96, 205, 0.86))
        drop-shadow(0 0 58px rgba(207, 93, 255, 0.62));
}

.silhouette-choice[data-gender="Male"]:hover .silhouette-image,
.silhouette-choice[data-gender="Male"].selected .silhouette-image,
.silhouette-choice[data-gender="Male"]:hover svg,
.silhouette-choice[data-gender="Male"].selected svg {
    filter:
        drop-shadow(0 0 12px rgba(185, 219, 255, 1))
        drop-shadow(0 0 30px rgba(69, 126, 255, 0.92))
        drop-shadow(0 0 62px rgba(71, 52, 255, 0.66));
}

.class-choice-grid {
    --class-icon-height: clamp(320px, 31vw, 590px);
    display: grid;
    width: min(1880px, calc(100vw - 48px));
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: clamp(34px, 2.3vw, 56px);
    margin-top: -100px;
    padding-top: 34px;
}

.creation-portrait-choice-grid {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    pointer-events: none;
}

.class-choice-card {
    position: relative;
    display: grid;
    min-height: calc(var(--class-icon-height) + 34px);
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 4px;
    border: 0;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    animation: classFloat 5.8s ease-in-out infinite;
}

.ritual-step[data-step="class"].dialogue-class-preview {
    pointer-events: none;
}

.ritual-step[data-step="class"].dialogue-class-preview .class-choice-card {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.ritual-step[data-step="class"].dialogue-class-preview .class-choice-card.dialogue-preview-visible {
    visibility: visible;
    opacity: 1;
}

.creation-portrait-card {
    position: absolute;
    display: grid;
    width: min(500px, 24vw);
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    animation: classFloat 6.2s ease-in-out infinite;
}

.creation-portrait-card[hidden] {
    display: none;
}

.creation-portrait-card:nth-child(2n) {
    animation-delay: -1.1s;
}

.creation-portrait-card:nth-child(3n) {
    animation-delay: -2.2s;
}

.creation-portrait-card:hover,
.creation-portrait-card.selected {
    transform: scale(1.035);
}

.creation-portrait-card img {
    width: 100%;
    height: auto;
    max-height: 48vh;
    border-radius: 0;
    object-fit: contain;
    object-position: center top;
    filter:
        drop-shadow(0 0 12px rgba(185, 219, 255, 0.88))
        drop-shadow(0 0 30px rgba(69, 126, 255, 0.62))
        drop-shadow(0 0 58px rgba(71, 52, 255, 0.38));
    transition: filter 160ms ease, transform 160ms ease;
}

.creation-portrait-card[data-gender="Male"] img {
    filter:
        drop-shadow(0 0 12px rgba(185, 219, 255, 0.88))
        drop-shadow(0 0 30px rgba(69, 126, 255, 0.62))
        drop-shadow(0 0 58px rgba(71, 52, 255, 0.38));
}

.creation-portrait-card[data-gender="Female"] img {
    filter:
        drop-shadow(0 0 12px rgba(255, 204, 235, 1))
        drop-shadow(0 0 30px rgba(255, 154, 213, 0.76))
        drop-shadow(0 0 60px rgba(255, 119, 198, 0.46));
}

.creation-portrait-card:hover img,
.creation-portrait-card.selected img {
    filter:
        drop-shadow(0 0 16px rgba(197, 228, 255, 1))
        drop-shadow(0 0 38px rgba(83, 154, 255, 0.86))
        drop-shadow(0 0 76px rgba(71, 52, 255, 0.5));
}

.creation-portrait-card[data-gender="Male"]:hover img,
.creation-portrait-card[data-gender="Male"].selected img {
    filter:
        drop-shadow(0 0 16px rgba(197, 228, 255, 1))
        drop-shadow(0 0 38px rgba(83, 154, 255, 0.86))
        drop-shadow(0 0 76px rgba(71, 52, 255, 0.5));
}

.creation-portrait-card[data-gender="Female"]:hover img,
.creation-portrait-card[data-gender="Female"].selected img {
    filter:
        drop-shadow(0 0 16px rgba(255, 221, 242, 1))
        drop-shadow(0 0 40px rgba(255, 154, 213, 0.92))
        drop-shadow(0 0 78px rgba(255, 119, 198, 0.58));
}

.creation-portrait-card[data-art-size="custom"] {
    width: min(var(--creation-art-width, 500px), 32vw);
    height: auto;
    min-height: 0;
}

.creation-portrait-card[data-art-size="custom"] img {
    width: var(--creation-art-width, auto);
    height: var(--creation-art-height, auto);
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
}

.ritual-step[data-step="portrait"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.creation-portrait-card[data-portrait-index="0"] {
    top: clamp(54px, 8vh, 110px);
    left: clamp(36px, 5vw, 110px);
}

.creation-portrait-card[data-portrait-index="1"] {
    top: clamp(455px, calc(46vh + 50px), 590px);
    left: clamp(150px, 15vw, 330px);
    animation-delay: -1.1s;
}

.creation-portrait-card[data-portrait-index="2"] {
    top: clamp(630px, 61vh, 740px);
    left: 50%;
    translate: -50% 0;
    animation-delay: -2.2s;
}

.creation-portrait-card[data-portrait-index="3"] {
    top: clamp(455px, calc(46vh + 50px), 590px);
    right: clamp(150px, 15vw, 330px);
    animation-delay: -3.3s;
}

.creation-portrait-card[data-portrait-index="4"] {
    top: clamp(54px, 8vh, 110px);
    right: clamp(36px, 5vw, 110px);
    animation-delay: -4.4s;
}

.class-choice-card:nth-child(2) {
    animation-delay: -0.7s;
}

.class-choice-card:nth-child(3) {
    animation-delay: -1.4s;
}

.class-choice-card:nth-child(4) {
    animation-delay: -2.1s;
}

.class-choice-card:nth-child(5) {
    animation-delay: -2.8s;
}

.class-choice-card:nth-child(6) {
    animation-delay: -3.5s;
}

.class-glyph {
    display: grid;
    width: min(100%, clamp(190px, 14vw, 300px));
    height: var(--class-icon-height);
    place-items: center;
    background: transparent;
    transition: transform 160ms ease;
}

.class-glyph svg {
    width: 84%;
    height: 84%;
    fill: none;
    stroke: #d8f9ff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
    filter: drop-shadow(0 0 8px rgba(120, 203, 210, 0.58));
}

.class-choice-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(173, 235, 255, 0.92))
        drop-shadow(0 0 28px rgba(81, 184, 255, 0.62))
        drop-shadow(0 0 52px rgba(81, 184, 255, 0.34));
    transition: filter 160ms ease, transform 160ms ease;
}

.class-choice-card[data-class="Knight"] .class-choice-image {
    transform: scale(1.18);
}

.class-choice-card[data-class="Knight"] .class-name {
    transform: translateX(calc(-50% + 33px));
}

.class-choice-card[data-art-size="custom"] .class-glyph {
    width: min(var(--creation-art-width, clamp(190px, 14vw, 300px)), 36vw);
    height: min(var(--creation-art-height, var(--class-icon-height)), var(--class-icon-height));
}

.class-choice-card:hover .class-glyph,
.class-choice-card.selected .class-glyph {
    transform: scale(1.04);
}

.class-choice-card:hover .class-choice-image,
.class-choice-card.selected .class-choice-image {
    filter:
        drop-shadow(0 0 20px rgba(218, 249, 255, 1))
        drop-shadow(0 0 38px rgba(81, 184, 255, 0.88))
        drop-shadow(0 0 68px rgba(81, 184, 255, 0.48));
}

.class-name,
.portal-label {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
}

.class-name {
    position: absolute;
    top: calc(var(--class-icon-height) - 55px);
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: 100%;
    padding: 2px 8px;
    color: #d8dde8;
    text-align: center;
    text-shadow: 0 0 8px rgba(7, 8, 12, 0.95), 0 0 14px rgba(216, 221, 232, 0.42);
    transform: translateX(-50%);
}

.portal-elven .portal-label {
    color: #7cff9d;
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    text-transform: none;
    text-shadow: 0 0 14px rgba(95, 228, 127, 0.72), 0 0 28px rgba(95, 228, 127, 0.42);
}

.portal-human .portal-label {
    color: #ffd97a;
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    text-transform: none;
    text-shadow: 0 0 14px rgba(255, 217, 122, 0.76), 0 0 30px rgba(255, 190, 80, 0.44);
}

.portal-grid {
    display: grid;
    width: min(1120px, calc(100vw - 48px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 54px;
    padding-top: 22px;
}

.ritual-step[data-step="portal"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ritual-step[data-step="portal"] .portal-grid {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 clamp(56px, 6.4vw, 150px);
    pointer-events: none;
    transform: translateY(-50%);
}

.portal-choice {
    --portal-glow-hot: rgba(187, 246, 255, 1);
    --portal-glow-main: rgba(120, 203, 255, 0.78);
    --portal-glow-soft: rgba(120, 203, 255, 0.34);
    --portal-glow-haze: rgba(120, 203, 255, 0.56);
    --portal-glow-fade: rgba(120, 203, 255, 0);
    --portal-glow-light: rgba(247, 244, 239, 0.28);
    position: relative;
    display: grid;
    width: fit-content;
    min-width: 300px;
    min-height: 0;
    place-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    overflow: visible;
    pointer-events: auto;
    animation: classFloat 5.8s ease-in-out infinite;
}

.portal-choice:nth-child(2) {
    animation-delay: -1.4s;
}

.portal-choice::before {
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: -1;
    width: min(82%, 520px);
    height: 72%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--portal-glow-haze) 0%, var(--portal-glow-soft) 44%, var(--portal-glow-fade) 76%);
    clip-path: ellipse(42% 49% at 50% 52%);
    content: "";
    filter: blur(14px);
    opacity: 0.72;
    transform: translateX(-50%) scaleX(0.82);
    transition: opacity 160ms ease, transform 160ms ease;
}

.portal-choice::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(104%, 620px);
    height: 78%;
    border: 3px solid var(--portal-glow-hot);
    border-radius: 50%;
    box-shadow:
        0 0 18px var(--portal-glow-hot),
        0 0 44px var(--portal-glow-main),
        inset 0 0 24px var(--portal-glow-soft);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.48);
}

.portal-choice:hover::before,
.portal-choice.selected::before {
    opacity: 0.95;
    transform: translateX(-50%) scaleX(0.9);
}

.portal-elven {
    --portal-glow-hot: rgba(195, 255, 180, 1);
    --portal-glow-main: rgba(95, 228, 127, 0.86);
    --portal-glow-soft: rgba(48, 188, 84, 0.42);
    --portal-glow-haze: rgba(135, 255, 154, 0.62);
    --portal-glow-fade: rgba(95, 228, 127, 0);
    --portal-glow-light: rgba(238, 255, 211, 0.34);
}

.portal-human {
    --portal-glow-hot: rgba(255, 238, 157, 1);
    --portal-glow-main: rgba(255, 211, 94, 0.88);
    --portal-glow-soft: rgba(244, 169, 40, 0.44);
    --portal-glow-haze: rgba(255, 218, 92, 0.58);
    --portal-glow-fade: rgba(255, 188, 55, 0);
    --portal-glow-light: rgba(255, 249, 219, 0.38);
}

.portal-core {
    display: block;
    width: min(290px, 72%);
    aspect-ratio: 1 / 1.35;
    border: 6px solid rgba(247, 244, 239, 0.62);
    border-radius: 50% 50% 45% 45%;
    background:
        radial-gradient(ellipse at center, rgba(247, 244, 239, 0.88) 0 11%, transparent 12%),
        radial-gradient(ellipse at center, rgba(120, 203, 210, 0.5) 0 35%, transparent 36%),
        radial-gradient(ellipse at center, rgba(7, 8, 12, 0.1) 0 57%, transparent 58%);
    box-shadow: inset 0 0 40px rgba(247, 244, 239, 0.28), 0 0 72px rgba(120, 203, 210, 0.3);
}

.portal-choice-image {
    display: block;
    grid-row: 2;
    width: var(--creation-art-width, auto);
    height: var(--creation-art-height, auto);
    max-width: min(28vw, 520px);
    max-height: 58vh;
    object-fit: contain;
    filter:
        drop-shadow(0 0 34px var(--portal-glow-main))
        drop-shadow(0 0 58px var(--portal-glow-soft))
        drop-shadow(0 0 20px var(--portal-glow-light));
}

.portal-label {
    grid-row: 1;
}

.portal-choice:hover .portal-choice-image,
.portal-choice.selected .portal-choice-image {
    filter:
        drop-shadow(0 0 42px var(--portal-glow-hot))
        drop-shadow(0 0 76px var(--portal-glow-main))
        drop-shadow(0 0 30px var(--portal-glow-light));
}

.ritual-step[data-step="portal"] .portal-choice:hover,
.ritual-step[data-step="portal"] .portal-choice.selected {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.portal-elven .portal-core {
    background:
        radial-gradient(ellipse at center, rgba(247, 244, 239, 0.9) 0 10%, transparent 11%),
        radial-gradient(ellipse at center, rgba(95, 228, 127, 0.58) 0 35%, transparent 36%),
        radial-gradient(ellipse at center, rgba(7, 8, 12, 0.1) 0 57%, transparent 58%);
    box-shadow: inset 0 0 40px rgba(247, 244, 239, 0.28), 0 0 78px var(--portal-glow-soft);
}

.portal-human .portal-core {
    background:
        radial-gradient(ellipse at center, rgba(255, 249, 219, 0.94) 0 10%, transparent 11%),
        radial-gradient(ellipse at center, rgba(255, 211, 94, 0.62) 0 35%, transparent 36%),
        radial-gradient(ellipse at center, rgba(7, 8, 12, 0.1) 0 57%, transparent 58%);
    box-shadow: inset 0 0 40px rgba(255, 249, 219, 0.28), 0 0 78px var(--portal-glow-soft);
}

.portal-choice.portal-opening .portal-core {
    animation: portalOpen 950ms ease forwards;
}

.portal-choice.portal-click-effect::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.02);
}

.portal-choice.portal-click-effect::after {
    animation: portalChoiceRipple 950ms ease-out forwards;
}

.portal-choice.portal-click-effect .portal-choice-image {
    animation: portalChoiceImagePulse 950ms ease-out forwards;
}

.portal-choice.portal-click-effect .portal-label {
    animation: portalChoiceLabelPulse 950ms ease-out forwards;
}

.portal-choice-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--portal-glow-hot);
    box-shadow: 0 0 10px var(--portal-glow-hot), 0 0 22px var(--portal-glow-main);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: portalChoiceSpark 820ms ease-out var(--spark-delay, 0ms) forwards;
}

.creation-story-stage {
    position: fixed;
    inset: 0;
    z-index: 48;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #020305;
    --story-foreground-height: min(76vh, 860px);
    --story-text-bottom: clamp(22px, 5.8vh, 70px);
    --story-text-box-height: 112px;
    --story-text-clearance: calc(var(--story-text-bottom) + var(--story-text-box-height) + 18px);
}

.creation-story-stage[hidden] {
    display: none;
}

.creation-story-background {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transform: scale(1.012);
    transition: opacity 520ms ease;
}

.creation-story-background::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 8, 12, 0.02), rgba(7, 8, 12, 0.26)),
        radial-gradient(circle at 50% 78%, rgba(247, 244, 239, 0.16), rgba(7, 8, 12, 0) 48%);
    content: "";
}

.creation-story-stage.creation-story-clean-background .creation-story-background::after {
    display: none;
    background: none;
    content: none;
}

.creation-story-stage.creation-story-clean-background {
    background: #fff;
}

.creation-story-stage.creation-story-clean-background .creation-story-background {
    background-color: #fff;
    filter: none;
    opacity: 1;
}

.creation-story-stage.creation-story-clean-background::before {
    display: none;
    background: none;
    content: none;
    opacity: 0;
}

.creation-story-stage::before {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(circle at 45% 54%, rgba(255, 248, 218, 0.98) 0 3.5%, rgba(255, 236, 184, 0.56) 7%, rgba(255, 225, 155, 0.12) 19%, transparent 33%),
        radial-gradient(circle at 56% 54%, rgba(255, 248, 218, 0.98) 0 3.5%, rgba(255, 236, 184, 0.56) 7%, rgba(255, 225, 155, 0.12) 19%, transparent 33%),
        radial-gradient(ellipse at 50% 64%, rgba(255, 246, 218, 0.3) 0 12%, rgba(255, 235, 180, 0.12) 28%, transparent 54%);
    content: "";
    filter: blur(0.5px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.88);
}

.creation-story-stage.creation-story-headlight-surge::before {
    animation: storyHeadlightSurge 2.4s ease-in forwards;
}

.creation-story-foregrounds {
    position: absolute;
    bottom: var(--story-text-clearance);
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--story-foreground-height);
    opacity: 1;
    pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: opacity 520ms ease;
}

.creation-story-sprite {
    position: absolute;
    top: auto;
    bottom: 0;
    width: auto;
    height: auto;
    max-width: min(38vw, 620px);
    max-height: min(76vh, 860px);
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 24px 44px rgba(7, 8, 12, 0.38));
    --sprite-x: 0px;
    --sprite-y: 0px;
    --sprite-offset-y: 0px;
    backface-visibility: hidden;
    transform: translate3d(var(--sprite-x), calc(var(--sprite-y) + var(--sprite-offset-y)), 0);
    will-change: transform;
}

.creation-story-sprite.size-original {
    max-width: none;
    max-height: none;
}

.creation-story-sprite.size-custom {
    width: var(--sprite-width, auto);
    height: var(--sprite-height, auto);
    max-width: none;
    max-height: none;
}

.creation-story-sprite.vertical-top {
    top: min(0px, calc(var(--story-foreground-height) + var(--story-text-clearance) - 100vh));
    bottom: auto;
}

.creation-story-sprite.vertical-middle {
    top: 50%;
    bottom: auto;
    --sprite-y: -50%;
}

.creation-story-sprite.vertical-bottom {
    top: auto;
    bottom: 0;
}

.creation-story-sprite.position-far-left {
    left: clamp(-42px, 2vw, 44px);
}

.creation-story-sprite.position-left {
    left: clamp(64px, 14vw, 260px);
}

.creation-story-sprite.position-center {
    left: 50%;
    --sprite-x: -50%;
}

.creation-story-sprite.position-right {
    right: clamp(64px, 14vw, 260px);
}

.creation-story-sprite.position-far-right {
    right: clamp(-42px, 2vw, 44px);
}

.creation-story-text {
    position: absolute;
    right: 50%;
    bottom: var(--story-text-bottom);
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: min(980px, calc(100vw - 48px));
    height: var(--story-text-box-height);
    overflow: hidden;
    padding: 12px 26px;
    border: 2px solid rgba(247, 244, 239, 0.72);
    border-radius: 24px;
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(30, 47, 86, 0.58), rgba(58, 46, 88, 0.82) 42%, rgba(58, 46, 88, 0.82) 58%, rgba(35, 35, 72, 0.58));
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.42), 0 0 34px rgba(167, 128, 255, 0.14), 0 0 28px rgba(120, 203, 255, 0.1);
    font: inherit;
    font-size: clamp(1rem, 1.42vw, 1.28rem);
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    white-space: pre-line;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1;
    transform: translateX(50%);
    transition: opacity 520ms ease;
}

.creation-story-text.creation-story-auto-active {
    padding-right: 72px;
}

.creation-story-text.creation-story-auto-active::before {
    content: attr(data-auto-label);
    position: absolute;
    right: 52px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    max-width: min(260px, calc(100% - 92px));
    padding: 5px 11px;
    border: 1px solid rgba(207, 190, 255, 0.62);
    border-radius: 10px;
    color: #eee7ff;
    background:
        linear-gradient(90deg, rgba(46, 42, 82, 0.96), rgba(31, 30, 62, 0.96));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), 0 0 14px rgba(170, 144, 255, 0.18);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.creation-story-text.creation-story-auto-active:hover::before,
.creation-story-text.creation-story-auto-active:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.creation-story-text.creation-story-auto-active::after {
    content: "A";
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(207, 190, 255, 0.88);
    border-radius: 50%;
    color: #eee7ff;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(55, 48, 92, 0.94), rgba(13, 15, 35, 0.95));
    box-shadow: 0 0 0 2px rgba(12, 15, 34, 0.52), 0 0 12px rgba(170, 144, 255, 0.24);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.creation-story-transition-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 520ms ease;
}

.creation-story-stage.creation-story-crossfade > .creation-story-background,
.creation-story-stage.creation-story-crossfade > .creation-story-foregrounds,
.creation-story-stage.creation-story-crossfade > .creation-story-text {
    opacity: 0;
}

.creation-story-stage.creation-story-crossfade .creation-story-transition-layer {
    opacity: 1;
}

.creation-story-stage.creation-story-no-transition > .creation-story-background,
.creation-story-stage.creation-story-no-transition > .creation-story-foregrounds,
.creation-story-stage.creation-story-no-transition > .creation-story-text,
.creation-story-stage.creation-story-no-transition .creation-story-transition-layer {
    transition: none;
}

.creation-whiteout {
    --heaven-reveal-radius: 0%;
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    transition: opacity 1.6s ease;
}

body.creation-fading .creation-whiteout {
    opacity: 1;
}

body.creation-no-whiteout-transition .creation-whiteout {
    transition: none;
}

body.creation-heaven-revealing .creation-whiteout {
    background: #fff;
    opacity: 1;
    transition: none;
    -webkit-mask-image:
        radial-gradient(circle at center,
            transparent 0 var(--heaven-reveal-radius),
            rgba(0, 0, 0, 0.14) calc(var(--heaven-reveal-radius) + 6%),
            rgba(0, 0, 0, 0.72) calc(var(--heaven-reveal-radius) + 18%),
            #000 calc(var(--heaven-reveal-radius) + 32%));
    mask-image:
        radial-gradient(circle at center,
            transparent 0 var(--heaven-reveal-radius),
            rgba(0, 0, 0, 0.14) calc(var(--heaven-reveal-radius) + 6%),
            rgba(0, 0, 0, 0.72) calc(var(--heaven-reveal-radius) + 18%),
            #000 calc(var(--heaven-reveal-radius) + 32%));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.creation-heaven-effect-layer {
    --heaven-effect-duration: 1400ms;
    position: fixed;
    inset: 0;
    z-index: 55;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.creation-heaven-effect-layer.is-playing {
    opacity: 1;
}

.creation-heaven-effect-layer::before,
.creation-heaven-effect-layer::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
}

.creation-heaven-effect-layer.effect-heaven-sparkle::before {
    background:
        radial-gradient(circle at 50% 48%, rgba(238, 231, 255, 0.66), rgba(188, 165, 255, 0.22) 18%, transparent 42%),
        radial-gradient(circle at 30% 38%, rgba(255, 255, 255, 0.4), transparent 12%),
        radial-gradient(circle at 70% 62%, rgba(207, 190, 255, 0.38), transparent 15%);
    animation: heavenEffectSoftBloom var(--heaven-effect-duration) ease-out forwards;
}

.creation-heaven-effect-layer.effect-soul-flash::before {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(226, 214, 255, 0.5) 22%, rgba(150, 127, 255, 0.14) 46%, transparent 72%);
    animation: heavenEffectSoulFlash var(--heaven-effect-duration) ease-out forwards;
}

.creation-heaven-effect-layer.effect-aura-pulse::before {
    background:
        radial-gradient(ellipse at 50% 42%, rgba(199, 184, 255, 0.45), rgba(112, 98, 210, 0.2) 32%, transparent 66%);
    animation: heavenEffectAuraPulse var(--heaven-effect-duration) ease-in-out forwards;
}

.creation-heaven-effect-layer.effect-portal-ripple::before,
.creation-heaven-effect-layer.effect-portal-ripple::after {
    inset: 50% auto auto 50%;
    width: min(72vw, 760px);
    aspect-ratio: 1;
    border: 2px solid rgba(213, 202, 255, 0.56);
    border-radius: 50%;
    box-shadow: 0 0 38px rgba(170, 144, 255, 0.26), inset 0 0 40px rgba(170, 144, 255, 0.14);
    transform: translate(-50%, -50%) scale(0.18);
    animation: heavenEffectPortalRipple var(--heaven-effect-duration) ease-out forwards;
}

.creation-heaven-effect-layer.effect-portal-ripple::after {
    animation-delay: calc(var(--heaven-effect-duration) * 0.18);
}

.creation-heaven-star-lights {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    filter: saturate(1.16);
}

.creation-heaven-star-lights.is-playing {
    animation: heavenStarLightsLayer var(--star-lights-duration, 9050ms) ease-in-out forwards;
}

.creation-heaven-star-light {
    position: absolute;
    width: var(--star-size, 3px);
    height: var(--star-size, 3px);
    border-radius: 999px;
    background:
        radial-gradient(circle,
            rgba(255, 255, 246, 0.98) 0 18%,
            rgba(255, 230, 112, 0.94) 42%,
            rgba(255, 192, 43, 0.48) 64%,
            rgba(255, 192, 43, 0) 74%);
    box-shadow:
        0 0 var(--star-glow, 16px) rgba(255, 219, 91, 0.9),
        0 0 calc(var(--star-glow, 16px) + 12px) rgba(255, 187, 45, 0.34);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.56);
    animation: heavenStarLightBlink var(--star-blink-duration, 0.9s) ease-in-out var(--star-blink-delay, 0s) infinite;
    will-change: opacity, transform;
}

.creation-heaven-star-light.is-glint::before,
.creation-heaven-star-light.is-glint::after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--star-ray-thickness, 1px);
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255, 226, 105, 0),
            rgba(255, 238, 157, 0.72) 42%,
            rgba(255, 255, 246, 0.98) 50%,
            rgba(255, 238, 157, 0.72) 58%,
            rgba(255, 226, 105, 0));
    content: "";
    filter: blur(0.4px);
    transform: translate(-50%, -50%) rotate(var(--star-angle, 0deg));
    transform-origin: center;
}

.creation-heaven-star-light.is-glint::before {
    width: var(--star-ray, 42px);
}

.creation-heaven-star-light.is-glint::after {
    width: var(--star-ray-cross, 28px);
    transform: translate(-50%, -50%) rotate(var(--star-cross-angle, 90deg));
}

@keyframes heavenEffectSoftBloom {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    24% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@keyframes heavenEffectSoulFlash {
    0% {
        opacity: 0;
        transform: scale(0.72);
        filter: blur(18px);
    }

    16% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.28);
        filter: blur(34px);
    }
}

@keyframes heavenEffectAuraPulse {
    0% {
        opacity: 0;
        transform: scale(0.88);
        filter: blur(20px);
    }

    30% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
        filter: blur(28px);
    }
}

@keyframes heavenEffectPortalRipple {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }

    24% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.creation-spark {
    position: absolute;
    z-index: 4;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 14px rgba(227, 189, 99, 0.8);
    pointer-events: none;
    animation: creationSpark 1.1s ease-out forwards;
}

.ritual-shake {
    animation: ritualShake 0.62s ease;
}

@keyframes classFloat {
    0%,
    100% {
        transform: translateY(-18px);
    }

    50% {
        transform: translateY(18px);
    }
}

@keyframes goddessLevitate {
    0%,
    100% {
        transform: translateX(-50%) translate(0, 0);
    }

    22% {
        transform: translateX(-50%) translate(5px, -3px);
    }

    47% {
        transform: translateX(-50%) translate(-4px, 4px);
    }

    71% {
        transform: translateX(-50%) translate(3px, 2px);
    }

    88% {
        transform: translateX(-50%) translate(-2px, -2px);
    }
}

@keyframes goddessGoldAura {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(1.55, 1.22);
    }

    18% {
        opacity: 0.82;
    }

    42% {
        opacity: 0.82;
        transform: translateX(-50%) scale(1.1, 0.96);
    }

    72% {
        opacity: 0.58;
        transform: translateX(-50%) scale(0.48, 0.44);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.08, 0.05);
    }
}

@keyframes heavenStarLightsLayer {
    0% {
        opacity: 0;
    }

    2%,
    91% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes introStarWarpBlack {
    0% {
        opacity: 1;
    }

    10%,
    100% {
        opacity: 0;
    }
}

@keyframes introStarWarpStar {
    0% {
        opacity: 0;
        transform: rotate(var(--warp-angle, 0deg)) translateX(var(--warp-start, 0vmin)) scaleX(0.78) scaleY(1);
    }

    4% {
        opacity: var(--warp-opacity, 0.72);
        transform: rotate(var(--warp-angle, 0deg)) translateX(var(--warp-start, 0vmin)) scaleX(1.55) scaleY(1);
    }

    90% {
        opacity: var(--warp-opacity, 0.72);
        transform: rotate(var(--warp-angle, 0deg)) translateX(var(--warp-end, 100vmax)) scaleX(5.8) scaleY(0.92);
    }

    100% {
        opacity: 0;
        transform: rotate(var(--warp-angle, 0deg)) translateX(var(--warp-end, 100vmax)) scaleX(6.6) scaleY(0.88);
    }
}

@keyframes introStarWarpWhite {
    0%,
    84% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes heavenStarLightBlink {
    0%,
    100% {
        opacity: var(--star-dim-opacity, 0.12);
        transform: translate(-50%, -50%) scale(0.56);
    }

    38% {
        opacity: var(--star-opacity, 0.78);
        transform: translate(-50%, -50%) scale(1.22);
    }

    64% {
        opacity: var(--star-mid-opacity, 0.44);
        transform: translate(-50%, -50%) scale(0.82);
    }
}

@keyframes storyHeadlightSurge {
    0% {
        opacity: 0;
        transform: scale(0.86);
    }

    36% {
        opacity: 0.38;
    }

    72% {
        opacity: 0.82;
    }

    100% {
        opacity: 1;
        transform: scale(1.18);
    }
}

@keyframes ritualShake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(7px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes creationSpark {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--spark-x), var(--spark-y)) scale(0.2);
    }
}

@keyframes portalOpen {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(2.8);
        opacity: 0.5;
    }
}

@keyframes portalChoiceRipple {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.48);
    }

    18% {
        opacity: 0.95;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.28);
    }
}

@keyframes portalChoiceImagePulse {
    0% {
        filter:
            drop-shadow(0 0 34px var(--portal-glow-main))
            drop-shadow(0 0 58px var(--portal-glow-soft))
            drop-shadow(0 0 20px var(--portal-glow-light));
        transform: scale(1);
    }

    38% {
        filter:
            drop-shadow(0 0 58px var(--portal-glow-hot))
            drop-shadow(0 0 98px var(--portal-glow-main))
            drop-shadow(0 0 42px var(--portal-glow-light));
        transform: scale(1.045);
    }

    100% {
        filter:
            drop-shadow(0 0 42px var(--portal-glow-hot))
            drop-shadow(0 0 76px var(--portal-glow-main))
            drop-shadow(0 0 30px var(--portal-glow-light));
        transform: scale(1.01);
    }
}

@keyframes portalChoiceLabelPulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    36% {
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes portalChoiceSpark {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

    16% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.1);
    }
}

.register-modal {
    width: min(460px, calc(100% - 28px));
}

.account-card {
    padding: 24px;
}

.account-card h1 {
    padding: 0;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
}

.account-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 18px 0;
}

.account-detail-grid div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.account-detail-grid span,
.admin-kicker {
    display: block;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.account-detail-grid strong {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-actions form {
    margin: 0;
}

.account-modal {
    width: min(560px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.account-modal::backdrop {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(3px);
}

.account-modal-body {
    width: 100%;
}

.account-modal .account-card {
    position: relative;
    width: 100%;
}

.account-modal .account-card h1 {
    padding-right: 38px;
}

.account-modal-loading {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(27, 28, 34, 0.96);
    box-shadow: 0 24px 100px rgba(0, 0, 0, 0.58);
    font-weight: 800;
}

.account-modal-close {
    z-index: 2;
    color: var(--ink);
    background: rgba(11, 12, 16, 0.55);
    backdrop-filter: blur(8px);
}

.account-modal-close:hover,
.account-modal-close:focus-visible {
    border-color: rgba(227, 189, 99, 0.62);
    color: var(--gold);
    outline: 0;
}

.account-actions form {
    margin: 0;
}

.character-stage {
    width: 100%;
    margin: 0;
}

.character-screen {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr) minmax(360px, 1.1fr) minmax(280px, 0.9fr);
    gap: 8px;
    width: min(1920px, calc(100vw - 16px));
    height: min(1388px, calc(100vh - 52px));
    margin: 5px auto;
    align-items: stretch;
    overflow: hidden;
}

.portrait-column,
.core-column,
.right-zone {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.portrait-column {
    grid-column: 1;
    gap: 7px;
}

.core-column {
    grid-column: 2;
}

.right-zone {
    grid-column: 3 / 5;
}

.portrait-column,
.core-column {
    display: grid;
    gap: 8px;
}

.portrait-column {
    grid-template-rows: minmax(0, 50%) auto minmax(0, 1fr);
}

.core-column {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(245px, 0.7fr) minmax(340px, 1.12fr);
    grid-auto-flow: row;
}

.right-zone {
    display: grid;
    grid-template-columns: minmax(360px, 1.1fr) minmax(280px, 0.9fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "titles party"
        "resistances party"
        "abilities abilities";
    gap: 8px;
}

@media (min-width: 1401px) and (max-height: 1180px) {
    .character-stage {
        --character-scale: 1;
        --character-short-design-height: 1180px;
        --character-stage-height: calc(100vh - 52px);
        display: grid;
        height: var(--character-stage-height);
        margin: 5px auto;
        align-content: start;
        justify-content: center;
        overflow: visible;
    }

    .character-screen {
        width: 1920px;
        height: var(--character-short-design-height);
        margin: 0;
        transform: scale(var(--character-scale));
        transform-origin: top center;
    }
}

.portrait-frame,
.panel,
.name-block {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

.portrait-frame {
    overflow: hidden;
    min-height: 0;
}

.portrait-empty {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 280px;
    place-items: center;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
    background: rgba(247, 239, 228, 0.03);
}

.portrait-frame img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
}

.name-block {
    align-self: start;
    height: max-content;
    overflow: hidden;
    background: #191a20;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin: 0;
    padding: 7px 16px 4px;
    font-size: clamp(2.85rem, 3.75vw, 3.95rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.name-block h1 {
    max-width: 100%;
    padding-bottom: 11px;
    font-size: var(--character-name-fit-size, clamp(2.55rem, 3vw, 3.2rem));
    line-height: 1;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.name-block.goddess-rank-name-block {
    position: relative;
    border-color: rgba(244, 210, 122, 0.48);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 226, 156, 0.09),
        0 0 24px rgba(227, 189, 99, 0.1);
}

.name-block.goddess-rank-name-block::before,
.name-block.goddess-rank-name-block::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 86px;
    content: "";
    pointer-events: none;
    animation: goddessNameStarsPulse var(--star-blink-duration, 1.9s) ease-in-out var(--star-blink-delay, 0s) infinite;
    will-change: opacity;
}

.name-block.goddess-rank-name-block::before {
    --star-blink-duration: 2.15s;
    background:
        radial-gradient(circle at 96% 12%, rgba(255, 255, 246, 0.96) 0 1px, rgba(255, 230, 112, 0.7) 1px 2px, rgba(255, 192, 43, 0) 4px),
        radial-gradient(circle at 84% 32%, rgba(255, 255, 246, 0.86) 0 1px, rgba(255, 230, 112, 0.54) 1px 2px, rgba(255, 192, 43, 0) 4px),
        radial-gradient(circle at 68% 16%, rgba(255, 255, 246, 0.88) 0 1px, rgba(255, 230, 112, 0.56) 1px 2px, rgba(255, 192, 43, 0) 4px),
        radial-gradient(circle at 48% 26%, rgba(255, 255, 246, 0.78) 0 1px, rgba(255, 230, 112, 0.48) 1px 2px, rgba(255, 192, 43, 0) 4px),
        radial-gradient(circle at 21% 18%, rgba(255, 255, 246, 0.82) 0 1px, rgba(255, 230, 112, 0.5) 1px 2px, rgba(255, 192, 43, 0) 4px);
}

.name-block.goddess-rank-name-block::after {
    --star-blink-duration: 2.45s;
    --star-blink-delay: 0.38s;
    background:
        radial-gradient(circle at 91% 24%, rgba(255, 255, 246, 0.72) 0 1px, rgba(255, 230, 112, 0.42) 1px 2px, rgba(255, 192, 43, 0) 3px),
        radial-gradient(circle at 76% 8%, rgba(255, 255, 246, 0.76) 0 1px, rgba(255, 230, 112, 0.44) 1px 2px, rgba(255, 192, 43, 0) 3px),
        radial-gradient(circle at 59% 38%, rgba(255, 255, 246, 0.66) 0 1px, rgba(255, 230, 112, 0.36) 1px 2px, rgba(255, 192, 43, 0) 3px),
        radial-gradient(circle at 35% 12%, rgba(255, 255, 246, 0.72) 0 1px, rgba(255, 230, 112, 0.4) 1px 2px, rgba(255, 192, 43, 0) 3px),
        radial-gradient(circle at 12% 36%, rgba(255, 255, 246, 0.64) 0 1px, rgba(255, 230, 112, 0.34) 1px 2px, rgba(255, 192, 43, 0) 3px);
}

@keyframes goddessNameStarsPulse {
    0%,
    100% {
        opacity: 0.22;
    }

    42% {
        opacity: 0.9;
    }

    68% {
        opacity: 0.48;
    }
}

.name-block h1.goddess-rank-name {
    position: relative;
    z-index: 2;
    color: #f4d27a;
    text-shadow:
        0 0 6px rgba(255, 238, 178, 0.24),
        0 0 18px rgba(227, 189, 99, 0.16),
        0 1px 0 rgba(38, 26, 6, 0.75);
}

.rank-banner {
    margin: 3px 8px 8px;
    padding: 5px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    text-align: center;
    color: var(--ink);
    background: #202127;
    font-size: clamp(1.2rem, 1.45vw, 1.55rem);
}

.rank-banner.goddess-rank-banner {
    border-color: rgba(255, 199, 220, 0.58);
    color: #ffc7dc;
    background: rgba(255, 199, 220, 0.055);
    text-shadow:
        0 0 8px rgba(255, 199, 220, 0.2),
        0 1px 0 rgba(35, 18, 26, 0.8);
}

.vitals-panel {
    align-self: start;
}

.attributes-panel {
    overflow: hidden;
}

.appearance-panel {
    overflow: hidden;
    padding: 14px 16px;
}

.appearance-panel h2 {
    margin-bottom: 10px;
}

.portrait-column > *,
.core-column > * {
    width: 100%;
    min-width: 0;
}

.right-zone > .titles-panel {
    grid-area: titles;
}

.right-zone > .resistances-panel {
    grid-area: resistances;
}

.right-zone > .party-panel {
    grid-area: party;
}

.party-panel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.party-panel h2 {
    margin-bottom: 0;
}

.right-zone > .abilities-panel {
    grid-area: abilities;
}

.identity-grid {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px 8px;
}

.identity-grid span {
    flex: 1 1 112px;
    min-width: 112px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #25262d;
}

.identity-grid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.panel {
    min-height: 0;
    padding: 12px 14px;
}

h2 {
    margin-bottom: 12px;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.panel-heading h2 {
    margin-bottom: 0;
}

.attributes-panel .panel-heading {
    min-height: 22px;
}

.attributes-panel .points-available,
.attributes-panel .attribute-reset-form,
.attributes-panel .attribute-commit-form {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

.points-available {
    color: #7ee28f;
    font-size: 0.82rem;
    font-weight: 800;
}

.attribute-reset-form,
.attribute-commit-form {
    margin: 0;
}

.attribute-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.attribute-reset-button {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 1px 8px 2px;
    border: 1px solid rgba(247, 239, 228, 0.24);
    border-radius: 6px;
    color: var(--muted);
    background: rgba(247, 239, 228, 0.05);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}

.attribute-step-control {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border: 1px solid rgba(126, 226, 143, 0.24);
    border-radius: 6px;
    background: rgba(126, 226, 143, 0.06);
}

.attribute-step-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 18px;
    padding: 0 4px;
    border: 0;
    border-radius: 4px;
    color: #9fdba8;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.attribute-step-button:hover,
.attribute-step-button:focus-visible {
    color: #ddffe2;
    background: rgba(126, 226, 143, 0.14);
    outline: 0;
}

.attribute-step-button.active {
    color: #111815;
    background: #7ee28f;
}

.attribute-reset-button:hover,
.attribute-reset-button:focus-visible {
    border-color: rgba(247, 239, 228, 0.42);
    color: var(--ink);
    background: rgba(247, 239, 228, 0.09);
    outline: 0;
}

.meter-list {
    display: grid;
    gap: 14px;
}

.meter-label {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.9rem;
}

.meter {
    overflow: hidden;
    height: 13px;
    border-radius: 999px;
    background: rgba(247, 239, 228, 0.13);
}

.meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.health {
    background: linear-gradient(90deg, var(--ruby), #ee9b70);
}

.mana {
    background: linear-gradient(90deg, var(--aqua), #86bfff);
}

.xp {
    background: linear-gradient(90deg, var(--gold), #89bd6e);
}

.attribute-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: calc(100% - 30px);
}

.attribute {
    position: relative;
    display: grid;
    grid-template-rows: 22px minmax(0, 1fr) 14px;
    min-height: 0;
    padding: 8px 10px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-soft);
}

.attribute.attribute-role-core {
    border-color: rgba(220, 200, 131, 0.42);
    box-shadow: inset 0 0 0 1px rgba(220, 200, 131, 0.06);
}

.attribute.attribute-role-primary {
    border-color: rgba(183, 169, 220, 0.4);
    box-shadow: inset 0 0 0 1px rgba(183, 169, 220, 0.055);
}

.attribute.attribute-role-secondary {
    border-color: rgba(157, 185, 214, 0.38);
    box-shadow: inset 0 0 0 1px rgba(157, 185, 214, 0.05);
}

.attribute-adjust-actions {
    position: absolute;
    top: 35px;
    right: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.attribute-plus-button,
.attribute-minus-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(126, 226, 143, 0.75);
    border-radius: 50%;
    color: #ddffe2;
    background: rgba(72, 169, 97, 0.38);
    cursor: pointer;
    font-size: 0;
    font-weight: 900;
    line-height: 1;
}

.attribute-plus-button::before,
.attribute-plus-button::after,
.attribute-minus-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 999px;
    background: #ddffe2;
    transform: translate(-50%, -50%);
}

.attribute-plus-button::before {
    width: 10px;
    height: 2px;
}

.attribute-plus-button::after {
    width: 2px;
    height: 10px;
}

.attribute-minus-button {
    border-color: rgba(247, 239, 228, 0.36);
    color: #f7efe4;
    background: rgba(255, 255, 255, 0.07);
}

.attribute-minus-button::before {
    width: 10px;
    height: 2px;
    background: #f7efe4;
}

.attribute-plus-button:hover {
    border-color: #7ee28f;
    background: rgba(72, 169, 97, 0.62);
}

.attribute-minus-button:hover {
    border-color: rgba(227, 189, 99, 0.72);
    background: rgba(227, 189, 99, 0.18);
}

.attribute-plus-button:disabled,
.attribute-minus-button:disabled {
    opacity: 0.34;
    cursor: default;
}

.info-row {
    justify-content: space-between;
    gap: 8px;
}

.attribute .info-row span {
    color: var(--muted);
    font-size: 0.85rem;
}

.attribute > strong {
    display: block;
    align-self: center;
    justify-self: center;
    margin: 0;
    color: var(--ink);
    font-size: 1.72rem;
    line-height: 1;
    transform: translateY(-8px);
}

.attribute > strong.attribute-role-core {
    color: #dcc883;
    text-shadow: 0 0 6px rgba(220, 200, 131, 0.14);
}

.attribute > strong.attribute-role-primary {
    color: #b7a9dc;
    text-shadow: 0 0 6px rgba(183, 169, 220, 0.13);
}

.attribute > strong.attribute-role-secondary {
    color: #9db9d6;
    text-shadow: 0 0 6px rgba(157, 185, 214, 0.12);
}

.attribute-effect {
    display: block;
    justify-self: center;
    color: var(--gold);
    font-size: 0.68rem;
}

.secondary-stat-list {
    display: grid;
    gap: 2px;
    align-self: end;
    margin: 0;
    padding: 6px 0 0;
    border-top: 1px solid rgba(247, 239, 228, 0.09);
    list-style: none;
}

.secondary-stat-list li {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.15;
}

.secondary-stat-list li span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secondary-stat-list li strong {
    flex: 0 0 auto;
    margin: 0;
    color: var(--gold);
    font-size: inherit;
}

.info-button {
    display: grid;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid rgba(247, 239, 228, 0.72);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.08);
    cursor: pointer;
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 800;
}

.body-copy {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.58;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.tag-list span {
    padding: 4px 9px;
    border: 1px solid rgba(227, 189, 99, 0.35);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.08);
    font-size: 0.78rem;
}

.appearance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 0;
}

.appearance-grid div {
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.appearance-panel .appearance-grid > div:not(.appearance-long-field) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.appearance-grid .appearance-long-field {
    grid-column: 1 / -1;
}

.appearance-grid dt,
.appearance-grid dd {
    margin: 0;
}

.appearance-grid dt {
    color: var(--muted);
    font-size: 0.78rem;
}

.appearance-grid dd {
    overflow: hidden;
    margin-top: 3px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appearance-panel .appearance-grid > div:not(.appearance-long-field) dd {
    flex: 1;
    margin-top: 0;
    text-align: right;
}

.appearance-grid .appearance-long-field dd {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
}

.appearance-grid .appearance-personality {
    min-height: 58px;
}

.appearance-grid .appearance-style {
    min-height: calc((0.95rem * 1.3 * 2) + 28px);
}

.appearance-grid .appearance-style dd {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.detail-list div {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.detail-list div:last-child {
    border-bottom: 0;
}

.detail-list dt {
    color: var(--muted);
    font-size: 0.82rem;
}

.detail-list dd {
    margin: 0;
}

.titles-panel {
    padding: 10px 12px;
}

.title-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.title-section-header h2 {
    margin-bottom: 0;
}

.slot-list {
    display: grid;
    grid-template-rows: repeat(4, 48px);
    gap: 5px;
}

.slot-button,
.ability-slot,
.picker-list button {
    width: 100%;
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
}

.slot-button {
    display: grid;
    align-content: center;
    height: 48px;
    min-height: 48px;
    padding: 5px 8px;
    border-color: rgba(247, 239, 228, 0.08);
    border-radius: 3px;
    background: #050608;
}

.slot-button:hover,
.ability-slot:hover,
.picker-list button:hover {
    border-color: rgba(120, 203, 210, 0.56);
    background: rgba(120, 203, 210, 0.12);
}

.slot-button strong,
.slot-button small {
    display: block;
}

.slot-button small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resistances-panel {
    min-height: 0;
    overflow: hidden;
}

.resistance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.resistance-card {
    padding: 5px;
    border: 1px solid rgba(247, 239, 228, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.resistance-card.resistance-tier-none {
    border-color: rgba(77, 83, 90, 0.52);
    box-shadow: inset 0 0 0 1px rgba(77, 83, 90, 0.08);
}

.resistance-card.resistance-tier-common {
    border-color: rgba(118, 129, 142, 0.5);
    box-shadow: inset 0 0 0 1px rgba(118, 129, 142, 0.075);
}

.resistance-card.resistance-tier-uncommon {
    border-color: rgba(72, 169, 97, 0.44);
    box-shadow: inset 0 0 0 1px rgba(72, 169, 97, 0.065);
}

.resistance-card.resistance-tier-rare {
    border-color: rgba(63, 126, 219, 0.44);
    box-shadow: inset 0 0 0 1px rgba(63, 126, 219, 0.065);
}

.resistance-card.resistance-tier-epic {
    border-color: rgba(139, 98, 217, 0.44);
    box-shadow: inset 0 0 0 1px rgba(139, 98, 217, 0.065);
}

.resistance-card.resistance-tier-immune {
    border-color: rgba(230, 148, 49, 0.48);
    box-shadow: inset 0 0 0 1px rgba(230, 148, 49, 0.075);
}

.resistance-card .info-row span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.88rem;
}

.resistance-meter {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    min-height: 26px;
    margin-top: 6px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #3d3d3d;
}

.resistance-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #777;
}

.resistance-meter strong,
.resistance-meter em {
    position: relative;
    z-index: 1;
    font-size: 0.84rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.resistance-meter em {
    color: var(--ink);
    font-style: normal;
}

.resistance-breakdown {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.68rem;
}

.resistance-meter.none span {
    background: #4d535a;
}

.resistance-meter.common span {
    background: #76818e;
}

.resistance-meter.uncommon span {
    background: var(--green);
}

.resistance-meter.rare span {
    background: var(--blue);
}

.resistance-meter.epic span {
    background: var(--purple);
}

.resistance-meter.immune span {
    background: var(--orange);
}

.backstory-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.backstory-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.backstory-heading h2 {
    margin-bottom: 0;
}

.backstory-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.backstory-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.backstory-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.backstory-panel .read-more-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 1px 8px 2px;
    border: 1px solid rgba(247, 239, 228, 0.24);
    border-radius: 6px;
    color: var(--muted);
    background: rgba(247, 239, 228, 0.05);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.backstory-panel .read-more-button:hover,
.backstory-panel .read-more-button:focus-visible {
    border-color: rgba(247, 239, 228, 0.42);
    color: var(--ink);
    background: rgba(247, 239, 228, 0.09);
}

.origin-note {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(247, 239, 228, 0.32);
    color: var(--muted);
    line-height: 1.15;
}

.origin-note strong {
    color: var(--ink);
}

.backstory-modal {
    width: min(720px, calc(100% - 28px));
}

.backstory-modal p {
    max-height: min(58vh, 520px);
    overflow: auto;
    white-space: pre-line;
}

.secondary-stats-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.secondary-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    align-items: start;
    gap: 5px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.secondary-detail-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.secondary-detail-card {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(247, 239, 228, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.secondary-toggle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px 6px 24px;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    position: relative;
}

.secondary-toggle::before {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: var(--muted);
    content: ">";
    font-size: 0.75rem;
}

.secondary-toggle[aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(90deg);
}

.secondary-toggle:hover {
    background: rgba(120, 203, 210, 0.08);
}

.secondary-toggle span,
.secondary-toggle strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secondary-toggle span {
    color: var(--ink);
    font-size: 0.8rem;
}

.secondary-toggle strong {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 0.82rem;
}

.secondary-detail-card dl {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 6px 8px 8px;
    border-top: 1px solid rgba(247, 239, 228, 0.09);
}

.secondary-detail-card dl[hidden] {
    display: none;
}

.secondary-detail-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.secondary-detail-card dt,
.secondary-detail-card dd {
    margin: 0;
    font-size: 0.68rem;
}

.secondary-detail-card dt {
    color: var(--muted);
}

.secondary-detail-card dd {
    color: var(--ink);
}

.party-list {
    display: grid;
    grid-template-rows: repeat(6, minmax(80px, 1fr));
    gap: 10px;
    align-content: stretch;
    min-height: 0;
}

.party-member {
    gap: 14px;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #26272e;
}

.party-member.selected,
.party-member:hover {
    border-color: rgba(120, 203, 210, 0.5);
    background: rgba(120, 203, 210, 0.12);
}

.party-member img {
    width: 58px;
    height: 58px;
    border-radius: 7px;
    object-fit: cover;
    object-position: center 22%;
}

.party-member strong,
.party-member small {
    display: block;
}

.party-member small {
    color: var(--muted);
    font-size: 0.82rem;
}

.party-member strong {
    font-size: 1rem;
}

.recruited-tag {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 20px;
    margin-top: 5px;
    padding: 1px 7px;
    border: 1px solid rgba(142, 218, 151, 0.52);
    border-radius: 999px;
    color: #9ff2a9;
    background: rgba(142, 218, 151, 0.1);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.party-member-empty {
    opacity: 0.34;
    background: rgba(247, 239, 228, 0.045);
    pointer-events: none;
}

.party-member-empty:hover {
    border-color: transparent;
    background: rgba(247, 239, 228, 0.045);
}

.party-empty-portrait {
    display: none;
}

.party-panel.location-only {
    grid-template-rows: auto auto;
    align-content: start;
}

.party-current-location {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 126px;
}

.party-location-picture {
    display: grid;
    width: 124px;
    height: 124px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: rgba(7, 8, 12, 0.28);
    font-size: 0.76rem;
    line-height: 1.25;
    text-align: center;
}

.party-location-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.party-location-text {
    display: grid;
    align-content: center;
    min-width: 0;
    color: var(--ink);
}

.party-location-text small {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.72rem;
}

.party-location-text strong {
    overflow: hidden;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-location-text span {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-screen {
    display: grid;
    grid-template-columns: 427px minmax(0, 1fr);
    gap: 8px;
    width: 1920px;
    min-width: 1920px;
    height: min(1388px, calc(100vh - 52px));
    margin: 5px auto;
    align-items: stretch;
    overflow: hidden;
}

.character-stage.inventory-stage {
    display: block;
    width: 1920px;
    min-width: 1920px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.inventory-left-column,
.inventory-workspace,
.inventory-right-column {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.inventory-left-column {
    grid-template-rows: minmax(0, 50%) auto minmax(0, 1fr);
}

.inventory-main-layout {
    display: grid;
    grid-template-columns: 427px minmax(0, 1fr) 427px;
    grid-template-rows: minmax(500px, 0.52fr) minmax(0, 0.48fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.inventory-main-layout > .inventory-workspace,
.inventory-main-layout > .inventory-right-column {
    display: contents;
}

.inventory-main-layout .inventory-top-grid {
    display: contents;
}

.inventory-main-layout .inventory-info-stack {
    grid-column: 1;
    grid-row: 1 / 3;
}

.inventory-main-layout .equipment-doll-panel {
    grid-column: 2;
    grid-row: 1;
}

.inventory-main-layout .party-panel {
    grid-column: 3;
    grid-row: 1;
    height: 606px;
    align-self: start;
}

.inventory-main-layout .inventory-grid-panel-right {
    grid-column: 2 / 4;
    grid-row: 2;
}

.inventory-main-layout .inventory-gap-ornament {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    width: 100%;
    height: max(0px, calc(100% - 614px));
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.inventory-main-layout .inventory-gap-ornament::before {
    position: absolute;
    top: 50%;
    right: 9%;
    left: 9%;
    height: 10px;
    opacity: 0.68;
    background:
        linear-gradient(90deg, transparent, rgba(227, 189, 99, 0.56) 18%, rgba(227, 189, 99, 0.56) 82%, transparent),
        radial-gradient(circle at 50% 50%, rgba(227, 189, 99, 0.86) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 47%, rgba(247, 239, 228, 0.28) 47% 53%, transparent 53%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 1px, 10px 10px, 30px 1px;
    content: "";
    transform: translateY(-50%);
}

.inventory-workspace {
    display: grid;
    grid-template-rows: minmax(500px, 1fr) max-content;
    gap: 8px;
}

.inventory-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.inventory-info-stack,
.inventory-right-column {
    display: grid;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.inventory-info-stack {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.inventory-name-block {
    display: grid;
    min-height: 72px;
    place-items: center;
}

.inventory-name-block h1 {
    width: 100%;
    padding: 10px 18px;
    font-size: var(--character-name-fit-size, 2.05rem);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.inventory-right-column {
    grid-template-rows: 606px minmax(0, 1fr);
    align-content: start;
}

.inventory-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.inventory-panel-heading h2 {
    margin-bottom: 0;
}

.equipment-doll-panel,
.item-details-panel,
.inventory-bags-panel,
.inventory-grid-panel,
.inventory-currency-panel,
.inventory-home-panel {
    overflow: hidden;
}

.equipment-doll-panel {
    display: grid;
    grid-template-rows: minmax(460px, 1fr);
}

.equipment-doll-frame {
    --equipment-slot-edge: 26px;
    --equipment-slot-gap: 16px;
    --equipment-slot-size: 96px;
    --equipment-slot-step: calc(var(--equipment-slot-size) + var(--equipment-slot-gap));
    --equipment-ring-offset: calc(var(--equipment-slot-edge) + var(--equipment-slot-size) + var(--equipment-slot-edge));
    --equipment-weapon-top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-size) + var(--equipment-slot-edge));
    --equipment-weapon-size: clamp(var(--equipment-slot-size), calc(100% - var(--equipment-weapon-top) - var(--equipment-slot-edge)), 132px);
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 43%, rgba(202, 111, 231, 0.2), transparent 42%),
        radial-gradient(circle at 50% 54%, rgba(120, 203, 210, 0.08), transparent 48%),
        rgba(7, 8, 12, 0.34);
}

.inventory-doll-art {
    position: absolute;
    inset: 12px 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    color: rgba(247, 239, 228, 0.34);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.inventory-doll-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
    transform: none;
    filter:
        drop-shadow(0 0 5px rgba(224, 118, 232, 0.38))
        drop-shadow(0 0 16px rgba(151, 91, 211, 0.24));
}

.equipment-slot,
.inventory-slot,
.bag-slot {
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    background: rgba(247, 239, 228, 0.045);
}

.equipment-slot {
    position: absolute;
    z-index: 2;
    display: grid;
    width: var(--equipment-slot-size);
    height: var(--equipment-slot-size);
    place-items: center;
    color: rgba(247, 239, 228, 0.36);
    font-size: 0.64rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.equipment-slot-head {
    top: var(--equipment-slot-edge);
    left: var(--equipment-slot-edge);
}

.equipment-slot-neck {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step));
    right: var(--equipment-slot-edge);
}

.equipment-slot-chest {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step));
    left: var(--equipment-slot-edge);
}

.equipment-slot-earrings {
    top: var(--equipment-slot-edge);
    right: var(--equipment-slot-edge);
}

.equipment-slot-hands {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-step));
    right: var(--equipment-slot-edge);
}

.equipment-slot-ring_left {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-step));
    left: var(--equipment-ring-offset);
}

.equipment-slot-legs {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step));
    left: var(--equipment-slot-edge);
}

.equipment-slot-ring_right {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-step));
    right: var(--equipment-ring-offset);
}

.equipment-slot-feet {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step) + var(--equipment-slot-step));
    left: var(--equipment-slot-edge);
}

.equipment-slot-talisman {
    top: calc(var(--equipment-slot-edge) + var(--equipment-slot-step) + var(--equipment-slot-step));
    right: var(--equipment-slot-edge);
}

.equipment-slot-weapon_main {
    top: min(var(--equipment-weapon-top), calc(100% - var(--equipment-slot-edge) - var(--equipment-slot-size)));
    bottom: auto;
    left: calc(var(--equipment-slot-edge) + var(--equipment-slot-size));
}

.equipment-slot-offhand {
    top: min(var(--equipment-weapon-top), calc(100% - var(--equipment-slot-edge) - var(--equipment-slot-size)));
    bottom: auto;
    right: calc(var(--equipment-slot-edge) + var(--equipment-slot-size));
}

.equipment-slot-weapon_main,
.equipment-slot-offhand {
    width: auto;
    height: var(--equipment-weapon-size);
    aspect-ratio: 1;
    font-size: 0.68rem;
}

.equipment-slot.inactive {
    border-style: dashed;
    opacity: 0.44;
    background: rgba(247, 239, 228, 0.025);
    cursor: not-allowed;
}

.equipment-slot.two-handed-locked {
    opacity: 1;
}

.equipment-slot.two-handed-locked .inventory-item-ghost {
    opacity: 0.42;
    filter: grayscale(1) saturate(0.35);
    cursor: default;
    pointer-events: auto;
}

.equipment-slot.two-handed-locked .inventory-item-ghost:hover,
.equipment-slot.two-handed-locked .inventory-item-ghost:focus-visible {
    outline: 1px solid rgba(247, 239, 228, 0.28);
    background: rgba(247, 239, 228, 0.055);
}

.equipment-slot.is-drag-target {
    border-color: rgba(228, 199, 103, 0.74);
    background: rgba(228, 199, 103, 0.12);
    box-shadow:
        0 0 0 1px rgba(228, 199, 103, 0.2) inset,
        0 0 18px rgba(228, 199, 103, 0.22);
}

.inventory-drop-zone.is-over {
    border-color: rgba(126, 226, 143, 0.65);
    background: rgba(126, 226, 143, 0.1);
}

.inventory-drop-zone.is-blocked {
    border-color: rgba(216, 106, 112, 0.65);
    background: rgba(216, 106, 112, 0.1);
}

.inventory-item {
    --inventory-item-rank-border: rgba(199, 202, 209, 0.5);
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 4px;
    border: 1px solid var(--inventory-item-rank-border);
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--inventory-item-rank-border) 16%, transparent);
    cursor: grab;
    font: inherit;
}

.inventory-item.ability-rank-e {
    --inventory-item-rank-border: rgba(199, 202, 209, 0.5);
}

.inventory-item.ability-rank-d {
    --inventory-item-rank-border: rgba(247, 239, 228, 0.82);
}

.inventory-item.ability-rank-c {
    --inventory-item-rank-border: #2ecc71;
}

.inventory-item.ability-rank-b {
    --inventory-item-rank-border: #67b7ff;
}

.inventory-item.ability-rank-a {
    --inventory-item-rank-border: var(--gold);
}

.inventory-item.ability-rank-s {
    --inventory-item-rank-border: var(--purple);
}

.inventory-item.ability-rank-sr {
    --inventory-item-rank-border: var(--orange);
}

.inventory-item.ability-rank-ssr {
    --inventory-item-rank-border: var(--mythic-red);
}

.inventory-item.ability-rank-g {
    --inventory-item-rank-border: #f4d27a;
}

.equipment-slot .inventory-item {
    padding: 5px;
}

.inventory-item:active {
    cursor: grabbing;
}

.inventory-item.selected,
.inventory-item:hover,
.inventory-item:focus-visible {
    outline: 1px solid rgba(227, 189, 99, 0.72);
    background: rgba(227, 189, 99, 0.2);
}

.inventory-item.dragging {
    opacity: 0.48;
}

.inventory-item-icon {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    color: #17181d;
    background: var(--gold);
    font-size: 0.9rem;
    font-weight: 950;
}

.inventory-item-icon,
.inventory-item-icon img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.inventory-item-icon img {
    object-fit: contain;
}

.inventory-item-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.inventory-item-tooltip {
    position: fixed;
    z-index: 50;
    display: grid;
    gap: 2px;
    max-width: 220px;
    padding: 7px 9px;
    border: 1px solid rgba(227, 189, 99, 0.5);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(25, 26, 32, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    font-size: 0.76rem;
    pointer-events: none;
}

.inventory-item-tooltip[hidden] {
    display: none;
}

.inventory-item-tooltip strong,
.inventory-item-tooltip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-item-tooltip strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.inventory-item-tooltip span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.item-details-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.item-details-panel .item-detail-preview {
    grid-row: 1 / -1;
}

.item-details-empty,
.home-treasure-empty {
    display: grid;
    min-height: 0;
    place-items: center;
    color: rgba(247, 239, 228, 0.38);
    font-size: 0.86rem;
    font-weight: 800;
}

.item-detail-preview {
    --item-preview-rarity: #c7cad1;
    --item-detail-icon-size: 300px;
    --item-detail-icon-bottom-space: 4px;
    display: grid;
    grid-template-rows: minmax(30px, auto) calc(var(--item-detail-icon-size) + var(--item-detail-icon-bottom-space)) 48px 48px minmax(224px, 1fr) 120px 32px 22px;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.item-detail-preview.ability-rank-e {
    --item-preview-rarity: #c7cad1;
}

.item-detail-preview.ability-rank-d {
    --item-preview-rarity: #f7efe4;
}

.item-detail-preview.ability-rank-c {
    --item-preview-rarity: #79d24a;
}

.item-detail-preview.ability-rank-b {
    --item-preview-rarity: #67b7ff;
}

.item-detail-preview.ability-rank-a {
    --item-preview-rarity: var(--gold);
}

.item-detail-preview.ability-rank-s {
    --item-preview-rarity: var(--purple);
}

.item-detail-preview.ability-rank-sr {
    --item-preview-rarity: var(--orange);
}

.item-detail-preview.ability-rank-ssr {
    --item-preview-rarity: var(--mythic-red);
}

.item-detail-preview.ability-rank-g {
    --item-preview-rarity: #f4d27a;
}

.item-detail-name {
    overflow: hidden;
    margin: 0;
    color: var(--item-preview-rarity);
    font-size: 1.38rem;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.item-detail-icon {
    display: grid;
    align-self: start;
    justify-self: center;
    width: var(--item-detail-icon-size);
    height: var(--item-detail-icon-size);
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(227, 189, 99, 0.42);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    font-size: 2rem;
    font-weight: 950;
}

.item-detail-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    min-height: 0;
}

.item-detail-frame {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #25262d;
}

.item-detail-frame.is-empty {
    visibility: hidden;
}

.item-detail-frame span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.item-detail-frame strong {
    overflow: hidden;
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-detail-frame.item-detail-damage-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

.item-detail-damage-pair {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: visible;
    gap: 6px;
    color: inherit;
    font-size: 0.84rem;
    line-height: 1.18;
    text-transform: none;
    white-space: nowrap;
}

.item-detail-frame.item-detail-damage-row .item-detail-damage-pair span,
.item-detail-frame.item-detail-damage-row .item-detail-damage-pair strong {
    overflow: hidden;
    margin-top: 0;
    font-size: 0.84rem;
    line-height: 1.18;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.item-detail-frame.item-detail-damage-row .item-detail-damage-pair.is-healing,
.item-detail-frame.item-detail-damage-row .item-detail-damage-pair.is-healing span,
.item-detail-frame.item-detail-damage-row .item-detail-damage-pair.is-healing strong {
    color: #33CC33;
}

.item-detail-frame .item-detail-rarity-value {
    color: var(--item-preview-rarity);
}

.item-detail-effects-grid {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(8, minmax(24px, max-content));
    gap: 6px;
    align-content: start;
    justify-items: start;
    min-height: 0;
    overflow: hidden;
    padding: 6px;
}

.item-detail-effect-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 24px;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 7px;
    border: 1px solid rgba(143, 255, 100, 0.42);
    border-radius: 999px;
    color: #b3ff76;
    background: rgba(91, 214, 71, 0.12);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-detail-effect-slot.is-empty {
    display: none;
}

.item-detail-description {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    height: 120px;
    min-height: 120px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: #25262d;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.item-detail-description span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.item-detail-value-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.item-detail-value-frame {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 28px;
    padding-block: 4px;
}

.item-detail-value-frame strong {
    margin-top: 0;
    line-height: 1.15;
    text-align: right;
}

.item-detail-value-frame span {
    line-height: 1.15;
}

.item-detail-bottom-ornament {
    position: relative;
    min-height: 18px;
    height: 100%;
    overflow: hidden;
}

.item-detail-bottom-ornament::before {
    position: absolute;
    top: 50%;
    right: 9%;
    left: 9%;
    height: 18px;
    pointer-events: none;
    opacity: 0.68;
    background:
        linear-gradient(90deg, transparent, rgba(227, 189, 99, 0.56) 18%, rgba(227, 189, 99, 0.56) 82%, transparent),
        radial-gradient(circle at 50% 50%, rgba(227, 189, 99, 0.86) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 47%, rgba(247, 239, 228, 0.28) 47% 53%, transparent 53%);
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-size: 100% 1px, 18px 18px, 42px 1px;
    content: "";
    transform: translateY(-50%);
}

.bag-slot-grid {
    display: grid;
    grid-template-columns: repeat(7, 50px);
    gap: 7px;
    justify-content: start;
}

.bag-slot {
    display: grid;
    position: relative;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    place-items: center;
    padding: 6px;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}

.bag-slot.filled {
    border-color: rgba(120, 203, 210, 0.42);
    background: rgba(120, 203, 210, 0.1);
}

.bag-slot.unequipable {
    cursor: grab;
}

.bag-slot.unequipable:active {
    cursor: grabbing;
}

.bag-slot.dragging {
    opacity: 0.48;
}

.bag-slot.selected,
.bag-slot.detail-selected,
.bag-slot.filled:hover,
.bag-slot.filled:focus-visible {
    border-color: rgba(227, 189, 99, 0.7);
    background: rgba(227, 189, 99, 0.16);
    outline: 0;
}

.bag-slot.inactive {
    opacity: 0.36;
    background: rgba(247, 239, 228, 0.025);
}

.bag-slot.inactive.is-over {
    opacity: 1;
    background: rgba(126, 226, 143, 0.1);
}

.bag-slot-icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--item-rank-border, rgba(247, 239, 228, 0.14));
    border-radius: 5px;
    color: #17181d;
    background: var(--gold);
    font-size: 0.76rem;
    font-weight: 950;
}

.bag-slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bag-slot-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.bag-slot-empty {
    width: 48%;
    height: 48%;
    border: 1px dashed rgba(247, 239, 228, 0.2);
    border-radius: 5px;
}

.carry-meter {
    height: 10px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(247, 239, 228, 0.06);
}

.carry-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), #7ee28f);
}

.inventory-grid-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 14px 16px 6px;
}

.inventory-grid-panel::after {
    content: "";
    position: absolute;
    right: 9%;
    bottom: 8px;
    left: 9%;
    height: 18px;
    pointer-events: none;
    opacity: 0.68;
    background:
        linear-gradient(90deg, transparent, rgba(227, 189, 99, 0.56) 18%, rgba(227, 189, 99, 0.56) 82%, transparent),
        radial-gradient(circle at 50% 50%, rgba(227, 189, 99, 0.86) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 47%, rgba(247, 239, 228, 0.28) 47% 53%, transparent 53%);
    background-position: center, center, center;
    background-size: 100% 1px, 18px 18px, 42px 1px;
    background-repeat: no-repeat;
}

.inventory-grid-heading {
    align-items: start;
    width: calc((12 * 77px) + (11 * 7px));
    max-width: 100%;
    justify-self: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.inventory-bag-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    gap: 3px;
    min-width: min(100%, 455px);
    align-items: end;
}

.inventory-bag-tab {
    display: grid;
    min-width: 0;
    height: 26px;
    place-items: center;
    padding: 0 7px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-bottom-color: rgba(227, 189, 99, 0.2);
    border-radius: 7px 7px 2px 2px;
    color: var(--muted);
    background: linear-gradient(180deg, rgba(247, 239, 228, 0.07), rgba(247, 239, 228, 0.025));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.34);
    font-size: 0.7rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.inventory-bag-tab.selected,
.inventory-bag-tab:hover,
.inventory-bag-tab:focus-visible {
    border-color: rgba(227, 189, 99, 0.64);
    border-bottom-color: rgba(227, 189, 99, 0.64);
    color: var(--gold);
    background: linear-gradient(180deg, rgba(227, 189, 99, 0.24), rgba(227, 189, 99, 0.11));
    box-shadow: inset 0 1px 0 rgba(255, 239, 190, 0.16), 0 3px 10px rgba(0, 0, 0, 0.18);
    outline: 0;
}

.inventory-bag-tab.inactive {
    opacity: 0.36;
    pointer-events: none;
    box-shadow: none;
}

.inventory-slot-grid {
    --inventory-slot-gap: 7px;
    --inventory-slot-size: 77px;
    display: grid;
    grid-template-columns: repeat(12, var(--inventory-slot-size));
    grid-auto-rows: var(--inventory-slot-size);
    gap: var(--inventory-slot-gap);
    justify-content: center;
    align-content: start;
    min-height: 0;
    overflow: hidden;
}

.inventory-empty-bag {
    display: grid;
    min-height: 120px;
    place-items: center;
    grid-column: 1 / -1;
    color: rgba(247, 239, 228, 0.38);
    font-size: 0.86rem;
    font-weight: 800;
}

.inventory-slot {
    width: var(--inventory-slot-size);
    height: var(--inventory-slot-size);
    min-width: 0;
    min-height: 0;
    justify-self: center;
    align-self: start;
}

.inventory-currency-panel {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
}

.currency-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
    min-height: 0;
}

.currency-balance-grid section {
    min-width: 0;
    min-height: 0;
    padding: 8px 8px 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(247, 239, 228, 0.035);
}

.currency-balance-grid h3 {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.currency-balance-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 34px;
    padding: 4px;
    border-radius: 7px;
}

.currency-balance-row + .currency-balance-row {
    margin-top: 4px;
}

.currency-balance-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #17181d;
    background: var(--gold);
    font-size: 0.8rem;
    font-weight: 950;
}

.currency-balance-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.currency-balance-row strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-home-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.inventory-currency-compact-panel {
    position: relative;
    z-index: 12;
    overflow: visible;
}

.inventory-currency-details {
    position: relative;
    width: min(100%, 430px);
}

.inventory-gold-summary {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    border: 1px solid rgba(227, 189, 99, 0.34);
    background: rgba(227, 189, 99, 0.08);
    cursor: pointer;
    list-style: none;
}

.inventory-gold-summary::-webkit-details-marker {
    display: none;
}

.inventory-gold-summary small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.inventory-currency-details[open] .inventory-gold-summary {
    border-color: rgba(227, 189, 99, 0.62);
    color: var(--gold);
}

.inventory-currency-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    padding: 12px;
    border: 1px solid rgba(227, 189, 99, 0.42);
    border-radius: 8px;
    background: rgba(20, 21, 27, 0.98);
    box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.52);
}

.inventory-currency-popover h3 {
    margin-bottom: 8px;
    color: var(--gold);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.admin-inventory-shell {
    display: grid;
    grid-template-columns: minmax(260px, 0.74fr) minmax(720px, 1.7fr) minmax(300px, 0.86fr);
    gap: 10px;
    width: min(1920px, calc(100vw - 20px));
    height: calc(100vh - 58px);
    margin: 8px auto;
    overflow: hidden;
}

.admin-inventory-dolls,
.admin-inventory-main,
.admin-inventory-side,
.admin-inventory-icons {
    min-width: 0;
    min-height: 0;
}

.admin-inventory-dolls {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.admin-inventory-doll-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
}

.admin-inventory-doll-card h2,
.admin-inventory-icons h2 {
    margin-bottom: 0;
}

.admin-inventory-doll-preview {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(7, 8, 12, 0.42);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.admin-inventory-doll-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
}

.admin-inventory-doll-card form,
.admin-inventory-icon-upload,
.admin-inventory-icon-label-form {
    display: grid;
    gap: 8px;
}

.admin-inventory-doll-card label,
.admin-inventory-icon-upload label,
.admin-inventory-icon-label-form label,
.admin-inventory-icon-picker label,
.admin-inventory-grant-search,
.admin-inventory-owner-search {
    display: grid;
    gap: 6px;
}

.admin-inventory-doll-card label span,
.admin-inventory-icon-upload label span,
.admin-inventory-icon-label-form label span,
.admin-inventory-icon-picker label span,
.admin-inventory-grant-search span,
.admin-inventory-owner-search span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-inventory-doll-card input,
.admin-inventory-icon-upload input,
.admin-inventory-icon-label-form input,
.admin-inventory-icon-picker input,
.admin-inventory-grant-search input,
.admin-inventory-owner-search input {
    min-width: 0;
    color: var(--muted);
}

.admin-inventory-doll-card button,
.admin-inventory-icon-upload button,
.admin-inventory-icon-label-form button,
.admin-inventory-icon-select-button {
    min-height: 34px;
    border: 1px solid rgba(227, 189, 99, 0.42);
    border-radius: 7px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.08);
    cursor: pointer;
    font-weight: 850;
}

.admin-inventory-doll-card button:hover,
.admin-inventory-icon-upload button:hover,
.admin-inventory-icon-label-form button:hover,
.admin-inventory-icon-select-button:hover,
.admin-inventory-doll-card button:focus-visible,
.admin-inventory-icon-upload button:focus-visible,
.admin-inventory-icon-label-form button:focus-visible,
.admin-inventory-icon-select-button:focus-visible {
    color: #17181d;
    background: var(--gold);
    outline: 0;
}

.admin-inventory-icon-label-form {
    padding: 8px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.admin-inventory-icon-label-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.admin-inventory-icon-label-form .ghost-danger-button {
    border-color: rgba(216, 106, 112, 0.5);
    color: #ffb3b8;
    background: rgba(216, 106, 112, 0.08);
}

.admin-inventory-icon-label-form .ghost-danger-button:hover,
.admin-inventory-icon-label-form .ghost-danger-button:focus-visible {
    color: #1b0d10;
    background: #ff9da5;
}

.admin-inventory-icon-label-form button:disabled,
.admin-inventory-icon-label-form input:disabled {
    cursor: default;
    opacity: 0.48;
}

.admin-inventory-main {
    --admin-inventory-editor-height: 628px;
    display: grid;
    grid-template-rows: minmax(var(--admin-inventory-editor-height), auto) minmax(280px, 1fr);
    gap: 10px;
}

.admin-inventory-editor {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: var(--admin-inventory-editor-height);
    overflow: hidden;
}

.admin-inventory-editor.is-empty {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: var(--admin-inventory-editor-height);
}

.admin-inventory-editor .admin-editor-head {
    position: relative;
    margin-bottom: 0;
    padding: 10px 14px;
}

.admin-inventory-editor-title {
    min-width: 0;
}

.admin-inventory-editor .admin-editor-head h1 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-inventory-editor .admin-editor-head p {
    position: absolute;
    top: 10px;
    left: 50%;
    margin-bottom: 0;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.admin-inventory-empty-editor {
    display: grid;
    height: 100%;
    min-height: 0;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px dashed rgba(247, 239, 228, 0.18);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(7, 8, 12, 0.22);
    text-align: center;
}

.admin-inventory-empty-editor h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    text-transform: uppercase;
}

.admin-inventory-empty-editor p {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-inventory-editor-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.admin-inventory-icon-picker {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-inventory-icon-select-button {
    width: 112px;
    min-height: 44px;
    line-height: 1.05;
}

.admin-inventory-selected-icon {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(227, 189, 99, 0.42);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(7, 8, 12, 0.42);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.admin-inventory-selected-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-inventory-fields {
    min-width: 0;
}

.admin-inventory-item-fields-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.18fr) minmax(190px, 1.18fr) minmax(150px, 1fr);
    grid-template-areas:
        "name name type rarity"
        "equip-slot weapon-style stackable storage"
        "damage-min damage-max damage-type armor"
        "healing-min healing-max weight physical"
        "description description description description";
    gap: 7px 10px;
    align-items: start;
    min-width: 0;
}

.admin-inventory-field-name {
    grid-area: name;
}

.admin-inventory-field-type {
    grid-area: type;
}

.admin-inventory-field-rarity {
    grid-area: rarity;
}

.admin-inventory-field-damage-min {
    grid-area: damage-min;
}

.admin-inventory-field-equip-slot {
    grid-area: equip-slot;
}

.admin-inventory-field-weapon-style {
    grid-area: weapon-style;
}

.admin-inventory-field-stackable {
    grid-area: stackable;
}

.admin-inventory-field-damage-max {
    grid-area: damage-max;
}

.admin-inventory-field-damage-type {
    grid-area: damage-type;
}

.admin-inventory-field-healing-min {
    grid-area: healing-min;
}

.admin-inventory-field-healing-max {
    grid-area: healing-max;
}

.admin-inventory-field-armor {
    grid-area: armor;
}

.admin-inventory-field-storage {
    grid-area: storage;
}

.admin-inventory-field-weight {
    grid-area: weight;
}

.admin-inventory-field-description {
    grid-area: description;
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr);
}

.admin-inventory-field-value {
    grid-area: value;
}

.admin-inventory-icon-value {
    grid-area: auto;
    justify-self: stretch;
    width: 150px;
}

.admin-inventory-field-physical {
    grid-area: physical;
}

.admin-inventory-editor label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.admin-inventory-editor label span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-inventory-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-inventory-editor label .admin-inventory-field-label-row {
    color: var(--muted);
}

.admin-inventory-editor label .admin-inventory-description-counter,
.admin-inventory-editor label [data-description-counter] {
    color: rgba(247, 239, 228, 0.58);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.admin-inventory-editor label [data-description-counter].is-full {
    color: #e3bd63;
}

.admin-inventory-value-preview {
    overflow: hidden;
    color: rgba(247, 239, 228, 0.62);
    font-size: 0.72rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-editor input,
.admin-inventory-editor select,
.admin-inventory-editor textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.admin-inventory-editor input,
.admin-inventory-editor select {
    min-height: 34px;
    padding: 6px 8px;
}

.admin-inventory-editor textarea {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 8px;
    resize: none;
    line-height: 1.35;
}

.admin-inventory-field-description textarea {
    height: 100%;
    min-height: 0;
    max-height: none;
    white-space: pre-wrap;
}

.admin-inventory-editor input[type="file"] {
    min-height: 0;
    padding: 0;
    color: var(--muted);
    background: transparent;
}

.admin-inventory-effects {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 8px;
    min-height: 0;
    overflow: visible;
    padding-right: 2px;
}

.admin-inventory-effects section {
    min-width: 0;
    padding: 6px 8px 7px;
    border: 1px solid rgba(227, 189, 99, 0.58);
    border-radius: 7px;
    background: rgba(227, 189, 99, 0.035);
}

.admin-inventory-effects section + section {
    border-color: rgba(112, 198, 255, 0.62);
    background: rgba(112, 198, 255, 0.035);
}

.admin-inventory-effects h2 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.admin-inventory-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
}

.admin-inventory-stat-grid.resistances {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1fr);
    grid-template-areas:
        "fire water wind earth poison"
        "lightning ice dark light magic";
}

.admin-inventory-resistance-fire {
    grid-area: fire;
}

.admin-inventory-resistance-water {
    grid-area: water;
}

.admin-inventory-resistance-wind {
    grid-area: wind;
}

.admin-inventory-resistance-earth {
    grid-area: earth;
}

.admin-inventory-resistance-lightning {
    grid-area: lightning;
}

.admin-inventory-resistance-ice {
    grid-area: ice;
}

.admin-inventory-resistance-dark {
    grid-area: dark;
}

.admin-inventory-resistance-light {
    grid-area: light;
}

.admin-inventory-resistance-poison {
    grid-area: poison;
}

.admin-inventory-resistance-magic {
    grid-area: magic;
}

.admin-inventory-stat-grid label {
    display: grid;
    gap: 4px;
}

.admin-inventory-stat-grid label span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.admin-inventory-stat-grid input {
    width: 100%;
    min-height: 30px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.admin-inventory-item-gallery {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.admin-inventory-vault-heading {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(0, max-content) minmax(112px, 1fr);
    align-items: end;
    gap: 8px;
}

.admin-inventory-vault-heading h2,
.admin-inventory-vault-heading > span {
    min-width: 0;
}

.admin-inventory-vault-heading h2 {
    justify-self: start;
}

.admin-inventory-vault-heading > span {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.admin-inventory-vault-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.admin-inventory-vault-tab {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 26px;
    padding: 0 7px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-bottom-color: rgba(247, 239, 228, 0.2);
    border-radius: 7px 7px 0 0;
    color: var(--muted);
    background: rgba(247, 239, 228, 0.035);
    font-size: 0.7rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.admin-inventory-vault-tab.active,
.admin-inventory-vault-tab:hover,
.admin-inventory-vault-tab:focus-visible {
    border-color: rgba(227, 189, 99, 0.58);
    color: var(--gold);
    background: rgba(227, 189, 99, 0.12);
    outline: 0;
}

.admin-inventory-item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.admin-inventory-empty-vault {
    grid-column: 1 / -1;
    display: grid;
    min-height: 86px;
    place-items: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-inventory-item-card {
    --item-rank-border: rgba(199, 202, 209, 0.5);
    display: grid;
    position: relative;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    min-height: 78px;
    overflow: hidden;
    padding: 8px 15px 8px 8px;
    border: 1px solid var(--item-rank-border);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.admin-inventory-item-card.ability-rank-e {
    --item-rank-border: rgba(199, 202, 209, 0.5);
}

.admin-inventory-item-card.ability-rank-d {
    --item-rank-border: rgba(247, 239, 228, 0.82);
}

.admin-inventory-item-card.ability-rank-c {
    --item-rank-border: #2ecc71;
}

.admin-inventory-item-card.ability-rank-b {
    --item-rank-border: #67b7ff;
}

.admin-inventory-item-card.ability-rank-a {
    --item-rank-border: var(--gold);
}

.admin-inventory-item-card.ability-rank-s {
    --item-rank-border: var(--purple);
}

.admin-inventory-item-card.ability-rank-sr {
    --item-rank-border: var(--orange);
}

.admin-inventory-item-card.ability-rank-ssr {
    --item-rank-border: var(--mythic-red);
}

.admin-inventory-item-card.ability-rank-g {
    --item-rank-border: #f4d27a;
}

.admin-inventory-item-card.selected,
.admin-inventory-item-card:hover,
.admin-inventory-item-card:focus-visible {
    background: color-mix(in srgb, var(--item-rank-border) 14%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--item-rank-border) 28%, transparent),
        0 0 18px color-mix(in srgb, var(--item-rank-border) 18%, transparent);
    outline: 0;
}

.admin-inventory-item-card.selected {
    border-color: var(--gold);
    background:
        linear-gradient(90deg, rgba(227, 189, 99, 0.13), transparent 52%),
        color-mix(in srgb, var(--item-rank-border) 16%, transparent);
    box-shadow:
        inset 0 0 0 1px rgba(227, 189, 99, 0.42),
        0 0 22px rgba(227, 189, 99, 0.22);
}

.admin-inventory-item-card.selected::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 6px;
    bottom: 10px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff0a8, var(--gold) 48%, #a77922);
    box-shadow: 0 0 12px rgba(227, 189, 99, 0.55);
}

.admin-inventory-item-card.selected strong {
    color: #fff1c1;
}

.admin-inventory-item-icon,
.admin-inventory-icon-choice {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.admin-inventory-item-icon {
    width: 58px;
    height: 58px;
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    font-weight: 950;
}

.admin-inventory-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-inventory-item-card strong,
.admin-inventory-item-card small {
    display: block;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-item-card small {
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-inventory-side {
    display: grid;
    grid-template-rows: auto minmax(260px, 0.82fr) minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.admin-inventory-icons {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.admin-inventory-grant-panel,
.admin-inventory-manage-panel {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(227, 189, 99, 0.32);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(227, 189, 99, 0.1), transparent 54%),
        rgba(7, 8, 12, 0.28);
}

.admin-inventory-manage-panel {
    grid-template-rows: auto auto minmax(74px, 0.34fr) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.admin-inventory-grant-panel p,
.admin-inventory-manage-panel p {
    margin: 0;
}

.admin-inventory-grant-panel strong,
.admin-inventory-grant-panel small,
.admin-inventory-manage-panel strong,
.admin-inventory-manage-panel small {
    display: block;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-grant-panel small,
.admin-inventory-grant-empty,
.admin-inventory-grant-results p,
.admin-inventory-owner-results p,
.admin-inventory-owned-items p {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-inventory-grant-search input,
.admin-inventory-owner-search input {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.admin-inventory-grant-results,
.admin-inventory-owner-results {
    display: grid;
    max-height: 180px;
    gap: 6px;
    overflow: auto;
}

.admin-inventory-owner-results {
    min-height: 0;
    max-height: none;
    align-content: start;
    padding-right: 2px;
}

.admin-inventory-owned-items {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.admin-inventory-owned-heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-inventory-owned-heading strong {
    color: var(--ink);
}

.admin-inventory-owned-heading span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-owned-list {
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.admin-inventory-owned-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    background: rgba(247, 239, 228, 0.045);
}

.admin-inventory-owned-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    color: #17181d;
    background: var(--gold);
    font-size: 0.82rem;
    font-weight: 950;
}

.admin-inventory-owned-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-inventory-owned-body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.admin-inventory-owned-remove-form {
    margin: 0;
}

.admin-inventory-owned-remove-form button {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(216, 106, 112, 0.5);
    border-radius: 7px;
    color: #ffb3b8;
    background: rgba(216, 106, 112, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
}

.admin-inventory-owned-remove-form button:hover,
.admin-inventory-owned-remove-form button:focus-visible {
    color: #1b0d10;
    background: #ff9da5;
    outline: 0;
}

.admin-inventory-grant-result button,
.admin-inventory-owner-result {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.045);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.admin-inventory-grant-result button:hover,
.admin-inventory-grant-result button:focus-visible,
.admin-inventory-owner-result:hover,
.admin-inventory-owner-result:focus-visible {
    border-color: rgba(227, 189, 99, 0.58);
    background: rgba(227, 189, 99, 0.12);
    outline: 0;
}

.admin-inventory-grant-result strong,
.admin-inventory-grant-result span,
.admin-inventory-grant-result small,
.admin-inventory-owner-result strong,
.admin-inventory-owner-result span,
.admin-inventory-owner-result small,
.admin-inventory-owned-body strong,
.admin-inventory-owned-body small {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-grant-result span,
.admin-inventory-owner-result span {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 850;
}

.admin-inventory-grant-result small,
.admin-inventory-owner-result small,
.admin-inventory-owned-body small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-inventory-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 98px;
    gap: 8px;
    align-content: start;
    align-items: start;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.admin-inventory-icon-choice {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    min-width: 0;
    height: 98px;
    padding: 7px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(247, 239, 228, 0.035);
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.admin-inventory-icon-choice.selected,
.admin-inventory-icon-choice:hover,
.admin-inventory-icon-choice:focus-visible {
    border-color: rgba(227, 189, 99, 0.68);
    background: rgba(227, 189, 99, 0.1);
    outline: 0;
}

.admin-inventory-icon-choice img {
    width: 48px;
    height: 48px;
    align-self: center;
    object-fit: contain;
}

.admin-inventory-icon-choice span {
    overflow: hidden;
    max-width: 100%;
    align-self: center;
    margin-top: 0;
    font-size: 0.62rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inventory-empty-icons {
    grid-column: 1 / -1;
    display: grid;
    min-height: 160px;
    place-items: center;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
}

.ability-section {
    display: flex;
    flex-direction: column;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 0;
}

.ability-section + .ability-section {
    margin-top: 0;
}

.ability-section h3 {
    margin-bottom: 9px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
}

.ability-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.ability-section-header h3 {
    margin-bottom: 0;
    text-align: left;
}

.ability-points-available {
    color: #7ee28f;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.ability-points-available.is-empty {
    color: var(--muted);
}

.ability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.ability-slot {
    position: relative;
    display: grid;
    min-height: 27px;
    overflow: hidden;
    border-radius: 8px;
    background-clip: padding-box;
    color: var(--ink);
    background: #3a3a39;
    font-size: 0.78rem;
}

.ability-slot-main {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 27px;
    padding: 5px 28px 5px 7px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.ability-slot-main:disabled {
    color: var(--muted);
    cursor: default;
    opacity: 0.66;
}

.ability-slot.ability-slot-locked,
.ability-slot.ability-slot-locked:hover {
    border-color: rgba(247, 239, 228, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

.ability-info-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    font-size: 0.62rem;
    line-height: 1;
    background: rgba(0, 0, 0, 0.2);
}

.ability-slot.ability-rank-d {
    border-color: rgba(247, 239, 228, 0.82);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.12);
}

.ability-slot.ability-rank-c {
    border-color: #2ecc71;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.16);
}

.ability-slot.ability-rank-b {
    border-color: #67b7ff;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(103, 183, 255, 0.16);
}

.ability-slot.ability-rank-a {
    border-color: var(--gold);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(227, 189, 99, 0.16);
}

.ability-slot.ability-rank-s {
    border-color: var(--purple);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(139, 98, 217, 0.14);
}

.ability-slot.ability-rank-sr {
    border-color: var(--orange);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(230, 148, 49, 0.16);
}

.ability-slot.ability-rank-ssr {
    border-color: var(--mythic-red);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 48, 79, 0.22), 0 0 10px rgba(255, 48, 79, 0.16);
}

.ability-slot.ability-rank-g {
    border-color: #f4d27a;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(244, 210, 122, 0.22), 0 0 12px rgba(255, 199, 220, 0.14);
}

.ability-effect-summary {
    margin: 12px 0 0;
}

.ability-effect-summary h4 {
    margin: 0 0 7px;
    font-size: 0.85rem;
}

.ability-effect-summary ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--gold);
}

.modal-divider {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.abilities-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.abilities-panel h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.modal {
    width: min(520px, calc(100% - 28px));
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--ink);
    background: #181a20;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(2px);
}

.modal h3 {
    margin-right: 34px;
    font-size: 1.35rem;
}

.modal p {
    color: var(--muted);
    line-height: 1.6;
}

.modal-note {
    margin-bottom: 0;
    color: var(--gold);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.modal-close::before,
.modal-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    border-radius: 1px;
    background: currentColor;
    content: "";
    transform-origin: center;
}

.modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.picker-list {
    display: grid;
    gap: 9px;
}

.picker-option {
    margin: 0;
}

.picker-list button {
    padding: 11px;
    border-color: var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #22242b;
}

.empty-option button {
    border-color: rgba(227, 189, 99, 0.42);
    background: rgba(227, 189, 99, 0.08);
}

.picker-context {
    margin: -6px 0 12px;
    color: var(--muted);
}

.picker-list strong,
.picker-list span,
.picker-list small {
    display: block;
}

.picker-list span {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.picker-effect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.picker-effect-list li {
    padding: 2px 6px;
    border: 1px solid rgba(227, 189, 99, 0.28);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.08);
    font-size: 0.72rem;
    line-height: 1.25;
}

.picker-list small {
    margin-top: 5px;
    color: var(--gold);
}

body.admin-page {
    overflow: auto;
}

.admin-shell {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    gap: 8px;
    width: min(1920px, calc(100vw - 16px));
    margin: 8px auto 18px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 50px;
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 62px);
    overflow: auto;
}

.admin-new-button,
.admin-actions button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 800;
}

.admin-new-button,
.admin-actions button {
    color: #17181d;
    background: var(--gold);
}

.ghost-button {
    padding: 0 13px;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.07);
}

.admin-character-group h2 {
    margin-bottom: 8px;
    font-size: 0.86rem;
}

.admin-character-list {
    display: grid;
    gap: 7px;
}

.admin-character-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #26272e;
}

.admin-character-list a.selected,
.admin-character-list a:hover {
    border-color: rgba(120, 203, 210, 0.5);
    background: rgba(120, 203, 210, 0.12);
}

.admin-character-list img {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    object-fit: cover;
}

.admin-character-list strong,
.admin-character-list small {
    display: block;
}

.admin-character-list small,
.admin-empty {
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-editor {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.admin-editor-head,
.admin-card,
.admin-notice,
.admin-errors {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
}

.admin-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
}

.admin-editor-head h1 {
    margin: 0;
    padding: 0;
    font-size: clamp(2.2rem, 3vw, 3.6rem);
    line-height: 0.95;
}

.admin-editor-head p {
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
}

.account-registration-toggle {
    margin: 0;
}

.registration-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.04);
    cursor: pointer;
}

.registration-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.registration-toggle-track {
    position: relative;
    width: 46px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid rgba(216, 106, 112, 0.58);
    border-radius: 999px;
    background: rgba(216, 106, 112, 0.16);
    transition: border-color 160ms ease, background 160ms ease;
}

.registration-toggle-track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffdadd;
    content: "";
    transition: transform 160ms ease, background 160ms ease;
}

.registration-toggle-input:checked + .registration-toggle-track {
    border-color: rgba(72, 169, 97, 0.68);
    background: rgba(72, 169, 97, 0.2);
}

.registration-toggle-input:checked + .registration-toggle-track::after {
    background: #d9f5de;
    transform: translateX(22px);
}

.registration-toggle-input:focus-visible + .registration-toggle-track {
    outline: 2px solid rgba(227, 189, 99, 0.78);
    outline-offset: 3px;
}

.registration-toggle-copy {
    display: grid;
    gap: 1px;
    min-width: 86px;
}

.registration-toggle-copy strong {
    color: var(--ink);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.registration-toggle-copy small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-actions button {
    padding: 0 15px;
}

.admin-actions .admin-new-button {
    padding: 0 15px;
}

.admin-notice,
.admin-errors {
    padding: 10px 14px;
}

.admin-notice {
    border-color: rgba(72, 169, 97, 0.55);
    color: #d9f5de;
    background: rgba(72, 169, 97, 0.14);
}

.admin-errors {
    border-color: rgba(216, 106, 112, 0.62);
    color: #ffdadd;
    background: rgba(216, 106, 112, 0.13);
}

.admin-errors p {
    margin: 0;
}

.admin-errors p + p {
    margin-top: 5px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(330px, 1fr) minmax(330px, 1fr);
    gap: 8px;
    align-items: start;
}

.admin-character-editor-layout {
    grid-template-columns: minmax(560px, 1.76fr) minmax(360px, 1.08fr);
    align-items: start;
}

.admin-portrait-stack,
.admin-side-column {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.admin-primary-portrait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    min-width: 0;
}

.admin-creation-portraits-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-side-top-column {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.admin-identity-editor {
    align-self: stretch;
}

.admin-card {
    min-width: 0;
    padding: 14px;
}

.admin-card-wide {
    grid-column: span 2;
}

.admin-card-full {
    grid-column: 1 / -1;
}

.admin-character-basics {
    display: grid;
    grid-column: span 2;
    grid-template-rows: auto 1fr;
    gap: 8px;
    min-width: 0;
    align-self: stretch;
}

.admin-basics-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
    gap: 8px;
    min-width: 0;
}

.admin-basics-grid > .admin-card {
    height: 100%;
}

.admin-card h2 {
    margin-bottom: 12px;
}

.admin-card h3 {
    margin-bottom: 9px;
    font-size: 0.95rem;
}

.admin-portrait-editor h3 {
    margin: 14px 0 10px;
    color: var(--gold);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.admin-primary-portrait-editor {
    display: grid;
    gap: 10px;
}

.admin-primary-portrait-editor h2 {
    color: var(--gold);
}

.admin-portrait-preview {
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #101116;
}

.admin-portrait-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.admin-full-portrait-preview {
    display: grid;
    min-height: 540px;
    margin-bottom: 0;
    place-items: center;
    background: #f6f3ee;
}

.admin-full-portrait-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.admin-optional-portrait-preview {
    min-height: 220px;
}

.admin-party-portrait-preview {
    display: grid;
    grid-template-columns: 1fr 72px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.admin-party-portrait-preview span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-party-portrait-preview img {
    width: 72px;
    height: 72px;
    border-radius: 7px;
    object-fit: cover;
    object-position: center 22%;
}

[data-elven-portrait-panel].is-inactive {
    opacity: 0.64;
}

[data-elven-portrait-panel].is-inactive .admin-active-portrait-image,
[data-elven-portrait-panel].is-inactive .admin-active-placeholder {
    display: none;
}

[data-elven-portrait-panel].is-inactive input {
    cursor: not-allowed;
}

.admin-image-placeholder,
.admin-thumb-placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
}

.admin-thumb-placeholder {
    width: 72px;
    height: 72px;
}

.admin-portrait-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-creation-portrait-slot {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.admin-creation-portrait-slot h3 {
    margin: 0;
    color: var(--gold);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.admin-creation-portraits-editor .creation-portrait-admin-card {
    align-content: start;
}

.admin-creation-portraits-editor h3 {
    margin: 0;
    color: var(--gold);
    font-size: 0.88rem;
    text-transform: uppercase;
}

.admin-creation-portraits-editor .creation-admin-preview.portrait-preview {
    aspect-ratio: 1 / 1;
    min-height: 300px;
}

.admin-creation-portraits-editor .creation-admin-preview.portrait-preview img {
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.admin-creation-portrait-image,
.admin-creation-full-image {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(7, 8, 12, 0.44);
}

.admin-creation-portrait-image {
    aspect-ratio: 1 / 1;
    min-height: 220px;
}

.admin-creation-full-image {
    min-height: 320px;
}

.admin-creation-portrait-image img,
.admin-creation-full-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(255, 198, 244, 0.38))
        drop-shadow(0 0 26px rgba(128, 209, 255, 0.24));
}

.admin-elven-portrait-editor .admin-creation-portrait-image img,
.admin-elven-portrait-editor .admin-creation-full-image img {
    filter:
        drop-shadow(0 0 14px rgba(132, 255, 206, 0.36))
        drop-shadow(0 0 26px rgba(135, 208, 255, 0.28));
}

.admin-field-grid {
    display: grid;
    gap: 10px;
}

.admin-field-grid.one {
    grid-template-columns: 1fr;
}

.admin-field-grid.two {
    grid-template-columns: 1fr 1fr;
}

.admin-field-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.personality-tag-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.admin-personality-editor {
    display: grid;
    align-content: start;
}

.admin-backstory-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
}

.admin-card.admin-backstory-editor label {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    align-content: start;
}

.admin-card.admin-backstory-editor textarea {
    align-self: start;
    height: 100%;
    min-height: 220px;
}

.admin-titles-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
    min-height: 305px;
}

.admin-title-slot-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 100%;
}

.admin-title-slot-grid label {
    grid-template-rows: auto minmax(44px, 1fr);
}

.admin-title-slot-grid select {
    min-height: 52px;
}

.admin-location-layout {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.admin-location-fields {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.admin-location-preview {
    display: grid;
    overflow: hidden;
    width: 124px;
    height: 124px;
    border: 1px solid var(--line);
    border-radius: 5px;
    place-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
}

.admin-location-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full-field {
    grid-column: 1 / -1;
}

.admin-card label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.admin-card label span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-card label small {
    color: var(--faint);
    font-size: 0.72rem;
    line-height: 1.25;
}

.admin-card input,
.admin-card select,
.admin-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.admin-card input,
.admin-card select {
    min-height: 38px;
    padding: 7px 9px;
}

.admin-card textarea {
    padding: 9px;
    resize: vertical;
    line-height: 1.45;
}

.admin-card textarea[data-auto-grow-textarea] {
    overflow: hidden;
    resize: none;
}

.admin-card input[readonly] {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
}

.admin-card input[type="file"] {
    min-height: 0;
}

.creation-admin-form {
    gap: 8px;
}

.creation-admin-assets,
.creation-admin-compact-grid,
.creation-dialogue-grid {
    display: grid;
    gap: 10px;
}

.creation-admin-assets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.creation-admin-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creation-admin-compact-grid.portals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creation-dialogue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creation-flow-tabs {
    margin-bottom: 2px;
}

.creation-tab-panel[hidden] {
    display: none;
}

.creation-admin-help {
    margin: -2px 0 12px;
    color: var(--muted);
    font-size: 0.82rem;
}

.creation-size-fields {
    margin-top: 8px;
}

.creation-size-fields small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.creation-upload-control {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.creation-upload-control .ghost-button {
    width: fit-content;
    min-height: 34px;
    padding: 6px 10px;
}

.creation-upload-control small {
    overflow: hidden;
    color: var(--faint);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creation-admin-asset,
.creation-portrait-admin-card {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.creation-admin-preview {
    display: grid;
    min-height: 118px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(7, 8, 12, 0.44);
}

.creation-admin-preview.portrait-preview {
    min-height: 210px;
}

.creation-admin-preview img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
}

.creation-admin-preview.portrait-preview img {
    max-height: 300px;
    object-fit: cover;
    object-position: center top;
}

.creation-admin-preview.full-body-preview {
    min-height: 300px;
}

.creation-admin-preview.full-body-preview img {
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.creation-admin-empty-preview {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.creation-story-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.creation-story-admin-column {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
}

.creation-story-admin-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.creation-story-admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    cursor: pointer;
    list-style: none;
}

.creation-story-admin-card-head::-webkit-details-marker {
    display: none;
}

.creation-story-admin-card-head::before {
    color: var(--muted);
    content: ">";
    font-size: 0.82rem;
    font-weight: 900;
}

.creation-story-admin-card[open] > .creation-story-admin-card-head::before {
    content: "v";
}

.creation-story-admin-card-head h3 {
    flex: 1;
    margin: 0;
    color: var(--gold);
    font-size: 0.92rem;
    text-transform: uppercase;
}

.creation-story-admin-card-body {
    display: grid;
    gap: 9px;
    padding-top: 10px;
}

.creation-admin-collapsible {
    display: block;
}

.creation-admin-collapsible > .creation-admin-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.creation-admin-collapsible > .creation-admin-section-head::-webkit-details-marker {
    display: none;
}

.creation-admin-collapsible > .creation-admin-section-head::before {
    color: var(--muted);
    content: ">";
    font-size: 0.86rem;
    font-weight: 900;
}

.creation-admin-collapsible[open] > .creation-admin-section-head::before {
    content: "v";
}

.creation-admin-collapsible > .creation-admin-section-head h2 {
    margin: 0;
}

.creation-admin-collapsible[open] > .creation-admin-section-head {
    margin-bottom: 10px;
}

.creation-story-admin-card .toggle-line {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.creation-story-admin-card .toggle-line input {
    min-height: 0;
}

.creation-story-variant-list {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(247, 239, 228, 0.12);
}

.creation-story-variant-editor {
    border: 1px solid rgba(227, 189, 99, 0.22);
    border-radius: 7px;
    background: rgba(227, 189, 99, 0.035);
}

.creation-story-variant-editor[open] {
    padding: 0 8px 8px;
}

.creation-story-variant-editor > summary {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

.creation-story-variant-editor > summary strong {
    color: var(--success);
    font-size: 0.72rem;
}

.creation-story-variant-active {
    margin-bottom: 8px;
}

.creation-story-sprite-gender-editor {
    border: 1px solid rgba(227, 189, 99, 0.16);
    border-radius: 7px;
    background: rgba(227, 189, 99, 0.025);
}

.creation-story-sprite-gender-editor[open] {
    padding: 0 8px 8px;
}

.creation-story-sprite-gender-editor > summary {
    padding: 8px;
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

.creation-story-sprite-gender-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.creation-story-sprite-gender-card {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.creation-story-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.creation-story-preview-grid > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.creation-story-preview-grid > div > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
}

.creation-admin-preview.story-preview {
    min-height: 170px;
}

.creation-admin-preview.story-preview img {
    max-height: 260px;
    object-fit: contain;
}

.creation-story-beat-list {
    display: grid;
    gap: 8px;
}

.creation-story-beat-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 8, 12, 0.22);
}

.creation-story-beat-editor summary {
    padding: 9px 10px;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.creation-story-carry-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0 10px 10px;
}

.creation-story-beat-editor .creation-story-carry-row label {
    margin: 0;
}

.creation-story-beat-editor .creation-story-carry-row input[type="checkbox"] {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
}

.creation-story-beat-editor .creation-story-carry-row .toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    white-space: nowrap;
}

.creation-story-carry-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 11px;
    min-width: 0;
}

.creation-story-carry-options > span {
    color: var(--faint);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.creation-story-beat-editor .creation-story-carry-options label {
    margin: 0;
}

.creation-story-click-hint {
    color: var(--faint);
    font-size: 0.72rem;
    line-height: 1.35;
}

.creation-story-beat-editor label,
.creation-story-sprite-admin-grid {
    margin: 0 10px 10px;
}

.creation-story-sprite-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.creation-story-sprite-admin-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.creation-story-sprite-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.creation-story-sprite-control-grid label {
    margin: 0;
}

.creation-admin-preview.story-sprite-preview {
    min-height: 130px;
}

.creation-admin-preview.story-sprite-preview img {
    max-height: 160px;
    object-fit: contain;
}

.creation-portrait-admin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.account-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.account-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: end;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.account-search-bar label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.account-search-bar label span,
.account-search-bar small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.account-search-bar input {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.account-search-bar button,
.account-search-bar .ghost-button {
    min-height: 36px;
}

.currency-admin-help {
    margin: -2px 0 12px;
    color: var(--muted);
    font-size: 0.82rem;
}

.currency-tabs {
    margin-bottom: 2px;
}

.currency-tab-panel[hidden] {
    display: none;
}

.currency-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.currency-admin-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(247, 239, 228, 0.035);
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview {
    --coin-display-preview-size: 144px;
    position: relative;
}

.currency-admin-card.coin-copper {
    border-color: rgba(183, 101, 45, 0.72);
}

.currency-admin-card.coin-silver {
    border-color: rgba(202, 210, 218, 0.72);
}

.currency-admin-card.coin-gold {
    border-color: rgba(227, 189, 99, 0.76);
}

.currency-admin-card.coin-royal-gold {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 217, 122, 0.16), transparent 38%) padding-box,
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            rgba(255, 217, 122, 0.86) 0%,
            rgba(255, 217, 122, 0.86) 24%,
            rgba(120, 203, 210, 0.7) 46%,
            rgba(227, 189, 99, 0.62) 54%,
            rgba(255, 217, 122, 0.86) 76%,
            rgba(255, 217, 122, 0.86) 100%
        ) border-box;
    box-shadow: inset 0 0 0 1px rgba(255, 217, 122, 0.12), 0 0 18px rgba(227, 189, 99, 0.12);
}

.currency-admin-card.coin-platinum {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(208, 229, 236, 0.16), transparent 40%) padding-box,
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            rgba(208, 229, 236, 0.86) 0%,
            rgba(208, 229, 236, 0.86) 24%,
            rgba(120, 203, 210, 0.7) 46%,
            rgba(227, 189, 99, 0.62) 54%,
            rgba(208, 229, 236, 0.86) 76%,
            rgba(208, 229, 236, 0.86) 100%
        ) border-box;
    box-shadow: inset 0 0 0 1px rgba(208, 229, 236, 0.12), 0 0 18px rgba(174, 218, 231, 0.11);
}

.currency-admin-card.coin-mithril {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(142, 219, 255, 0.18), transparent 42%) padding-box,
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            rgba(142, 219, 255, 0.88) 0%,
            rgba(142, 219, 255, 0.88) 24%,
            rgba(120, 203, 210, 0.7) 46%,
            rgba(227, 189, 99, 0.62) 54%,
            rgba(142, 219, 255, 0.88) 76%,
            rgba(142, 219, 255, 0.88) 100%
        ) border-box;
    box-shadow: inset 0 0 0 1px rgba(142, 219, 255, 0.16), 0 0 22px rgba(142, 219, 255, 0.12);
}

.currency-admin-card.gem-tier-common {
    border-color: rgba(216, 212, 200, 0.72);
}

.currency-admin-card.gem-tier-uncommon {
    border-color: rgba(95, 228, 127, 0.72);
}

.currency-admin-card.gem-tier-rare {
    border-color: rgba(120, 203, 255, 0.76);
}

.currency-admin-card.gem-tier-precious {
    border-color: rgba(167, 128, 255, 0.78);
}

.currency-admin-card.gem-tier-legendary {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(227, 189, 99, 0.16), transparent 40%) padding-box,
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            rgba(227, 189, 99, 0.86) 0%,
            rgba(227, 189, 99, 0.86) 24%,
            rgba(120, 203, 210, 0.7) 46%,
            rgba(167, 128, 255, 0.64) 54%,
            rgba(227, 189, 99, 0.86) 76%,
            rgba(227, 189, 99, 0.86) 100%
        ) border-box;
    box-shadow: inset 0 0 0 1px rgba(227, 189, 99, 0.16), 0 0 20px rgba(227, 189, 99, 0.08);
}

.currency-admin-card.gem-tier-mythic {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 76, 92, 0.16), transparent 42%) padding-box,
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            rgba(255, 76, 92, 0.88) 0%,
            rgba(255, 76, 92, 0.88) 24%,
            rgba(167, 128, 255, 0.7) 46%,
            rgba(247, 239, 228, 0.62) 54%,
            rgba(255, 76, 92, 0.88) 76%,
            rgba(255, 76, 92, 0.88) 100%
        ) border-box;
    box-shadow: inset 0 0 0 1px rgba(255, 76, 92, 0.14), 0 0 20px rgba(255, 76, 92, 0.1);
}

.currency-admin-card-head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.currency-admin-card.coin-mithril .currency-admin-card-head {
    grid-template-columns: 114px minmax(0, 1fr);
}

.currency-admin-card-head h3 {
    margin: 0;
    color: var(--gold);
    font-size: 1.05rem;
    text-transform: uppercase;
}

.currency-admin-card-head small {
    color: var(--muted);
    font-weight: 800;
}

.currency-previous-rate {
    display: block;
    margin-top: 4px;
    color: #82f09a;
    font-size: 0.78rem;
    font-weight: 900;
}

.currency-admin-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 8, 12, 0.44);
}

.currency-admin-card.coin-mithril .currency-admin-icon {
    width: 114px;
    height: 72px;
}

.currency-admin-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.currency-admin-display-preview {
    display: grid;
    min-height: 120px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 8, 12, 0.34);
}

.currency-admin-display-preview img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-admin-card-head {
    padding-right: calc(var(--coin-display-preview-size) + 12px);
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-admin-display-preview {
    position: absolute;
    top: 8px;
    right: 10px;
    width: var(--coin-display-preview-size);
    height: var(--coin-display-preview-size);
    min-height: 0;
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-admin-display-preview img {
    height: 100%;
    max-height: none;
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-coin-field-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-coin-field-grid > label:nth-child(-n + 2) {
    grid-column: span 2;
}

.currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-coin-field-grid > label:nth-child(n + 3) {
    grid-column: span 3;
}

.currency-coin-field-grid > label > span small {
    margin-left: 4px;
    color: var(--faint);
    font-size: 0.72rem;
    font-weight: 700;
}

.currency-coin-field-grid input[readonly] {
    color: var(--ink);
    background: #25262d;
}

.currency-admin-empty {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.currency-active-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.currency-new-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.currency-new-description {
    grid-column: 1 / -1;
}

.currency-player-balance-card {
    gap: 14px;
}

.currency-character-search-panel {
    display: grid;
    gap: 8px;
    max-width: 720px;
}

.currency-character-search {
    display: grid;
    gap: 5px;
}

.currency-character-search span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.currency-character-search input {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.currency-character-results {
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
    padding-right: 2px;
}

.currency-character-results p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.currency-character-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name state"
        "detail state"
        "meta state";
    gap: 2px 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.045);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.currency-character-result::after {
    grid-area: state;
    content: "Select";
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-character-result.selected::after {
    content: "Selected";
    color: #83d69e;
}

.currency-character-result:hover,
.currency-character-result:focus-visible {
    border-color: rgba(227, 189, 99, 0.58);
    background: rgba(227, 189, 99, 0.12);
    outline: 0;
}

.currency-character-result strong,
.currency-character-result span,
.currency-character-result small {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.currency-character-result strong {
    grid-area: name;
}

.currency-character-result span {
    grid-area: detail;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 850;
}

.currency-character-result small {
    grid-area: meta;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.currency-selected-character,
.currency-star-crystal-editor,
.currency-balance-row-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(247, 239, 228, 0.13);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.currency-selected-character span,
.currency-star-crystal-summary span,
.currency-balance-editor h3 {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-selected-character strong {
    display: block;
    font-size: 1.25rem;
}

.currency-selected-character small,
.currency-star-crystal-head small,
.currency-balance-row-card small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.currency-star-crystal-editor {
    border-color: rgba(120, 203, 210, 0.36);
    background:
        radial-gradient(circle at 0 0, rgba(120, 203, 210, 0.14), transparent 34%),
        rgba(0, 0, 0, 0.2);
}

.currency-star-crystal-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.currency-star-crystal-head h3,
.currency-balance-editor h3 {
    margin: 0;
}

.currency-star-crystal-summary,
.currency-balance-grid {
    display: grid;
    gap: 10px;
}

.currency-star-crystal-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.currency-star-crystal-summary > div,
.currency-star-crystal-summary > label {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.18);
}

.currency-star-crystal-summary .currency-star-crystal-current {
    border-color: rgba(227, 189, 99, 0.34);
    background: rgba(227, 189, 99, 0.08);
}

.currency-star-crystal-summary strong {
    font-size: 1.35rem;
}

.currency-balance-editor {
    display: grid;
    gap: 10px;
}

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

.currency-balance-row-card header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.currency-balance-row-card header > div {
    min-width: 0;
}

.currency-admin-empty-state {
    color: var(--muted);
    font-weight: 800;
}

.account-overview-card {
    display: grid;
    gap: 14px;
}

.account-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.account-overview-head > div:first-child {
    min-width: 0;
}

.account-overview-head h2 {
    margin-bottom: 2px;
}

.account-overview-head span,
.account-meta-grid span,
.account-character-row small,
.account-party-list small {
    color: var(--muted);
    font-size: 0.76rem;
}

.account-admin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid rgba(227, 189, 99, 0.52);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.1);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.account-admin-badge.master {
    border-color: rgba(244, 210, 122, 0.82);
    color: #f4d27a;
    background: rgba(244, 210, 122, 0.15);
    box-shadow: inset 0 0 0 1px rgba(244, 210, 122, 0.18);
}

.account-admin-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.account-admin-controls form {
    margin: 0;
}

.account-admin-controls .ghost-button,
.account-admin-controls .ghost-danger-button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.account-meta-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(247, 239, 228, 0.04);
}

.account-character-section {
    display: grid;
    gap: 8px;
}

.account-character-section h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    text-transform: uppercase;
}

.account-character-row,
.account-party-list a,
.account-party-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #24262d;
}

.account-character-row img,
.account-party-list img {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    object-fit: cover;
    background: #f7f4ef;
}

.account-character-row strong,
.account-character-row small,
.account-party-list strong,
.account-party-list small {
    display: block;
}

.account-party-list,
.shared-recruit-grid {
    display: grid;
    gap: 7px;
}

.account-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.account-row-actions form {
    margin: 0;
}

.account-row-actions .ghost-button,
.account-row-actions .ghost-danger-button {
    min-height: 30px;
    padding-inline: 10px;
}

.ghost-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 106, 112, 0.48);
    border-radius: 7px;
    color: #ffdadd;
    background: rgba(216, 106, 112, 0.12);
    cursor: pointer;
    font-weight: 800;
}

.shared-recruit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shared-recruit-grid .account-character-row {
    grid-template-columns: 48px minmax(0, 1fr);
}

.admin-resistance-editor {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.admin-resistance-editor section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.admin-login-shell {
    display: grid;
    min-height: calc(100vh - 42px);
    padding: 18px;
    place-items: center;
}

.admin-login-card {
    display: grid;
    gap: 14px;
    width: min(460px, 100%);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.admin-login-card h1 {
    padding: 0;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.admin-login-card label {
    display: grid;
    gap: 6px;
}

.admin-login-card label span,
.admin-login-note {
    color: var(--muted);
}

.admin-login-card input {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.admin-login-card button {
    min-height: 40px;
    border: 1px solid rgba(227, 189, 99, 0.65);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    cursor: pointer;
    font-weight: 800;
}

.admin-login-note {
    margin-bottom: 0;
    line-height: 1.45;
}

.admin-ability-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-ability-points-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-ability-points-grid label {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(227, 189, 99, 0.06);
}

.admin-ability-editor section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.admin-ability-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-ability-slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 6px;
    min-width: 0;
}

.status-summary-list {
    display: grid;
    gap: 7px;
}

.status-summary-list span {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.78rem;
}

.rules-form-grid {
    display: grid;
    gap: 8px;
}

.rules-rank-grid,
.rules-tier-grid,
.level-tier-grid,
.xp-stage-grid,
.secondary-rule-grid,
.secondary-modifier-grid {
    display: grid;
    gap: 8px;
}

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

.rules-tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

.secondary-rule-grid,
.secondary-modifier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rules-tier-row,
.level-tier-row,
.xp-stage-row,
.secondary-rule-grid section {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.rules-tier-row.none {
    border-left-color: #777;
}

.rules-tier-row.common {
    border-left-color: #f1f1f1;
}

.rules-tier-row.uncommon {
    border-left-color: var(--green);
}

.rules-tier-row.rare {
    border-left-color: var(--blue);
}

.rules-tier-row.epic {
    border-left-color: var(--purple);
}

.rules-tier-row.immune {
    border-left-color: var(--orange);
}

.rules-tier-row strong,
.level-tier-row header strong,
.xp-stage-row header strong,
.secondary-rule-grid header strong {
    display: block;
}

.level-tier-row header small,
.xp-stage-row header small,
.secondary-rule-grid header small {
    color: var(--muted);
}

.admin-helper-text {
    margin: -3px 0 12px;
    color: var(--muted);
    line-height: 1.45;
}

.admin-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-tab-row a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(247, 239, 228, 0.06);
    font-weight: 800;
}

.admin-tab-row a.active {
    border-color: rgba(227, 189, 99, 0.72);
    color: #17181d;
    background: var(--gold);
}

.admin-tab-row span {
    color: inherit;
    opacity: 0.72;
    font-size: 0.76rem;
}

.audio-context-panel,
.audio-library-panel {
    display: grid;
    gap: 14px;
}

.audio-music-card,
.audio-slide-music-section,
.audio-voice-section {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.audio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.audio-card-head h3 {
    margin: 0;
}

.audio-card-head > span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.audio-admin-form .toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.audio-admin-form .toggle-line input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

.audio-preview-row {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.audio-preview-row audio {
    width: min(100%, 620px);
    height: 38px;
}

.audio-empty-preview {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.14);
    font-size: 0.82rem;
    font-weight: 800;
}

.audio-music-fields,
.audio-playback-fields {
    align-items: end;
}

.audio-slide-music-list {
    display: grid;
    gap: 10px;
}

.audio-slide-music-row {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.audio-slide-music-row.inactive {
    opacity: 0.72;
}

.audio-slide-music-row h4 {
    margin: 0;
    color: var(--gold);
}

.audio-slide-music-row h5 {
    margin: 2px 0 -2px;
    color: var(--ink);
    font-size: 0.86rem;
    text-transform: uppercase;
}

.audio-slide-ambience-block {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.audio-heaven-sound-cues {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.audio-voice-list {
    display: grid;
    gap: 10px;
}

.audio-voice-row {
    display: grid;
    grid-template-columns: minmax(280px, 0.55fr) minmax(680px, 1.45fr);
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
}

.audio-heaven-effect-row {
    background: rgba(90, 76, 132, 0.14);
}

.audio-voice-text {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.audio-voice-text strong {
    color: var(--gold);
}

.audio-voice-text p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-line;
}

.audio-voice-controls {
    display: grid;
    grid-template-columns: minmax(210px, max-content) minmax(240px, 0.8fr) minmax(300px, 1fr) 96px;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.audio-voice-toggle {
    grid-column: 1;
}

.audio-voice-speaker {
    grid-column: 2 / -1;
}

.audio-voice-path {
    grid-column: 1 / 4;
}

.audio-voice-volume {
    grid-column: 4;
}

.audio-voice-volume input {
    width: 96px;
    min-width: 0;
}

.audio-voice-upload {
    grid-column: 1 / 3;
}

.audio-voice-preview {
    grid-column: 3 / -1;
}

.audio-voice-preview audio {
    width: 100%;
}

.audio-hero-voice-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(210px, max-content) minmax(320px, 1fr) 96px;
    align-items: end;
    gap: 10px;
    min-width: 0;
    padding: 8px 0;
}

.audio-hero-voice-fields + .audio-hero-voice-fields {
    border-top: 1px solid var(--line);
}

.audio-hero-voice-fields .audio-voice-toggle {
    grid-column: 1;
}

.audio-hero-voice-fields .audio-voice-path {
    grid-column: 2;
}

.audio-hero-voice-fields .audio-voice-volume {
    grid-column: 3;
}

.audio-hero-voice-fields .audio-voice-upload {
    grid-column: 1 / 2;
}

.audio-hero-voice-fields .audio-voice-preview {
    grid-column: 2 / -1;
}

.audio-effect-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(120px, 0.45fr) minmax(260px, 1.25fr) minmax(220px, 0.9fr);
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.audio-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.audio-library-tabs {
    padding-bottom: 2px;
}

.audio-library-sections,
.audio-library-section {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.audio-library-section {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.audio-library-section h3 {
    margin: 0;
    color: var(--gold);
}

.audio-library-cleanup-actions,
.audio-library-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.audio-library-cleanup-actions {
    justify-content: flex-end;
}

.audio-library-actions {
    justify-content: flex-start;
}

.audio-library-cleanup-actions .ghost-danger-button,
.audio-library-actions .ghost-danger-button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.72rem;
}

.audio-library-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.audio-library-item code {
    color: var(--muted);
    overflow-wrap: anywhere;
    white-space: normal;
}

.audio-library-usage-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.audio-library-usage-list span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(227, 189, 99, 0.28);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(227, 189, 99, 0.08);
    font-size: 0.78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.audio-library-usage-list b {
    color: var(--gold);
}

@media (max-width: 840px) {
    .audio-voice-row,
    .audio-voice-controls,
    .audio-effect-fields {
        grid-template-columns: 1fr;
    }
}

.ability-admin-groups,
.ability-admin-class-group,
.ability-admin-rank-group,
.ability-admin-list,
.ability-admin-card,
.ability-effect-editor {
    display: grid;
    gap: 10px;
}

.ability-admin-class-group > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.ability-admin-class-group > summary::-webkit-details-marker,
.ability-admin-rank-group > summary::-webkit-details-marker {
    display: none;
}

.ability-admin-class-group > summary::before,
.ability-admin-rank-group > summary::before {
    content: ">";
    color: var(--muted);
    font-size: 0.82rem;
}

.ability-admin-class-group[open] > summary::before,
.ability-admin-rank-group[open] > summary::before {
    transform: rotate(90deg);
}

.ability-admin-class-group > summary span,
.ability-admin-rank-group > summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.ability-admin-class-group > summary strong {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ability-admin-class-group > summary small,
.ability-admin-rank-group > summary small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.ability-admin-rank-group {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(247, 239, 228, 0.1);
}

.ability-admin-rank-group > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.ability-admin-rank-group > summary span {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ability-admin-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ability-admin-card {
    --ability-rank-border: var(--line);
    --ability-rank-glow: rgba(247, 239, 228, 0.08);
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ability-rank-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.ability-admin-card.ability-rank-e {
    --ability-rank-border: rgba(247, 239, 228, 0.28);
    --ability-rank-glow: rgba(247, 239, 228, 0.08);
}

.ability-admin-card.ability-rank-d {
    --ability-rank-border: rgba(247, 239, 228, 0.82);
    --ability-rank-glow: rgba(247, 239, 228, 0.1);
}

.ability-admin-card.ability-rank-c {
    --ability-rank-border: #2ecc71;
    --ability-rank-glow: rgba(46, 204, 113, 0.12);
}

.ability-admin-card.ability-rank-b {
    --ability-rank-border: #67b7ff;
    --ability-rank-glow: rgba(103, 183, 255, 0.12);
}

.ability-admin-card.ability-rank-a {
    --ability-rank-border: var(--gold);
    --ability-rank-glow: rgba(227, 189, 99, 0.12);
}

.ability-admin-card.ability-rank-s {
    --ability-rank-border: var(--purple);
    --ability-rank-glow: rgba(139, 98, 217, 0.12);
}

.ability-admin-card.ability-rank-sr {
    --ability-rank-border: var(--orange);
    --ability-rank-glow: rgba(230, 148, 49, 0.12);
}

.ability-admin-card.ability-rank-ssr {
    --ability-rank-border: var(--mythic-red);
    --ability-rank-glow: rgba(255, 48, 79, 0.16);
}

.ability-admin-card.ability-rank-g {
    --ability-rank-border: #f4d27a;
    --ability-rank-glow: rgba(255, 199, 220, 0.16);
}

.ability-admin-card.ability-type-passive {
    border-left-width: 3px;
    box-shadow: inset 0 0 0 1px var(--ability-rank-glow);
}

.ability-admin-card.ability-type-active {
    border-color: transparent;
    background:
        linear-gradient(#202128, #202128) padding-box,
        linear-gradient(
            90deg,
            var(--ability-rank-border) 0%,
            var(--ability-rank-border) 24%,
            rgba(120, 203, 210, 0.7) 46%,
            rgba(227, 189, 99, 0.62) 54%,
            var(--ability-rank-border) 76%,
            var(--ability-rank-border) 100%
        ) border-box;
    box-shadow:
        inset 0 0 0 1px var(--ability-rank-glow),
        0 0 14px rgba(120, 203, 210, 0.09),
        0 0 18px var(--ability-rank-glow);
}

.ability-admin-card.ability-type-active.ability-rank-ssr {
    box-shadow:
        inset 0 0 0 1px var(--ability-rank-glow),
        0 0 14px rgba(227, 189, 99, 0.08),
        0 0 18px rgba(255, 48, 79, 0.12);
}

.ability-admin-card.ability-type-active.ability-rank-g {
    box-shadow:
        inset 0 0 0 1px var(--ability-rank-glow),
        0 0 14px rgba(255, 199, 220, 0.08),
        0 0 20px rgba(244, 210, 122, 0.13);
}

.ability-admin-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ability-admin-card header strong,
.ability-admin-card header small {
    display: block;
}

.ability-admin-card header small,
.ability-admin-actions span {
    color: var(--muted);
    font-size: 0.76rem;
}

.ability-admin-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ability-admin-actions button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(227, 189, 99, 0.72);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    cursor: pointer;
    font-weight: 800;
}

.ability-admin-actions .title-grant-open {
    border-color: var(--line-strong);
    color: var(--ink);
    background: rgba(247, 239, 228, 0.06);
}

.ability-admin-card label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ability-admin-card label span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.ability-admin-card input,
.ability-admin-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.ability-admin-card input {
    min-height: 36px;
    padding: 7px 9px;
}

.ability-admin-card textarea {
    padding: 9px;
    resize: vertical;
    line-height: 1.4;
}

.ability-effect-editor {
    padding-top: 2px;
}

.ability-effect-editor summary {
    cursor: pointer;
    color: var(--gold);
    font-weight: 800;
}

.ability-effect-editor h4 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.ability-effect-editor section {
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.title-grant-modal {
    width: min(560px, calc(100vw - 28px));
}

.title-grant-search {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.title-grant-search span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.title-grant-search input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: #25262d;
}

.title-grant-results {
    display: grid;
    gap: 8px;
    max-height: min(420px, 52vh);
    margin-top: 12px;
    overflow: auto;
}

.title-grant-empty {
    margin: 0;
    color: var(--muted);
}

.title-grant-result button:disabled {
    cursor: default;
    opacity: 0.58;
}

.ability-effect-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ability-effect-grid.secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xp-stage-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.xp-stage-preview span {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--gold);
    background: rgba(227, 189, 99, 0.07);
    font-size: 0.78rem;
}

.rules-max-field {
    margin-bottom: 10px;
}

.world-page {
    overflow: hidden;
}

.world-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 52px);
    margin: 5px auto;
    overflow: hidden;
}

.world-shell.is-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.map-breadcrumb {
    display: flex;
    align-items: stretch;
    min-height: 68px;
    overflow: visible;
}

.map-crumb {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    height: 68px;
    margin-right: 0;
    padding: 7px 30px 7px 20px;
    border: 1px solid rgba(247, 239, 228, 0.36);
    border-right: 0;
    color: var(--muted);
    background: rgba(4, 5, 8, 0.88);
}

.map-crumb:nth-child(1) {
    z-index: 5;
}

.map-crumb:nth-child(2) {
    z-index: 4;
}

.map-crumb:nth-child(3) {
    z-index: 3;
}

.map-crumb:nth-child(4) {
    z-index: 2;
}

.map-crumb:not(:first-child) {
    padding-left: 58px;
}

.map-crumb:first-child {
    border-radius: 7px 0 0 7px;
}

.map-crumb::after {
    position: absolute;
    z-index: 1;
    top: 11px;
    right: -23px;
    width: 44px;
    height: 44px;
    border-top: 1px solid rgba(247, 239, 228, 0.36);
    border-right: 1px solid rgba(247, 239, 228, 0.36);
    transform: rotate(45deg);
    transform-origin: center;
    background: inherit;
    content: "";
}

.map-crumb strong,
.map-crumb span {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-crumb strong {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 1.9vw, 2.15rem);
    line-height: 1;
    text-transform: uppercase;
}

.map-crumb span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
}

.map-crumb.active strong {
    color: var(--gold);
}

.map-view-panel,
.map-stage,
.admin-map-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #050609;
}

.map-view-panel {
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.36);
}

.map-stage {
    width: 100%;
    height: 100%;
}

.map-canvas {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    border-radius: 7px;
    background: #020305;
}

.map-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.map-placeholder,
.map-empty-state {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(227, 189, 99, 0.08), transparent 34%),
        #020305;
    background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
}

.map-placeholder strong,
.map-empty-state strong {
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 8vw, 7rem);
    line-height: 0.92;
    text-transform: uppercase;
}

.map-placeholder span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 800;
    text-transform: uppercase;
}

.map-marker {
    position: absolute;
    z-index: 5;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(247, 239, 228, 0.58);
    border-radius: 50%;
    color: #15161a;
    background: var(--gold);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%);
}

.map-marker-static {
    cursor: default;
}

.map-border-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-border,
.admin-map-border,
.admin-map-border-preview {
    --map-border-color: var(--gold);
    --map-border-width: 1.4px;
}

.map-border path,
.admin-map-border path,
.admin-map-border-preview path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: filter 160ms ease, opacity 160ms ease, stroke-width 160ms ease;
    vector-effect: non-scaling-stroke;
}

.map-border-hit {
    pointer-events: stroke;
    stroke: transparent;
    stroke-width: 12px;
    opacity: 0;
}

.map-border-area .map-border-hit {
    fill: rgba(255, 255, 255, 0.01);
    pointer-events: all;
    stroke: none;
    opacity: 1;
}

.map-border-shadow {
    stroke: rgba(1, 2, 4, 0.92);
    stroke-width: calc(var(--map-border-width) + 2.8px);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
    opacity: 0.9;
}

.map-border-main {
    stroke: var(--map-border-color);
    stroke-width: var(--map-border-width);
    opacity: 0.88;
}

.map-border-highlight {
    stroke: rgba(247, 239, 228, 0.76);
    stroke-dasharray: 0.2 5.8;
    stroke-width: 0.45px;
    opacity: 0.62;
}

.map-border .map-border-shadow {
    stroke: var(--map-border-color);
    stroke-width: calc(var(--map-border-width) + 5.2px);
    filter: drop-shadow(0 0 4px var(--map-border-color)) drop-shadow(0 0 10px rgba(2, 3, 5, 0.72));
    pointer-events: none;
    opacity: 0;
}

.map-border .map-border-main,
.map-border .map-border-highlight {
    pointer-events: none;
}

.map-border .map-border-main {
    opacity: 0;
}

.map-border .map-border-highlight {
    opacity: 0;
}

.map-border:hover .map-border-shadow,
.map-border.is-hovered .map-border-shadow {
    opacity: 0.72;
}

.map-border:hover .map-border-main,
.map-border.is-hovered .map-border-main {
    opacity: 1;
}

.map-border:hover .map-border-highlight,
.map-border.is-hovered .map-border-highlight {
    opacity: 0.82;
}

.map-border-layer .map-border-hit {
    opacity: 0;
    pointer-events: none;
}

.map-border.is-muted .map-border-main,
.map-border.is-muted .map-border-highlight {
    opacity: 0;
}

.map-region-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-region-layer polygon {
    pointer-events: all;
    fill-opacity: 0;
    stroke-opacity: 0;
    stroke-width: 0.5;
    transition: fill-opacity 140ms ease, stroke-opacity 140ms ease;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.map-region-link:hover polygon,
.map-region-link:focus-visible polygon {
    fill-opacity: 0;
    stroke-opacity: 0;
}

.map-marker:hover,
.map-marker:focus-visible {
    z-index: 6;
    outline: 0;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(227, 189, 99, 0.22), 0 8px 26px rgba(0, 0, 0, 0.62);
}

.map-marker.map-marker-has-icon {
    display: block;
    width: var(--marker-image-width, auto);
    height: auto;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
}

.map-marker.map-marker-has-icon:hover,
.map-marker.map-marker-has-icon:focus-visible,
.admin-map-marker.map-marker-has-icon.selected {
    border-color: transparent;
    box-shadow: none;
}

.map-marker.map-marker-has-icon img,
.admin-map-marker.map-marker-has-icon img {
    width: var(--marker-image-width, auto);
    height: auto;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}

.map-marker-compass.map-marker-has-icon {
    width: var(--marker-image-width, auto);
}

.map-marker img,
.admin-map-marker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.map-marker span {
    font-size: 0.82rem;
    font-weight: 900;
}

.map-marker em {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    display: none;
    min-width: 148px;
    max-width: 230px;
    padding: 7px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(12, 13, 18, 0.96);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.52);
    font-style: normal;
    line-height: 1.25;
    transform: translateX(-50%);
}

.map-marker:hover em,
.map-marker:focus-visible em,
.admin-map-marker.selected em {
    display: block;
}

.map-marker em small {
    display: block;
    margin-top: 2px;
    color: var(--gold);
    font-size: 0.72rem;
}

.map-marker-continent {
    background: #e3bd63;
}

.map-marker-region,
.map-marker-kingdom {
    background: #78cbd2;
}

.map-marker-village,
.map-marker-town,
.map-marker-city {
    background: #48a961;
}

.map-marker-dungeon {
    background: #8b62d9;
}

.map-marker-castle,
.map-marker-gate {
    background: #d5dbe6;
}

.map-marker-compass {
    color: #0e1620;
    background: linear-gradient(135deg, #e3bd63 0%, #78cbd2 100%);
}

.map-marker-guildhall,
.map-marker-shop,
.map-marker-quest {
    background: #e69431;
}

.map-party-marker,
.map-hero-marker {
    z-index: 7;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, calc(-100% - 4px));
}

.map-party-marker::after,
.map-hero-marker::after {
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 2px;
    height: 8px;
    background: rgba(247, 239, 228, 0.84);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.52);
    content: "";
    transform: translateX(-50%);
}

.map-party-marker:hover,
.map-party-marker:focus-visible,
.map-hero-marker:hover,
.map-hero-marker:focus-visible {
    z-index: 9;
    outline: 0;
    filter: drop-shadow(0 0 8px rgba(120, 203, 210, 0.62));
}

.map-party-marker img,
.map-hero-marker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.62));
}

.admin-map-party-marker,
.admin-map-hero-marker {
    cursor: default;
}

.map-default-location-marker {
    z-index: 6;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(247, 239, 228, 0.9);
    border-radius: 50% 50% 50% 8px;
    background: var(--default-location-color, #2f7fd3);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.62), inset 0 0 0 4px rgba(5, 6, 9, 0.24);
    transform: translate(-50%, calc(-100% - 4px)) rotate(-45deg);
    pointer-events: none;
}

.map-default-location-marker::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(247, 239, 228, 0.92);
    content: "";
    transform: translate(-50%, -50%);
}

.map-default-location-marker em {
    display: block;
    bottom: calc(100% + 12px);
    min-width: 122px;
    max-width: 180px;
    padding: 5px 7px;
    font-size: 0.7rem;
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

.map-default-location-marker em small {
    color: #d8edf4;
}

.default-location-eldergrove {
    --default-location-color: #0d5f3d;
}

.default-location-aurelia {
    --default-location-color: #2f7fd3;
}

.admin-map-default-location-marker {
    cursor: default;
}

.admin-shell.map-admin-shell {
    gap: 8px;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    width: min(2560px, calc(100vw - 16px));
    margin: 8px auto 18px;
}

.admin-shell.location-admin-shell {
    gap: 8px;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(340px, 390px);
    align-items: start;
    width: min(2560px, calc(100vw - 16px));
    margin: 8px auto 18px;
}

.map-admin-shell .admin-editor-head h1,
.location-admin-shell .location-editor-head h1 {
    font-size: clamp(1.12rem, 1.24vw, 1.5rem);
    line-height: 1.12;
    text-transform: uppercase;
}

.map-admin-shell .map-editor-head,
.location-admin-shell .location-editor-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    align-self: start;
    gap: 12px;
    padding: 6px 12px;
}

.map-admin-shell .map-editor-head {
    grid-column: 1 / 4;
}

.map-admin-shell .map-editor-head p,
.location-admin-shell .location-editor-head p {
    justify-self: start;
    margin-bottom: 0;
}

.map-admin-shell .map-editor-head h1,
.location-admin-shell .location-editor-head h1 {
    justify-self: center;
    text-align: center;
}

.map-admin-shell .map-editor-head .admin-actions,
.location-admin-shell .location-editor-head .admin-actions {
    justify-self: end;
}

.map-admin-shell .map-editor-head .ghost-button,
.location-admin-shell .location-editor-head .ghost-button {
    min-height: 30px;
    padding: 0 12px;
}

.map-list-panel {
    position: sticky;
    top: 48px;
    display: grid;
    max-height: calc(100vh - 58px);
    overflow: hidden;
}

.map-list-panel .admin-character-group {
    min-height: 0;
}

.map-list-panel .admin-character-list {
    max-height: none;
    min-height: 0;
    overflow: auto;
}

.map-list-icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.46);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    font-weight: 900;
}

.admin-character-list a.map-list-item {
    min-width: 0;
    overflow: hidden;
}

.map-list-panel .admin-character-list a.map-list-item {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 5px 8px;
    align-items: center;
    padding: 7px;
}

.map-list-item .map-list-meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.admin-character-list img.map-list-thumb {
    flex: 0 0 auto;
    width: 66px;
    height: 42px;
    border: 1px solid rgba(247, 239, 228, 0.18);
    border-radius: 7px;
    object-fit: cover;
    background: #050609;
}

.admin-character-list img.marker-list-thumb {
    flex: 0 0 auto;
    width: 66px;
    height: 42px;
    border: 1px solid rgba(247, 239, 228, 0.18);
    border-radius: 7px;
    object-fit: contain;
    background: #050609;
}

.map-icon-library {
    display: grid;
    position: fixed;
    right: clamp(16px, 2.4vw, 36px);
    bottom: 14px;
    left: clamp(62px, 5vw, 92px);
    z-index: 1000;
    gap: 10px;
    min-width: 0;
    max-height: min(340px, 42vh);
    border-color: rgba(120, 203, 210, 0.36);
    background: rgba(20, 21, 28, 0.97);
    box-shadow: 0 -18px 56px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(247, 239, 228, 0.05);
}

.map-icon-library.is-collapsed {
    right: clamp(16px, 2.4vw, 36px);
    left: auto;
    width: min(310px, calc(100vw - 32px));
}

.map-icon-library .map-frame-head {
    min-width: 0;
}

.map-icon-library-content {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}

.map-icon-library > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.map-icon-library > small {
    color: var(--faint);
    font-size: 0.72rem;
    line-height: 1.25;
}

.map-icon-library-preview {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.map-icon-library-preview > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.map-icon-library-preview-box {
    display: grid;
    min-height: 128px;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.16);
    border-radius: 7px;
    background-color: #07090d;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.map-icon-library-preview-box img {
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
}

.map-icon-library-preview-box small {
    color: var(--faint);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.map-icon-library-preview strong {
    overflow: hidden;
    color: var(--gold);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-icon-library-label-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.map-icon-library-label-field span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.map-icon-library-grid {
    display: flex;
    gap: 10px;
    min-width: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
}

.map-icon-library-item {
    display: grid;
    flex: 0 0 112px;
    grid-template-rows: 86px minmax(28px, auto);
    gap: 7px;
    justify-items: center;
    align-items: center;
    min-width: 112px;
    min-height: 128px;
    padding: 9px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    font: inherit;
    font-size: 0.68rem;
    line-height: 1.1;
    cursor: pointer;
}

.map-icon-library-item:hover,
.map-icon-library-item:focus-visible {
    border-color: rgba(227, 189, 99, 0.55);
    color: var(--ink);
    outline: 0;
}

.map-icon-library-item.selected {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(227, 189, 99, 0.1);
    box-shadow: inset 0 0 0 1px rgba(227, 189, 99, 0.34), 0 0 18px rgba(227, 189, 99, 0.16);
}

.map-icon-library-item img {
    width: 94px;
    height: 78px;
    padding: 4px;
    border-radius: 6px;
    object-fit: contain;
    background-color: #07090d;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    background-size: 14px 14px;
}

.map-icon-library-item span {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    min-height: 2.2em;
    text-align: center;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hero-pin-assets-card {
    min-width: 0;
}

.hero-pin-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.hero-pin-asset {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.hero-pin-preview {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    color: var(--faint);
    background: rgba(5, 6, 9, 0.64);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-pin-preview img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}

.hero-pin-asset label,
.hero-pin-asset small {
    min-width: 0;
}

.hero-pin-asset small {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--faint);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-list-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-list-panel .map-list-item strong,
.map-list-panel .map-list-item small {
    max-width: 100%;
}

.map-list-panel .map-list-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-list-panel .map-list-item small {
    display: block;
    line-height: 1.25;
}

.map-list-panel .map-list-item .map-list-level {
    margin-top: 3px;
    white-space: nowrap;
}

.map-list-panel .map-list-item .map-list-file {
    grid-column: 1 / -1;
    margin-top: 0;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr)) minmax(330px, 380px);
    gap: 8px;
    align-items: start;
}

.map-editor-card {
    display: grid;
    gap: 12px;
}

.location-workspace,
.location-control-rail {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.location-workspace {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.location-workspace > .admin-editor-head,
.location-workspace > .admin-card,
.location-workspace > .admin-notice,
.location-workspace > .admin-errors {
    grid-column: 1;
    width: 100%;
}

.location-editor-head {
    margin-bottom: 0;
}

.admin-location-map-marker {
    cursor: crosshair;
}

.location-workspace .admin-map-stage .map-canvas {
    clip-path: inset(0 0 1px 0 round 7px);
}

.location-control-rail,
.location-map-list-panel {
    position: sticky;
    top: 48px;
    max-height: calc(100vh - 58px);
    overflow: auto;
}

.location-control-rail .hero-pin-assets-grid {
    grid-template-columns: 1fr;
}

.location-control-rail .admin-field-grid.two {
    grid-template-columns: 1fr 1fr;
}

.location-control-rail .character-location-card,
.location-control-rail .character-location-default-card,
.location-control-rail .hero-pin-assets-card {
    grid-column: auto;
}

.map-details-card {
    grid-column: 1;
}

.map-region-card {
    grid-column: 2;
}

.map-border-card {
    grid-column: 3;
}

.party-location-card {
    grid-column: 1;
    align-self: start;
}

.party-location-summary {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid rgba(120, 203, 210, 0.22);
    border-radius: 7px;
    background: rgba(120, 203, 210, 0.06);
}

.party-location-summary span,
.party-location-summary small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.party-location-summary strong {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-location-summary.empty {
    border-color: rgba(247, 239, 228, 0.14);
    background: rgba(247, 239, 228, 0.035);
}

.hero-owner-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.hero-owner-filter > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hero-owner-filter span {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.hero-owner-filter small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-owner-filter-button {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 7px 10px;
    border: 1px solid rgba(247, 239, 228, 0.18);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
}

.hero-owner-filter-button:hover,
.hero-owner-filter-button:focus-visible {
    border-color: rgba(120, 203, 210, 0.62);
    color: var(--ink);
    background: rgba(120, 203, 210, 0.12);
    outline: 0;
}

.hero-owner-filter-button[aria-pressed="true"] {
    border-color: rgba(120, 203, 210, 0.7);
    color: #eafcff;
    background: rgba(120, 203, 210, 0.18);
}

.hero-owner-filter-button:disabled {
    cursor: not-allowed;
    opacity: 0.44;
}

.location-card-head {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.location-card-head h2 {
    min-width: 0;
}

.placement-target-button {
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(247, 239, 228, 0.16);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.placement-target-button[aria-pressed="true"] {
    border-color: rgba(120, 203, 210, 0.72);
    color: #dff9ff;
    background: rgba(120, 203, 210, 0.16);
    box-shadow: inset 0 0 0 1px rgba(120, 203, 210, 0.18);
}

.character-location-card.is-placement-active,
.character-location-default-card.is-placement-active {
    border-color: rgba(120, 203, 210, 0.62);
    box-shadow: inset 0 0 0 1px rgba(120, 203, 210, 0.16);
}

.map-details-card,
.map-region-card,
.map-border-card {
    align-self: stretch;
    height: 465px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.map-details-card > .admin-field-grid,
.map-region-card > .admin-field-grid,
.map-border-card > .admin-field-grid {
    align-content: start;
}

.map-region-card textarea[data-region-points],
.map-border-card textarea[data-border-points] {
    height: 50px;
    min-height: 50px;
    resize: none;
}

.map-marker-card {
    position: sticky;
    top: 48px;
    z-index: 120;
    grid-column: 4;
    grid-row: 1 / var(--map-marker-row-end, 5);
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    max-height: calc(100vh - 58px);
    margin: 0;
    overflow: auto;
}

.map-marker-stack-form {
    display: grid;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.map-marker-panel {
    min-width: 0;
}

.map-collapsible-frame.is-collapsed {
    cursor: pointer;
    gap: 0;
    padding-block: 8px;
}

.map-details-card.map-collapsible-frame.is-collapsed,
.map-region-card.map-collapsible-frame.is-collapsed,
.map-border-card.map-collapsible-frame.is-collapsed {
    align-self: start;
    height: auto;
    min-height: 0;
    grid-template-rows: auto;
    overflow: visible;
}

.map-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.map-frame-head h2 {
    min-width: 0;
    margin-bottom: 0;
}

.map-frame-head:hover h2,
.map-collapsible-frame.is-collapsed:hover > .map-frame-head h2 {
    color: var(--gold);
}

.map-frame-head-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.map-frame-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(247, 239, 228, 0.2);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}

.map-frame-toggle:hover,
.map-frame-toggle:focus-visible {
    border-color: rgba(120, 203, 210, 0.62);
    color: var(--ink);
    background: rgba(120, 203, 210, 0.12);
    outline: 0;
}

.map-frame-body {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.map-collapsible-frame.is-collapsed .map-frame-body {
    display: none;
}

.map-marker-card .admin-field-grid.two {
    grid-template-columns: 1fr 1fr;
}

.map-marker-selection {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.map-marker-selection h3 {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.map-marker-selection-list {
    display: grid;
    gap: 6px;
    max-height: 349px;
    overflow: auto;
    padding-right: 2px;
}

@media (min-width: 1701px) {
    .map-marker-card {
        max-height: calc(100vh - 58px);
        overflow: hidden;
    }

    .map-marker-stack-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: calc(100vh - 58px);
        min-height: 0;
        overflow: hidden;
        padding-bottom: 70px;
    }

    .map-marker-edit-panel {
        flex: 0 0 auto;
    }

    .map-marker-card .map-icon-library.is-collapsed {
        position: fixed;
        right: 8px;
        bottom: 8px;
        left: auto;
        width: min(380px, calc(100vw - 24px));
        max-height: none;
        margin-top: 0;
        z-index: 1000;
    }

    .map-marker-selection:not(.is-collapsed) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .map-marker-selection:not(.is-collapsed) .map-frame-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .map-marker-selection:not(.is-collapsed) .map-marker-selection-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    .map-marker-selection:not(.is-collapsed) .map-form-actions {
        flex: 0 0 auto;
    }
}

.map-marker-selection-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(247, 239, 228, 0.1);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
}

.map-marker-selection-item img.marker-list-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 34px;
    border: 1px solid rgba(247, 239, 228, 0.18);
    border-radius: 7px;
    object-fit: contain;
    background: #050609;
}

.map-marker-selection-item:hover,
.map-marker-selection-item:focus-visible,
.map-marker-selection-item.selected {
    border-color: rgba(227, 189, 99, 0.58);
    background: rgba(227, 189, 99, 0.1);
    outline: 0;
}

.map-marker-selection-item > span:last-child {
    min-width: 0;
}

.map-marker-selection-item strong,
.map-marker-selection-item small {
    display: block;
}

.map-marker-selection-item small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-region-button-row,
.map-border-button-row {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}

.map-region-selector,
.map-border-selector {
    min-width: 0;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-left: 4px solid var(--region-color, var(--gold));
    border-radius: 7px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.035);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.map-border-selector {
    border-left-color: var(--border-color, var(--gold));
}

.map-region-selector.is-editor-hidden,
.map-border-selector.is-editor-hidden {
    opacity: 0.52;
}

.map-region-selector:hover,
.map-region-selector:focus-visible,
.map-region-selector.selected {
    border-color: var(--region-color, var(--gold));
    background: color-mix(in srgb, var(--region-color, var(--gold)) 18%, transparent);
    outline: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--region-color, var(--gold)) 28%, transparent);
}

.map-border-selector:hover,
.map-border-selector:focus-visible,
.map-border-selector.selected {
    border-color: var(--border-color, var(--gold));
    background: color-mix(in srgb, var(--border-color, var(--gold)) 18%, transparent);
    outline: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color, var(--gold)) 28%, transparent);
}

.checkbox-label {
    align-content: start;
}

.checkbox-label input[type="checkbox"] {
    width: 22px;
    min-height: 22px;
}

.map-form-actions {
    justify-content: flex-start;
}

.admin-actions button.ghost-danger-button {
    color: #ffdadd;
    background: rgba(216, 106, 112, 0.12);
    border-color: rgba(216, 106, 112, 0.48);
}

.admin-actions button:disabled,
.ghost-danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.admin-map-stage-card {
    display: grid;
    grid-column: 1 / 4;
    gap: 12px;
}

.admin-map-stage {
    aspect-ratio: 16 / 9;
    width: 100%;
    min-height: 500px;
}

.admin-map-stage .map-canvas {
    cursor: crosshair;
}

.admin-map-stage .map-canvas.drawing-region {
    cursor: copy;
}

.admin-map-stage .map-canvas.drawing-border {
    cursor: crosshair;
}

.admin-map-region-layer {
    z-index: 1;
}

.admin-map-border-layer {
    z-index: 2;
}

.admin-map-border {
    cursor: pointer;
    pointer-events: auto;
}

.admin-map-region.is-editor-hidden,
.admin-map-border.is-editor-hidden,
.admin-map-default-location-marker.is-editor-hidden {
    display: none;
}

.admin-map-border:hover,
.admin-map-border:focus-visible,
.admin-map-border.selected {
    outline: 0;
}

.admin-map-border:hover .map-border-main,
.admin-map-border:focus-visible .map-border-main,
.admin-map-border.selected .map-border-main {
    opacity: 1;
    stroke-width: calc(var(--map-border-width) + 0.55px);
}

.admin-map-border:hover .map-border-highlight,
.admin-map-border:focus-visible .map-border-highlight,
.admin-map-border.selected .map-border-highlight {
    opacity: 0.92;
}

.admin-map-region {
    cursor: pointer;
    fill-opacity: 0.14;
    stroke-opacity: 0.48;
}

.admin-map-region:hover,
.admin-map-region:focus-visible,
.admin-map-region.selected {
    outline: 0;
    fill-opacity: 0.26;
    stroke-opacity: 1;
    stroke-width: 0.8;
}

.admin-map-region-preview {
    pointer-events: none;
    color: var(--region-preview-color, #e3bd63);
}

.admin-map-region-preview * {
    pointer-events: none;
}

.admin-map-region-preview-fill {
    fill: var(--region-preview-color, #e3bd63);
    fill-opacity: 0.18;
    stroke: var(--region-preview-color, #e3bd63);
    stroke-dasharray: 1.2 1.2;
    stroke-opacity: 1;
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

.admin-map-region-preview-line,
.admin-map-region-preview-next {
    fill: none;
    stroke: var(--region-preview-color, #e3bd63);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 1;
    stroke-width: 0.85;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(2, 3, 5, 0.95)) drop-shadow(0 0 6px rgba(227, 189, 99, 0.42));
}

.admin-map-region-preview-next {
    stroke-dasharray: 1 1.25;
    stroke-opacity: 0.82;
}

.admin-map-region-point-layer,
.admin-map-border-point-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.admin-map-region-preview-point,
.admin-map-border-preview-point {
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1px solid rgba(2, 3, 5, 0.94);
    border-radius: 50%;
    background: #f7efe4;
    box-shadow: 0 0 3px rgba(2, 3, 5, 0.95);
    transform: translate(-50%, -50%);
}

.admin-map-region-preview-point.start,
.admin-map-border-preview-point.start {
    width: 5px;
    height: 5px;
    border-color: #f7efe4;
    background: var(--region-preview-color, #e3bd63);
}

.admin-map-border-preview {
    pointer-events: none;
}

.admin-map-border-preview .map-border-main {
    opacity: 1;
}

.admin-map-border-preview-point.start {
    background: var(--border-preview-color, #e3bd63);
}

.admin-map-marker {
    border: 1px solid rgba(247, 239, 228, 0.58);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.admin-map-marker.selected {
    z-index: 5;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(120, 203, 210, 0.24), 0 8px 26px rgba(0, 0, 0, 0.62);
}

.admin-map-marker.dragging {
    cursor: grabbing;
    z-index: 8;
}

.admin-map-marker em {
    pointer-events: none;
}

@media (max-width: 1700px) {
    .admin-shell.map-admin-shell {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .admin-shell.location-admin-shell {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .location-map-list-panel {
        grid-column: 1;
        grid-row: 1 / span 2;
        max-height: calc(100vh - 58px);
    }

    .location-workspace {
        grid-column: 2;
        grid-row: 1;
    }

    .location-control-rail {
        position: static;
        grid-column: 2;
        grid-row: 2;
        max-height: none;
    }

    .map-editor-grid {
        grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
    }

    .map-admin-shell .map-editor-head {
        grid-column: 1 / 3;
    }

    .map-border-card,
    .map-region-button-row,
    .map-border-button-row,
    .admin-map-stage-card {
        grid-column: 1 / 3;
    }

    .map-marker-card {
        position: static;
        grid-column: 1 / 3;
        grid-row: auto;
        max-height: none;
    }

    .map-marker-card .admin-field-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-map-stage {
        min-height: 420px;
    }
}

@media (max-width: 1180px) {
    .admin-shell.map-admin-shell,
    .admin-shell.location-admin-shell,
    .map-editor-grid {
        grid-template-columns: 1fr;
    }

    .map-list-panel,
    .location-control-rail,
    .location-map-list-panel,
    .map-marker-card {
        position: static;
        max-height: none;
    }

    .location-map-list-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .map-details-card,
    .map-admin-shell .map-editor-head,
    .map-region-card,
    .map-border-card,
    .party-location-card,
    .map-marker-card,
    .map-region-button-row,
    .map-border-button-row,
    .admin-map-stage-card {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .map-icon-library,
    .map-icon-library.is-collapsed {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-height: min(430px, 58vh);
    }

    .map-icon-library-content {
        grid-template-columns: 1fr;
    }

    .map-icon-library-preview-box {
        min-height: 104px;
    }

    .map-icon-library-preview-box img {
        max-height: 94px;
    }

    .map-icon-library-grid {
        padding-bottom: 8px;
    }
}

@media (max-width: 1400px) {
    body {
        overflow: auto;
    }

    body.character-page {
        overflow: auto;
    }

    .character-stage {
        display: block;
        height: auto;
        margin: 0;
    }

    .character-screen {
        width: min(100% - 20px, 1880px);
        height: auto;
        margin: 5px auto;
        grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
        overflow: visible;
        transform: none;
    }

    .portrait-column,
    .core-column,
    .right-zone {
        height: auto;
    }

    .right-zone {
        grid-column: 1 / -1;
    }

    .admin-shell {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }

    .admin-form-grid {
        grid-template-columns: minmax(250px, 0.78fr) minmax(330px, 1fr);
    }

    .admin-character-editor-layout {
        grid-template-columns: 1fr;
    }

    .admin-primary-portrait-grid,
    .admin-creation-portraits-editor,
    .admin-titles-editor,
    .admin-side-top-column,
    .admin-personality-editor,
    .admin-backstory-editor {
        grid-column: 1;
        grid-row: auto;
    }

    .admin-character-basics {
        grid-column: auto;
    }

    .admin-basics-grid {
        grid-template-columns: 1fr;
    }

    .admin-resistance-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-card-wide {
        grid-column: span 2;
    }

    .admin-side-top-column,
    .admin-identity-editor {
        grid-column: 1 / -1;
    }

    .creation-choice-grid.portraits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .creation-admin-assets,
    .creation-admin-compact-grid,
    .creation-dialogue-grid,
    .creation-portrait-admin-grid,
    .creation-portrait-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    h1 {
        font-size: 3.8rem;
    }
}

@media (max-width: 980px) {
    body {
        overflow: auto;
    }

    .goddess-bubble {
        width: min(100%, calc(100vw - 24px));
        min-width: 0;
        max-width: calc(100vw - 24px);
        padding-inline: 18px;
        font-size: clamp(1.1rem, 5vw, 1.75rem);
    }

    .topbar,
    .character-screen,
    .right-zone,
    .admin-shell,
    .admin-form-grid,
    .account-admin-grid,
    .currency-admin-grid,
    .currency-new-grid,
    .currency-star-crystal-summary,
    .currency-balance-grid,
    .admin-character-basics,
    .admin-basics-grid,
    .personality-tag-editor,
    .admin-resistance-editor,
    .level-tier-grid,
    .xp-stage-grid,
    .xp-stage-preview,
    .map-editor-grid,
    .rules-tier-grid,
    .secondary-rule-grid,
    .secondary-modifier-grid {
        grid-template-columns: 1fr;
    }

    .account-search-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .creation-admin-assets,
    .creation-admin-compact-grid,
    .creation-admin-compact-grid.portals,
    .creation-dialogue-grid,
    .creation-story-admin-grid,
    .admin-portrait-slot-grid,
    .admin-creation-portraits-editor,
    .creation-portrait-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rules-rank-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-character-editor-layout {
        grid-template-columns: 1fr;
    }

    .admin-human-portrait-editor,
    .admin-elven-portrait-editor,
    .admin-creation-portraits-editor,
    .admin-side-top-column,
    .admin-personality-editor,
    .admin-titles-editor,
    .admin-backstory-editor,
    .admin-identity-editor {
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
    }

    .admin-sidebar {
        position: static;
        max-height: none;
    }

    .admin-card-wide {
        grid-column: auto;
    }

    .shared-recruit-grid {
        grid-template-columns: 1fr;
    }

    .account-character-row,
    .account-party-list a,
    .account-party-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .account-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .creation-fields,
    .creation-choice-grid.two,
    .creation-choice-grid.portraits {
        grid-template-columns: 1fr 1fr;
    }

    .class-choice-grid {
        --class-icon-height: clamp(260px, 42vw, 420px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: -60px;
    }

    .class-name {
        top: calc(var(--class-icon-height) - 96px);
    }

    .portal-grid {
        gap: 22px;
    }

    .creation-portrait-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .creation-story-sprite-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-editor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-actions {
        justify-content: flex-start;
    }

    .right-zone {
        grid-template-areas:
            "titles"
            "resistances"
            "party"
            "abilities";
    }

    .topbar {
        display: grid;
    }

    .main-nav {
        justify-content: flex-start;
    }

    .portrait-frame,
    .portrait-frame img {
        min-height: 520px;
    }
}

@media (max-width: 620px) {
    .landing-site-footer {
        display: grid;
        gap: 3px;
        right: 12px;
        left: 12px;
    }

    .landing-version,
    .landing-copyright {
        position: static;
    }

    .landing-version {
        justify-self: start;
    }

    .landing-copyright {
        justify-self: center;
        transform: none;
        white-space: normal;
    }

    .account-modal {
        width: 100vw;
        max-height: calc(100vh - 18px);
        margin: auto 0 0;
    }

    .account-modal .account-card,
    .account-modal-loading {
        width: 100%;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 14px 14px 0 0;
    }

    .account-modal .account-detail-grid {
        grid-template-columns: 1fr;
    }

    .account-modal .account-actions {
        display: grid;
    }

    .account-modal .account-actions a,
    .account-modal .account-actions form,
    .account-modal .account-actions button {
        width: 100%;
    }

    .creation-story-admin-grid,
    .creation-story-preview-grid,
    .creation-story-sprite-gender-grid,
    .creation-story-sprite-admin-grid {
        grid-template-columns: 1fr;
    }

    .creation-story-sprite.size-fit {
        max-width: 56vw;
    }

    .creation-story-sprite-control-grid {
        grid-template-columns: 1fr;
    }

    .creation-story-sprite.position-far-left {
        left: -12vw;
    }

    .creation-story-sprite.position-left {
        left: 4vw;
    }

    .creation-story-sprite.position-right {
        right: 4vw;
    }

    .creation-story-sprite.position-far-right {
        right: -12vw;
    }

    .creation-story-text {
        width: min(100vw - 28px, 980px);
        padding: 14px 18px;
        font-size: 1rem;
    }

    .character-screen {
        width: min(100% - 16px, 1880px);
        margin-top: 8px;
    }

    h1 {
        padding-inline: 14px;
        font-size: 2.6rem;
    }

    .rank-banner {
        font-size: 1.25rem;
    }

    .panel {
        padding: 15px;
    }

    .admin-ability-editor,
    .identity-grid,
    .attribute-grid,
    .appearance-grid,
    .resistance-grid,
    .rules-rank-grid,
    .admin-ability-points-grid,
    .admin-ability-slot-grid,
    .ability-admin-list,
    .ability-effect-grid,
    .ability-effect-grid.secondary,
    .admin-field-grid.two,
    .admin-field-grid.four,
    .admin-resistance-editor {
        grid-template-columns: 1fr;
    }

    .admin-location-layout {
        grid-template-columns: 1fr;
    }

    .admin-location-preview {
        justify-self: start;
    }

    .currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-admin-card-head {
        padding-right: 0;
    }

    .currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-admin-display-preview {
        position: static;
        width: var(--coin-display-preview-size);
        max-width: 100%;
        height: auto;
        aspect-ratio: 1;
        justify-self: end;
    }

    .currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-coin-field-grid {
        grid-template-columns: 1fr;
    }

    .currency-tab-panel[data-tab="coins"] .currency-admin-card.has-display-preview .currency-coin-field-grid > label {
        grid-column: auto;
    }

    .abilities-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .abilities-panel h2 {
        grid-column: auto;
    }

    .creation-shell {
        padding: 72px 10px 28px;
    }

    .creation-card {
        padding: 12px;
    }

    .creation-fields,
    .creation-choice-grid.two,
    .creation-choice-grid.portraits {
        grid-template-columns: 1fr;
    }

    .goddess-scene {
        padding-inline: 12px;
    }

    .goddess-portrait {
        top: -27px;
        width: 108vw;
        height: calc(100vh + 40px);
    }

    .silhouette-grid,
    .portal-grid,
    .admin-primary-portrait-grid,
    .creation-admin-assets,
    .creation-admin-compact-grid,
    .creation-admin-compact-grid.portals,
    .creation-dialogue-grid,
    .admin-creation-portraits-editor,
    .creation-portrait-admin-grid {
        grid-template-columns: 1fr;
    }

    .class-choice-grid {
        --class-icon-height: clamp(190px, 48vw, 280px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        margin-top: -24px;
    }

    .class-name {
        top: calc(var(--class-icon-height) - 64px);
    }

    .creation-portrait-choice-grid {
        grid-template-columns: 1fr;
    }

    .class-choice-card {
        min-height: calc(var(--class-icon-height) + 28px);
    }

    .class-glyph {
        width: clamp(135px, 38vw, 180px);
    }

    .portrait-frame,
    .portrait-frame img {
        min-height: 360px;
    }

    .admin-full-portrait-preview {
        min-height: 380px;
    }

    .admin-creation-portraits-editor .creation-admin-preview.portrait-preview {
        min-height: 260px;
    }
}

/* Inventory stays desktop-width; height follows the character page's viewport fit. */
body.inventory-page {
    min-width: 1920px;
    overflow: auto;
}

body.inventory-page .topbar {
    display: flex;
    min-width: 1920px;
    align-items: center;
    justify-content: space-between;
}

body.inventory-page .main-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

body.inventory-page .character-stage.inventory-stage {
    display: block;
    width: 1920px;
    min-width: 1920px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

body.inventory-page .inventory-screen {
    display: grid;
    grid-template-columns: 427px minmax(0, 1fr);
    width: 1920px;
    min-width: 1920px;
    height: min(1388px, calc(100vh - 52px));
    margin: 5px auto;
    overflow: hidden;
    transform: none;
}

body.inventory-page .portrait-frame,
body.inventory-page .portrait-frame img {
    min-height: 0;
}

body.inventory-page .inventory-left-column,
body.inventory-page .inventory-workspace,
body.inventory-page .inventory-right-column {
    height: 100%;
}

body.inventory-page .inventory-left-column {
    grid-column: auto;
    grid-template-rows: minmax(0, 50%) auto minmax(0, 1fr);
}

body.inventory-page .inventory-workspace {
    grid-column: auto;
    grid-template-rows: minmax(500px, 1fr) max-content;
}

body.inventory-page .inventory-top-grid {
    grid-template-columns: minmax(0, 1fr) 500px;
}

body.inventory-page .inventory-right-column {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 606px minmax(0, 1fr);
}

body.inventory-page .inventory-right-column .party-panel {
    grid-row: auto;
    grid-template-rows: auto minmax(0, 1fr);
    transform: translateY(-1px);
}

body.inventory-page .inventory-main-layout .inventory-right-column .party-panel {
    grid-column: 3;
    grid-row: 1;
    height: 606px;
}

body.inventory-page .identity-grid {
    display: flex;
    flex-wrap: wrap;
}

body.inventory-page .appearance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.inventory-page .currency-balance-grid {
    grid-template-columns: 1fr;
}

.home-page {
    min-width: 1920px;
    overflow: auto;
}

.home-page .topbar {
    min-width: 1920px;
}

.home-shell {
    display: grid;
    gap: 10px;
    width: min(1920px, calc(100vw - 20px));
    min-width: 1900px;
    margin: 8px auto;
}

.home-page-heading {
    padding: 18px;
}

.home-page-heading h1 {
    margin: 0;
    color: var(--gold);
    font-size: 1.7rem;
}

.home-page-heading p {
    margin: 5px 0 0;
    color: var(--muted);
}

.home-content-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.7fr) minmax(0, 1.3fr);
    gap: 10px;
    align-items: stretch;
}

.home-currency-panel .currency-balance-grid {
    grid-template-columns: 1fr;
}

.home-treasure-panel {
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr);
}

body.inventory-page .bag-slot-grid {
    grid-template-columns: repeat(7, 50px);
}

body.inventory-page .inventory-slot-grid {
    grid-template-columns: repeat(12, var(--inventory-slot-size));
}

@media (min-width: 1401px) and (max-height: 1180px) {
    body.inventory-page .character-stage.inventory-stage {
        --character-short-design-height: 1180px;
        display: grid;
        height: var(--character-stage-height, calc(100vh - 52px));
        margin: 5px auto;
        align-content: start;
        justify-content: center;
        overflow: visible;
    }

    body.inventory-page .inventory-screen {
        width: 1920px;
        min-width: 1920px;
        height: var(--character-short-design-height);
        margin: 0;
        transform: scale(var(--character-scale, 1));
        transform-origin: top center;
    }

    body.inventory-page .inventory-grid-panel::after {
        height: 8px;
        opacity: 0.62;
        background-size: 100% 1px, 10px 10px, 42px 1px;
    }

    body.inventory-page .item-detail-preview {
        --item-detail-icon-size: 284px;
        --item-detail-icon-bottom-space: 6px;
        grid-template-rows: minmax(24px, auto) calc(var(--item-detail-icon-size) + var(--item-detail-icon-bottom-space)) 42px 42px minmax(200px, 1fr) 100px 28px 18px;
        gap: 6px;
    }

    body.inventory-page .item-detail-icon {
        width: var(--item-detail-icon-size);
        height: var(--item-detail-icon-size);
    }

    body.inventory-page .item-detail-meta {
        gap: 5px;
    }

    body.inventory-page .item-detail-meta-slot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 0;
        column-gap: 8px;
    }

    body.inventory-page .item-detail-meta-slot span {
        flex: 0 0 auto;
        font-size: 0.55rem;
    }

    body.inventory-page .item-detail-meta-slot strong {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0;
        font-size: 0.78rem;
        line-height: 1;
        text-align: right;
    }

    body.inventory-page .item-detail-effects-grid {
        gap: 5px;
        padding: 4px 5px;
    }

    body.inventory-page .item-detail-effect-slot {
        min-height: 20px;
        padding: 2px 6px;
        font-size: 0.7rem;
    }

    body.inventory-page .item-detail-description {
        height: 100px;
        min-height: 100px;
        padding: 5px 7px;
        font-size: 13px;
    }

    body.inventory-page .item-detail-value-frame {
        height: 26px;
        padding-block: 3px;
    }
}

@media (min-width: 1401px) and (min-height: 1181px) {
    body.inventory-page .inventory-main-layout {
        --inventory-top-row-height: 632px;
        --inventory-right-stack-fixed-height: 614px;
        grid-template-rows: var(--inventory-top-row-height) minmax(0, 1fr);
    }

    body.inventory-page .inventory-main-layout .inventory-gap-ornament {
        height: max(0px, calc(var(--inventory-top-row-height) - var(--inventory-right-stack-fixed-height)));
    }

    body.inventory-page .item-detail-preview {
        grid-template-rows: minmax(30px, auto) calc(var(--item-detail-icon-size) + var(--item-detail-icon-bottom-space)) 48px 48px 224px 120px 32px minmax(22px, 1fr);
    }

    body.inventory-page .inventory-grid-panel {
        grid-template-rows: auto max-content minmax(18px, 1fr);
    }

    body.inventory-page .inventory-grid-panel::after {
        position: static;
        grid-row: 3;
        align-self: center;
        justify-self: stretch;
        right: auto;
        bottom: auto;
        left: auto;
        margin-inline: 9%;
    }
}

body.achievements-page {
    overflow: hidden;
}

.achievements-stage {
    width: 100%;
    height: calc(100vh - 42px);
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(rgba(5, 6, 10, 0.72), rgba(9, 10, 14, 0.9)),
        radial-gradient(circle at 50% 0, rgba(227, 189, 99, 0.12), transparent 42%),
        var(--bg);
}

.achievements-window {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 10px;
    width: min(1920px, calc(100vw - 16px));
    height: min(1388px, calc(100vh - 52px));
    margin: 5px auto;
}

.achievement-menu,
.achievement-content {
    min-height: 0;
    overflow: hidden;
}

.achievement-menu {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
}

.achievement-menu-head {
    display: grid;
    gap: 3px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(247, 239, 228, 0.12);
}

.achievement-menu-head span,
.achievement-crystal-label,
.achievement-overview-card span,
.achievement-progress-tile span,
.achievement-section-summary span,
.achievement-reward span {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.achievement-menu-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.18rem;
}

.achievement-summary-link,
.achievement-menu-button,
.achievement-menu-group > summary,
.achievement-submenu a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(227, 189, 99, 0.24);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.achievement-summary-link:hover,
.achievement-summary-link.active,
.achievement-menu-button:hover,
.achievement-menu-button.active,
.achievement-menu-group > summary:hover,
.achievement-menu-group > summary.active,
.achievement-submenu a:hover,
.achievement-submenu a.active {
    border-color: rgba(120, 203, 210, 0.62);
    background: rgba(120, 203, 210, 0.12);
}

.achievement-summary-link span,
.achievement-menu-button span,
.achievement-menu-group > summary span,
.achievement-submenu a span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-summary-link small,
.achievement-menu-button small,
.achievement-menu-group > summary small,
.achievement-submenu a small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.achievement-menu-groups {
    display: grid;
    align-content: start;
    gap: 7px;
    overflow: auto;
    padding-right: 2px;
}

.achievement-menu-group {
    display: grid;
    gap: 6px;
}

.achievement-menu-group > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    cursor: pointer;
    list-style: none;
}

.achievement-menu-group > summary::-webkit-details-marker {
    display: none;
}

.achievement-menu-group > summary::before {
    content: ">";
    grid-column: 3;
    grid-row: 1;
    color: var(--muted);
    font-weight: 900;
    margin-left: 8px;
}

.achievement-menu-group[open] > summary::before {
    transform: rotate(90deg);
}

.achievement-submenu {
    display: grid;
    gap: 6px;
    padding-left: 16px;
}

.achievement-submenu a {
    min-height: 34px;
    border-color: rgba(247, 239, 228, 0.12);
    background: rgba(255, 255, 255, 0.035);
}

.achievement-menu-crystal-footer {
    display: grid;
    align-self: end;
    padding-top: 10px;
    border-top: 1px solid rgba(247, 239, 228, 0.12);
}

.achievement-menu .achievement-crystal-total {
    width: 100%;
    min-width: 0;
}

.achievement-menu .achievement-crystal-label img {
    width: min(114px, 100%);
}

.achievement-content {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
}

.achievement-content-head {
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 8px 10px 13px;
    border-bottom: 1px solid rgba(247, 239, 228, 0.12);
}

.achievement-title-banner {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    width: min(980px, 100%);
}

.achievement-content-head h1 {
    margin: 0;
    color: var(--gold);
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 0.95;
    text-align: center;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.84),
        0 0 22px rgba(227, 189, 99, 0.2);
    white-space: nowrap;
}

.achievement-title-ornament {
    position: relative;
    display: block;
    height: 22px;
    min-width: 0;
}

.achievement-title-ornament::before,
.achievement-title-ornament::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.achievement-title-ornament::before {
    top: 50%;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(247, 239, 228, 0.38);
    background:
        radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.95), rgba(120, 203, 210, 0.9) 24%, rgba(37, 116, 170, 0.82) 54%, rgba(227, 189, 99, 0.76) 100%);
    box-shadow:
        0 0 0 2px rgba(227, 189, 99, 0.16),
        0 0 18px rgba(120, 203, 210, 0.28);
    transform: translateY(-50%) rotate(45deg);
}

.achievement-title-ornament::after {
    top: 50%;
    height: 1px;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(227, 189, 99, 0.22);
}

.achievement-title-ornament-left::before {
    right: 0;
}

.achievement-title-ornament-left::after {
    right: 19px;
    left: 0;
    background:
        linear-gradient(90deg, transparent, rgba(227, 189, 99, 0.28) 32%, rgba(227, 189, 99, 0.78)),
        radial-gradient(circle at 100% 50%, rgba(247, 239, 228, 0.76) 0 1px, transparent 2px);
}

.achievement-title-ornament-right::before {
    left: 0;
}

.achievement-title-ornament-right::after {
    right: 0;
    left: 19px;
    background:
        linear-gradient(90deg, rgba(227, 189, 99, 0.78), rgba(227, 189, 99, 0.28) 68%, transparent),
        radial-gradient(circle at 0 50%, rgba(247, 239, 228, 0.76) 0 1px, transparent 2px);
}

.achievement-crystal-total {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 4px;
    min-width: 320px;
    min-height: 72px;
    overflow: hidden;
    padding: 4px;
    border: 1px solid rgba(227, 189, 99, 0.45);
    border-radius: 7px;
    background: rgba(227, 189, 99, 0.08);
}

.achievement-crystal-icon {
    display: grid;
    width: 64px;
    height: 64px;
    justify-self: start;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 7px;
    background:
        linear-gradient(145deg, rgba(227, 189, 99, 0.16), rgba(120, 203, 210, 0.08)),
        rgba(0, 0, 0, 0.24);
}

.achievement-crystal-icon img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.achievement-crystal-label {
    display: grid;
    justify-self: center;
    place-items: center;
    text-align: center;
}

.achievement-crystal-label img {
    display: block;
    width: min(123px, 100%);
    height: 64px;
    object-fit: contain;
}

.achievement-crystal-value {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 1.5rem;
}

.achievement-overview-card,
.achievement-section-summary {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(227, 189, 99, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
}

.achievement-overview-card > div:first-child,
.achievement-section-summary > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.achievement-overview-card strong,
.achievement-section-summary strong {
    font-size: 1.6rem;
}

.achievement-overview-card small,
.achievement-section-summary small,
.achievement-progress-tile small,
.achievement-row-body small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.achievement-progress-bar {
    width: 100%;
    height: 13px;
    overflow: hidden;
    border: 1px solid rgba(247, 239, 228, 0.2);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.42);
}

.achievement-progress-bar span {
    display: block;
    width: var(--achievement-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--aqua), var(--gold));
}

.achievement-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    min-height: 0;
    overflow: auto;
}

.achievement-progress-tile {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.achievement-progress-tile:hover {
    border-color: rgba(227, 189, 99, 0.56);
    background: rgba(227, 189, 99, 0.08);
}

.achievement-progress-tile strong {
    font-size: 1.25rem;
}

.achievement-list {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.achievement-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 128px 28px;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid rgba(227, 189, 99, 0.4);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(227, 189, 99, 0.14), rgba(247, 239, 228, 0.045)),
        rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.38);
}

.achievement-row.is-locked {
    border-color: rgba(247, 239, 228, 0.16);
    filter: saturate(0.72);
    opacity: 0.72;
}

.achievement-row.is-secret {
    border-color: rgba(139, 98, 217, 0.72);
    background:
        linear-gradient(90deg, rgba(139, 98, 217, 0.16), rgba(227, 189, 99, 0.07)),
        rgba(0, 0, 0, 0.28);
}

.achievement-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.6);
    border-radius: 8px;
    color: var(--gold);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.28)),
        var(--panel-deep);
    font-weight: 900;
}

.achievement-icon img {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.achievement-row-body {
    min-width: 0;
}

.achievement-row-body h2 {
    margin: 0 0 4px;
    overflow-wrap: anywhere;
    font-size: 1.12rem;
}

.achievement-row-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.achievement-reward {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    height: 100%;
    min-width: 0;
    text-align: center;
}

.achievement-reward strong {
    color: var(--gold);
    font-size: 1.7rem;
}

.achievement-checkmark {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(72, 169, 97, 0.7);
    border-radius: 50%;
    color: #dffff0;
    background: rgba(72, 169, 97, 0.42);
    font-size: 0.86rem;
    line-height: 1;
}

.achievement-completion {
    display: grid;
    align-self: stretch;
    justify-self: end;
    align-content: start;
    justify-content: end;
}

.achievement-checkmark.is-empty {
    border-color: rgba(247, 239, 228, 0.2);
    background: rgba(0, 0, 0, 0.18);
}

.achievement-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 22px;
    border: 1px dashed rgba(247, 239, 228, 0.22);
    border-radius: 8px;
    text-align: center;
}

.achievement-empty h2 {
    margin: 0 0 8px;
}

.achievement-empty p {
    max-width: 440px;
    margin: 0;
    color: var(--muted);
}

.collection-menu {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.collection-pack-shop {
    position: relative;
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(247, 239, 228, 0.12);
}

.collection-pack-balance {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 4px;
    border: 1px solid rgba(227, 189, 99, 0.34);
    border-radius: 7px;
    background: rgba(227, 189, 99, 0.08);
}

.collection-pack-balance .achievement-crystal-icon {
    width: 40px;
    height: 40px;
}

.collection-pack-balance .achievement-crystal-icon img {
    width: 40px;
    height: 40px;
}

.collection-pack-balance strong {
    font-size: 1.24rem;
}

.collection-pack-picker {
    position: relative;
    display: grid;
    gap: 5px;
}

.collection-pack-picker-control {
    position: relative;
}

.collection-pack-picker-control[open] {
    z-index: 30;
}

.collection-pack-picker > span {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.collection-pack-picker-toggle,
.collection-pack-picker-option,
.collection-pack-buy {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(227, 189, 99, 0.34);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(0, 0, 0, 0.24);
}

.collection-pack-picker-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 28px;
    padding: 2px 24px 2px 6px;
    border-color: rgba(247, 239, 228, 0.78);
    border-radius: 4px;
    color: #fff;
    background: rgba(9, 10, 14, 0.92);
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.1;
    text-align: left;
    list-style: none;
}

.collection-pack-picker-toggle::-webkit-details-marker {
    display: none;
}

.collection-pack-picker-toggle::after {
    position: absolute;
    top: 50%;
    right: 7px;
    color: rgba(247, 239, 228, 0.92);
    content: "v";
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.collection-pack-picker-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-pack-picker-control[open] .collection-pack-picker-toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

.collection-pack-picker-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: none;
    max-height: var(--collection-pack-picker-max-height, 420px);
    overflow: auto;
    padding: 2px;
    border: 1px solid rgba(247, 239, 228, 0.62);
    border-radius: 4px;
    background: rgba(9, 10, 14, 0.98);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.48);
}

.collection-pack-picker-control[open] .collection-pack-picker-menu {
    display: grid;
    gap: 2px;
}

.collection-pack-picker-option {
    min-height: 26px;
    padding: 4px 6px;
    border-color: transparent;
    border-radius: 2px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.1;
    text-align: left;
}

.collection-pack-picker-option:hover,
.collection-pack-picker-option:focus-visible,
.collection-pack-picker-option[aria-selected="true"] {
    border-color: rgba(120, 203, 210, 0.62);
    background: rgba(120, 203, 210, 0.12);
    outline: 0;
}

.collection-pack-buy {
    color: #17181d;
    background: var(--gold);
    cursor: pointer;
    font-weight: 900;
}

.collection-pack-buy:disabled,
.collection-pack-picker-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.collection-pack-popover {
    position: absolute;
    right: 0;
    bottom: 42px;
    left: 0;
    z-index: 45;
    padding: 8px 10px;
    border: 1px solid rgba(216, 106, 112, 0.62);
    border-radius: 7px;
    color: #ffdadd;
    background: rgba(44, 23, 30, 0.98);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.42);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.25;
    pointer-events: none;
}

.collection-pack-popover[hidden] {
    display: none;
}

.collection-expansion-overview {
    display: grid;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(227, 189, 99, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(22, 23, 28, 0.97), rgba(12, 13, 18, 0.97)),
        rgba(0, 0, 0, 0.24);
}

.collection-expansion-overview.is-full {
    grid-row: 2 / span 2;
}

.collection-expansion-title {
    display: grid;
    align-self: start;
    justify-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.collection-expansion-title > span,
.collection-expansion-stat-row span,
.collection-rarity-legend span,
.collection-expansion-progress small {
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.collection-expansion-title h2 {
    margin: 0;
    width: min(100%, 620px);
}

.collection-expansion-title h2 img {
    display: block;
    width: 100%;
    max-height: clamp(170px, 30vh, 340px);
    object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.42));
}

.collection-expansion-text-title {
    display: block;
    color: #f8edc5;
    font-size: clamp(2.4rem, 5vw, 5.5rem);
    line-height: 0.95;
    overflow-wrap: anywhere;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.72), 0 0 24px rgba(227, 189, 99, 0.24);
}

.collection-expansion-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    height: 100%;
}

.collection-expansion-info {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(74px, 6.4vh, 96px) clamp(24px, 2.7vw, 52px) clamp(74px, 6.4vh, 96px) clamp(34px, 4vw, 76px);
}

.collection-expansion-info::before,
.collection-expansion-info::after {
    position: absolute;
    right: clamp(24px, 2.7vw, 52px);
    left: clamp(34px, 4vw, 76px);
    height: 18px;
    pointer-events: none;
    content: "";
    opacity: 0.52;
    background:
        linear-gradient(90deg, transparent, rgba(227, 189, 99, 0.48) 18%, rgba(227, 189, 99, 0.48) 82%, transparent),
        radial-gradient(circle at 50% 50%, rgba(227, 189, 99, 0.78) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 47%, rgba(247, 239, 228, 0.24) 47% 53%, transparent 53%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 1px, 18px 18px, 42px 1px;
}

.collection-expansion-info::before {
    top: clamp(28px, 2.8vh, 40px);
}

.collection-expansion-info::after {
    bottom: clamp(28px, 2.8vh, 40px);
}

.collection-expansion-bottom {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    align-self: stretch;
    gap: clamp(14px, 1.6vw, 22px);
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.collection-expansion-bottom p {
    align-self: center;
    max-width: 620px;
    margin: 0 auto;
    color: var(--muted);
    font-size: clamp(0.95rem, 1.1vw, 1.16rem);
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.collection-expansion-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.collection-expansion-stat-row div {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.collection-expansion-stat-row strong {
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    line-height: 1;
}

.collection-expansion-progress {
    display: grid;
    gap: 7px;
    text-align: center;
}

.collection-expansion-progress small {
    justify-self: center;
}

.collection-rarity-panel {
    display: grid;
    gap: 9px;
}

.collection-rarity-bar {
    display: flex;
    width: 100%;
    height: 24px;
    overflow: hidden;
    border: 1px solid rgba(247, 239, 228, 0.36);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
}

.collection-rarity-bar span {
    position: relative;
    display: block;
    flex: 0 0 var(--rarity-width, auto);
    height: 100%;
    min-width: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.collection-rarity-bar span + span {
    flex-basis: calc(var(--rarity-width, 0%) + 12px);
    margin-left: -12px;
}

.collection-rarity-bar .is-silver {
    z-index: 3;
    border-radius: 999px;
}

.collection-rarity-bar .is-gold {
    z-index: 2;
    border-radius: 0 999px 999px 0;
}

.collection-rarity-bar .is-mythic {
    z-index: 1;
    border-radius: 0 999px 999px 0;
}

.collection-rarity-bar .is-silver,
.collection-rarity-legend .is-silver {
    background: linear-gradient(180deg, #e3e7e8, #a7afb5);
}

.collection-rarity-bar .is-gold,
.collection-rarity-legend .is-gold {
    background: linear-gradient(180deg, #ffe079, #e3ad1c);
}

.collection-rarity-bar .is-mythic,
.collection-rarity-legend .is-mythic {
    background: linear-gradient(180deg, #ff4d43, #cf1712);
}

.collection-rarity-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
}

.collection-rarity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.collection-rarity-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(247, 239, 228, 0.4);
    border-radius: 3px;
}

.collection-expansion-pack {
    display: grid;
    align-self: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    place-items: stretch center;
}

.collection-expansion-pack img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.44));
}

.collection-expansion-pack-placeholder {
    display: grid;
    align-content: space-between;
    justify-items: center;
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 0.68;
    padding: 32px 24px;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(247, 239, 228, 0.88), rgba(227, 189, 99, 0.18) 12%, rgba(18, 19, 24, 0.98) 22%, rgba(247, 239, 228, 0.82)),
        rgba(24, 22, 20, 0.96);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.62), 0 20px 46px rgba(0, 0, 0, 0.42);
    text-align: center;
}

.collection-expansion-pack-placeholder span,
.collection-expansion-pack-placeholder small {
    color: #3a3020;
    font-size: clamp(0.95rem, 1.1vw, 1.18rem);
    font-weight: 900;
    text-transform: uppercase;
}

.collection-expansion-pack-placeholder strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #f8edc5;
    font-size: clamp(2.1rem, 4vw, 4.6rem);
    line-height: 0.9;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.78), 0 0 18px rgba(227, 189, 99, 0.28);
}

.collection-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-content: start;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.collection-card-grid.is-opening {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    overflow: visible;
}

.collection-card-grid.is-gallery {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: start;
    gap: clamp(16px, 1.6vw, 26px);
    padding: 16px 18px 22px;
    border-top: 1px solid rgba(120, 203, 210, 0.18);
    background:
        linear-gradient(rgba(5, 6, 10, 0.34), rgba(5, 6, 10, 0.18)),
        rgba(0, 0, 0, 0.1);
}

.collection-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(190px, 1fr) auto;
    min-width: 0;
    min-height: 292px;
    overflow: hidden;
    border: 1px solid rgba(247, 239, 228, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0, rgba(247, 239, 228, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(33, 35, 44, 0.96), rgba(12, 13, 18, 0.96));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.54), 0 10px 28px rgba(0, 0, 0, 0.28);
}

.collection-card-grid.is-gallery .collection-card {
    width: 100%;
    max-width: 330px;
    min-height: 420px;
    justify-self: center;
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(247, 239, 228, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(0, 0, 0, 0.8);
}

.collection-card.bg-1 {
    background:
        radial-gradient(circle at 50% 0, rgba(247, 239, 228, 0.18), transparent 35%),
        linear-gradient(145deg, rgba(48, 50, 57, 0.98), rgba(14, 15, 19, 0.98));
}

.collection-card.bg-2 {
    background:
        radial-gradient(circle at 22% 10%, rgba(120, 203, 210, 0.22), transparent 32%),
        linear-gradient(145deg, rgba(24, 47, 53, 0.98), rgba(12, 15, 20, 0.98));
}

.collection-card.bg-3 {
    background:
        radial-gradient(circle at 78% 6%, rgba(227, 189, 99, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(54, 38, 26, 0.98), rgba(16, 13, 16, 0.98));
}

.collection-card.bg-4 {
    background:
        radial-gradient(circle at 50% 5%, rgba(149, 116, 213, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(38, 30, 55, 0.98), rgba(12, 12, 18, 0.98));
}

.collection-card.rarity-silver {
    border-color: rgba(215, 225, 230, 0.5);
}

.collection-card.rarity-gold {
    border-color: rgba(227, 189, 99, 0.74);
    box-shadow: inset 0 0 0 1px rgba(227, 189, 99, 0.18), 0 10px 30px rgba(227, 189, 99, 0.12);
}

.collection-card.rarity-mythic {
    border-color: rgba(149, 116, 213, 0.82);
    box-shadow: inset 0 0 0 1px rgba(149, 116, 213, 0.2), 0 10px 32px rgba(149, 116, 213, 0.18);
}

.collection-card.rarity-divine {
    border-color: rgba(120, 203, 210, 0.92);
    box-shadow: inset 0 0 0 1px rgba(120, 203, 210, 0.26), 0 12px 36px rgba(120, 203, 210, 0.22);
}

.collection-card.is-locked {
    filter: saturate(0.56);
    opacity: 0.62;
}

.collection-card.is-locked::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(247, 239, 228, 0.72);
    background: rgba(0, 0, 0, 0.28);
    content: "?";
    font-size: 3rem;
    font-weight: 900;
}

.collection-card-image {
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    margin: 10px 10px 0;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.24);
}

.collection-card-grid.is-gallery .collection-card-image {
    margin: 12px 12px 0;
    border-color: rgba(247, 239, 228, 0.2);
    border-radius: 5px;
}

.collection-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-card-image span {
    color: var(--gold);
    font-size: 3rem;
    font-weight: 900;
}

.collection-card-body {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
}

.collection-card-grid.is-gallery .collection-card-body {
    min-height: 92px;
    margin: 0 12px 12px;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 5px;
    background:
        linear-gradient(rgba(247, 239, 228, 0.08), rgba(0, 0, 0, 0.2)),
        rgba(11, 12, 16, 0.88);
}

.collection-card-body span,
.collection-card-body small,
.collection-pack-opening header span {
    overflow: hidden;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.collection-card-body strong {
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-card-body small {
    color: var(--muted);
}

.collection-pack-opening {
    display: grid;
    gap: 10px;
    max-height: 420px;
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(120, 203, 210, 0.36);
    border-radius: 8px;
    background: rgba(120, 203, 210, 0.08);
}

.collection-pack-opening header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.collection-pack-opening header strong {
    font-size: 1.08rem;
}

.collection-empty {
    grid-column: 1 / -1;
}

.collection-admin-image-field {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) auto;
    grid-column: 1 / -1;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.collection-admin-image-field.is-active {
    border-color: rgba(120, 203, 210, 0.52);
    background: rgba(120, 203, 210, 0.08);
}

.collection-admin-image-preview {
    display: grid;
    width: 94px;
    height: 118px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 8px;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.8rem;
    font-weight: 900;
}

.collection-admin-image-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.achievement-admin-shell {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.achievement-admin-editor {
    min-width: 0;
}

.achievement-admin-create-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.achievement-admin-stack,
.achievement-admin-menu-list,
.achievement-admin-grouped-list,
.achievement-admin-achievement-list,
.achievement-admin-form {
    display: grid;
    gap: 10px;
}

.achievement-admin-menu-list,
.achievement-admin-grouped-list {
    align-content: start;
}

.achievement-admin-card {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.achievement-admin-card h2 {
    margin: 0;
    font-size: 1.08rem;
}

.achievement-admin-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.achievement-admin-card header small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.achievement-admin-card header > span {
    color: var(--gold);
    font-weight: 900;
}

.achievement-admin-achievement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.achievement-admin-achievement-card {
    align-content: start;
}

.achievement-admin-achievement-fields .full-field {
    grid-column: 1 / -1;
}

.achievement-admin-card .admin-actions {
    justify-content: flex-end;
}

.achievement-admin-window {
    display: block;
    padding: 0;
}

.achievement-admin-window-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.achievement-admin-window-head::-webkit-details-marker,
.achievement-admin-submenu-window > summary::-webkit-details-marker {
    display: none;
}

.achievement-admin-window-head::before,
.achievement-admin-submenu-window > summary::before {
    content: ">";
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
}

.achievement-admin-window[open] > .achievement-admin-window-head::before,
.achievement-admin-submenu-window[open] > summary::before {
    transform: rotate(90deg);
}

.achievement-admin-window-head span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.achievement-admin-window-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--gold);
    font-size: 1.05rem;
    text-transform: uppercase;
}

.achievement-admin-window-head small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.achievement-admin-window-body {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.achievement-admin-create-window {
    border-color: rgba(120, 203, 210, 0.34);
    background: linear-gradient(135deg, rgba(120, 203, 210, 0.08), rgba(255, 255, 255, 0.025)), var(--panel);
}

.achievement-admin-create-window + .achievement-admin-create-window {
    border-color: rgba(227, 189, 99, 0.36);
    background: linear-gradient(135deg, rgba(227, 189, 99, 0.08), rgba(255, 255, 255, 0.025)), var(--panel);
}

.achievement-admin-main-button-form {
    padding: 12px;
    border: 1px solid rgba(227, 189, 99, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.achievement-admin-submenu-bundle {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(247, 239, 228, 0.12);
}

.achievement-admin-submenu-bundle h3 {
    margin: 0;
    color: var(--gold);
    font-size: 0.88rem;
    text-transform: uppercase;
}

.achievement-admin-submenu-window {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.achievement-admin-submenu-window > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.achievement-admin-submenu-window > summary strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-admin-submenu-window > summary small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.achievement-admin-icon-field {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-column: 1 / -1;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.achievement-admin-icon-field.is-active {
    border-color: rgba(120, 203, 210, 0.52);
    background: rgba(120, 203, 210, 0.08);
}

.achievement-admin-icon-preview {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(227, 189, 99, 0.48);
    border-radius: 8px;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.8rem;
    font-weight: 900;
}

.achievement-admin-icon-preview img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.achievement-admin-icon-upload,
.achievement-admin-icon-label-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.achievement-admin-icon-upload label,
.achievement-admin-icon-label-form label {
    display: grid;
    gap: 6px;
}

.achievement-admin-icon-label-actions {
    display: inline-flex;
    gap: 8px;
}

.achievement-admin-icon-upload button,
.achievement-admin-icon-label-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: #17181d;
    background: var(--gold);
    cursor: pointer;
    font-weight: 800;
}

.achievement-admin-icon-label-actions .ghost-danger-button {
    color: var(--ink);
    background: rgba(216, 106, 112, 0.16);
}

.achievement-admin-icon-upload button:hover,
.achievement-admin-icon-label-actions button:hover,
.achievement-admin-icon-upload button:focus-visible,
.achievement-admin-icon-label-actions button:focus-visible {
    border-color: rgba(120, 203, 210, 0.62);
    outline: 0;
}

.achievement-admin-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    max-height: 330px;
    overflow: auto;
}

.achievement-admin-icon-choice {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 104px;
    padding: 8px;
    border: 1px solid rgba(247, 239, 228, 0.12);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.achievement-admin-icon-choice.selected,
.achievement-admin-icon-choice:hover,
.achievement-admin-icon-choice:focus-visible {
    border-color: rgba(120, 203, 210, 0.62);
    outline: 0;
    background: rgba(120, 203, 210, 0.1);
}

.achievement-admin-icon-choice img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.achievement-admin-icon-choice span {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-admin-empty-icons {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed rgba(247, 239, 228, 0.2);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 980px) {
    body.achievements-page {
        overflow: auto;
    }

    .achievements-stage {
        height: auto;
        min-height: calc(100vh - 42px);
        overflow: visible;
    }

    .achievement-admin-shell,
    .achievements-window,
    .achievement-progress-grid,
    .achievement-admin-create-row,
    .achievement-admin-achievement-list {
        grid-template-columns: 1fr;
    }

    .achievement-admin-icon-field,
    .collection-admin-image-field,
    .achievement-admin-icon-upload,
    .achievement-admin-icon-label-form {
        grid-template-columns: 1fr;
    }

    .collection-card-grid,
    .collection-card-grid.is-opening {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .collection-expansion-overview.is-full {
        grid-row: auto;
    }

    .collection-expansion-overview {
        overflow: visible;
    }

    .collection-expansion-showcase {
        grid-template-columns: 1fr;
    }

    .achievement-menu {
        max-height: none;
    }

    .achievement-title-banner {
        grid-template-columns: minmax(28px, 0.35fr) minmax(0, auto) minmax(28px, 0.35fr);
        gap: 10px;
    }

    .achievement-title-ornament {
        min-width: 28px;
    }

    .achievement-content-head h1 {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .achievement-content {
        min-height: 560px;
    }

    .achievement-section-summary,
    .achievement-row {
        grid-template-columns: 1fr;
    }

    .achievement-row {
        justify-items: start;
    }

    .achievement-reward {
        justify-items: start;
        text-align: left;
    }

    .achievement-completion {
        justify-self: start;
    }
}