@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700&family=Space+Grotesk:wght@600&display=swap');
@import url('style.tutorial.css');
@import url('style.multiplayer.css');

:root {
    --bg-0: #070910;
    --bg-1: #0e1323;
    --bg-2: rgba(255, 255, 255, 0.05);
    --panel: rgba(15, 18, 30, 0.7);
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-glow: rgba(90, 200, 255, 0.2);
    --text-primary: #e8edf7;
    --text-secondary: #aab3c8;
    --accent: #63d1ff;
    --accent-strong: #9efcff;
    --warning: #ffc94d;
    --danger: #ff5e73;
    --success: #70f39c;
    --gold-strong: #ffd56a;
    --gold-mid: #ffb347;
    --gold-deep: #c7771f;
    --rift-accent: #6fd7ff;
    --rift-accent-strong: #9ef0ff;
    --rift-accent-deep: rgba(120, 200, 255, 0.6);
    --rift-accent-soft: rgba(120, 200, 255, 0.25);
    --rift-panel-glow: rgba(90, 200, 255, 0.18);
    --rift-panel-bg: rgba(20, 40, 55, 0.55);
    --rift-row-bg: rgba(14, 28, 42, 0.5);
    --rift-button-start: rgba(30, 85, 140, 0.75);
    --rift-button-end: rgba(20, 140, 160, 0.65);
    --rift-hud-fill-start: #6fd7ff;
    --rift-hud-fill-mid: #9ef0ff;
    --rift-hud-fill-end: #fff0b3;
    --rift-panel-border: var(--rift-accent-deep);
    --rift-panel-sheen-angle: 135deg;
    --rift-panel-stripe-angle: 120deg;
    --rift-panel-sheen: linear-gradient(var(--rift-panel-sheen-angle), var(--rift-accent-soft), transparent 62%);
    --rift-panel-pattern: repeating-linear-gradient(var(--rift-panel-stripe-angle), var(--rift-accent-soft) 0 6px, transparent 6px 24px);
    --rift-panel-edge: linear-gradient(90deg, transparent, var(--rift-accent-strong), transparent);
    --rift-panel-glint: radial-gradient(circle at 18% 0%, var(--rift-accent-soft), transparent 45%);
    --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.55);
    --radius: 14px;
}

body[data-rift-theme='hard'] {
    --rift-accent: #ff6b6b;
    --rift-accent-strong: #ff9a9a;
    --rift-accent-deep: rgba(255, 110, 110, 0.6);
    --rift-accent-soft: rgba(255, 110, 110, 0.25);
    --rift-panel-glow: rgba(255, 120, 120, 0.2);
    --rift-panel-bg: rgba(55, 20, 24, 0.55);
    --rift-row-bg: rgba(42, 18, 24, 0.5);
    --rift-button-start: rgba(140, 30, 40, 0.78);
    --rift-button-end: rgba(200, 50, 70, 0.7);
    --rift-hud-fill-start: #ff6b6b;
    --rift-hud-fill-mid: #ff9a9a;
    --rift-hud-fill-end: #ffe1c4;
    --rift-panel-sheen-angle: 150deg;
    --rift-panel-stripe-angle: 140deg;
}

body[data-rift-theme='nightmare'] {
    --rift-accent: #b784ff;
    --rift-accent-strong: #d4b0ff;
    --rift-accent-deep: rgba(190, 140, 255, 0.6);
    --rift-accent-soft: rgba(190, 140, 255, 0.25);
    --rift-panel-glow: rgba(170, 120, 255, 0.2);
    --rift-panel-bg: rgba(32, 18, 52, 0.55);
    --rift-row-bg: rgba(26, 16, 44, 0.5);
    --rift-button-start: rgba(75, 35, 120, 0.78);
    --rift-button-end: rgba(130, 70, 200, 0.7);
    --rift-hud-fill-start: #b784ff;
    --rift-hud-fill-mid: #d4b0ff;
    --rift-hud-fill-end: #ffe3ff;
    --rift-panel-sheen-angle: 155deg;
    --rift-panel-stripe-angle: 115deg;
}

body[data-rift-theme='apocalypse'] {
    --rift-accent: #f2f5ff;
    --rift-accent-strong: #ffffff;
    --rift-accent-deep: rgba(240, 245, 255, 0.6);
    --rift-accent-soft: rgba(230, 240, 255, 0.28);
    --rift-panel-glow: rgba(255, 255, 255, 0.2);
    --rift-panel-bg: rgba(40, 44, 58, 0.55);
    --rift-row-bg: rgba(32, 36, 48, 0.52);
    --rift-button-start: rgba(200, 210, 230, 0.78);
    --rift-button-end: rgba(150, 160, 190, 0.7);
    --rift-hud-fill-start: #ffffff;
    --rift-hud-fill-mid: #e8eefc;
    --rift-hud-fill-end: #d6dbe8;
    --rift-panel-sheen-angle: 175deg;
    --rift-panel-stripe-angle: 160deg;
}

body[data-rift-theme='endgame'] {
    --rift-accent: #78ffc0;
    --rift-accent-strong: #b0ffe0;
    --rift-accent-deep: rgba(90, 210, 150, 0.6);
    --rift-accent-soft: rgba(90, 210, 150, 0.25);
    --rift-panel-glow: rgba(90, 220, 160, 0.2);
    --rift-panel-bg: rgba(16, 36, 26, 0.55);
    --rift-row-bg: rgba(12, 28, 20, 0.52);
    --rift-button-start: rgba(30, 110, 70, 0.78);
    --rift-button-end: rgba(24, 150, 100, 0.7);
    --rift-hud-fill-start: #78ffc0;
    --rift-hud-fill-mid: #b0ffe0;
    --rift-hud-fill-end: #f2ffe6;
    --rift-panel-sheen-angle: 130deg;
    --rift-panel-stripe-angle: 100deg;
}

body[data-rift-theme='impossible'] {
    --rift-accent: #0b0b0f;
    --rift-accent-strong: #1c1c22;
    --rift-accent-deep: rgba(20, 20, 28, 0.7);
    --rift-accent-soft: rgba(16, 16, 22, 0.35);
    --rift-panel-glow: rgba(20, 20, 28, 0.35);
    --rift-panel-bg: rgba(8, 8, 12, 0.75);
    --rift-row-bg: rgba(6, 6, 10, 0.7);
    --rift-button-start: rgba(22, 22, 28, 0.85);
    --rift-button-end: rgba(12, 12, 16, 0.85);
    --rift-hud-fill-start: #1c1c22;
    --rift-hud-fill-mid: #111116;
    --rift-hud-fill-end: #060608;
    --rift-panel-sheen-angle: 200deg;
    --rift-panel-stripe-angle: 150deg;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Noto Sans KR', 'Inter', system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 20% 20%, #111a2e 0%, #0a0f1a 45%, #070910 100%);
    color: var(--text-primary);
    overflow: hidden;
}
html {
    overflow: hidden;
}

.app-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(8px, 1.5vw, 18px);
    max-width: none;
    width: 100vw;
    margin: 0 auto;
}

.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    box-shadow: var(--shadow-strong);
}

.logo-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}

.logo-mark {
    font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
    font-weight: 700;
    color: var(--accent-strong);
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(99, 209, 255, 0.1);
    border: 1px solid rgba(99, 209, 255, 0.35);
    font-size: 1.2rem;
}

.logo-text {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 1.35rem;
}

.admin-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    flex-wrap: wrap;
}

.admin-inline-sliders {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 210, 140, 0.25);
}

.admin-inline-slider {
    display: grid;
    grid-template-columns: auto 90px auto;
    align-items: center;
    gap: 6px;
    color: #ffe9d0;
    font-size: 0.78rem;
}

.admin-inline-slider label {
    font-weight: 600;
    color: rgba(255, 230, 200, 0.85);
}

.admin-inline-slider input[type="range"] {
    width: 90px;
}

.admin-inline-value {
    min-width: 42px;
    text-align: right;
    color: #fff2de;
    font-weight: 600;
}

.admin-mode-toggle,
.admin-mode-menu {
    border: 1px solid rgba(255, 200, 120, 0.35);
    background: rgba(255, 200, 120, 0.08);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.admin-mode-toggle:hover,
.admin-mode-menu:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    border-color: rgba(255, 210, 140, 0.6);
}

.admin-mode-toggle.is-on {
    color: #2a1400;
    background: linear-gradient(140deg, rgba(255, 210, 140, 0.8), rgba(255, 160, 90, 0.6));
    border-color: rgba(255, 200, 120, 0.8);
    box-shadow: 0 10px 20px rgba(255, 190, 120, 0.25);
}

.admin-mode-menu {
    border-color: rgba(255, 230, 170, 0.4);
    background: rgba(255, 230, 170, 0.12);
    color: #fff4e3;
}

.mode-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
}

.masthead-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

.masthead-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.masthead-action.tutorial-action {
    margin-right: 100px;
}

.masthead-action.stats-action {
    margin-right: 16px;
}

.masthead-action.mail-action {
    margin-right: 12px;
}

.masthead-action.inventory-action {
    margin-right: 16px;
}

.masthead-action-label {
    font-size: 16.5px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.masthead-action > .shop-icon-btn,
.masthead-action > .tutorial-icon-btn,
.masthead-action > .stats-icon-btn,
.masthead-action > .square-icon-btn,
.masthead-action > .friend-icon-btn,
.masthead-action > .mail-icon-btn,
.masthead-action > .inventory-icon-btn,
.masthead-action > .jewel-icon-btn,
.masthead-action > .transcend-icon-btn,
.masthead-action > .skillup-icon-btn,
.masthead-action > .engrave-icon-btn,
.masthead-action > .refine-icon-btn {
    margin-right: 0;
}

.mode-btn {
    border: 1px solid rgba(99, 209, 255, 0.2);
    background: rgba(99, 209, 255, 0.08);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mode-btn:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.mode-btn.active {
    color: #061018;
    background: linear-gradient(140deg, rgba(99, 209, 255, 0.65), rgba(158, 252, 255, 0.4));
    border-color: rgba(158, 252, 255, 0.6);
    box-shadow: 0 10px 22px rgba(99, 209, 255, 0.25);
}

body.playing .masthead {
    display: none;
}

body.postgame .masthead {
    display: none;
}

body.playing .resource-bar,
body.postgame .resource-bar {
    display: none;
}

body.playing .app-shell,
body.postgame .app-shell {
    padding-top: 0;
}

.content-grid {
    --grid-gap: clamp(10px, 1.6vw, 18px);
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(640px, 1.35fr) minmax(460px, 1fr);
    gap: var(--grid-gap);
    align-items: start;
    justify-items: center;
    justify-content: center;
    max-width: 1680px;
    margin: 0 auto;
}

body.solo-mode .content-grid {
    grid-template-columns: minmax(420px, 520px) minmax(640px, 1.35fr) minmax(420px, 520px);
    justify-items: center;
    justify-content: center;
    column-gap: 12px;
}

body.multi-mode .content-grid {
    grid-template-columns: minmax(860px, 1120px) minmax(320px, 380px) minmax(420px, 520px);
    justify-items: center;
    justify-content: center;
    column-gap: 12px;
    max-width: 1940px;
}

body.panel-hidden .content-grid {
    grid-template-columns: 1fr;
    justify-items: center;
}

body.prestart .content-grid {
    grid-template-columns: minmax(420px, 560px) minmax(420px, 560px);
    justify-items: center;
    justify-content: center;
    column-gap: 6px;
}

body.prestart.solo-mode .content-grid {
    grid-template-columns: minmax(360px, 520px) minmax(640px, 1.35fr) minmax(360px, 520px);
    justify-items: center;
    justify-content: center;
    column-gap: 12px;
}

body.prestart.multi-mode .content-grid {
    grid-template-columns: minmax(880px, 1120px) minmax(420px, 560px);
    justify-items: center;
    justify-content: center;
    column-gap: 6px;
    max-width: 1720px;
}

body.prestart #game-container {
    grid-column: auto;
}

body.prestart .control-panel {
    grid-column: 1;
}

body.prestart .mp-side-stack {
    grid-column: 2;
}

body.playing .content-grid,
body.postgame .content-grid {
    grid-template-columns: 1fr;
    justify-items: center;
}

.stage-card {
    background: linear-gradient(160deg, rgba(99, 209, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow-strong);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

body.prestart .stage-card {
    display: none;
}

#game-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: radial-gradient(circle at 25% 20%, #1a2334, #0b0f1d 55%, #060a13);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

canvas {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: inherit;
    background: transparent;
}

#game-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    font-size: 14px;
    width: 100%;
    height: 100%;
    z-index: 5;
}

#game-overlay.raid-confirm-open {
    pointer-events: auto;
}

.interaction-prompt-overlay {
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translate(-50%, -50%);
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(20, 20, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 9999;
}

#welcome-banner {
    display: none;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    pointer-events: none;
    color: #ffffff;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.2);
}

.welcome-title {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.welcome-subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    opacity: 0.92;
}

body.prestart #welcome-banner {
    display: flex;
}

#fade-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    z-index: 9999;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 20%, rgba(95, 150, 255, 0.22), transparent 55%),
        radial-gradient(circle at 85% 25%, rgba(120, 230, 255, 0.18), transparent 45%),
        radial-gradient(circle at 40% 85%, rgba(240, 180, 90, 0.14), transparent 55%),
        rgba(6, 8, 14, 0.92);
    z-index: 10000;
    pointer-events: auto;
    overflow: hidden;
}

.loading-overlay.open {
    display: flex;
}

.loading-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 26px;
    min-width: 280px;
    border-radius: 18px;
    border: 1px solid rgba(125, 190, 255, 0.24);
    background: linear-gradient(160deg, rgba(16, 22, 34, 0.96), rgba(8, 12, 20, 0.95));
    color: #f7f9ff;
    text-align: center;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.5), 0 0 26px rgba(120, 190, 255, 0.15);
    overflow: hidden;
}

.loading-title {
    font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.loading-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
}

.loading-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.loading-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #91dcff, #78a8ff, #91dcff);
    background-size: 220% 100%;
    transition: width 0.2s ease;
    animation: loadingBarSheen 1.6s linear infinite;
}

.loading-count {
    font-size: 0.85rem;
    opacity: 0.75;
    letter-spacing: 0.3px;
}

.loading-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 15%, rgba(120, 200, 255, 0.25), transparent 45%);
    opacity: 0.85;
    pointer-events: none;
}

.loading-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 6px, transparent 6px, transparent 14px);
    opacity: 0.12;
    pointer-events: none;
}

.loading-overlay.open .loading-card {
    animation: loadingFloat 1.4s ease-out both;
}

@keyframes loadingFloat {
    0% {
        transform: translateY(12px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes loadingBarSheen {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 220% 50%;
    }
}

.top-strip {
    position: absolute;
    top: 14px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    z-index: 6;
}

.raid-clear-hud {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
    max-width: calc(100% - 32px);
    border-radius: 14px;
    border: 1px solid rgba(120, 200, 255, 0.22);
    background: rgba(10, 16, 26, 0.78);
    box-shadow: var(--shadow-strong);
    z-index: 7;
    pointer-events: auto;
    backdrop-filter: blur(6px);
}

.raid-clear-badge {
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #07131f;
    background: linear-gradient(135deg, #93e9ff, #5da9ff);
    box-shadow: 0 8px 18px rgba(93, 169, 255, 0.35);
    font-size: 0.9rem;
}

.raid-clear-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.raid-clear-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.raid-clear-status {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
}

.raid-clear-return {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 16px;
    background: linear-gradient(135deg, #63d1ff, #4c91ff);
    color: #06101f;
    font-weight: 700;
    cursor: pointer;
}

.raid-clear-return:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#phase-display,
#pattern-display {
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.net-stats {
    position: absolute;
    top: 54px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    z-index: 6;
    pointer-events: none;
}

.net-stat {
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    font-size: 0.85rem;
    letter-spacing: 0.2px;
}

.combat-analyzer-mini {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(18, 22, 32, 0.95), rgba(10, 13, 18, 0.88));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    z-index: 6;
    pointer-events: auto;
}

.combat-analyzer-mini-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 72px;
}

.combat-analyzer-mini-label {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    font-weight: 700;
    color: var(--text-secondary);
}

.combat-analyzer-mini-value {
    font-size: 1rem;
    font-weight: 800;
    color: #f6f7fb;
}

.combat-analyzer-open {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, rgba(140, 200, 255, 0.9), rgba(90, 140, 255, 0.9));
    color: #0c1222;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 6px 10px;
    cursor: pointer;
}

.combat-analyzer-panel {
    position: absolute;
    right: 16px;
    bottom: 82px;
    width: min(380px, 92vw);
    max-height: 58vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 18, 26, 0.92);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 6;
    pointer-events: auto;
    overflow: hidden;
}

.combat-analyzer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.combat-analyzer-title {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    color: #f6f7fb;
}

.combat-analyzer-close {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #f4f6ff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 10px;
    cursor: pointer;
}

.combat-analyzer-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.combat-analyzer-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.combat-analyzer-summary-item span {
    color: #eef1ff;
    font-weight: 700;
}

.combat-analyzer-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
}

.combat-analyzer-row {
    display: grid;
    grid-template-columns: 0.8fr 1.1fr 0.7fr 0.8fr;
    gap: 10px;
    font-size: 0.75rem;
    color: #e9ecf6;
}

.combat-analyzer-row span {
    text-align: right;
}

.combat-analyzer-row span:first-child {
    text-align: left;
    font-weight: 700;
}

.combat-analyzer-row-header {
    font-size: 0.7rem;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.hp-bar-container {
    position: absolute;
    pointer-events: none;
}

.hp-bar-container.player-hp {
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: clamp(320px, 45vw, 680px);
}

.hp-bar-container.boss-hp {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(520px, 65vw, 1100px);
}

.hp-bar-container span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f6f7fb;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: block;
    text-align: center;
}

.hp-bar {
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
    position: relative;
}

.boss-hp .hp-bar {
    height: 36px;
}

.boss-groggy-cooldown {
    margin-top: 6px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(255, 208, 122, 0.95);
    text-shadow: 0 0 8px rgba(255, 160, 80, 0.55);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.boss-groggy-cooldown.active {
    opacity: 1;
    transform: translateY(0);
}

.boss-shield-bar {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
    position: relative;
    display: none;
}

#boss-shield-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(160, 230, 255, 0.9), rgba(120, 190, 255, 0.75));
    transition: width 0.15s ease-out, opacity 0.2s ease-out;
    box-shadow: 0 0 22px rgba(140, 210, 255, 0.85);
    border-right: 1px solid rgba(230, 245, 255, 0.9);
}

.boss-shield-text {
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    color: rgba(232, 246, 255, 0.95);
    text-shadow: 0 0 8px rgba(80, 160, 255, 0.75);
}

#player-hp-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #58e08f, #63ffa8);
    transition: width 0.2s ease-in-out;
}

#player-shield-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#player-shield-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(160, 230, 255, 0.85), rgba(120, 190, 255, 0.7));
    mix-blend-mode: normal;
    transition: width 0.15s ease-out, opacity 0.2s ease-out;
    box-shadow: 0 0 22px rgba(140, 210, 255, 0.9);
    border-right: 1px solid rgba(230, 245, 255, 0.9);
    z-index: 1;
}

#player-shield-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-weight: 700;
    color: #e8f6ff;
    text-shadow: 0 0 8px rgba(80, 160, 255, 0.8);
    opacity: 0;
    transition: opacity 0.2s ease-out;
    z-index: 2;
}

#player-elegian-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    z-index: 2;
    --elegian-power: 1;
}

#player-elegian-overlay.active {
    opacity: 1;
}

#player-elegian-barrier {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(170, 220, 255, 0.2), rgba(120, 200, 255, 0.35), rgba(170, 220, 255, 0.2));
    opacity: calc(0.18 + (var(--elegian-power) * 0.2));
    mix-blend-mode: screen;
    animation: elegianShimmer 1.6s linear infinite;
}

#player-elegian-heal {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(160, 255, 210, 0.35) 0px, rgba(160, 255, 210, 0.35) 6px, rgba(160, 255, 210, 0) 6px, rgba(160, 255, 210, 0) 14px);
    opacity: calc(0.12 + (var(--elegian-power) * 0.2));
    mix-blend-mode: screen;
    animation: elegianHealPulse 1.2s ease-in-out infinite;
}

#player-elegian-text {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(224, 255, 245, 0.95);
    text-shadow: 0 0 10px rgba(120, 220, 200, 0.6);
    letter-spacing: 0.4px;
    opacity: 0.85;
    z-index: 3;
}

#player-elegian-overlay.invincible #player-elegian-barrier {
    background: linear-gradient(90deg, rgba(210, 240, 255, 0.35), rgba(255, 255, 255, 0.7), rgba(210, 240, 255, 0.35));
    box-shadow: inset 0 0 12px rgba(200, 240, 255, 0.45);
}

#player-elegian-overlay.passive #player-elegian-text {
    color: rgba(210, 255, 230, 0.85);
}

@keyframes elegianShimmer {
    0% {
        transform: translateX(-6%);
        opacity: 0.2;
    }

    50% {
        transform: translateX(4%);
        opacity: 0.45;
    }

    100% {
        transform: translateX(-6%);
        opacity: 0.2;
    }
}

@keyframes elegianHealPulse {
    0% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.35;
    }

    100% {
        opacity: 0.1;
    }
}

#boss-hp-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff3b5f, #ff7b95, #ffc0c8, #ff7b95, #ff3b5f);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    transition: width 0.2s ease-in-out;
}

.hp-bar-container.boss-hp.is-invincible .hp-bar {
    border-color: rgba(140, 210, 255, 0.65);
    box-shadow: inset 0 0 12px rgba(30, 60, 120, 0.45), 0 0 14px rgba(120, 190, 255, 0.35);
}

.hp-bar-container.boss-hp.is-invincible #boss-hp-fill {
    background: linear-gradient(90deg, rgba(80, 140, 255, 0.5), rgba(190, 230, 255, 0.85), rgba(80, 140, 255, 0.5));
    background-size: 240% 100%;
    animation: invincibleShimmer 1.6s linear infinite;
}

.hp-bar-container.boss-hp.is-invincible .hp-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 10px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 20px);
    opacity: 0.65;
    mix-blend-mode: screen;
    animation: invincibleSweep 1.1s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.hp-bar-container.boss-hp.is-invincible .hp-bar::after {
    content: '\BB34\C801';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: rgba(230, 246, 255, 0.85);
    text-shadow: 0 0 8px rgba(120, 200, 255, 0.65);
    pointer-events: none;
    z-index: 1;
}

.hp-bar-container.boss-hp.is-invincible .hp-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(100, 190, 255, 0.75);
    z-index: 2;
}

.hp-bar-container.boss-hp.is-groggy .hp-bar {
    border-color: rgba(255, 220, 120, 0.7);
    box-shadow: inset 0 0 12px rgba(120, 90, 10, 0.45), 0 0 14px rgba(255, 210, 120, 0.35);
}

.hp-bar-container.boss-hp.is-groggy #boss-hp-fill {
    background: linear-gradient(90deg, #f6c34a, #ffe29a, #f6c34a);
    background-size: 200% 100%;
    animation: groggyShimmer 2.2s linear infinite;
}

.hp-bar-container.boss-hp.is-groggy .hp-bar::after {
    content: '\ADF8\B85C\AE30';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #111111;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.45);
    pointer-events: none;
    z-index: 1;
}

.hp-bar-container.boss-hp.is-groggy .hp-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(255, 200, 90, 0.75);
    z-index: 2;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes invincibleShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes groggyShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes invincibleSweep {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 180px 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes refineFlashSuccess {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    35% {
        opacity: 1;
        transform: scale(1);
    }

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

@keyframes refineFlashFail {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    35% {
        opacity: 1;
        transform: scale(1);
    }

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

@keyframes refineBurst {
    0% {
        opacity: 0;
        transform: scale(0.85) rotate(0deg);
    }

    40% {
        opacity: 1;
        transform: scale(1) rotate(6deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.1) rotate(12deg);
    }
}

.hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 4;
}

/* Player HP danger effects */
@keyframes hpPulse50 {
    0% {
        box-shadow: inset 0 0 8px rgba(255, 200, 50, 0.35);
    }

    50% {
        box-shadow: inset 0 0 14px rgba(255, 180, 40, 0.55);
    }

    100% {
        box-shadow: inset 0 0 8px rgba(255, 200, 50, 0.35);
    }
}

@keyframes hpPulse30 {
    0% {
        box-shadow: inset 0 0 10px rgba(255, 120, 60, 0.5);
    }

    50% {
        box-shadow: inset 0 0 18px rgba(255, 90, 40, 0.75);
    }

    100% {
        box-shadow: inset 0 0 10px rgba(255, 120, 60, 0.5);
    }
}

@keyframes hpPulse10 {
    0% {
        box-shadow: inset 0 0 12px rgba(255, 70, 80, 0.7), 0 0 12px rgba(255, 40, 60, 0.55);
    }

    50% {
        box-shadow: inset 0 0 22px rgba(255, 40, 50, 0.9), 0 0 18px rgba(255, 20, 40, 0.75);
    }

    100% {
        box-shadow: inset 0 0 12px rgba(255, 70, 80, 0.7), 0 0 12px rgba(255, 40, 60, 0.55);
    }
}

#player-hp-fill.hp-low-50 {
    animation: hpPulse50 1.2s infinite;
}

#player-hp-fill.hp-low-30 {
    animation: hpPulse30 1.0s infinite;
    background: linear-gradient(90deg, #ff944d, #ffb347);
}

#player-hp-fill.hp-low-10 {
    animation: hpPulse10 0.8s infinite;
    background: linear-gradient(90deg, #ff5e73, #ff2f4a);
}

#game-message {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.8);
}

.meeting-square-topbar {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(140, 220, 190, 0.28);
    background:
        radial-gradient(circle at 15% 10%, rgba(140, 220, 190, 0.18), transparent 60%),
        linear-gradient(140deg, rgba(12, 18, 18, 0.92), rgba(8, 10, 16, 0.9));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(120, 200, 170, 0.12);
    backdrop-filter: blur(6px);
    z-index: 25;
    pointer-events: auto;
}

.meeting-square-topbar.hidden {
    display: none;
}

body.playing.meeting-square .meeting-square-topbar {
    display: flex;
}

.meeting-square-notice {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    display: none;
    flex-direction: column;
    gap: 6px;
    max-width: min(720px, calc(100% - 32px));
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(180, 210, 255, 0.35);
    background:
        radial-gradient(circle at 12% 10%, rgba(140, 180, 255, 0.25), transparent 60%),
        linear-gradient(140deg, rgba(16, 18, 30, 0.92), rgba(10, 12, 22, 0.92));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(130, 170, 255, 0.16);
    color: #eef6ff;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 26;
    pointer-events: none;
}

body.playing.meeting-square .meeting-square-notice.active {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.meeting-square-notice-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.meeting-square-notice-title:empty {
    display: none;
}

.meeting-square-notice-body {
    font-size: 1.05rem;
    font-weight: 700;
    word-break: keep-all;
}

.meeting-square-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #e6fff2;
    white-space: nowrap;
}

.meeting-square-title {
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.meeting-square-count {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(140, 220, 190, 0.35);
    background: rgba(120, 210, 170, 0.14);
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 56px;
    text-align: center;
}

.meeting-square-connection {
    font-size: 0.82rem;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 56px;
    text-align: center;
}

.meeting-square-connection[data-state='success'] {
    color: #aef7c6;
    border-color: rgba(112, 243, 156, 0.45);
    background: rgba(112, 243, 156, 0.12);
}

.meeting-square-connection[data-state='error'] {
    color: #ffb3bd;
    border-color: rgba(255, 94, 115, 0.45);
    background: rgba(255, 94, 115, 0.12);
}

.meeting-square-return {
    border: 1px solid rgba(160, 230, 200, 0.45);
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    color: #e6fff2;
    background: linear-gradient(140deg, rgba(90, 190, 140, 0.45), rgba(40, 120, 95, 0.55));
    box-shadow: 0 10px 20px rgba(40, 120, 95, 0.35);
    cursor: pointer;
}

.meeting-square-return:hover {
    border-color: rgba(200, 255, 225, 0.7);
    background: linear-gradient(140deg, rgba(120, 210, 160, 0.55), rgba(55, 150, 115, 0.6));
}

.meeting-square-return:active {
    transform: translateY(1px);
}

.meeting-square-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, 92vw);
    height: min(420px, 70vh);
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(120, 170, 220, 0.35);
    background:
        radial-gradient(circle at 16% 14%, rgba(120, 170, 220, 0.18), transparent 60%),
        linear-gradient(165deg, rgba(10, 14, 20, 0.96), rgba(6, 8, 12, 0.9));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(120, 170, 220, 0.12);
    backdrop-filter: blur(6px);
    pointer-events: auto;
    z-index: 30;
    min-width: 0;
}

.meeting-square-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(120, 170, 220, 0.3);
    background: linear-gradient(120deg, rgba(40, 70, 110, 0.55), rgba(12, 16, 24, 0.2));
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.meeting-square-chat-title {
    flex-shrink: 0;
    font-weight: 700;
    color: #d9ecff;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.meeting-square-chat-sub {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.meeting-square-chat-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.meeting-square-chat-log {
    max-height: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
    padding-right: 4px;
}

.meeting-square-chat-log.show-time .mp-chat-time {
    display: inline-flex;
}

.meeting-square-chat .mp-chat-row {
    background: rgba(120, 170, 220, 0.08);
    border-color: rgba(120, 170, 220, 0.18);
}

.meeting-square-chat .mp-chat-row:nth-child(2n) {
    background: rgba(120, 170, 220, 0.16);
    border-color: rgba(120, 170, 220, 0.28);
}

.meeting-square-chat .mp-chat-name {
    color: #dbe9ff;
    background: rgba(120, 170, 220, 0.25);
}

.meeting-square-chat .mp-chat-time {
    color: rgba(180, 205, 235, 0.8);
}

.meeting-square-chat .mp-chat-text {
    color: rgba(235, 245, 255, 0.92);
}

.meeting-square-chat-form {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

.meeting-square-chat-form input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(120, 170, 220, 0.3);
    background: rgba(8, 10, 16, 0.9);
    color: var(--text-primary);
    padding: 8px 10px;
}

.meeting-square-chat-form input:focus {
    outline: none;
    border-color: rgba(170, 210, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(120, 170, 220, 0.2);
}

.meeting-square-chat-reset,
.meeting-square-chat-toggle,
.meeting-square-chat-expand {
    border-radius: 999px;
    border: 1px solid rgba(120, 170, 220, 0.5);
    background: rgba(18, 26, 36, 0.7);
    color: #dbe9ff;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.meeting-square-chat-toggle {
    margin-left: auto;
}

.meeting-square-chat-expand[aria-pressed='true'] {
    border-color: rgba(170, 210, 255, 0.8);
    background: rgba(70, 110, 150, 0.6);
}

.meeting-square-chat-toggle[aria-pressed='true'] {
    border-color: rgba(170, 210, 255, 0.8);
    background: rgba(70, 110, 150, 0.6);
}

.meeting-square-chat-toggle:hover,
.meeting-square-chat-expand:hover,
.meeting-square-chat-reset:hover {
    border-color: rgba(170, 210, 255, 0.8);
    background: rgba(40, 70, 105, 0.65);
}

.meeting-square-chat.square-chat-dragging .meeting-square-chat-head {
    cursor: grabbing;
}

body.playing.meeting-square #return-button {
    display: none;
}

.return-button {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    width: 500px;
    height: 80px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #63d1ff, #4c91ff);
    color: #06101f;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 1.25rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    pointer-events: auto;
}

.return-button:active {
    transform: translateX(-50%) translateY(1px);
}

.return-button.hidden {
    display: none;
}

#summary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 12, 20, 0.85);
    padding: 22px 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    box-shadow: var(--shadow-strong);
    pointer-events: all;
}

.modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    background: rgba(12, 14, 22, 0.9);
    border-radius: var(--radius);
    padding: 26px 28px;
    min-width: 320px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-strong);
}

.modal-content h2 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    color: var(--accent);
}

.modal-content p {
    margin: 4px 0 18px;
    color: var(--text-secondary);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#raid-start-confirm[data-tier='red'] .modal-content {
    border-color: rgba(255, 92, 92, 0.65);
    box-shadow: 0 12px 30px rgba(255, 92, 92, 0.16), var(--shadow-strong);
}

#raid-start-confirm[data-tier='red'] .modal-content h2 {
    color: #ff6a6a;
}

#raid-start-confirm[data-tier='orange'] .modal-content {
    border-color: rgba(255, 176, 90, 0.65);
    box-shadow: 0 12px 30px rgba(255, 176, 90, 0.16), var(--shadow-strong);
}

#raid-start-confirm[data-tier='orange'] .modal-content h2 {
    color: #ffb25a;
}

#raid-start-confirm[data-tier='white'] .modal-content {
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.12), var(--shadow-strong);
}

#raid-start-confirm[data-tier='white'] .modal-content h2 {
    color: #ffffff;
}

.hidden {
    display: none !important;
}

.control-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(560px, 100%);
}

.solo-raid-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
}

body.solo-mode .solo-raid-row {
    grid-column: 1 / span 2;
    justify-self: start;
}

body.prestart.solo-mode .solo-raid-row {
    grid-row: 1;
}

body.solo-mode .mp-side-stack {
    grid-column: 3;
}

body.prestart.solo-mode .mp-side-stack {
    grid-row: 1;
}

body.multi-mode .solo-raid-row {
    display: none;
}

.daily-quest-panel {
    width: min(360px, 100%);
}

.solo-raid-row .daily-quest-panel {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.solo-raid-row #controls-container {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.multi-mode .daily-quest-panel {
    display: none;
}

body.playing .daily-quest-panel,
body.postgame .daily-quest-panel {
    display: none;
}

.daily-quest-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-quest-reset,
.daily-quest-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.daily-quest-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.daily-quest-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 12px 10px;
    background: rgba(9, 12, 20, 0.55);
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.daily-quest-item.locked {
    opacity: 0.6;
}

.daily-quest-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.daily-quest-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.daily-quest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.daily-quest-progress {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.daily-quest-reward {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.daily-quest-claim {
    align-self: stretch;
    width: 25%;
    max-width: 96px;
    min-width: 72px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(30, 40, 60, 0.8);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
}

.daily-quest-claim:disabled {
    opacity: 0.5;
    cursor: default;
}

.resource-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(800px, 100%);
}

.resource-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 12px auto 8px;
    position: relative;
    z-index: 5;
}

.resource-panel.resource-panel-wide {
    width: min(1320px, 100%);
    padding: 12px 14px;
    gap: 10px;
    overflow-x: auto;
}

.resource-panel.resource-panel-wide .resource-stack {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.resource-panel.resource-panel-wide .resource-card {
    flex: 1 1 0;
    min-width: 120px;
    padding: 8px 10px;
    gap: 8px;
}

.resource-panel.resource-panel-wide .resource-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

#resource-panel .resource-icon-gold {
    border-radius: 50%;
}

#resource-panel .resource-icon-gold::before {
    inset: 7px;
    border-radius: 50%;
}

#resource-panel .resource-icon-gold::after {
    width: 12px;
    height: 12px;
    top: 6px;
    right: 6px;
    border-radius: 50%;
}

#resource-panel .resource-icon-fate {
    border-radius: 44% 56% 62% 38% / 54% 44% 56% 46%;
    box-shadow: none;
}

#resource-panel .resource-icon-fate::before,
#resource-panel .resource-icon-fate::after {
    content: none;
    display: none;
}

.resource-panel.resource-panel-wide .resource-name {
    font-size: 0.72rem;
}

.resource-panel.resource-panel-wide .resource-value {
    font-size: 1.05rem;
}

.rift-panel {
    margin-top: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rift-panel-border);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.32)),
        var(--rift-panel-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px var(--rift-panel-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    isolation: isolate;
}

.rift-panel::before {
    content: '';
    position: absolute;
    inset: -35% 45% auto -45%;
    height: 180%;
    background: var(--rift-panel-glint),
        radial-gradient(circle at 85% 0%, var(--rift-panel-glow), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.rift-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rift-panel-sheen), var(--rift-panel-pattern), var(--rift-panel-edge);
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: auto, auto, 100% 2px;
    background-position: center, center, 50% 100%;
    opacity: 0.2;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.rift-panel .panel-header {
    position: relative;
    z-index: 1;
}

.rift-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.rift-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rift-top-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.rift-top-row .rift-ticket-row,
.rift-top-row .rift-difficulty-row {
    flex: 1 1 0;
    min-width: 0;
}

.rift-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--rift-accent-soft);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.3)),
        var(--rift-panel-bg);
    color: var(--text-primary);
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.rift-difficulty-row,
.rift-refine-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--rift-accent-soft);
    background: var(--rift-row-bg);
    color: var(--text-primary);
    font-weight: 600;
}

.rift-difficulty-row {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rift-accent-deep);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 60%),
        var(--rift-row-bg);
    box-shadow: inset 0 0 0 1px var(--rift-accent-soft), 0 12px 24px rgba(0, 0, 0, 0.28);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.rift-difficulty-row::before {
    content: '';
    position: absolute;
    inset: -60% -20% auto -40%;
    height: 200%;
    background: radial-gradient(circle at left, var(--rift-accent-soft), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}

.rift-difficulty-row::after {
    content: '';
    position: absolute;
    inset: auto 12px 0 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rift-accent-strong), transparent);
    opacity: 0.6;
    pointer-events: none;
}

.rift-refine-compact {
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--rift-accent-deep);
    background: linear-gradient(140deg, rgba(0, 0, 0, 0.55), rgba(10, 20, 36, 0.75));
    color: #f2f7ff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.rift-difficulty-label,
.rift-refine-label {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.rift-panel .panel-title,
.rift-panel .rift-ticket-label,
.rift-panel .rift-difficulty-label {
    color: #dfe7f8;
}

.rift-panel .rift-ticket-count,
.rift-panel .rift-difficulty-value {
    color: #f7fbff;
}

.rift-panel .panel-title,
.rift-ticket-label,
.rift-ticket-count,
.rift-difficulty-label,
.rift-enter-toggle,
.rift-multi-label,
.rift-enter-btn {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.rift-difficulty-value,
.rift-refine-value {
    font-size: 0.98rem;
    letter-spacing: 0.2px;
    color: var(--rift-accent-strong);
}

.rift-difficulty-label,
.rift-difficulty-value {
    position: relative;
    z-index: 1;
}

.rift-difficulty-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--rift-accent-deep);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35));
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.18), 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 12px var(--rift-accent-deep);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.rift-difficulty-value::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rift-accent-strong);
    box-shadow: 0 0 8px var(--rift-accent-deep);
}

.rift-refine-compact .rift-refine-label {
    font-size: 0.72rem;
    color: rgba(230, 240, 255, 0.85);
}

.rift-refine-compact .rift-refine-value {
    font-size: 0.8rem;
    color: #f7fbff;
}

.rift-ticket-label {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.rift-ticket-count {
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}

.rift-enter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rift-enter-row .rift-enter-btn {
    flex: 1;
    min-width: 160px;
}

.rift-enter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--rift-accent-soft);
    background: rgba(8, 14, 24, 0.82);
    color: #f2f7ff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rift-enter-toggle:hover {
    border-color: var(--rift-accent-strong);
    box-shadow: 0 8px 18px rgba(10, 25, 45, 0.25);
}

.rift-enter-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--rift-accent-strong);
}

.rift-enter-toggle input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.rift-enter-toggle input:disabled + span {
    opacity: 0.6;
}

.rift-multi-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--rift-accent-soft);
    background: rgba(10, 18, 30, 0.7);
    color: var(--rift-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.rift-enter-btn {
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--rift-accent-deep);
    background: linear-gradient(140deg, var(--rift-button-start), var(--rift-button-end));
    color: #f8feff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 8px 20px rgba(10, 25, 45, 0.35);
}

.rift-enter-btn:hover {
    transform: translateY(-1px);
    border-color: var(--rift-accent-strong);
    box-shadow: 0 12px 24px rgba(10, 30, 55, 0.45);
}

.rift-enter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.rift-hud {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 14px;
    border-radius: 16px;
    background: rgba(8, 16, 28, 0.78);
    border: 1px solid var(--rift-accent-deep);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 1400;
    min-width: 240px;
    pointer-events: auto;
}

.rift-hud-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text-primary);
}

.rift-hud-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.rift-hud-value {
    font-size: 1.05rem;
}

.rift-hud-bar {
    width: 220px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.rift-hud-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--rift-hud-fill-start), var(--rift-hud-fill-mid) 40%, var(--rift-hud-fill-end));
    box-shadow: 0 0 12px var(--rift-accent-deep);
    transition: width 0.2s ease;
}

.rift-hud-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(220, 235, 255, 0.9);
}

.rift-hud-timer-label {
    color: var(--text-secondary);
}

.rift-hud-timer-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.rift-hud-status {
    font-size: 0.85rem;
    color: rgba(255, 230, 170, 0.9);
    min-height: 1em;
}

.rift-return-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 230, 170, 0.6);
    background: rgba(255, 230, 170, 0.12);
    color: #ffe9b0;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.rift-return-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.rift-return-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255, 214, 122, 0.28);
}

.rift-reenter-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(160, 220, 255, 0.6);
    background: rgba(160, 220, 255, 0.12);
    color: #d9f2ff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.rift-reenter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.rift-reenter-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(140, 200, 255, 0.28);
}

.rift-reward-hud {
    position: absolute;
    top: 192px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(8, 16, 28, 0.82);
    border: 1px solid var(--rift-accent-soft);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    z-index: 1400;
    min-width: 150px;
    pointer-events: none;
}

.rift-reward-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(220, 240, 255, 0.9);
    letter-spacing: 0.02em;
}

.rift-reward-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rift-reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rift-reward-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rift-reward-icon .resource-icon {
    transform: scale(0.55);
    transform-origin: center;
}

.rift-reward-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f7fbff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.rift-wave-indicator {
    position: absolute;
    top: 16px;
    right: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--rift-accent-deep);
    background: rgba(10, 14, 24, 0.72);
    color: var(--rift-accent-strong);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    z-index: 1400;
    pointer-events: none;
}

.key-multi-indicator {
    position: absolute;
    top: 16px;
    right: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 190, 255, 0.35);
    background: rgba(12, 10, 18, 0.75);
    color: rgba(235, 220, 255, 0.95);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    z-index: 1400;
    pointer-events: none;
}

.hell-key-multi-indicator {
    border-color: rgba(255, 170, 120, 0.6);
    background: rgba(30, 14, 10, 0.7);
    color: #ffd5b5;
}

.narak-key-multi-indicator {
    border-color: rgba(180, 125, 255, 0.6);
    background: rgba(24, 10, 36, 0.72);
    color: #e6ccff;
}

.hell-panel {
    margin-top: 12px;
    border: 1px solid rgba(255, 170, 130, 0.3);
    background: rgba(30, 14, 10, 0.6);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    --hell-diff-glow: 0.18;
}

.hell-panel[data-hell-theme='normal'] {
    --hell-diff-glow: 0.18;
}

.hell-panel[data-hell-theme='hard'] {
    --hell-diff-glow: 0.22;
}

.hell-panel[data-hell-theme='nightmare'] {
    --hell-diff-glow: 0.26;
}

.hell-panel[data-hell-theme='apocalypse'] {
    --hell-diff-glow: 0.3;
}

.hell-panel[data-hell-theme='endgame'] {
    --hell-diff-glow: 0.34;
}

.hell-panel[data-hell-theme='impossible'] {
    --hell-diff-glow: 0.38;
}

.hell-selected {
    font-size: 0.78rem;
    color: rgba(255, 220, 190, 0.75);
    font-weight: 600;
}

.hell-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.hell-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hell-refine-row,
.hell-difficulty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 170, 120, 0.28);
    background: rgba(20, 12, 10, 0.5);
}

.hell-difficulty-row {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 180, 130, 0.45);
    background: linear-gradient(135deg, rgba(255, 230, 200, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 60%),
        rgba(20, 12, 10, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 160, 120, 0.2), 0 12px 24px rgba(30, 12, 8, 0.5);
}

.hell-difficulty-row::before {
    content: '';
    position: absolute;
    inset: -60% -20% auto -40%;
    height: 200%;
    background: radial-gradient(circle at left, rgba(255, 170, 120, 0.45), transparent 60%);
    opacity: var(--hell-diff-glow);
    pointer-events: none;
}

.hell-difficulty-row::after {
    content: '';
    position: absolute;
    inset: auto 12px 0 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 220, 190, 0.85), transparent);
    opacity: 0.6;
    pointer-events: none;
}

.hell-refine-label,
.hell-difficulty-label {
    font-size: 0.78rem;
    color: rgba(255, 220, 190, 0.75);
    font-weight: 600;
}

.hell-refine-value,
.hell-difficulty-value {
    font-size: 0.92rem;
    color: #ffe8cf;
    font-weight: 700;
}

.hell-difficulty-label,
.hell-difficulty-value {
    position: relative;
    z-index: 1;
}

.hell-difficulty-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 190, 150, 0.45);
    background: linear-gradient(140deg, rgba(255, 210, 170, 0.18), rgba(20, 10, 8, 0.7));
    text-shadow: 0 0 12px rgba(255, 170, 120, 0.6);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(255, 150, 110, var(--hell-diff-glow));
}

.hell-difficulty-value::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffe8cf;
    box-shadow: 0 0 8px rgba(255, 170, 120, 0.8);
}

.hell-key-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.hell-key-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 160, 120, 0.25);
    background: rgba(20, 12, 10, 0.65);
    color: #f7efe8;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hell-key-card:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.hell-key-card.selected {
    border-color: rgba(255, 200, 150, 0.7);
    box-shadow: 0 12px 24px rgba(255, 140, 100, 0.25);
    transform: translateY(-1px);
}

.hell-key-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.95rem;
    color: #ffe8cf;
}

.hell-key-meta {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-size: 0.78rem;
    color: rgba(255, 220, 190, 0.65);
}

.hell-key-count {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.8rem;
    color: rgba(255, 220, 190, 0.85);
}

.hell-enter-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 180, 120, 0.5);
    background: linear-gradient(140deg, rgba(160, 70, 40, 0.9), rgba(220, 120, 70, 0.8));
    color: #fff5ea;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 10px 24px rgba(40, 15, 8, 0.45);
}

.hell-enter-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 220, 190, 0.8);
    box-shadow: 0 14px 28px rgba(60, 20, 12, 0.55);
}

.hell-enter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.hell-enter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hell-enter-row .hell-enter-btn {
    flex: 1;
    min-width: 160px;
}

.hell-enter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 190, 150, 0.35);
    background: rgba(26, 14, 10, 0.72);
    color: #fff0da;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hell-enter-toggle:hover {
    border-color: rgba(255, 220, 190, 0.7);
    box-shadow: 0 8px 18px rgba(60, 20, 12, 0.25);
}

.hell-enter-toggle input {
    width: 16px;
    height: 16px;
    accent-color: rgba(255, 210, 170, 0.9);
}

.hell-enter-toggle input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.hell-enter-toggle input:disabled + span {
    opacity: 0.6;
}

.hell-multi-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 190, 150, 0.35);
    background: rgba(18, 10, 8, 0.7);
    color: rgba(255, 220, 190, 0.9);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.narak-panel {
    margin-top: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(180, 120, 255, 0.35);
    background: rgba(24, 14, 36, 0.62);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    grid-column: 2;
    width: min(560px, 100%);
    --narak-diff-glow: 0.2;
}

.narak-panel::before {
    content: '';
    position: absolute;
    inset: -40% 40% auto -30%;
    height: 170%;
    background: radial-gradient(circle, rgba(190, 130, 255, 0.2), transparent 60%);
    opacity: 0.75;
    pointer-events: none;
}

.narak-panel[data-narak-theme='normal'] {
    --narak-diff-glow: 0.2;
}

.narak-panel[data-narak-theme='hard'] {
    --narak-diff-glow: 0.24;
}

.narak-panel[data-narak-theme='nightmare'] {
    --narak-diff-glow: 0.28;
}

.narak-panel[data-narak-theme='apocalypse'] {
    --narak-diff-glow: 0.32;
}

.narak-panel[data-narak-theme='endgame'] {
    --narak-diff-glow: 0.36;
}

.narak-panel[data-narak-theme='impossible'] {
    --narak-diff-glow: 0.4;
}

.narak-panel .panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.narak-panel[data-narak-theme] .panel-title::after {
    content: attr(data-narak-difficulty);
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(200, 160, 255, 0.55);
    background: linear-gradient(140deg, rgba(120, 70, 190, 0.75), rgba(20, 12, 32, 0.75));
    color: #f4e7ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(178, 110, 255, 0.7);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(30, 12, 50, var(--narak-diff-glow));
}

.narak-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.narak-key-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(200, 150, 255, 0.4);
    background: rgba(36, 20, 52, 0.7);
    color: #f0dcff;
    font-weight: 700;
}

.narak-key-chip-label {
    font-size: 0.78rem;
    color: rgba(230, 200, 255, 0.85);
}

.narak-key-chip-count {
    font-size: 0.9rem;
}

.narak-panel-meta {
    font-size: 0.86rem;
    color: rgba(230, 200, 255, 0.85);
    font-weight: 600;
}

.narak-enter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.narak-enter-row .narak-enter-btn {
    flex: 1;
    min-width: 160px;
}

.narak-enter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(200, 160, 255, 0.5);
    background: rgba(28, 16, 42, 0.75);
    color: #f3e6ff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.narak-enter-toggle:hover {
    border-color: rgba(230, 200, 255, 0.75);
    box-shadow: 0 8px 18px rgba(50, 20, 80, 0.3);
}

.narak-enter-toggle input {
    width: 16px;
    height: 16px;
    accent-color: rgba(210, 180, 255, 0.95);
}

.narak-enter-toggle input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.narak-enter-toggle input:disabled + span {
    opacity: 0.6;
}

.narak-multi-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(200, 160, 255, 0.5);
    background: rgba(20, 12, 32, 0.75);
    color: rgba(230, 200, 255, 0.95);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.narak-enter-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(210, 160, 255, 0.6);
    background: linear-gradient(140deg, rgba(98, 40, 145, 0.95), rgba(140, 80, 200, 0.85));
    color: #f6eaff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 12px 26px rgba(30, 12, 50, 0.55);
}

.narak-enter-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(230, 200, 255, 0.75);
    box-shadow: 0 16px 30px rgba(60, 20, 90, 0.55);
}

.narak-enter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.hell-hud {
    position: absolute;
    top: 10px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(20, 10, 8, 0.82);
    border: 1px solid rgba(255, 180, 130, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    z-index: 1400;
    min-width: 200px;
    pointer-events: auto;
}

.hell-hud-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #fff0da;
    font-weight: 600;
}

.hell-hud-label {
    font-size: 0.82rem;
    color: rgba(255, 220, 190, 0.7);
}

.hell-hud-value {
    font-size: 0.92rem;
}

.hell-return-btn {
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 170, 0.6);
    background: rgba(255, 210, 170, 0.12);
    color: #ffe9d0;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.hell-return-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.hell-return-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255, 190, 140, 0.3);
}

.hell-reenter-btn {
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(190, 210, 255, 0.6);
    background: rgba(190, 210, 255, 0.12);
    color: #e3eeff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.hell-reenter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.hell-reenter-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(160, 185, 255, 0.3);
}

.narak-hud {
    position: absolute;
    top: 10px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(28, 12, 40, 0.82);
    border: 1px solid rgba(200, 150, 255, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    z-index: 1400;
    min-width: 210px;
    pointer-events: auto;
}

.narak-hud-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #f4e7ff;
    font-weight: 600;
}

.narak-hud-label {
    font-size: 0.82rem;
    color: rgba(230, 200, 255, 0.75);
}

.narak-hud-value {
    font-size: 0.92rem;
}

.narak-stop-btn {
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 190, 255, 0.6);
    background: rgba(210, 180, 255, 0.15);
    color: #f4e7ff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.narak-stop-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.narak-stop-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(160, 120, 230, 0.35);
}

.narak-return-btn {
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(200, 170, 255, 0.55);
    background: rgba(170, 140, 220, 0.18);
    color: #f4e7ff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.narak-return-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.narak-return-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(150, 110, 220, 0.35);
}

.mp-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(700px, 100%);
}

.mp-side-stack > .profile-panel,
.mp-side-stack > .resource-panel {
    width: 100%;
}

.profile-panel {
    width: min(700px, 100%);
}

.profile-panel.mp-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-strong);
    padding: 18px;
    backdrop-filter: blur(6px);
}

.multiplayer-panel {
    background: rgba(12, 14, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(720px, 100%);
}

body.solo-mode .multiplayer-panel {
    display: none;
    position: absolute;
    top: 200vh;
    left: 0;
}

body.multi-mode .control-panel {
    display: none;
}

body.playing .multiplayer-panel {
    display: none;
}

body.playing.meeting-square .multiplayer-panel,
.multiplayer-panel.meeting-square-panel {
    display: none;
    position: fixed;
    right: 18px;
    top: 96px;
    left: auto;
    width: min(560px, 96vw);
    max-height: calc(100vh - 120px);
    z-index: 30;
}

body.playing.meeting-square .mp-rooms,
body.playing.meeting-square #mp-room-section,
body.playing.meeting-square #mp-room-detail {
    display: none !important;
}

body.playing.meeting-square #mp-chat,
.multiplayer-panel.meeting-square-panel #mp-chat {
    display: none !important;
    height: min(380px, 60vh);
}

body.panel-hidden .resource-panel {
    display: none !important;
}

body.solo-mode .profile-panel {
    display: none;
    position: absolute;
    top: 200vh;
    left: 0;
}

body.multi-mode .rift-panel {
    display: none;
}

body.multi-mode .hell-panel {
    display: none;
}

body.multi-mode .narak-panel {
    display: none;
}

body.panel-hidden .profile-panel {
    display: none !important;
}

body.multi-mode .mp-side-stack {
    grid-column: 3;
}

body.panel-hidden .mp-side-stack {
    display: none !important;
}

.multiplayer-config-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(360px, 100%);
}

body.solo-mode .multiplayer-config-panel {
    display: none;
    position: absolute;
    top: 200vh;
    left: 0;
}

body.panel-hidden .multiplayer-config-panel {
    display: none !important;
}

.mp-top {
    display: grid;
    gap: 14px;
}

.mp-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 18px;
    align-items: start;
}

.mp-rooms {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mp-chat-stack {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mp-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.25);
    display: grid;
    gap: 12px;
}

.mp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mp-card-title {
    font-weight: 700;
    letter-spacing: 0.3px;
}

.mp-card-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mp-card-body {
    display: grid;
    gap: 12px;
}

.mp-block-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mp-connection-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#mp-connection-status {
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#mp-connection-status[data-state='success'] {
    color: #aef7c6;
    border-color: rgba(112, 243, 156, 0.45);
    background: rgba(112, 243, 156, 0.12);
}

#mp-connection-status[data-state='error'] {
    color: #ffb3bd;
    border-color: rgba(255, 94, 115, 0.45);
    background: rgba(255, 94, 115, 0.12);
}

.mp-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.mp-tab {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.mp-tab.active {
    background: rgba(99, 209, 255, 0.18);
    border-color: rgba(99, 209, 255, 0.4);
    color: var(--text-primary);
}

.mp-profile-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 4px 0;
}

.mp-profile-label {
    color: var(--text-secondary);
}

.mp-inline-form {
    display: flex;
    gap: 8px;
}

.mp-inline-form input {
    flex: 1;
}

.mp-room-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

#mp-raid-start {
    width: 100%;
    min-height: 48px;
}

#mp-ready-btn {
    width: 100%;
    min-height: 48px;
}

#mp-ready-btn.ready-active {
    background: linear-gradient(135deg, #b6ff7a, #6edb6f);
    border-color: rgba(255, 255, 255, 0.3);
    color: #081d12;
    box-shadow: 0 14px 30px rgba(110, 219, 111, 0.35);
}

.mp-room-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
}

.mp-room-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: center;
}

.mp-room-info {
    display: grid;
    gap: 4px;
}

.mp-room-title {
    font-weight: 700;
}

.mp-room-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.mp-room-create {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.mp-room-current {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mp-room-name {
    font-weight: 700;
    font-size: 1rem;
}

.mp-room-players {
    display: grid;
    gap: 6px;
}

.mp-player-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 4px 0;
}

.mp-player-identity {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mp-player-name {
    font-weight: 700;
}

.mp-host-crown::before {
    content: "\1F451";
    font-size: 0.95rem;
    color: #f5d36b;
    text-shadow: 0 0 6px rgba(245, 211, 107, 0.45);
}

.mp-player-ready {
    color: #9bff7a;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.mp-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.mp-chat {
    border: 1px solid rgba(120, 210, 170, 0.22);
    border-radius: 14px;
    padding: 10px;
    background:
        radial-gradient(circle at 20% 10%, rgba(140, 220, 190, 0.12), transparent 60%),
        linear-gradient(160deg, rgba(12, 16, 24, 0.95), rgba(6, 8, 12, 0.9));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(90, 160, 130, 0.14);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    height: 360px;
}

.mp-chat .mp-card-head {
    padding: 8px 10px;
    margin: -10px -10px 0;
    border-radius: 12px;
    border: 1px solid rgba(120, 210, 170, 0.18);
    background: linear-gradient(120deg, rgba(30, 60, 45, 0.6), rgba(12, 16, 24, 0.2));
    justify-content: flex-start;
}

.mp-chat .mp-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.mp-chat-log {
    max-height: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
    padding-right: 4px;
}

.mp-chat-row {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
    align-items: flex-start;
}

.mp-chat-row:nth-child(2n) {
    background: rgba(120, 210, 170, 0.08);
    border-color: rgba(120, 210, 170, 0.16);
}

.mp-chat-name {
    font-weight: 700;
    color: #c9fbe2;
    background: rgba(120, 210, 170, 0.18);
    border-radius: 999px;
    padding: 2px 6px;
    white-space: nowrap;
}

.mp-chat-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: none;
    align-self: center;
}

.mp-chat-log.show-time .mp-chat-time {
    display: inline-flex;
}

.mp-chat-text {
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(235, 255, 245, 0.9);
    flex: 1;
    min-width: 0;
}

.mp-chat-form {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

.mp-chat-form input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(120, 210, 170, 0.2);
    background: rgba(8, 10, 16, 0.9);
    color: var(--text-primary);
    padding: 8px 10px;
}

.mp-chat-form input:focus {
    outline: none;
    border-color: rgba(180, 255, 220, 0.6);
    box-shadow: 0 0 0 2px rgba(120, 210, 170, 0.22);
}

button.chat-emoji-toggle {
    width: auto;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 10px;
    border: 1px solid rgba(140, 170, 200, 0.3);
    background: rgba(8, 10, 16, 0.85);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

button.chat-emoji-toggle[aria-expanded='true'] {
    border-color: rgba(180, 220, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(140, 200, 230, 0.2);
}

.chat-emoji-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid rgba(140, 170, 200, 0.3);
    background: rgba(8, 10, 16, 0.9);
}

.chat-emoji-panel[hidden] {
    display: none;
}

button.chat-emoji-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(140, 170, 200, 0.2);
    background: rgba(8, 10, 16, 0.75);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

button.chat-emoji-btn:hover {
    border-color: rgba(180, 220, 255, 0.6);
    background: rgba(40, 55, 70, 0.7);
}

.mp-chat-reset {
    border-radius: 999px;
    border: 1px solid rgba(120, 210, 170, 0.35);
    background: rgba(20, 30, 26, 0.7);
    color: #dfffee;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-chat-toggle {
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(120, 210, 170, 0.35);
    background: rgba(20, 30, 26, 0.7);
    color: #dfffee;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-chat-toggle[aria-pressed='true'] {
    border-color: rgba(180, 255, 220, 0.65);
    background: rgba(60, 120, 95, 0.6);
}

.mp-chat-toggle:hover,
.mp-chat-reset:hover {
    border-color: rgba(180, 255, 220, 0.65);
    background: rgba(40, 70, 55, 0.65);
}

body.playing.meeting-square #mp-chat .mp-card-head {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

body.playing.meeting-square .multiplayer-panel.mp-panel-dragging #mp-chat .mp-card-head {
    cursor: grabbing;
}

.gold-panel {
    border-radius: 16px;
    padding: 16px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 221, 150, 0.22), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(255, 195, 92, 0.18), transparent 55%),
        linear-gradient(130deg, rgba(36, 24, 6, 0.85), rgba(18, 14, 10, 0.88));
    border: 1px solid rgba(255, 210, 120, 0.35);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(255, 210, 120, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.resource-panel .gold-panel-header {
    font-size: 1.2rem;
}

.resource-panel .gold-panel-sub {
    font-size: 0.85rem;
}

.gold-panel::after {
    content: '';
    position: absolute;
    inset: -60% 40% auto -40%;
    height: 180%;
    background: linear-gradient(120deg, transparent, rgba(255, 230, 170, 0.18), transparent);
    transform: rotate(12deg);
    pointer-events: none;
}

.gold-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 1.9rem;
    color: rgba(255, 235, 190, 0.9);
}

.gold-panel-sub {
    font-size: 1.2rem;
    color: rgba(255, 220, 160, 0.65);
}

.gold-panel-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gold-sprite {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 236, 160, 0.85) 22%, rgba(255, 205, 96, 0.85) 45%, rgba(201, 120, 25, 0.9) 100%);
    border: 2px solid rgba(255, 228, 168, 0.7);
    box-shadow: 0 12px 28px rgba(255, 195, 92, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.35);
    position: relative;
    flex-shrink: 0;
}

.gold-sprite::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 235, 190, 0.65);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.25);
}

.gold-sprite::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    top: 18px;
    left: 18px;
    background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 226, 140, 0.6) 55%, transparent 70%);
    opacity: 0.9;
}

.gold-spark {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 70%);
    filter: drop-shadow(0 0 6px rgba(255, 230, 170, 0.8));
}

.gold-spark-a {
    top: -6px;
    right: 6px;
}

.gold-spark-b {
    bottom: 4px;
    left: -4px;
}

.gold-panel-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gold-label {
    font-size: 0.85rem;
    color: rgba(255, 233, 190, 0.7);
    font-weight: 600;
}

.gold-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #ffe7a9;
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-shadow: 0 0 18px rgba(255, 204, 112, 0.35);
}

.gold-unit {
    font-size: 2rem;
    color: rgba(255, 224, 170, 0.7);
    letter-spacing: 1px;
}

.gold-note {
    font-size: 0.75rem;
    color: rgba(255, 217, 140, 0.6);
}

.resource-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
}

.resource-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 45%, rgba(0, 0, 0, 0.12));
    opacity: 0.6;
    pointer-events: none;
}

.resource-card > * {
    position: relative;
    z-index: 1;
}

.resource-info {
    display: grid;
    gap: 4px;
}

.resource-name {
    font-weight: 700;
    letter-spacing: 0.3px;
}

.resource-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.resource-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.18);
}

.resource-icon::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    transform: rotate(12deg);
    opacity: 0.7;
}

.resource-icon::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    top: 8px;
    right: 10px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.resource-gold {
    border-color: rgba(255, 214, 140, 0.35);
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 220, 150, 0.18), transparent 55%),
        radial-gradient(circle at 85% 90%, rgba(255, 180, 90, 0.22), transparent 50%),
        linear-gradient(140deg, rgba(46, 30, 14, 0.85), rgba(20, 15, 10, 0.92)),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-gold {
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 236, 160, 0.9) 30%, rgba(255, 205, 96, 0.85) 55%, rgba(201, 120, 25, 0.95) 100%);
    border: 1px solid rgba(255, 228, 168, 0.65);
    box-shadow: 0 10px 20px rgba(255, 195, 92, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.35);
}

.resource-icon-gold::before {
    inset: 9px;
    border-radius: 50%;
    transform: rotate(0deg);
    opacity: 0.75;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 221, 150, 0.35), transparent 70%);
}

.resource-icon-gold::after {
    width: 16px;
    height: 16px;
    top: 8px;
    right: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 226, 140, 0.5) 55%, transparent 70%);
    box-shadow: 0 0 10px rgba(255, 230, 170, 0.6);
}

.resource-crystal {
    border-color: rgba(125, 196, 255, 0.35);
    background:
        radial-gradient(circle at 12% 8%, rgba(160, 220, 255, 0.35), transparent 55%),
        radial-gradient(circle at 90% 85%, rgba(90, 140, 220, 0.3), transparent 52%),
        linear-gradient(145deg, rgba(28, 48, 76, 0.88), rgba(14, 22, 42, 0.92)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-crystal {
    border-radius: 0;
    clip-path: polygon(50% 2%, 82% 18%, 96% 45%, 82% 80%, 50% 98%, 18% 80%, 4% 45%, 18% 18%);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(182, 235, 255, 0.7) 35%, rgba(78, 156, 230, 0.85) 62%, rgba(24, 78, 140, 0.95) 100%);
    box-shadow:
        0 14px 26px rgba(78, 156, 230, 0.35),
        inset 0 0 10px rgba(255, 255, 255, 0.35);
}

.resource-icon-crystal::before {
    inset: 9px;
    border-radius: 0;
    clip-path: polygon(50% 6%, 78% 24%, 90% 50%, 74% 78%, 50% 92%, 26% 78%, 10% 50%, 22% 24%);
    transform: rotate(-8deg);
    opacity: 0.9;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(126, 214, 255, 0.55) 45%, rgba(26, 92, 166, 0.65)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 40%);
}

.resource-icon-crystal::after {
    width: 20px;
    height: 20px;
    top: 5px;
    right: 5px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    box-shadow: 0 0 12px rgba(169, 227, 255, 0.85);
}

.resource-fate {
    border-color: rgba(255, 148, 205, 0.35);
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 200, 235, 0.28), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(175, 60, 140, 0.35), transparent 52%),
        linear-gradient(150deg, rgba(86, 32, 76, 0.88), rgba(38, 18, 46, 0.92)),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-fate {
    border-radius: 44% 56% 62% 38% / 54% 44% 56% 46%;
    background:
        radial-gradient(circle at 65% 25%, rgba(255, 235, 250, 0.95), rgba(255, 165, 220, 0.65) 38%, rgba(192, 50, 150, 0.8) 70%, rgba(92, 10, 70, 0.98) 100%);
    box-shadow:
        0 14px 26px rgba(255, 120, 200, 0.35),
        inset -6px -10px 14px rgba(120, 5, 70, 0.55);
}

.resource-icon-fate::before {
    inset: auto;
    width: 28px;
    height: 28px;
    top: 6px;
    right: 8px;
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0.95;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.98), rgba(255, 205, 235, 0.75) 45%, rgba(255, 120, 200, 0.25) 70%, rgba(255, 120, 200, 0) 100%);
}

.resource-icon-fate::after {
    width: 40px;
    height: 14px;
    top: 32px;
    left: -10px;
    right: auto;
    border-radius: 999px;
    transform: rotate(-18deg);
    background:
        linear-gradient(90deg, rgba(255, 154, 218, 0) 0%, rgba(255, 154, 218, 0.35) 35%, rgba(255, 201, 236, 0.85) 70%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 0 14px rgba(255, 145, 208, 0.6);
}

.resource-honor {
    border-color: rgba(255, 178, 104, 0.35);
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 210, 150, 0.28), transparent 55%),
        radial-gradient(circle at 88% 85%, rgba(190, 110, 50, 0.35), transparent 52%),
        linear-gradient(150deg, rgba(86, 50, 20, 0.88), rgba(40, 24, 12, 0.92)),
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-honor {
    border-radius: 0;
    clip-path: polygon(50% 2%, 82% 28%, 70% 98%, 30% 98%, 18% 28%);
    background:
        linear-gradient(165deg, #fff7e6 0%, #ffd892 38%, #e58b2b 70%, #8c4308 100%);
    box-shadow:
        0 14px 24px rgba(255, 178, 104, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.resource-icon-honor::before {
    inset: 9px 14px 12px 14px;
    border-radius: 0;
    clip-path: polygon(50% 4%, 76% 30%, 66% 96%, 34% 96%, 24% 30%);
    transform: none;
    opacity: 0.8;
    background:
        linear-gradient(170deg, rgba(255, 255, 255, 0.9), rgba(255, 204, 124, 0.4) 55%, rgba(154, 78, 14, 0.5));
}

.resource-icon-honor::after {
    width: 8px;
    height: 28px;
    top: 12px;
    left: 16px;
    right: auto;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(255, 220, 160, 0.6);
}

.resource-radiant {
    border-color: rgba(120, 255, 170, 0.35);
    background:
        radial-gradient(circle at 12% 10%, rgba(170, 255, 210, 0.28), transparent 55%),
        radial-gradient(circle at 88% 85%, rgba(30, 140, 80, 0.35), transparent 52%),
        linear-gradient(150deg, rgba(22, 78, 44, 0.88), rgba(10, 32, 18, 0.92)),
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-radiant {
    border-radius: 0;
    clip-path: polygon(50% 3%, 78% 8%, 96% 36%, 84% 78%, 56% 98%, 20% 90%, 4% 56%, 14% 18%);
    background:
        linear-gradient(165deg, #f6fff9 0%, #b9ffd2 38%, #46d17f 70%, #1f7a44 100%);
    box-shadow:
        0 14px 24px rgba(120, 255, 180, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.resource-icon-radiant::before {
    inset: 8px 12px 10px 12px;
    border-radius: 0;
    clip-path: polygon(50% 8%, 74% 14%, 88% 40%, 78% 74%, 54% 92%, 24% 84%, 10% 56%, 20% 24%);
    transform: none;
    opacity: 0.8;
    background:
        linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(170, 255, 210, 0.45) 55%, rgba(40, 130, 80, 0.55));
}

.resource-icon-radiant::after {
    width: 10px;
    height: 26px;
    top: 10px;
    left: 18px;
    right: auto;
    border-radius: 999px;
    transform: rotate(-18deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(170, 255, 210, 0.6);
}

.resource-rune {
    border-color: rgba(188, 140, 255, 0.35);
    background:
        radial-gradient(circle at 12% 10%, rgba(210, 180, 255, 0.28), transparent 55%),
        radial-gradient(circle at 88% 85%, rgba(110, 60, 160, 0.35), transparent 52%),
        linear-gradient(150deg, rgba(46, 24, 82, 0.88), rgba(20, 12, 38, 0.92)),
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-rune {
    border-radius: 0;
    clip-path: polygon(50% 2%, 82% 22%, 96% 50%, 82% 78%, 50% 98%, 18% 78%, 4% 50%, 18% 22%);
    background:
        linear-gradient(165deg, #f5efff 0%, #d8bfff 35%, #9a6bff 65%, #4a1c9a 100%);
    box-shadow:
        0 14px 24px rgba(175, 120, 255, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.resource-icon-rune::before {
    inset: 8px 12px 10px 12px;
    border-radius: 0;
    clip-path: polygon(50% 8%, 74% 26%, 88% 50%, 74% 74%, 50% 92%, 26% 74%, 12% 50%, 26% 26%);
    transform: none;
    opacity: 0.85;
    background:
        linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(190, 150, 255, 0.45) 55%, rgba(90, 40, 160, 0.55));
}

.resource-icon-rune::after {
    width: 10px;
    height: 26px;
    top: 10px;
    left: 18px;
    right: auto;
    border-radius: 999px;
    transform: rotate(-18deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(200, 170, 255, 0.6);
}

.resource-dopamine {
    border-color: rgba(255, 160, 120, 0.35);
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 210, 160, 0.3), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(255, 140, 110, 0.28), transparent 52%),
        linear-gradient(145deg, rgba(60, 24, 18, 0.88), rgba(24, 12, 10, 0.92)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
}

.resource-icon-dopamine {
    border-radius: 16px;
    background: url('assets/images/wisdom_essence.svg') center/cover no-repeat;
    border: 1px solid rgba(255, 216, 160, 0.55);
    box-shadow: 0 10px 20px rgba(120, 80, 40, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.2);
}

.resource-icon-dopamine::before {
    content: none;
    display: none;
}

.resource-icon-dopamine::after {
    content: none;
    display: none;
}

.resource-icon-rift {
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(24, 56, 78, 0.95), rgba(10, 18, 30, 0.98)),
        radial-gradient(circle at 25% 25%, rgba(140, 240, 255, 0.45), transparent 55%);
    border: 1px solid rgba(150, 230, 255, 0.5);
    box-shadow: 0 10px 22px rgba(80, 200, 230, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.2);
}

.resource-icon-rift::before {
    inset: 8px;
    border-radius: 10px;
    transform: rotate(0deg);
    opacity: 0.9;
    background: linear-gradient(135deg, rgba(220, 255, 255, 0.9), rgba(100, 210, 240, 0.35));
    box-shadow: inset 0 0 12px rgba(0, 20, 40, 0.45);
}

.resource-icon-rift::after {
    width: 14px;
    height: 14px;
    top: 9px;
    right: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(160, 230, 255, 0.25) 70%, transparent 72%);
    box-shadow: 0 0 12px rgba(160, 230, 255, 0.7);
}

.resource-icon-hell-key {
    --key-main: #7cc8ff;
    --key-glow: rgba(124, 200, 255, 0.55);
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(145deg, rgba(18, 32, 48, 0.95), rgba(10, 14, 24, 0.95));
    border: 1px solid rgba(150, 210, 255, 0.45);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.12);
}

.resource-icon-hell-key::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 9px;
    top: 16px;
    border-radius: 50%;
    border: 2px solid var(--key-main);
    background:
        radial-gradient(circle at 50% 50%, rgba(12, 16, 26, 0.95) 40%, rgba(12, 16, 26, 0) 42%),
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 0 10px var(--key-glow), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.resource-icon-hell-key::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 6px;
    left: 20px;
    top: 23px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--key-main), rgba(255, 255, 255, 0.95));
    box-shadow: 0 0 10px var(--key-glow), inset 0 0 3px rgba(255, 255, 255, 0.45);
    clip-path: polygon(0 0, 78% 0, 78% 35%, 88% 35%, 88% 70%, 78% 70%, 78% 100%, 0 100%);
}

.resource-icon.hell-key-rare { --key-main: #7cc8ff; --key-glow: rgba(124, 200, 255, 0.55); }
.resource-icon.hell-key-heroic { --key-main: #a77bff; --key-glow: rgba(167, 123, 255, 0.6); }
.resource-icon.hell-key-legendary { --key-main: #ffd36a; --key-glow: rgba(255, 211, 106, 0.6); }
.resource-icon.hell-key-relic { --key-main: #ff8a7a; --key-glow: rgba(255, 138, 122, 0.55); }

.resource-icon-hell-key-shard {
    --key-main: #9fd7ff;
    --key-glow: rgba(160, 210, 255, 0.45);
    border-radius: 14px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.2), transparent 50%),
        linear-gradient(145deg, rgba(16, 26, 40, 0.95), rgba(8, 12, 20, 0.95));
    border: 1px solid rgba(150, 210, 255, 0.35);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.12);
}

.resource-icon-hell-key-shard::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 11px;
    top: 16px;
    border-radius: 5px;
    background: linear-gradient(140deg, var(--key-main), rgba(255, 255, 255, 0.9));
    box-shadow: 0 0 8px var(--key-glow);
    clip-path: polygon(0 10%, 70% 0, 100% 55%, 80% 100%, 10% 90%);
}

.resource-icon-hell-key-shard::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 26px;
    top: 26px;
    border-radius: 5px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), var(--key-main));
    box-shadow: 0 0 8px var(--key-glow);
    transform: rotate(12deg);
    clip-path: polygon(0 15%, 65% 0, 100% 55%, 70% 100%, 5% 85%);
}

.resource-icon-narak-key {
    --narak-main: #b36dff;
    --narak-edge: #ff527a;
    --narak-glow: rgba(178, 110, 255, 0.65);
    border-radius: 14px;
    background:
        radial-gradient(circle at 70% 22%, rgba(255, 96, 126, 0.25), transparent 55%),
        radial-gradient(circle at 22% 78%, rgba(130, 90, 210, 0.4), transparent 55%),
        linear-gradient(150deg, rgba(22, 14, 34, 0.96), rgba(8, 6, 16, 0.98));
    border: 1px solid rgba(190, 130, 255, 0.55);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.1);
}

.resource-icon-narak-key::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 9px;
    top: 18px;
    border-radius: 50%;
    border: 2px solid var(--narak-main);
    background:
        radial-gradient(circle at 45% 45%, rgba(255, 255, 255, 0.8), rgba(40, 20, 60, 0.95) 55%, rgba(40, 20, 60, 0) 58%);
    box-shadow: 0 0 10px var(--narak-glow), inset 0 0 4px rgba(255, 255, 255, 0.35);
}

.resource-icon-narak-key::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 8px;
    left: 20px;
    top: 20px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--narak-main), var(--narak-edge) 60%, rgba(255, 240, 250, 0.95));
    box-shadow: 0 0 10px rgba(255, 90, 120, 0.5), 0 0 6px var(--narak-glow);
    clip-path: polygon(0 0, 70% 0, 70% 30%, 90% 30%, 90% 60%, 65% 60%, 65% 85%, 90% 85%, 90% 100%, 0 100%, 8% 60%, 0 40%);
}

.resource-icon-gold-box {
    --box-top: rgba(255, 235, 200, 0.35);
    --box-bottom: rgba(160, 110, 50, 0.35);
    border-radius: 12px;
    background:
        linear-gradient(150deg, var(--box-top), var(--box-bottom)),
        linear-gradient(140deg, rgba(24, 20, 14, 0.95), rgba(12, 10, 8, 0.95));
    border: 1px solid rgba(255, 214, 140, 0.4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.18);
}

.resource-icon-gold-box::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    border: 2px solid rgba(255, 235, 200, 0.55);
    box-shadow: inset 0 0 8px rgba(255, 230, 180, 0.35);
}

.resource-icon-gold-box::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 19px;
    top: 19px;
    border-radius: 3px;
    background: linear-gradient(145deg, rgba(255, 245, 210, 0.85), rgba(190, 120, 40, 0.85));
    box-shadow: 0 0 8px rgba(255, 215, 150, 0.5);
}

.resource-icon.gold-box-premium { --box-top: rgba(255, 235, 200, 0.35); --box-bottom: rgba(160, 110, 50, 0.35); }
.resource-icon.gold-box-super { --box-top: rgba(255, 245, 220, 0.45); --box-bottom: rgba(190, 130, 60, 0.4); }
.resource-icon.gold-box-royal { --box-top: rgba(255, 248, 230, 0.55); --box-bottom: rgba(210, 150, 70, 0.45); }

.resource-panel {
    padding: 14px;
    gap: 10px;
}

.resource-panel .resource-stack {
    gap: 10px;
}

.resource-panel .resource-card {
    padding: 8px;
    gap: 8px;
    border-radius: 10px;
}

.resource-panel .resource-info {
    gap: 3px;
}

.resource-panel .resource-name {
    font-size: 0.75rem;
}

.resource-panel .resource-value {
    font-size: 0.95rem;
}

.resource-panel .resource-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.resource-panel .resource-icon::before {
    inset: 5px;
    border-radius: 8px;
}

.resource-panel .resource-icon::after {
    width: 10px;
    height: 10px;
    top: 5px;
    right: 6px;
    border-radius: 4px;
}

.resource-panel .resource-icon-gold {
    border-radius: 50%;
}

.resource-panel .resource-icon-gold::before {
    inset: 6px;
    border-radius: 50%;
}

.resource-panel .resource-icon-gold::after {
    width: 10px;
    height: 10px;
    top: 5px;
    right: 5px;
    border-radius: 50%;
}

.resource-panel .resource-icon-crystal::before {
    inset: 6px;
}

.resource-panel .resource-icon-crystal::after {
    width: 12px;
    height: 12px;
    top: 3px;
    right: 3px;
}

.resource-panel .resource-icon-fate::before {
    width: 19px;
    height: 19px;
    top: 4px;
    right: 5px;
}

.resource-panel .resource-icon-fate::after {
    width: 27px;
    height: 9px;
    top: 21px;
    left: -7px;
}

.resource-panel .resource-icon-honor::before {
    inset: 6px 9px 8px;
}

.resource-panel .resource-icon-honor::after {
    width: 5px;
    height: 19px;
    top: 8px;
    left: 11px;
}

.resource-panel .resource-icon-radiant::before {
    inset: 6px 9px 8px;
}

.resource-panel .resource-icon-radiant::after {
    width: 5px;
    height: 19px;
    top: 8px;
    left: 11px;
}

.resource-panel .resource-icon-rune::before {
    inset: 6px 9px 8px;
}

.resource-panel .resource-icon-rune::after {
    width: 5px;
    height: 19px;
    top: 8px;
    left: 11px;
}

.resource-panel .resource-icon-dopamine::before {
    inset: 6px;
    border-radius: 10px;
}

.resource-panel .resource-icon-dopamine::after {
    width: 10px;
    height: 10px;
    top: 5px;
    right: 5px;
    border-radius: 4px;
}
body.panel-hidden .control-panel {
    display: none !important;
}

body.prestart .control-panel {
    width: min(560px, 100%);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.panel-action-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(120, 200, 255, 0.55);
    background: rgba(12, 18, 32, 0.75);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.panel-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 214, 122, 0.7);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

#raid-reward-open {
    padding: 6px 8px;
    min-width: 96px;
    width: 96px;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
}

#rift-info-open {
    padding: 6px 8px;
    min-width: 96px;
    width: 96px;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
}

.panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.panel-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-row .panel-section {
    min-height: 220px;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.multiplayer-config-panel .class-grid {
    grid-template-columns: 1fr;
}

.class-entry {
    display: flex;
    align-items: center;
    gap: 10px;
}

.class-entry-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.class-entry-actions .job-info-btn {
    margin-left: 0;
}

.class-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), rgba(99, 209, 255, 0.06));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: inset 0 0 0 rgba(99, 209, 255, 0);
    outline: none;
    width: 50%;
    min-height: 69px;
}

.multiplayer-config-panel .class-card {
    width: 100%;
    min-height: 41px;
    padding: 6px 8px;
}

.multiplayer-config-panel .class-name {
    font-size: 0.95rem;
}

.multiplayer-config-panel .class-meta {
    font-size: 0.7rem;
}

.multiplayer-config-panel .job-info-btn {
    height: 28px;
    padding: 0 16px;
    min-width: 125px;
    justify-content: center;
}

.class-card:hover {
    border-color: rgba(158, 252, 255, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), inset 0 0 14px rgba(99, 209, 255, 0.18);
    transform: translateY(-1px);
}

.class-card.active {
    border-color: rgba(158, 252, 255, 0.7);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(158, 252, 255, 0.3);
    background: linear-gradient(145deg, rgba(99, 209, 255, 0.14), rgba(255, 255, 255, 0.05));
}

.class-name {
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.class-meta {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.start-button-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

#start-button {
    width: 75%;
    min-height: 84px;
    padding: 18px 12px;
    font-size: 1.5rem;
}

.job-info-btn {
    position: static;
    margin-left: auto;
    z-index: 2;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(112, 243, 156, 0.55);
    background: linear-gradient(140deg, rgba(112, 243, 156, 0.4), rgba(12, 34, 22, 0.9));
    color: rgba(240, 255, 246, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    width: auto;
}

.job-info-btn:hover {
    border-color: rgba(112, 243, 156, 0.85);
    background: linear-gradient(140deg, rgba(136, 255, 182, 0.5), rgba(16, 45, 28, 0.95));
}

.job-info-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-close,
.inventory-close,
.shop-close,
.admin-close,
.skillup-close,
.raid-reward-close,
.rift-info-close,
.refine-close,
.skill-editor-close {
    line-height: 1;
    text-align: center;
}

.settings-close,
.inventory-close,
.shop-close,
.admin-close,
.rift-info-close,
.refine-close,
.skill-editor-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.refine-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 200, 120, 0.65);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 240, 205, 0.7), rgba(255, 170, 95, 0.2)),
        linear-gradient(160deg, rgba(40, 26, 16, 0.7), rgba(12, 14, 20, 0.9));
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 170, 90, 0.25);
}

.inventory-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(150, 235, 170, 0.6);
    background:
        radial-gradient(circle at 30% 30%, rgba(200, 245, 215, 0.7), rgba(120, 200, 155, 0.18)),
        rgba(12, 16, 18, 0.78);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

.jewel-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(180, 140, 245, 0.65);
    background:
        radial-gradient(circle at 30% 30%, rgba(235, 220, 255, 0.75), rgba(160, 115, 220, 0.2)),
        rgba(12, 10, 18, 0.84);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(160, 110, 220, 0.25);
}

.transcend-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(200, 245, 255, 0.72);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.75), rgba(170, 235, 255, 0.35) 42%, rgba(90, 140, 210, 0.15) 70%),
        linear-gradient(160deg, rgba(90, 140, 210, 0.35), rgba(30, 60, 110, 0.35)),
        rgba(10, 14, 24, 0.85);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 22px rgba(210, 250, 255, 0.28), 0 0 12px rgba(255, 235, 200, 0.2);
}

.transcend-icon-btn:hover {
    border-color: rgba(235, 250, 255, 0.98);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), rgba(195, 245, 255, 0.45) 45%, rgba(110, 170, 225, 0.2) 70%),
        linear-gradient(160deg, rgba(120, 175, 235, 0.45), rgba(50, 90, 145, 0.45)),
        rgba(12, 16, 26, 0.9);
}

.shop-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(175, 245, 190, 0.75);
    background:
        radial-gradient(circle at 35% 30%, rgba(240, 255, 245, 0.5), rgba(10, 18, 14, 0.6) 65%),
        linear-gradient(150deg, rgba(135, 235, 190, 0.55), rgba(40, 110, 80, 0.4));
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 16px rgba(140, 255, 205, 0.2);
}

.shop-icon-btn:hover {
    border-color: rgba(235, 255, 245, 0.9);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(12, 16, 18, 0.6) 65%),
        linear-gradient(150deg, rgba(175, 255, 220, 0.6), rgba(70, 160, 120, 0.4));
}

.shop-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 4px 4px 6px 6px;
    background: linear-gradient(180deg, rgba(230, 255, 245, 0.95), rgba(120, 190, 150, 0.9));
    border: 1px solid rgba(70, 150, 110, 0.7);
    box-shadow:
        inset 0 -3px 6px rgba(20, 50, 35, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.shop-icon::before {
    content: '';
    position: absolute;
    left: 1px;
    top: -1px;
    width: 22px;
    height: 9px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 4px, rgba(150, 235, 205, 0.95) 4px 8px),
        linear-gradient(180deg, rgba(230, 255, 245, 0.95), rgba(110, 185, 150, 0.95));
    clip-path: polygon(0 85%, 10% 60%, 20% 85%, 30% 60%, 40% 85%, 50% 60%, 60% 85%, 70% 60%, 80% 85%, 90% 60%, 100% 85%, 100% 0, 0 0);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.shop-icon::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    width: 18px;
    height: 13px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(40, 90, 65, 0.95), rgba(20, 55, 40, 0.95)) 7px 4px / 6px 9px no-repeat,
        linear-gradient(180deg, rgba(235, 255, 248, 0.92), rgba(170, 230, 205, 0.9)) 2px 5px / 5px 5px no-repeat,
        linear-gradient(180deg, rgba(235, 255, 248, 0.92), rgba(170, 230, 205, 0.9)) 13px 5px / 5px 5px no-repeat,
        linear-gradient(180deg, rgba(210, 245, 228, 0.95), rgba(120, 190, 150, 0.85)) 0 0 / 100% 100% no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(60, 140, 110, 0.4),
        inset 0 -2px 3px rgba(10, 40, 25, 0.3);
}

.square-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 14px;
    border: 1px solid rgba(150, 230, 190, 0.6);
    background:
        radial-gradient(circle at 30% 25%, rgba(250, 255, 252, 0.7), rgba(12, 20, 18, 0.7) 60%),
        linear-gradient(155deg, rgba(110, 220, 175, 0.65), rgba(40, 110, 80, 0.55));
    display: grid;
    place-items: center;
    position: relative;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(120, 240, 190, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.square-icon-btn:hover {
    border-color: rgba(230, 255, 240, 0.95);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85), rgba(12, 20, 18, 0.7) 60%),
        linear-gradient(155deg, rgba(150, 245, 205, 0.7), rgba(60, 150, 110, 0.55));
}

.square-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
}

.square-icon::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(235, 255, 245, 0.98), rgba(90, 170, 135, 0.92));
    box-shadow:
        inset 0 -3px 6px rgba(20, 70, 45, 0.45),
        0 0 8px rgba(210, 255, 230, 0.5);
}

.square-icon::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(150, 100, 60, 0.95), rgba(90, 60, 30, 0.95)) 2px 12px / 4px 5px no-repeat,
        linear-gradient(180deg, rgba(150, 100, 60, 0.95), rgba(90, 60, 30, 0.95)) 10px 12px / 4px 5px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%) 0 0 / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(25, 70, 45, 0.5), rgba(25, 70, 45, 0.5)) 0 0 / 100% 100% no-repeat;
    box-shadow:
        inset 0 0 0 2px rgba(25, 75, 50, 0.6),
        0 0 6px rgba(200, 255, 225, 0.45);
}

.friend-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 14px;
    border: 1px solid rgba(130, 220, 245, 0.65);
    background:
        radial-gradient(circle at 30% 25%, rgba(240, 255, 255, 0.7), rgba(12, 18, 26, 0.7) 60%),
        linear-gradient(155deg, rgba(120, 225, 245, 0.65), rgba(40, 120, 160, 0.55));
    display: grid;
    place-items: center;
    position: relative;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(140, 230, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.friend-icon-btn:hover {
    border-color: rgba(220, 255, 255, 0.9);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85), rgba(12, 18, 26, 0.7) 60%),
        linear-gradient(155deg, rgba(160, 245, 255, 0.7), rgba(65, 160, 195, 0.55));
}

.friend-icon {
    position: relative;
    width: 24px;
    height: 20px;
    display: block;
    border-radius: 6px;
    background:
        radial-gradient(circle at 30% 70%, rgba(170, 235, 255, 0.75), rgba(60, 130, 175, 0.5) 62%),
        radial-gradient(circle at 70% 70%, rgba(210, 250, 255, 0.85), rgba(80, 150, 190, 0.55) 60%);
    clip-path: polygon(0 62%, 10% 38%, 28% 20%, 50% 10%, 72% 20%, 90% 38%, 100% 62%, 100% 100%, 0 100%);
    box-shadow: inset 0 -2px 4px rgba(20, 70, 95, 0.4);
}

.friend-icon::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(250, 255, 255, 0.98), rgba(135, 210, 240, 0.92));
    border: 1px solid rgba(70, 125, 160, 0.5);
    box-shadow:
        inset 0 -2px 3px rgba(40, 90, 115, 0.35),
        0 0 8px rgba(180, 240, 255, 0.6);
}

.friend-icon::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    right: 2px;
    top: 4px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(235, 252, 255, 0.98), rgba(120, 195, 225, 0.92));
    border: 1px solid rgba(70, 120, 155, 0.45);
    box-shadow:
        inset 0 -2px 3px rgba(35, 85, 110, 0.35),
        0 0 7px rgba(170, 230, 255, 0.55);
}

.friend-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 190, 160, 0.98), rgba(255, 110, 90, 0.95));
    color: #23090d;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 210, 180, 0.8);
    pointer-events: none;
}

.friend-badge.is-visible {
    display: grid;
}

.friend-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4b4b;
    border: 2px solid rgba(18, 20, 28, 0.9);
    box-shadow: 0 0 6px rgba(255, 75, 75, 0.65);
    display: none;
    pointer-events: none;
}

.friend-dot.is-visible {
    display: block;
}

.mail-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 14px;
    border: 1px solid rgba(205, 190, 255, 0.7);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 252, 255, 0.7), rgba(18, 14, 26, 0.7) 60%),
        linear-gradient(155deg, rgba(180, 155, 235, 0.65), rgba(80, 65, 140, 0.55));
    display: grid;
    place-items: center;
    position: relative;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(195, 175, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mail-icon-btn:hover {
    border-color: rgba(245, 235, 255, 0.95);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85), rgba(18, 14, 26, 0.7) 60%),
        linear-gradient(155deg, rgba(210, 190, 255, 0.7), rgba(105, 90, 170, 0.55));
}

.mail-icon {
    position: relative;
    width: 24px;
    height: 18px;
    display: block;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 252, 255, 0.98), rgba(175, 155, 225, 0.95));
    box-shadow:
        inset 0 -3px 6px rgba(60, 45, 90, 0.4),
        0 0 6px rgba(210, 180, 255, 0.45);
}

.mail-icon::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 4px;
    width: 20px;
    height: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(195, 175, 235, 0.92));
    clip-path: polygon(0 0, 50% 65%, 100% 0, 100% 100%, 0 100%);
    border-radius: 2px;
}

.mail-icon::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%);
    clip-path: polygon(0 30%, 50% 70%, 100% 30%, 100% 90%, 50% 55%, 0 90%);
    opacity: 0.75;
}

.mail-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 190, 160, 0.98), rgba(255, 110, 90, 0.95));
    color: #23090d;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 210, 180, 0.8);
    pointer-events: none;
}

.mail-badge.is-visible {
    display: grid;
}

.tutorial-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 12px;
    border: 1px solid rgba(140, 220, 255, 0.75);
    background:
        radial-gradient(circle at 30% 30%, rgba(220, 245, 255, 0.5), rgba(10, 16, 24, 0.62) 70%),
        linear-gradient(150deg, rgba(110, 190, 255, 0.55), rgba(40, 80, 130, 0.5));
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(120, 200, 255, 0.2);
}

.tutorial-icon-btn:hover {
    border-color: rgba(200, 245, 255, 0.95);
    background:
        radial-gradient(circle at 30% 30%, rgba(245, 255, 255, 0.6), rgba(10, 16, 24, 0.6) 70%),
        linear-gradient(150deg, rgba(150, 220, 255, 0.65), rgba(70, 120, 170, 0.5));
}

.tutorial-icon {
    position: relative;
    width: 20px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(210, 245, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(90, 140, 190, 0.6);
}

.tutorial-icon::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 5px;
    height: 2px;
    background: rgba(190, 235, 255, 0.95);
    box-shadow: 0 5px 0 rgba(190, 235, 255, 0.75), 0 10px 0 rgba(150, 210, 245, 0.7);
}

.tutorial-icon::after {
    content: '';
    position: absolute;
    left: 3px;
    top: -3px;
    width: 14px;
    height: 4px;
    border-radius: 3px;
    background: rgba(140, 210, 255, 0.85);
}

.stats-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(175, 210, 255, 0.75);
    background:
        radial-gradient(circle at 35% 30%, rgba(235, 245, 255, 0.5), rgba(12, 16, 22, 0.6) 65%),
        linear-gradient(150deg, rgba(130, 170, 230, 0.55), rgba(50, 80, 140, 0.4));
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 16px rgba(150, 190, 255, 0.22);
}

.stats-icon-btn:hover {
    border-color: rgba(235, 245, 255, 0.9);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(12, 16, 22, 0.6) 65%),
        linear-gradient(150deg, rgba(175, 210, 255, 0.6), rgba(70, 110, 170, 0.4));
}

.stats-icon {
    position: relative;
    width: 22px;
    height: 20px;
}

.stats-icon::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 4px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(230, 240, 255, 0.95), rgba(120, 150, 210, 0.9));
    box-shadow:
        6px 0 0 rgba(170, 205, 255, 0.95),
        12px -4px 0 rgba(110, 150, 210, 0.95);
}

.stats-icon::after {
    content: '';
    position: absolute;
    left: 1px;
    bottom: 1px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: rgba(65, 95, 150, 0.9);
}

.inventory-icon-btn:hover {
    border-color: rgba(170, 240, 190, 0.9);
    background:
        radial-gradient(circle at 30% 30%, rgba(215, 250, 225, 0.82), rgba(140, 215, 170, 0.25)),
        rgba(12, 16, 18, 0.88);
}

.jewel-icon-btn:hover {
    border-color: rgba(210, 175, 255, 0.9);
    background:
        radial-gradient(circle at 30% 30%, rgba(245, 232, 255, 0.85), rgba(175, 130, 235, 0.3)),
        rgba(12, 10, 18, 0.9);
}

.inventory-icon {
    position: relative;
    width: 22px;
    height: 18px;
    display: block;
    border-radius: 5px 5px 7px 7px;
    background: linear-gradient(160deg, rgba(234, 198, 150, 0.95), rgba(150, 90, 40, 0.95));
    box-shadow: inset 0 -3px 5px rgba(40, 20, 10, 0.4);
}

.inventory-icon::before {
    content: '';
    position: absolute;
    left: 2px;
    top: -1px;
    width: 18px;
    height: 8px;
    border-radius: 9px 9px 5px 5px;
    background: linear-gradient(180deg, rgba(255, 225, 185, 0.95), rgba(190, 120, 60, 0.95));
    box-shadow: inset 0 -2px 3px rgba(60, 30, 15, 0.35);
}

.inventory-icon::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 7px;
    width: 4px;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 245, 220, 0.95), rgba(220, 170, 110, 0.95));
    box-shadow: 0 0 6px rgba(255, 220, 160, 0.7), inset 0 0 3px rgba(90, 50, 20, 0.4);
}

.jewel-top-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
    background: linear-gradient(155deg, rgba(245, 230, 255, 0.95), rgba(150, 85, 215, 0.98));
    clip-path: polygon(50% 0%, 88% 18%, 100% 60%, 50% 100%, 0% 60%, 12% 18%);
    box-shadow: inset 0 -4px 6px rgba(60, 20, 80, 0.5), 0 0 8px rgba(200, 140, 255, 0.6);
}

.jewel-top-icon::before {
    content: '';
    position: absolute;
    inset: 3px;
    clip-path: inherit;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%);
    opacity: 0.85;
}

.jewel-top-icon::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 235, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 210, 255, 0.9);
}

.transcend-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(170, 240, 255, 0.55) 52%, rgba(170, 240, 255, 0.18) 64%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.75), rgba(120, 200, 255, 0.25) 55%, rgba(0, 0, 0, 0) 74%);
}

.transcend-icon::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 10px;
    height: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(150, 225, 255, 0.7));
    clip-path: polygon(50% 0%, 82% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 18% 35%);
    box-shadow: 0 0 10px rgba(180, 240, 255, 0.75), 0 0 16px rgba(255, 235, 200, 0.35);
}

.transcend-icon::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 220, 160, 0.55));
    box-shadow: 0 0 8px rgba(255, 230, 190, 0.8);
}

.refine-icon-btn:hover {
    border-color: rgba(255, 220, 150, 0.9);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 245, 220, 0.85), rgba(255, 190, 120, 0.28)),
        linear-gradient(160deg, rgba(55, 34, 20, 0.78), rgba(14, 16, 24, 0.92));
}

.refine-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    transform: rotate(-12deg);
}

.refine-icon::before {
    content: '';
    position: absolute;
    left: 1px;
    bottom: 2px;
    width: 18px;
    height: 9px;
    background: linear-gradient(160deg, #e9eef6, #7e8fa6);
    clip-path: polygon(0 55%, 14% 22%, 62% 22%, 78% 0, 92% 0, 92% 35%, 100% 35%, 100% 72%, 70% 72%, 60% 100%, 12% 100%, 0 72%);
    box-shadow: 0 0 8px rgba(120, 160, 200, 0.45), inset 0 -2px 4px rgba(20, 30, 45, 0.45);
}

.refine-icon::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 11px;
    height: 15px;
    background: linear-gradient(160deg, rgba(255, 230, 170, 0.95), rgba(255, 130, 70, 0.85));
    clip-path: polygon(38% 0%, 100% 0%, 100% 28%, 68% 28%, 68% 100%, 34% 100%, 34% 28%, 0 28%, 0 0, 38% 0%);
    transform: rotate(-28deg);
    box-shadow: 0 0 8px rgba(255, 170, 100, 0.7);
}

.engrave-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 210, 140, 0.65);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 235, 200, 0.6), rgba(220, 170, 90, 0.2)),
        rgba(12, 14, 22, 0.78);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 210, 140, 0.25);
}

.engrave-icon-btn:hover {
    border-color: rgba(255, 225, 170, 0.9);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 245, 220, 0.78), rgba(230, 180, 110, 0.25)),
        rgba(12, 14, 22, 0.85);
}

.engrave-icon {
    position: relative;
    width: 22px;
    height: 18px;
    display: block;
}

.engrave-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255, 238, 210, 0.95), rgba(200, 130, 70, 0.95));
    box-shadow: inset 0 0 0 2px rgba(140, 90, 40, 0.6), 0 0 8px rgba(255, 210, 150, 0.6);
}

.engrave-icon::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 2px;
    width: 2px;
    height: 14px;
    background: rgba(120, 80, 40, 0.7);
    box-shadow:
        -6px 0 0 rgba(255, 245, 225, 0.55),
        6px 0 0 rgba(210, 160, 90, 0.35);
    border-radius: 1px;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(120, 200, 255, 0.18), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(255, 200, 140, 0.14), transparent 60%),
        rgba(4, 6, 12, 0.78);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 6000;
}

.auth-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal {
    width: min(960px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    background: rgba(12, 14, 22, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    display: grid;
    gap: 16px;
}

.auth-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.mp-server-message {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.mp-server-message[data-state='success'] {
    color: var(--success);
}

.mp-server-message[data-state='error'] {
    color: var(--danger);
}

.mp-server-message:empty {
    display: none;
}

.mp-auth-message {
    font-size: 0.84rem;
    color: var(--text-secondary);
    min-height: 1em;
}

.mp-auth-message[data-state='success'] {
    color: var(--success);
}

.mp-auth-message[data-state='error'] {
    color: var(--danger);
}

.inventory-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(120, 200, 255, 0.16), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255, 210, 120, 0.12), transparent 60%),
        rgba(3, 5, 12, 0.75);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 40;
}

.inventory-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.hell-synth-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 210, 255, 0.16), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255, 190, 140, 0.12), transparent 60%),
        rgba(5, 6, 12, 0.78);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 46;
}

.hell-synth-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.admin-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 180, 120, 0.18), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(255, 120, 90, 0.16), transparent 60%),
        rgba(6, 5, 10, 0.82);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 45;
}

.admin-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.shop-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 255, 190, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(70, 190, 130, 0.18), transparent 60%),
        rgba(3, 6, 10, 0.8);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 40;
}

.shop-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.mail-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(180, 150, 255, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(120, 90, 200, 0.18), transparent 60%),
        rgba(4, 5, 12, 0.82);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 40;
}

.mail-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.friend-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 220, 220, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(60, 170, 180, 0.18), transparent 60%),
        rgba(3, 8, 10, 0.82);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 40;
}

.friend-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.stats-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(130, 190, 255, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(90, 140, 210, 0.18), transparent 60%),
        rgba(3, 6, 12, 0.82);
    backdrop-filter: blur(10px);
    transition: opacity 0.24s ease;
    z-index: 40;
}

.stats-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.mail-modal {
    width: min(94vw, 1320px);
    min-height: 90vh;
    height: 90vh;
    max-height: 90vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(185, 160, 255, 0.12), transparent 45%),
        linear-gradient(160deg, rgba(15, 18, 32, 0.98), rgba(8, 10, 18, 0.98));
    border: 1px solid rgba(165, 160, 255, 0.28);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.mail-overlay.open .mail-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.friend-modal {
    width: min(94vw, 1180px);
    height: min(90vh, 860px);
    max-height: min(90vh, 860px);
    background:
        radial-gradient(circle at 18% 12%, rgba(140, 230, 240, 0.12), transparent 45%),
        linear-gradient(160deg, rgba(12, 18, 24, 0.98), rgba(8, 10, 16, 0.98));
    border: 1px solid rgba(120, 200, 220, 0.28);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.friend-overlay.open .friend-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.friend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 28px 12px;
}

.friend-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.friend-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.friend-close {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.friend-close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
}

.mail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 28px 12px;
    flex-shrink: 0;
}

.mail-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mail-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4b4b;
    box-shadow: 0 0 8px rgba(255, 75, 75, 0.7);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mail-unread-dot.is-visible {
    opacity: 1;
    transform: scale(1);
}

.mail-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mail-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.mail-close {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mail-close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
}

.mail-resource-bar {
    padding: 10px 28px 14px;
    border-bottom: 1px solid rgba(140, 150, 220, 0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
}

.mail-resource-bar .resource-card {
    width: auto;
    flex: 1 1 0;
    min-width: 120px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 10px;
}

.mail-resource-bar .resource-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.mail-resource-bar .resource-name {
    font-size: 0.72rem;
}

.mail-resource-bar .resource-value {
    font-size: 1.05rem;
}

.mail-resource-bar .resource-icon-gold {
    border-radius: 50%;
}

.mail-resource-bar .resource-icon-gold::before {
    inset: 7px;
    border-radius: 50%;
}

.mail-resource-bar .resource-icon-gold::after {
    width: 12px;
    height: 12px;
    top: 6px;
    right: 6px;
    border-radius: 50%;
}

.mail-resource-bar .resource-icon-fate {
    border-radius: 44% 56% 62% 38% / 54% 44% 56% 46%;
    box-shadow: none;
}

.mail-resource-bar .resource-icon-fate::before,
.mail-resource-bar .resource-icon-fate::after {
    content: none;
    display: none;
}

.mail-body {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(360px, 2fr);
    gap: 16px;
    padding: 16px 24px 22px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    align-content: stretch;
}

.friend-body {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(360px, 1.6fr);
    gap: 16px;
    padding: 16px 24px 22px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.friend-list-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    background: rgba(7, 9, 16, 0.7);
    border: 1px solid rgba(120, 170, 200, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.friend-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(120, 170, 200, 0.2);
}

.friend-list-title {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.friend-tabs {
    display: flex;
    gap: 6px;
}

.friend-tab {
    border: 1px solid rgba(120, 170, 200, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    background: rgba(90, 140, 170, 0.16);
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    min-width: 72px;
    width: auto;
    text-align: center;
}

.friend-tab.active {
    color: #081418;
    border-color: rgba(160, 230, 240, 0.75);
    background: linear-gradient(140deg, rgba(170, 240, 245, 0.7), rgba(90, 170, 185, 0.5));
}

.friend-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.friend-list-empty {
    padding: 18px 16px 20px;
    color: var(--text-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.friend-list-empty-text {
    line-height: 1.5;
}

.friend-row {
    border: 1px solid rgba(110, 160, 200, 0.22);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(10, 12, 20, 0.75);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.friend-row:hover {
    border-color: rgba(140, 210, 240, 0.45);
    transform: translateY(-1px);
}

.friend-row:focus-visible {
    outline: 2px solid rgba(160, 230, 245, 0.6);
    outline-offset: 2px;
}

.friend-row.is-selected {
    border-color: rgba(170, 230, 240, 0.8);
    box-shadow: 0 0 0 1px rgba(170, 230, 240, 0.25);
}

.friend-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.friend-row-name {
    font-weight: 700;
    color: var(--text-primary);
}

.friend-row-time {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.friend-row-message {
    font-size: 0.86rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

button.friend-row-mail {
    width: auto;
    padding: 4px 10px;
    font-size: 0.74rem;
    border-radius: 999px;
    margin-left: auto;
}

.friend-row-unread {
    align-self: flex-start;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 160, 140, 0.55);
    background: rgba(110, 35, 35, 0.45);
    color: rgba(255, 210, 200, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
}

.friend-row-unread.is-visible {
    display: inline-flex;
}

.friend-request-panel {
    padding: 12px 14px 16px;
    display: grid;
    gap: 12px;
}

.friend-request-card {
    border-radius: 14px;
    border: 1px solid rgba(120, 170, 200, 0.25);
    background: rgba(8, 12, 20, 0.75);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friend-request-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.friend-request-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.friend-request-row .secondary-btn {
    width: auto;
}

.friend-request-row input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(130, 170, 200, 0.3);
    background: rgba(12, 16, 22, 0.65);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 0.9rem;
}

.friend-request-row input:focus {
    outline: none;
    border-color: rgba(160, 230, 245, 0.6);
    box-shadow: 0 0 0 2px rgba(140, 210, 230, 0.15);
}

.friend-request-status {
    min-height: 1em;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.friend-request-status[data-state='success'] {
    color: var(--success);
}

.friend-request-status[data-state='error'] {
    color: var(--danger);
}

.friend-request-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.friend-request-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 12px;
}

.friend-request-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.friend-request-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.friend-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(110, 160, 200, 0.2);
    background: rgba(10, 12, 20, 0.7);
}

.friend-request-name {
    font-weight: 700;
    color: var(--text-primary);
}

.friend-request-actions {
    display: flex;
    gap: 6px;
}

.friend-request-actions .primary-btn,
.friend-request-actions .secondary-btn {
    min-width: 64px;
    width: auto;
    padding: 6px 10px;
    font-size: 0.82rem;
}

.friend-request-status-chip {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(200, 225, 240, 0.95);
    border: 1px solid rgba(120, 170, 200, 0.5);
    background: rgba(60, 90, 110, 0.25);
    border-radius: 999px;
    padding: 4px 10px;
}

.friend-request-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.friend-chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    background: rgba(9, 12, 20, 0.75);
    border: 1px solid rgba(120, 170, 200, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.friend-chat-head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(120, 170, 200, 0.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.friend-chat-title {
    font-weight: 700;
    font-size: 1rem;
}

.friend-chat-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.friend-chat-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.friend-chat-row {
    display: flex;
}

.friend-chat-row.is-mine {
    justify-content: flex-end;
}

.friend-chat-bubble {
    max-width: 74%;
    border-radius: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(120, 170, 200, 0.25);
    background: rgba(10, 14, 22, 0.8);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.friend-chat-row.is-mine .friend-chat-bubble {
    background: rgba(20, 40, 48, 0.85);
    border-color: rgba(140, 220, 235, 0.45);
}

.friend-chat-text {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
    font-size: 0.92rem;
}

.friend-chat-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.friend-chat-form {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(120, 170, 200, 0.2);
    background: rgba(7, 9, 16, 0.8);
}

.friend-chat-form textarea {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(130, 170, 200, 0.3);
    background: rgba(12, 16, 22, 0.65);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 0.9rem;
    min-height: 52px;
    resize: none;
}

.friend-chat-form textarea:focus {
    outline: none;
    border-color: rgba(160, 230, 245, 0.6);
    box-shadow: 0 0 0 2px rgba(140, 210, 230, 0.15);
}

.friend-chat-form .primary-btn {
    min-width: 96px;
    width: auto;
    align-self: stretch;
}

.friend-chat-panel .chat-emoji-panel {
    margin: 8px 12px 0;
}

.friend-chat-status {
    min-height: 1em;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0 14px 12px;
}

.friend-chat-status[data-state='success'] {
    color: var(--success);
}

.friend-chat-status[data-state='error'] {
    color: var(--danger);
}

.mail-list-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    background: rgba(7, 9, 16, 0.7);
    border: 1px solid rgba(140, 150, 220, 0.18);
    border-radius: 14px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.mail-list-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(140, 150, 220, 0.18);
}

.mail-list-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mail-list-title {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.mail-box-tabs {
    display: flex;
    gap: 6px;
}

.mail-box-tab {
    border: 1px solid rgba(130, 150, 220, 0.3);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(110, 120, 190, 0.14);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 54px;
    line-height: 1.2;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mail-box-tab.active {
    color: #0b1120;
    border-color: rgba(185, 175, 255, 0.75);
    background: linear-gradient(140deg, rgba(185, 175, 255, 0.7), rgba(120, 100, 200, 0.5));
}

.mail-compose-toggle {
    border: 1px solid rgba(140, 160, 255, 0.35);
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(120, 130, 200, 0.14);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
}

.mail-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.mail-filter {
    border: 1px solid rgba(130, 150, 220, 0.3);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(110, 120, 190, 0.14);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 58px;
    width: auto;
    flex: 0 0 auto;
    line-height: 1.2;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mail-filter.active {
    color: #0b1120;
    border-color: rgba(185, 175, 255, 0.75);
    background: linear-gradient(140deg, rgba(185, 175, 255, 0.7), rgba(120, 100, 200, 0.5));
}

.mail-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.mail-list-empty {
    padding: 18px 16px 20px;
    color: var(--text-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mail-list-empty-text {
    line-height: 1.5;
}

.mail-empty-btn {
    min-width: 140px;
    padding: 6px 12px;
}

.mail-row {
    border: 1px solid rgba(120, 140, 210, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(10, 12, 20, 0.75);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mail-row:hover {
    border-color: rgba(160, 190, 255, 0.4);
    transform: translateY(-1px);
}

.mail-row:focus-visible {
    outline: 2px solid rgba(190, 210, 255, 0.6);
    outline-offset: 2px;
}

.mail-row.is-unread {
    border-color: rgba(170, 200, 255, 0.65);
    box-shadow: 0 0 0 1px rgba(170, 200, 255, 0.18);
}

.mail-row.is-unread .mail-row-name {
    color: rgba(210, 225, 255, 0.95);
}

.mail-row.is-unread .mail-row-message {
    color: rgba(200, 215, 245, 0.9);
}

.mail-row.is-selected {
    border-color: rgba(210, 180, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(210, 180, 255, 0.25);
}

.mail-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mail-row-name {
    font-weight: 700;
    color: var(--text-primary);
}

.mail-row-time {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.mail-row-message {
    font-size: 0.86rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-row-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--text-secondary);
    align-self: flex-start;
}

.mail-row-status.is-unread {
    color: rgba(170, 210, 255, 0.95);
    border-color: rgba(170, 210, 255, 0.6);
    background: rgba(120, 160, 230, 0.18);
}

.mail-row-status.is-claimed {
    color: rgba(180, 250, 200, 0.95);
    border-color: rgba(120, 220, 170, 0.55);
    background: rgba(80, 160, 120, 0.2);
}

.mail-row-status.is-pending {
    color: rgba(255, 225, 170, 0.95);
    border-color: rgba(220, 180, 120, 0.55);
    background: rgba(160, 120, 70, 0.2);
}

.mail-row-status.is-sent {
    color: rgba(200, 210, 255, 0.95);
    border-color: rgba(150, 170, 230, 0.55);
    background: rgba(90, 100, 180, 0.2);
}

.mail-content-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.mail-tabs {
    display: flex;
    gap: 8px;
}

.mail-tab {
    border: 1px solid rgba(130, 150, 220, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    background: rgba(120, 140, 200, 0.16);
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    min-width: 96px;
    text-align: center;
}

.mail-tab.active {
    color: #0b1120;
    border-color: rgba(185, 175, 255, 0.75);
    background: linear-gradient(140deg, rgba(185, 175, 255, 0.7), rgba(120, 100, 200, 0.5));
}

.mail-tab:focus-visible,
.mail-filter:focus-visible,
.mail-box-tab:focus-visible,
.mail-compose-toggle:focus-visible {
    outline: 2px solid rgba(190, 210, 255, 0.6);
    outline-offset: 2px;
}

.mail-detail,
.mail-compose {
    flex: 1;
    background: rgba(9, 12, 20, 0.75);
    border: 1px solid rgba(130, 140, 210, 0.2);
    border-radius: 14px;
    padding: 16px;
    overflow-y: auto;
}

.mail-detail-empty {
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
    line-height: 1.5;
    gap: 12px;
}

.mail-detail-empty-text {
    max-width: 320px;
}

.mail-detail-card {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.mail-detail-card.is-visible {
    display: flex;
}

.mail-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mail-detail-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mail-detail-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.mail-detail-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.mail-detail-status {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid rgba(140, 150, 220, 0.35);
    background: rgba(10, 12, 20, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mail-detail-status.is-unread {
    color: rgba(170, 210, 255, 0.95);
    border-color: rgba(170, 210, 255, 0.6);
    background: rgba(120, 160, 230, 0.18);
}

.mail-detail-status.is-claimed {
    color: rgba(180, 250, 200, 0.95);
    border-color: rgba(120, 220, 170, 0.55);
    background: rgba(80, 160, 120, 0.2);
}

.mail-detail-status.is-pending {
    color: rgba(255, 225, 170, 0.95);
    border-color: rgba(220, 180, 120, 0.55);
    background: rgba(160, 120, 70, 0.2);
}

.mail-detail-status.is-sent {
    color: rgba(200, 210, 255, 0.95);
    border-color: rgba(150, 170, 230, 0.55);
    background: rgba(90, 100, 180, 0.2);
}

.mail-detail-friend {
    display: none;
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(180, 250, 200, 0.95);
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid rgba(120, 220, 170, 0.55);
    background: rgba(80, 160, 120, 0.2);
    align-items: center;
    gap: 6px;
}

.mail-detail-friend.is-visible {
    display: inline-flex;
}

.mail-detail-message {
    min-height: 90px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(130, 140, 210, 0.2);
    background: rgba(6, 8, 16, 0.7);
    color: var(--text-primary);
    white-space: pre-wrap;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: default;
}

.mail-detail-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mail-detail-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mail-detail-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mail-resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(150, 170, 230, 0.35);
    background: rgba(10, 12, 20, 0.7);
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.mail-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.mail-detail-actions .primary-btn,
.mail-detail-actions .secondary-btn {
    min-width: 160px;
    width: auto;
}

.mail-detail-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.mail-detail-actions .primary-btn:disabled {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

#mail-delete-btn {
    border-color: rgba(255, 120, 120, 0.4);
    color: rgba(255, 160, 160, 0.95);
    background: rgba(60, 20, 20, 0.35);
}

#mail-delete-btn:disabled {
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.mail-compose-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(120, 140, 210, 0.2);
    background: rgba(7, 10, 18, 0.65);
    margin-bottom: 12px;
}

.mail-compose-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.mail-search-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mail-search-row input {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(120, 140, 210, 0.35);
    background: rgba(10, 12, 20, 0.75);
    color: var(--text-primary);
}

.mail-search-row #mail-search-btn {
    flex: 0 0 30%;
    width: 30%;
}

.mail-search-result {
    min-height: 1em;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(10, 12, 18, 0.45);
}

.mail-search-result:empty {
    padding: 0;
    background: transparent;
}

.mail-search-result[data-state='success'] {
    color: var(--success);
}

.mail-search-result[data-state='error'] {
    color: var(--danger);
}

.mail-resource-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.mail-resource-input {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--mail-resource-accent, rgba(120, 140, 210, 0.2));
    background: linear-gradient(150deg, var(--mail-resource-tint, rgba(30, 40, 80, 0.18)), rgba(8, 10, 18, 0.7));
}

.mail-resource-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: normal;
    min-width: 0;
    text-align: left;
    width: 100%;
}

.mail-resource-input[data-key='gold'] { --mail-resource-accent: rgba(255, 214, 140, 0.35); --mail-resource-tint: rgba(255, 214, 140, 0.16); }
.mail-resource-input[data-key='crystal'] { --mail-resource-accent: rgba(125, 196, 255, 0.35); --mail-resource-tint: rgba(120, 190, 255, 0.18); }
.mail-resource-input[data-key='fateStone'] { --mail-resource-accent: rgba(255, 148, 205, 0.35); --mail-resource-tint: rgba(255, 160, 220, 0.18); }
.mail-resource-input[data-key='honorShard'] { --mail-resource-accent: rgba(255, 178, 104, 0.35); --mail-resource-tint: rgba(255, 190, 120, 0.16); }
.mail-resource-input[data-key='radiantShard'] { --mail-resource-accent: rgba(120, 255, 170, 0.35); --mail-resource-tint: rgba(140, 255, 190, 0.16); }
.mail-resource-input[data-key='runeShard'] { --mail-resource-accent: rgba(188, 140, 255, 0.35); --mail-resource-tint: rgba(190, 150, 255, 0.18); }
.mail-resource-input[data-key='riftTickets'] { --mail-resource-accent: rgba(150, 230, 255, 0.45); --mail-resource-tint: rgba(140, 230, 255, 0.18); }
.mail-resource-input[data-key='hellKeyShards'] { --mail-resource-accent: rgba(160, 210, 255, 0.35); --mail-resource-tint: rgba(160, 210, 255, 0.16); }
.mail-resource-input[data-key='hellKeyRare'] { --mail-resource-accent: rgba(124, 200, 255, 0.45); --mail-resource-tint: rgba(124, 200, 255, 0.18); }
.mail-resource-input[data-key='hellKeyHeroic'] { --mail-resource-accent: rgba(167, 123, 255, 0.5); --mail-resource-tint: rgba(167, 123, 255, 0.2); }
.mail-resource-input[data-key='hellKeyLegendary'] { --mail-resource-accent: rgba(255, 211, 106, 0.5); --mail-resource-tint: rgba(255, 211, 106, 0.2); }
.mail-resource-input[data-key='hellKeyRelic'] { --mail-resource-accent: rgba(255, 138, 122, 0.5); --mail-resource-tint: rgba(255, 138, 122, 0.2); }
.mail-resource-input[data-key='narakKeys'] { --mail-resource-accent: rgba(178, 110, 255, 0.55); --mail-resource-tint: rgba(178, 110, 255, 0.22); }
.mail-resource-input[data-key='goldBoxPremium'] { --mail-resource-accent: rgba(255, 214, 140, 0.35); --mail-resource-tint: rgba(255, 214, 140, 0.18); }
.mail-resource-input[data-key='goldBoxSuper'] { --mail-resource-accent: rgba(255, 230, 170, 0.4); --mail-resource-tint: rgba(255, 230, 170, 0.2); }
.mail-resource-input[data-key='goldBoxRoyal'] { --mail-resource-accent: rgba(255, 200, 120, 0.45); --mail-resource-tint: rgba(255, 200, 120, 0.22); }

.mail-resource-input input {
    width: 100%;
    height: 30px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(120, 140, 210, 0.35);
    background: rgba(10, 12, 20, 0.75);
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mail-resource-input input:focus,
.mail-search-row input:focus,
#mail-message-input:focus {
    outline: none;
    border-color: rgba(185, 175, 255, 0.7);
    box-shadow: 0 0 0 2px rgba(120, 140, 220, 0.2);
}

#mail-message-input {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(120, 140, 210, 0.35);
    background: rgba(10, 12, 20, 0.75);
    color: var(--text-primary);
    resize: vertical;
    min-height: 96px;
}

.mail-compose-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.mail-compose-actions .primary-btn {
    min-width: 160px;
}

.mail-compose-note {
    min-height: 1em;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mail-compose-note[data-state='success'] {
    color: var(--success);
}

.mail-compose-note[data-state='error'] {
    color: var(--danger);
}

.mail-footer {
    padding: 0 28px 20px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.mail-status {
    min-height: 1em;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mail-status[data-state='success'] {
    color: var(--success);
}

.mail-status[data-state='error'] {
    color: var(--danger);
}

.inventory-modal {
    width: min(94vw, 1404px);
    max-height: 90vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(140, 210, 255, 0.12), transparent 45%),
        linear-gradient(160deg, rgba(14, 20, 32, 0.96), rgba(8, 10, 18, 0.96));
    border: 1px solid rgba(148, 220, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.inventory-overlay.open .inventory-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hell-synth-modal {
    width: min(92vw, 780px);
    max-height: 90vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(150, 210, 255, 0.12), transparent 45%),
        linear-gradient(160deg, rgba(12, 18, 30, 0.96), rgba(8, 10, 18, 0.96));
    border: 1px solid rgba(150, 210, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.hell-synth-overlay.open .hell-synth-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-modal {
    width: min(94vw, 1225px);
    max-height: 90vh;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 210, 150, 0.12), transparent 45%),
        linear-gradient(160deg, rgba(18, 14, 16, 0.97), rgba(10, 10, 12, 0.97));
    border: 1px solid rgba(255, 200, 140, 0.35);
    border-radius: 20px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.admin-overlay.open .admin-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.shop-modal {
    width: min(94vw, 1180px);
    max-height: 90vh;
    background:
        radial-gradient(circle at 20% 15%, rgba(120, 255, 200, 0.1), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(70, 180, 120, 0.12), transparent 55%),
        linear-gradient(155deg, rgba(8, 16, 14, 0.98), rgba(6, 10, 12, 0.98));
    border: 1px solid rgba(140, 255, 210, 0.18);
    border-radius: 22px;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.shop-overlay.open .shop-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stats-modal {
    width: min(94vw, 1080px);
    max-height: 90vh;
    background:
        radial-gradient(circle at 20% 15%, rgba(150, 200, 255, 0.12), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(90, 130, 200, 0.12), transparent 55%),
        linear-gradient(155deg, rgba(10, 14, 20, 0.98), rgba(6, 10, 16, 0.98));
    border: 1px solid rgba(160, 200, 255, 0.18);
    border-radius: 22px;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}

.stats-overlay.open .stats-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255, 200, 140, 0.2);
    background: linear-gradient(120deg, rgba(36, 24, 18, 0.95), rgba(18, 12, 10, 0.95));
}

.admin-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff1e1;
    letter-spacing: 0.4px;
}

.admin-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.admin-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.18s ease;
}

.admin-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 210, 140, 0.55);
}

.admin-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.admin-row {
    display: grid;
    gap: 16px;
}

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

.admin-block {
    border: 1px solid rgba(255, 200, 140, 0.15);
    border-radius: 16px;
    padding: 16px;
    background: rgba(12, 12, 14, 0.55);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.admin-block-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd9ad;
    margin-bottom: 12px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.admin-action-btn {
    border: 1px solid rgba(255, 200, 140, 0.25);
    background: rgba(255, 200, 140, 0.08);
    color: #ffe9d4;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 150, 0.55);
    background: rgba(255, 200, 140, 0.18);
}

.admin-slider {
    display: grid;
    grid-template-columns: 140px 1fr 64px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.admin-slider-label {
    color: rgba(255, 235, 210, 0.9);
    font-weight: 600;
}

.admin-slider input[type="range"] {
    accent-color: #ffbf7a;
}

.admin-slider-value {
    text-align: right;
    font-weight: 700;
    color: #ffd7a8;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(140, 255, 210, 0.18);
    background: linear-gradient(120deg, rgba(18, 42, 30, 0.95), rgba(10, 20, 16, 0.95));
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(160, 200, 255, 0.18);
    background: linear-gradient(120deg, rgba(20, 30, 45, 0.95), rgba(10, 16, 26, 0.95));
}

.shop-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f7f4f2;
    letter-spacing: 0.4px;
}

.stats-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f3f7ff;
    letter-spacing: 0.4px;
}

.shop-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.stats-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.shop-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.18s ease;
}

.shop-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(150, 255, 210, 0.55);
}

.stats-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: all 0.18s ease;
}

.stats-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(170, 210, 255, 0.55);
}

.stats-body {
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-section {
    border: 1px solid rgba(160, 200, 255, 0.16);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(8, 12, 18, 0.55);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #cfe2ff;
    letter-spacing: 0.3px;
}

.stats-section-compact {
    width: min(520px, 100%);
    align-self: flex-start;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: rgba(230, 240, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

.stats-table thead th {
    text-align: left;
    padding: 6px 6px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(190, 215, 255, 0.75);
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(160, 200, 255, 0.2);
}

.stats-table tbody td {
    padding: 6px;
    border-bottom: 1px solid rgba(120, 150, 190, 0.16);
}

.stats-table tbody tr:nth-child(even) {
    background: rgba(12, 18, 28, 0.35);
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

.stats-table-align-2 th:nth-child(n + 2),
.stats-table-align-2 td:nth-child(n + 2) {
    text-align: right;
}

.stats-table-align-3 th:nth-child(n + 3),
.stats-table-align-3 td:nth-child(n + 3) {
    text-align: right;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.stats-label {
    color: rgba(230, 240, 255, 0.85);
}

.stats-value {
    font-weight: 600;
    color: #f2f7ff;
}

.shop-note {
    padding: 12px 22px 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.shop-resource-bar,
.inventory-resource-bar {
    padding: 10px 16px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.shop-resource-bar .resource-card,
.inventory-resource-bar .resource-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    gap: 6px;
    border-radius: 8px;
}

.shop-resource-bar .resource-info,
.inventory-resource-bar .resource-info {
    gap: 2px;
    min-width: 0;
}

.shop-resource-bar .resource-name,
.inventory-resource-bar .resource-name,
.shop-resource-bar .resource-value,
.inventory-resource-bar .resource-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-resource-bar .resource-name,
.inventory-resource-bar .resource-name {
    font-size: 0.65rem;
}

.shop-resource-bar .resource-value,
.inventory-resource-bar .resource-value {
    font-size: 0.75rem;
}

.shop-resource-bar .resource-icon,
.inventory-resource-bar .resource-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.shop-resource-bar .resource-icon-gold,
.inventory-resource-bar .resource-icon-gold {
    border-radius: 50%;
}

.shop-resource-bar .resource-icon::before,
.inventory-resource-bar .resource-icon::before {
    inset: 4px;
    border-radius: 6px;
}

.shop-resource-bar .resource-icon::after,
.inventory-resource-bar .resource-icon::after {
    width: 8px;
    height: 8px;
    top: 4px;
    right: 4px;
    border-radius: 3px;
}

.shop-resource-bar .resource-icon-gold::before,
.inventory-resource-bar .resource-icon-gold::before {
    inset: 4px;
    border-radius: 50%;
}

.shop-resource-bar .resource-icon-gold::after,
.inventory-resource-bar .resource-icon-gold::after {
    width: 8px;
    height: 8px;
    top: 4px;
    right: 4px;
    border-radius: 50%;
}

.shop-resource-bar .resource-icon-crystal::before,
.inventory-resource-bar .resource-icon-crystal::before {
    inset: 4px;
}

.shop-resource-bar .resource-icon-crystal::after,
.inventory-resource-bar .resource-icon-crystal::after {
    width: 10px;
    height: 10px;
    top: 3px;
    right: 3px;
}

.shop-resource-bar .resource-icon-fate::before,
.inventory-resource-bar .resource-icon-fate::before {
    width: 14px;
    height: 14px;
    top: 3px;
    right: 4px;
}

.shop-resource-bar .resource-icon-fate::after,
.inventory-resource-bar .resource-icon-fate::after {
    width: 20px;
    height: 7px;
    top: 16px;
    left: -5px;
}

.shop-resource-bar .resource-icon-fate {
    border-radius: 44% 56% 62% 38% / 54% 44% 56% 46%;
    box-shadow: none;
}

.shop-resource-bar .resource-icon-fate::before,
.shop-resource-bar .resource-icon-fate::after {
    content: none;
    display: none;
}

.shop-resource-bar .resource-icon-honor::before,
.inventory-resource-bar .resource-icon-honor::before {
    inset: 5px 7px 6px;
}

.shop-resource-bar .resource-icon-honor::after,
.inventory-resource-bar .resource-icon-honor::after {
    width: 4px;
    height: 14px;
    top: 6px;
    left: 8px;
}

.shop-resource-bar .resource-icon-radiant::before,
.inventory-resource-bar .resource-icon-radiant::before {
    inset: 5px 7px 6px;
}

.shop-resource-bar .resource-icon-radiant::after,
.inventory-resource-bar .resource-icon-radiant::after {
    width: 6px;
    height: 14px;
    top: 5px;
    left: 9px;
}

.shop-resource-bar .resource-icon-rune::before,
.inventory-resource-bar .resource-icon-rune::before {
    inset: 5px 7px 6px;
}

.shop-resource-bar .resource-icon-rune::after,
.inventory-resource-bar .resource-icon-rune::after {
    width: 6px;
    height: 14px;
    top: 5px;
    left: 9px;
}

.shop-resource-bar .resource-icon-dopamine::before,
.inventory-resource-bar .resource-icon-dopamine::before {
    inset: 4px;
    border-radius: 6px;
}

.shop-resource-bar .resource-icon-dopamine::after,
.inventory-resource-bar .resource-icon-dopamine::after {
    width: 8px;
    height: 8px;
    top: 4px;
    right: 4px;
    border-radius: 3px;
}

.shop-list {
    padding: 10px 22px 22px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.shop-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 20px 22px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(18, 32, 28, 0.95), rgba(8, 14, 12, 0.95));
    border: 1px solid rgba(140, 255, 210, 0.2);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 20px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.shop-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(140, 255, 210, 0.8), rgba(60, 160, 110, 0.6));
}

.shop-card-icon {
    margin-left: 6px;
    margin-top: -4px;
    align-self: center;
}

.shop-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shop-card-title {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
}

.shop-card-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.shop-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.shop-card-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-direction: column;
}

.shop-meta-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    background: rgba(4, 8, 6, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.shop-meta-price {
    color: rgba(255, 244, 220, 0.95);
    border-color: rgba(255, 214, 140, 0.35);
    background: linear-gradient(135deg, rgba(56, 36, 18, 0.6), rgba(20, 14, 8, 0.6));
}

.shop-meta-limit {
    color: rgba(200, 255, 235, 0.95);
    border-color: rgba(120, 230, 170, 0.35);
    background: linear-gradient(135deg, rgba(20, 56, 38, 0.6), rgba(10, 20, 16, 0.6));
}

.shop-buy-btn {
    min-width: 90px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(120, 230, 170, 0.5);
    background:
        linear-gradient(140deg, rgba(140, 255, 210, 0.4), rgba(24, 70, 46, 0.45));
    color: rgba(255, 248, 235, 0.95);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.shop-buy-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(170, 255, 220, 0.85);
    box-shadow: 0 10px 18px rgba(90, 220, 150, 0.35);
}

.shop-buy-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.shop-buy-all-btn {
    border-color: rgba(255, 230, 170, 0.55);
    background:
        linear-gradient(140deg, rgba(255, 230, 170, 0.35), rgba(70, 45, 24, 0.45));
    color: rgba(255, 244, 220, 0.98);
    font-weight: 700;
}

.inventory-header,
.hell-synth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inventory-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inventory-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 16, 26, 0.85);
    color: rgba(220, 235, 255, 0.75);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.inventory-tab.active {
    color: #e8f7ff;
    border-color: rgba(140, 210, 255, 0.75);
    box-shadow: 0 8px 16px rgba(40, 140, 255, 0.25);
}

.inventory-title,
.hell-synth-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e5f6ff;
}

.inventory-subtitle,
.hell-synth-subtitle {
    font-size: 0.9rem;
    color: rgba(229, 246, 255, 0.65);
}

.inventory-close,
.hell-synth-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.18s ease;
}

.inventory-close:hover,
.hell-synth-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(158, 252, 255, 0.4);
}

.hell-synth-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 20px;
}

.hell-synth-shards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(16, 22, 36, 0.85);
    border: 1px solid rgba(150, 210, 255, 0.25);
}

.hell-synth-shards-label {
    color: rgba(210, 235, 255, 0.8);
    font-size: 0.95rem;
}

.hell-synth-shards-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: #eaf7ff;
}

.hell-synth-list {
    display: grid;
    gap: 12px;
}

.hell-synth-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(16, 22, 34, 0.95), rgba(10, 12, 20, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}

.hell-synth-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hell-synth-name {
    color: rgba(235, 248, 255, 0.92);
    font-weight: 600;
}

.hell-synth-cost {
    color: rgba(200, 225, 255, 0.65);
    font-size: 0.9rem;
}

.hell-synth-action-btn {
    min-width: 90px;
}

.hell-synth-note {
    color: rgba(210, 225, 255, 0.7);
    font-size: 0.9rem;
}

.inventory-note {
    padding: 0 20px 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}


.inventory-result {
    margin: 0 20px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(25, 35, 60, 0.75);
    border: 1px solid rgba(140, 210, 255, 0.35);
    color: rgba(210, 235, 255, 0.9);
    font-size: 0.9rem;
}

.inventory-list {
    padding: 0 20px 20px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-card {
    border-radius: 14px;
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(18, 24, 36, 0.95), rgba(10, 12, 20, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.inventory-item-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(12, 16, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 10px 18px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    position: relative;
    margin: 0 auto;
    align-self: center;
}

.inventory-item-icon.loot-icon-hell-key {
    --key-main: #7cc8ff;
    --key-glow: rgba(124, 200, 255, 0.5);
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.25), transparent 45%),
        linear-gradient(145deg, rgba(18, 32, 48, 0.95), rgba(10, 14, 24, 0.95));
    border-color: rgba(150, 210, 255, 0.45);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 12px 20px rgba(0, 0, 0, 0.45);
}

.inventory-item-icon.loot-icon-hell-key::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    left: 12px;
    top: 18px;
    border-radius: 50%;
    border: 3px solid var(--key-main);
    background:
        radial-gradient(circle at 50% 50%, rgba(12, 16, 26, 0.95) 35%, rgba(12, 16, 26, 0) 36%),
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 0 14px var(--key-glow), inset 0 0 6px rgba(255, 255, 255, 0.4);
}

.inventory-item-icon.loot-icon-hell-key::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 10px;
    left: 28px;
    top: 27px;
    border-radius: 6px;
    background:
        linear-gradient(90deg, var(--key-main), rgba(255, 255, 255, 0.95));
    box-shadow: 0 0 12px var(--key-glow), inset 0 0 4px rgba(255, 255, 255, 0.45);
    clip-path: polygon(0 0, 78% 0, 78% 35%, 88% 35%, 88% 70%, 78% 70%, 78% 100%, 0 100%);
}

.inventory-item-icon.hell-key-rare { --key-main: #7cc8ff; --key-glow: rgba(124, 200, 255, 0.55); }
.inventory-item-icon.hell-key-heroic { --key-main: #a77bff; --key-glow: rgba(167, 123, 255, 0.6); }
.inventory-item-icon.hell-key-legendary { --key-main: #ffd36a; --key-glow: rgba(255, 211, 106, 0.6); }
.inventory-item-icon.hell-key-relic { --key-main: #ff8a7a; --key-glow: rgba(255, 138, 122, 0.55); }

.inventory-item-icon.loot-icon-narak-key {
    --narak-main: #b36dff;
    --narak-edge: #ff527a;
    --narak-glow: rgba(178, 110, 255, 0.7);
    border-radius: 18px;
    background:
        radial-gradient(circle at 70% 22%, rgba(255, 96, 126, 0.2), transparent 55%),
        radial-gradient(circle at 20% 78%, rgba(130, 90, 210, 0.35), transparent 55%),
        linear-gradient(150deg, rgba(22, 14, 34, 0.96), rgba(8, 6, 16, 0.98));
    border-color: rgba(190, 130, 255, 0.6);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 14px 24px rgba(0, 0, 0, 0.45);
}

.inventory-item-icon.loot-icon-narak-key::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 10px;
    top: 20px;
    border-radius: 50%;
    border: 3px solid var(--narak-main);
    background:
        radial-gradient(circle at 45% 45%, rgba(255, 255, 255, 0.75), rgba(40, 18, 60, 0.95) 58%, rgba(40, 18, 60, 0) 60%);
    box-shadow: 0 0 16px var(--narak-glow), inset 0 0 6px rgba(255, 255, 255, 0.35);
}

.inventory-item-icon.loot-icon-narak-key::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 12px;
    left: 26px;
    top: 26px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--narak-main), var(--narak-edge) 60%, rgba(255, 240, 250, 0.95));
    box-shadow: 0 0 14px rgba(255, 90, 120, 0.55), 0 0 10px var(--narak-glow);
    clip-path: polygon(0 0, 78% 0, 78% 25%, 92% 25%, 92% 55%, 68% 55%, 68% 78%, 92% 78%, 92% 100%, 0 100%, 10% 62%, 0 42%);
}

.inventory-item-icon.loot-icon-hell-key-shard {
    --key-main: #9fd7ff;
    --key-glow: rgba(160, 210, 255, 0.45);
    border-radius: 18px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 45%),
        linear-gradient(145deg, rgba(16, 26, 40, 0.95), rgba(8, 12, 20, 0.95));
    border-color: rgba(150, 210, 255, 0.35);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 12px 20px rgba(0, 0, 0, 0.45);
}

.inventory-item-icon.loot-icon-hell-key-shard::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 12px;
    top: 18px;
    border-radius: 6px;
    background: linear-gradient(140deg, var(--key-main), rgba(255, 255, 255, 0.9));
    box-shadow: 0 0 10px var(--key-glow);
    clip-path: polygon(0 10%, 70% 0, 100% 50%, 80% 100%, 10% 90%);
}

.inventory-item-icon.loot-icon-hell-key-shard::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 30px;
    top: 28px;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), var(--key-main));
    box-shadow: 0 0 10px var(--key-glow);
    transform: rotate(12deg);
    clip-path: polygon(0 15%, 65% 0, 100% 55%, 70% 100%, 5% 85%);
}

.inventory-item-icon.hell-key-shard { --key-main: #9fd7ff; --key-glow: rgba(160, 210, 255, 0.45); }

.inventory-item-icon.loot-icon-gold-box {
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(255, 240, 200, 0.35), rgba(120, 90, 40, 0.25)),
        linear-gradient(140deg, rgba(24, 20, 14, 0.95), rgba(12, 10, 8, 0.95));
    border-color: rgba(255, 214, 140, 0.4);
}

.inventory-item-icon.loot-icon-gold-box::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 10px;
    border: 2px solid rgba(255, 235, 200, 0.55);
    box-shadow: inset 0 0 10px rgba(255, 230, 180, 0.35);
}

.inventory-item-icon.loot-icon-gold-box::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 23px;
    top: 23px;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(255, 245, 210, 0.85), rgba(190, 120, 40, 0.85));
    box-shadow: 0 0 10px rgba(255, 215, 150, 0.5);
}

.inventory-item-icon.gold-box-premium {
    background:
        linear-gradient(150deg, rgba(255, 235, 200, 0.35), rgba(160, 110, 50, 0.35)),
        linear-gradient(140deg, rgba(24, 20, 14, 0.95), rgba(12, 10, 8, 0.95));
}

.inventory-item-icon.gold-box-super {
    background:
        linear-gradient(150deg, rgba(255, 245, 220, 0.45), rgba(190, 130, 60, 0.4)),
        linear-gradient(140deg, rgba(22, 18, 12, 0.95), rgba(10, 8, 6, 0.95));
}

.inventory-item-icon.gold-box-royal {
    background:
        linear-gradient(150deg, rgba(255, 248, 230, 0.55), rgba(210, 150, 70, 0.45)),
        linear-gradient(140deg, rgba(20, 16, 10, 0.95), rgba(8, 6, 4, 0.95));
}

.inventory-item-icon.consumable-icon {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.28)),
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.2), rgba(8, 12, 20, 0.95) 70%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 16px rgba(0, 0, 0, 0.55),
        0 12px 22px rgba(0, 0, 0, 0.5);
}

.consumable-dark-grenade {
    background:
        radial-gradient(circle at 75% 18%, rgba(140, 90, 210, 0.45), transparent 35%),
        radial-gradient(circle at 45% 60%, #2a1040 0%, #160a25 60%, #090612 100%);
}

.consumable-dark-grenade::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.35), transparent 40%),
        radial-gradient(circle at 60% 70%, #2a0c3f, #12081f 70%);
    box-shadow:
        inset 0 6px 10px rgba(255, 255, 255, 0.08),
        0 8px 14px rgba(0, 0, 0, 0.4);
}

.consumable-dark-grenade::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 17px;
    width: 30px;
    height: 12px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, #c5915a, #6b3a1b),
        linear-gradient(90deg, rgba(255, 230, 170, 0.85) 0 6px, transparent 6px);
    box-shadow:
        0 -4px 6px rgba(255, 180, 90, 0.7),
        inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.consumable-whirlwind-grenade {
    background:
        radial-gradient(circle at 70% 20%, rgba(190, 245, 255, 0.55), transparent 40%),
        radial-gradient(circle at 45% 60%, #2c6e8a 0%, #123145 60%, #081826 100%);
}

.consumable-whirlwind-grenade::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        conic-gradient(from 30deg, rgba(255, 255, 255, 0.7), rgba(120, 220, 245, 0.25), rgba(255, 255, 255, 0.7)),
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%);
    box-shadow:
        inset 0 0 10px rgba(10, 30, 40, 0.5),
        0 8px 14px rgba(0, 0, 0, 0.35);
}

.consumable-whirlwind-grenade::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 19px;
    width: 26px;
    height: 12px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, #87c5de, #2b6a86),
        linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0 5px, transparent 5px);
    box-shadow:
        0 -4px 6px rgba(150, 230, 255, 0.7),
        inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.consumable-spirit-potion {
    background:
        radial-gradient(circle at 70% 18%, rgba(180, 255, 220, 0.45), transparent 40%),
        radial-gradient(circle at 50% 70%, rgba(30, 90, 60, 0.8), rgba(10, 16, 24, 0.95) 70%);
}

.consumable-spirit-potion::before {
    content: '';
    position: absolute;
    inset: 9px 18px 8px 18px;
    border-radius: 12px 12px 16px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.2) 35%),
        linear-gradient(180deg, #b8ffe0 0 60%, #2dbb72 60% 100%);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.25),
        inset 0 -12px 16px rgba(0, 0, 0, 0.4),
        0 8px 12px rgba(0, 0, 0, 0.45);
}

.consumable-spirit-potion::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 20px;
    width: 24px;
    height: 10px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #fff1c9, #b9782f),
        linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 6px, transparent 6px);
    box-shadow:
        0 0 8px rgba(255, 220, 160, 0.7),
        inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.consumable-adrophin {
    background:
        radial-gradient(circle at 70% 18%, rgba(255, 180, 140, 0.5), transparent 40%),
        radial-gradient(circle at 50% 70%, rgba(120, 20, 20, 0.75), rgba(10, 16, 24, 0.95) 70%);
}

.consumable-adrophin::before {
    content: '';
    position: absolute;
    inset: 8px 16px 8px 16px;
    border-radius: 12px 12px 18px 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.08) 35%, rgba(0, 0, 0, 0.25) 40%),
        linear-gradient(180deg, #ffc2ab 0 58%, #ff5530 58% 100%);
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.2),
        inset 0 -12px 16px rgba(0, 0, 0, 0.45),
        0 8px 12px rgba(0, 0, 0, 0.45);
}

.consumable-adrophin::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 19px;
    width: 26px;
    height: 11px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #ffe5c6, #b35a24),
        linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 6px, transparent 6px);
    box-shadow:
        0 0 8px rgba(255, 190, 120, 0.7),
        inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.consumable-awakening {
    background:
        radial-gradient(circle at 70% 15%, rgba(255, 235, 170, 0.7), transparent 45%),
        radial-gradient(circle at 50% 70%, rgba(120, 70, 20, 0.75), rgba(10, 16, 24, 0.95) 70%);
}

.consumable-awakening::before {
    content: '';
    position: absolute;
    inset: 7px 16px 7px 16px;
    border-radius: 12px 12px 18px 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 35%, rgba(0, 0, 0, 0.25) 40%),
        linear-gradient(180deg, #fff3c9 0 55%, #ffbf4a 55% 100%);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.25),
        inset 0 -12px 16px rgba(70, 20, 0, 0.45),
        0 10px 14px rgba(0, 0, 0, 0.45);
}

.consumable-awakening::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 24px;
    width: 16px;
    height: 16px;
    background:
        radial-gradient(circle at 35% 35%, #ffffff, #ffe7b3 60%, #f2a02b 100%);
    clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0% 50%, 38% 35%);
    box-shadow:
        0 0 12px rgba(255, 220, 150, 0.95),
        0 0 24px rgba(255, 185, 90, 0.6);
}

.inventory-item-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 90px;
}

.inventory-item-slot.is-lucky {
    width: 152px;
}

.inventory-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inventory-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.inventory-card-title {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.inventory-card-desc {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.inventory-count {
    text-align: right;
}

.inventory-count-label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.inventory-count-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.inventory-actions {
    padding-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.lucky-box-icon {
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 35%),
        linear-gradient(135deg, rgba(18, 24, 36, 0.9), rgba(8, 12, 20, 0.95));
}

.lucky-box-icon::before {
    content: '';
    position: absolute;
    inset: 8px 8px 30px 8px;
    border-radius: 10px 10px 8px 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

.lucky-box-icon::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 4px;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255, 255, 255, 0.2));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.lucky-box-basic {
    border-color: rgba(240, 240, 240, 0.7);
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(230, 230, 230, 0.6) 0 10px, rgba(200, 200, 200, 0.75) 10px 20px),
        linear-gradient(160deg, #f7f7f7, #bfc0c4);
}

.lucky-box-basic::before {
    inset: 12px 10px 30px 10px;
    border-radius: 8px 8px 6px 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(150, 150, 150, 0.4)),
        repeating-linear-gradient(90deg, rgba(220, 220, 220, 0.9) 0 8px, rgba(185, 185, 185, 0.9) 8px 16px);
}

.lucky-box-basic::after {
    width: 20px;
    height: 12px;
    bottom: 14px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ffffff, #c4c4c4);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.lucky-box-advanced {
    border-color: rgba(120, 220, 150, 0.7);
    border-radius: 12px 12px 8px 8px;
    background:
        linear-gradient(180deg, rgba(190, 255, 220, 0.25), rgba(70, 150, 95, 0.35)),
        linear-gradient(135deg, #1f6a3e, #0b2b1b);
}

.lucky-box-advanced::before {
    inset: 10px 8px 28px 8px;
    border-radius: 10px 10px 6px 6px;
    background:
        linear-gradient(180deg, rgba(210, 255, 230, 0.85), rgba(90, 180, 120, 0.9)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 20%, rgba(0, 0, 0, 0.25) 50%, rgba(255, 255, 255, 0.16) 80%);
    box-shadow: inset 0 0 10px rgba(10, 20, 35, 0.55);
}

.lucky-box-advanced::after {
    width: 26px;
    height: 14px;
    bottom: 12px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #d6ffe8, #3bbd70);
    box-shadow: 0 0 8px rgba(120, 220, 160, 0.55), inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.lucky-box-elite {
    border-color: rgba(130, 180, 255, 0.85);
    border-radius: 20px 20px 14px 14px;
    background:
        linear-gradient(180deg, rgba(210, 235, 255, 0.35), rgba(80, 130, 210, 0.45)),
        linear-gradient(135deg, #1b4a8a, #0a1530);
    box-shadow:
        inset 0 0 18px rgba(10, 30, 70, 0.55),
        0 16px 28px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(120, 180, 255, 0.4);
    overflow: hidden;
}

.lucky-box-elite::before {
    inset: 4px 6px 18px 6px;
    border-radius: 16px 16px 8px 8px;
    background:
        linear-gradient(180deg, rgba(225, 242, 255, 0.92), rgba(100, 155, 225, 0.95)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 10%, rgba(0, 0, 0, 0.3) 10% 14%, rgba(255, 255, 255, 0.22) 14% 100%);
    box-shadow:
        inset 0 0 18px rgba(10, 30, 70, 0.6),
        0 0 16px rgba(140, 190, 255, 0.55);
}

.lucky-box-elite::after {
    width: 30px;
    height: 10px;
    bottom: 18px;
    border-radius: 6px;
    transform: translateX(-50%);
    background:
        linear-gradient(180deg, #d6ebff, #4b7edc);
    box-shadow:
        0 0 18px rgba(130, 180, 255, 0.85),
        inset 0 0 6px rgba(10, 30, 70, 0.55);
}

.lucky-box-legendary {
    border-color: rgba(200, 150, 255, 0.9);
    border-radius: 18px 18px 12px 12px;
    background:
        radial-gradient(circle at 18% 10%, rgba(235, 200, 255, 0.7), transparent 55%),
        radial-gradient(circle at 85% 88%, rgba(80, 30, 120, 0.55), transparent 60%),
        linear-gradient(145deg, #5b2a8a, #1e0b34);
    box-shadow:
        inset 0 0 18px rgba(40, 10, 70, 0.6),
        0 16px 28px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(200, 150, 255, 0.4);
    overflow: hidden;
}

.lucky-box-legendary::before {
    inset: 6px 7px 22px 7px;
    border-radius: 14px 14px 8px 8px;
    background:
        linear-gradient(180deg, rgba(245, 225, 255, 0.95), rgba(160, 95, 220, 0.9)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 8px, rgba(0, 0, 0, 0.22) 8px 14px);
    box-shadow:
        inset 0 0 18px rgba(40, 10, 70, 0.65),
        0 0 16px rgba(210, 170, 255, 0.55);
}

.lucky-box-legendary::after {
    width: 30px;
    height: 12px;
    bottom: 16px;
    border-radius: 6px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ead4ff, #7a3fd1);
    box-shadow:
        0 0 18px rgba(200, 150, 255, 0.9),
        inset 0 0 6px rgba(40, 10, 70, 0.65);
}

.inventory-choice-group {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 148px;
}

.inventory-choice-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(12, 16, 26, 0.95);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-choice-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(140, 210, 255, 0.75);
    box-shadow: 0 8px 16px rgba(31, 111, 255, 0.25);
}

.inventory-choice-btn.is-selected {
    border-color: rgba(99, 209, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(99, 209, 255, 0.3), 0 12px 20px rgba(31, 111, 255, 0.3);
}

.inventory-choice-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.inventory-choice-icon {
    transform: scale(0.6);
    transform-origin: center;
    pointer-events: none;
}

.inventory-select {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 10, 18, 0.9);
    color: rgba(255, 255, 255, 0.9);
    padding: 0 10px;
}

.inventory-open-btn {
    width: auto;
    min-width: 78px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #63d1ff, #1f6fff);
    color: #071018;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 20px rgba(31, 111, 255, 0.35);
}

.inventory-open-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.inventory-open-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(31, 111, 255, 0.45);
}

.inventory-open-all-btn {
    min-width: 110px;
}

.inventory-gold-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.inventory-gold-burst::before,
.inventory-gold-burst::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--burst-size, 260px);
    height: var(--burst-size, 260px);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
}

.inventory-gold-burst::before {
    background: radial-gradient(circle, var(--burst-core, rgba(255, 245, 210, 0.85)) 0%, var(--burst-color, rgba(255, 210, 120, 0.55)) 45%, rgba(255, 255, 255, 0) 70%);
    box-shadow: 0 0 var(--burst-glow-blur, 45px) var(--burst-glow, rgba(255, 210, 120, 0.4));
    animation: inventoryGoldBurstGlow var(--burst-duration, 0.95s) ease-out forwards;
    mix-blend-mode: screen;
}

.inventory-gold-burst::after {
    border: var(--burst-ring-width, 2px) solid var(--burst-ring, rgba(255, 245, 210, 0.9));
    box-shadow: 0 0 var(--burst-ring-blur, 24px) var(--burst-ring, rgba(255, 245, 210, 0.7));
    animation: inventoryGoldBurstRing var(--burst-duration, 0.95s) ease-out forwards;
}

.inventory-gold-burst.gold-burst-777 {
    --burst-size: 170px;
    --burst-duration: 0.65s;
    --burst-core: rgba(255, 240, 200, 0.5);
    --burst-color: rgba(255, 200, 110, 0.32);
    --burst-glow: rgba(255, 205, 120, 0.2);
    --burst-glow-blur: 22px;
    --burst-ring: rgba(255, 235, 190, 0.55);
    --burst-ring-width: 1px;
    --burst-ring-blur: 12px;
}

.inventory-gold-burst.gold-burst-7777 {
    --burst-size: 300px;
    --burst-duration: 1s;
    --burst-core: rgba(255, 250, 220, 0.9);
    --burst-color: rgba(255, 215, 130, 0.6);
    --burst-glow: rgba(255, 220, 140, 0.45);
    --burst-ring: rgba(255, 250, 230, 0.9);
    --burst-glow-blur: 50px;
    --burst-ring-width: 2px;
    --burst-ring-blur: 26px;
}

.inventory-gold-burst.gold-burst-77777 {
    --burst-size: 410px;
    --burst-duration: 1.15s;
    --burst-core: rgba(255, 255, 235, 0.98);
    --burst-color: rgba(255, 228, 150, 0.7);
    --burst-glow: rgba(255, 234, 170, 0.65);
    --burst-ring: rgba(255, 255, 245, 0.98);
    --burst-glow-blur: 64px;
    --burst-ring-width: 3px;
    --burst-ring-blur: 32px;
}

.inventory-gold-burst.gold-burst-777777 {
    --burst-size: 520px;
    --burst-duration: 1.3s;
    --burst-core: rgba(255, 255, 245, 1);
    --burst-color: rgba(255, 235, 170, 0.75);
    --burst-glow: rgba(255, 240, 190, 0.75);
    --burst-ring: rgba(255, 255, 255, 0.98);
    --burst-glow-blur: 80px;
    --burst-ring-width: 3.5px;
    --burst-ring-blur: 44px;
    filter: drop-shadow(0 0 18px rgba(255, 230, 170, 0.6)) drop-shadow(0 0 60px rgba(255, 240, 200, 0.65));
}

@keyframes inventoryGoldBurstGlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.65);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes inventoryGoldBurstRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    45% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.35);
    }
}

.engrave-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 210, 160, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(90, 170, 255, 0.12), transparent 60%),
        rgba(3, 6, 14, 0.84);
    backdrop-filter: blur(10px);
    z-index: 5425;
    animation: fadeIn 0.22s ease;
}

.engrave-overlay.open {
    display: flex;
}

.engrave-modal {
    position: relative;
    width: min(1280px, calc(100% - 32px));
    max-height: calc(100% - 28px);
    background:
        linear-gradient(165deg, rgba(10, 14, 26, 0.98), rgba(6, 9, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 26px;
    box-shadow: 0 45px 110px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.engrave-modal::before,
.engrave-modal::after {
    content: '';
    position: absolute;
    inset: -18%;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}

.engrave-modal::before {
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 6px
    );
    opacity: 0.08;
}

.engrave-modal::after {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 210, 160, 0.22), transparent 50%),
        radial-gradient(circle at 82% 85%, rgba(120, 190, 255, 0.2), transparent 55%);
    filter: blur(6px);
}

.engrave-modal > * {
    position: relative;
    z-index: 1;
}

.engrave-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 12, 20, 0.68);
}

.engrave-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.engrave-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.engrave-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.engrave-subtitle {
    font-size: 13px;
    color: rgba(200, 210, 225, 0.8);
    line-height: 1.5;
    max-width: 460px;
}

.engrave-owned {
    display: flex;
    gap: 10px;
}

.engrave-summary-btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 160, 0.45);
    background: linear-gradient(135deg, rgba(255, 214, 160, 0.22), rgba(14, 18, 30, 0.9));
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 235, 205, 0.95);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.engrave-summary-btn:hover {
    border-color: rgba(255, 224, 180, 0.8);
    box-shadow: 0 0 16px rgba(255, 210, 150, 0.35);
    transform: translateY(-1px);
}

.engrave-owned-card {
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 16, 26, 0.75);
    min-width: 160px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

.engrave-close {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 14, 22, 0.75);
    color: var(--text-primary);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.engrave-close:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.engrave-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.engrave-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 18px;
    padding: 18px 24px 24px;
    overflow: auto;
}

.engrave-panel {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 24, 0.78);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

.engrave-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.engrave-panel-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 235, 205, 0.9);
    text-transform: uppercase;
}

.engrave-panel-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.engrave-info-panel {
    gap: 14px;
}

.engrave-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    padding-right: 4px;
}

.engrave-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 26, 0.82);
    padding: 12px 14px 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--text-primary);
    position: relative;
    min-height: 86px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.engrave-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 214, 160, 0.9), rgba(120, 200, 255, 0.45));
    opacity: 0.7;
}

.engrave-card[data-grade='locked'] {
    border-color: rgba(180, 180, 180, 0.2);
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.08), rgba(10, 14, 26, 0.92));
}

.engrave-card[data-grade='locked']::before {
    background: linear-gradient(180deg, rgba(190, 190, 190, 0.5), rgba(120, 120, 120, 0.2));
}

.engrave-card[data-grade='0'] {
    border-color: rgba(210, 210, 210, 0.4);
    background: linear-gradient(135deg, rgba(235, 235, 235, 0.12), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='0']::before {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.95), rgba(190, 190, 190, 0.4));
}

.engrave-card[data-grade='1'] {
    border-color: rgba(80, 210, 120, 0.45);
    background: linear-gradient(135deg, rgba(80, 210, 120, 0.16), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='1']::before {
    background: linear-gradient(180deg, rgba(110, 230, 150, 0.95), rgba(60, 150, 90, 0.45));
}

.engrave-card[data-grade='2'] {
    border-color: rgba(80, 160, 255, 0.45);
    background: linear-gradient(135deg, rgba(80, 160, 255, 0.18), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='2']::before {
    background: linear-gradient(180deg, rgba(120, 190, 255, 0.95), rgba(60, 120, 210, 0.5));
}

.engrave-card[data-grade='3'] {
    border-color: rgba(170, 120, 255, 0.5);
    background: linear-gradient(135deg, rgba(170, 120, 255, 0.2), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='3']::before {
    background: linear-gradient(180deg, rgba(190, 140, 255, 0.98), rgba(120, 80, 210, 0.5));
}

.engrave-card[data-grade='4'] {
    border-color: rgba(255, 210, 120, 0.55);
    background: linear-gradient(135deg, rgba(255, 210, 120, 0.24), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='4']::before {
    background: linear-gradient(180deg, rgba(255, 225, 150, 0.98), rgba(200, 150, 70, 0.55));
}

.engrave-card[data-grade='5'] {
    border-color: rgba(255, 150, 80, 0.55);
    background: linear-gradient(135deg, rgba(255, 150, 80, 0.25), rgba(10, 14, 26, 0.9));
}

.engrave-card[data-grade='5']::before {
    background: linear-gradient(180deg, rgba(255, 175, 110, 0.98), rgba(190, 100, 40, 0.55));
}

.engrave-card[data-grade='6'] {
    border-color: rgba(220, 220, 220, 0.7);
    background: linear-gradient(135deg, rgba(235, 235, 235, 0.28), rgba(18, 22, 34, 0.92));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(210, 210, 210, 0.12);
}

.engrave-card[data-grade='6']::before {
    background: linear-gradient(180deg, #f2f2f2, #f6c3c3, #f6deb2, #c7f0d6, #c0dbff, #d7caff, #f2f2f2);
}

.engrave-card.active {
    box-shadow: 0 0 18px rgba(255, 214, 140, 0.25), inset 0 0 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 235, 200, 0.25);
}

.engrave-card.is-equipped {
    box-shadow: 0 0 16px rgba(120, 200, 255, 0.22), inset 0 0 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(120, 200, 255, 0.2);
}

.engrave-modal.is-upgrade-flash {
    animation: engraveUpgradePulse 0.8s ease;
}

.engrave-card.is-upgrade-flash {
    animation: engraveCardUpgradeFlash 0.75s ease;
    border-color: rgba(255, 215, 150, 0.85);
}

.engrave-card.is-upgrade-flash::before {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 210, 140, 0.8));
}

.engrave-card.is-locked {
    opacity: 0.65;
}

.engrave-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45), inset 0 0 16px rgba(0, 0, 0, 0.35);
}

@keyframes engraveUpgradePulse {
    0% {
        box-shadow: 0 45px 110px rgba(0, 0, 0, 0.85);
        border-color: rgba(255, 255, 255, 0.12);
    }
    45% {
        box-shadow: 0 35px 110px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 210, 150, 0.35);
        border-color: rgba(255, 214, 160, 0.55);
    }
    100% {
        box-shadow: 0 45px 110px rgba(0, 0, 0, 0.85);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

@keyframes engraveCardUpgradeFlash {
    0% {
        box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
    }
    40% {
        box-shadow: 0 0 24px rgba(255, 215, 150, 0.35), inset 0 0 16px rgba(0, 0, 0, 0.35);
    }
    100% {
        box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
    }
}

.engrave-card-status {
    position: static;
    margin-left: auto;
    padding: 12px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: rgba(210, 220, 235, 0.9);
    background: rgba(10, 14, 26, 0.8);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    align-self: center;
    width: auto;
    min-width: 36px;
    max-width: 44px;
    flex: 0 0 auto;
    line-height: 1;
}

.engrave-card-status::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(140, 160, 190, 0.9);
    box-shadow: 0 0 6px rgba(120, 150, 190, 0.45);
}

.engrave-card-status:hover:not(:disabled) {
    border-color: rgba(255, 214, 160, 0.5);
    color: rgba(255, 235, 210, 0.95);
    box-shadow: 0 0 10px rgba(255, 214, 160, 0.2);
}

.engrave-card-status.is-active {
    color: rgba(32, 20, 8, 0.95);
    border-color: rgba(255, 205, 130, 0.85);
    background: linear-gradient(135deg, rgba(255, 214, 160, 0.95), rgba(255, 170, 95, 0.92));
    box-shadow: 0 0 12px rgba(255, 200, 130, 0.35);
}

.engrave-card-status.is-active::before {
    background: rgba(40, 170, 90, 0.95);
    box-shadow: 0 0 6px rgba(70, 220, 140, 0.55);
}

.engrave-card-status.is-inactive {
    color: rgba(195, 210, 230, 0.9);
    background: rgba(10, 14, 24, 0.75);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

.engrave-card-status.is-inactive::before {
    background: rgba(120, 150, 190, 0.9);
    box-shadow: 0 0 6px rgba(120, 150, 190, 0.45);
}

.engrave-card-status.is-locked {
    color: rgba(220, 220, 220, 0.85);
    background: rgba(80, 80, 90, 0.6);
    box-shadow: none;
}

.engrave-card-status.is-locked::before {
    background: rgba(150, 150, 160, 0.8);
    box-shadow: none;
}

.engrave-card-status:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.engrave-card-key {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 17px;
    color: #1b1208;
    background: radial-gradient(circle at 35% 30%, rgba(255, 245, 225, 0.98), rgba(220, 160, 105, 0.92));
    border: 1px solid rgba(255, 230, 180, 0.7);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.4), 0 6px 12px rgba(0, 0, 0, 0.35);
}

.engrave-card[data-grade='locked'] .engrave-card-key {
    color: rgba(70, 70, 70, 0.9);
    background: radial-gradient(circle at 35% 30%, rgba(210, 210, 210, 0.9), rgba(140, 140, 140, 0.85));
    border-color: rgba(200, 200, 200, 0.4);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.engrave-card[data-grade='0'] .engrave-card-key {
    color: #1b1208;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(220, 220, 220, 0.92));
    border-color: rgba(235, 235, 235, 0.75);
}

.engrave-card[data-grade='1'] .engrave-card-key {
    color: #0f2a1a;
    background: radial-gradient(circle at 35% 30%, rgba(215, 255, 225, 0.98), rgba(110, 220, 150, 0.92));
    border-color: rgba(140, 230, 175, 0.75);
}

.engrave-card[data-grade='2'] .engrave-card-key {
    color: #0e2140;
    background: radial-gradient(circle at 35% 30%, rgba(215, 235, 255, 0.98), rgba(120, 185, 255, 0.92));
    border-color: rgba(150, 195, 255, 0.75);
}

.engrave-card[data-grade='3'] .engrave-card-key {
    color: #24123f;
    background: radial-gradient(circle at 35% 30%, rgba(235, 220, 255, 0.98), rgba(170, 130, 255, 0.92));
    border-color: rgba(185, 145, 255, 0.78);
}

.engrave-card[data-grade='4'] .engrave-card-key {
    color: #2b1b06;
    background: radial-gradient(circle at 35% 30%, rgba(255, 240, 200, 0.98), rgba(255, 200, 110, 0.95));
    border-color: rgba(255, 220, 150, 0.8);
}

.engrave-card[data-grade='5'] .engrave-card-key {
    color: #2b1406;
    background: radial-gradient(circle at 35% 30%, rgba(255, 220, 190, 0.98), rgba(255, 150, 90, 0.95));
    border-color: rgba(255, 185, 130, 0.8);
}

.engrave-card[data-grade='6'] .engrave-card-key {
    color: #1b1b1b;
    background: linear-gradient(135deg, #f7f7f7, #f5c7c7, #f6e2b8, #ccefd8, #c6dfff, #ddd1ff, #f7f7f7);
    border-color: rgba(235, 235, 235, 0.9);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35);
}

.engrave-card-key svg {
    width: 24px;
    height: 24px;
    display: block;
}

.engrave-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.engrave-card-title {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engrave-card-grade {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 600;
}

.engrave-card-grade[data-grade='locked'],
.engrave-detail-grade[data-grade='locked'] {
    color: rgba(200, 200, 200, 0.65);
}

.engrave-card-grade[data-grade='0'],
.engrave-detail-grade[data-grade='0'] {
    color: #f2f2f2;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.engrave-card-grade[data-grade='1'],
.engrave-detail-grade[data-grade='1'] {
    color: #49d26b;
    text-shadow: 0 0 6px rgba(73, 210, 107, 0.35);
}

.engrave-card-grade[data-grade='2'],
.engrave-detail-grade[data-grade='2'] {
    color: #4aa3ff;
    text-shadow: 0 0 6px rgba(74, 163, 255, 0.35);
}

.engrave-card-grade[data-grade='3'],
.engrave-detail-grade[data-grade='3'] {
    color: #b37cff;
    text-shadow: 0 0 6px rgba(179, 124, 255, 0.35);
}

.engrave-card-grade[data-grade='4'],
.engrave-detail-grade[data-grade='4'] {
    color: #ffd557;
    text-shadow: 0 0 6px rgba(255, 213, 87, 0.4);
}

.engrave-card-grade[data-grade='5'],
.engrave-detail-grade[data-grade='5'] {
    color: #ff8a35;
    text-shadow: 0 0 6px rgba(255, 138, 53, 0.4);
}

.engrave-card-grade[data-grade='6'],
.engrave-detail-grade[data-grade='6'] {
    background: linear-gradient(90deg, #d8d8d8, #f1b2b2, #f3d48a, #b9e4c5, #a9cfff, #cbbcff, #d8d8d8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.engrave-card-weight {
    font-size: 12px;
    color: rgba(255, 223, 186, 0.85);
}

.engrave-detail {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 16, 28, 0.85);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 260px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
}

.engrave-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.engrave-detail-title {
    font-size: 30px;
    font-weight: 700;
}

.engrave-detail-grade {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 600;
}

.engrave-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.engrave-detail-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 28, 0.78);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.engrave-detail-item strong {
    font-size: 16px;
    color: var(--text-primary);
}

.engrave-detail-effects {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.engrave-effect-block {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 24, 0.9);
    padding: 12px 14px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.engrave-effect-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 230, 200, 0.9);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.engrave-effect-lines {
    font-size: 14px;
    color: rgba(235, 225, 210, 0.9);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.engrave-summary {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 28, 0.78);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.engrave-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 16, 28, 0.85);
    padding: 14px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
}

.engrave-action .engrave-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.engrave-action .engrave-card-title {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.engrave-cost-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
}

.engrave-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.engrave-upgrade-btn,
.engrave-equip-btn {
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(255, 210, 140, 0.55);
    background: linear-gradient(135deg, rgba(255, 210, 140, 0.3), rgba(20, 28, 46, 0.92));
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45);
}

.engrave-equip-btn {
    border-color: rgba(120, 200, 255, 0.45);
    background: linear-gradient(140deg, rgba(120, 200, 255, 0.3), rgba(20, 28, 46, 0.9));
}

.engrave-upgrade-btn:hover:not(:disabled),
.engrave-equip-btn:hover:not(:disabled) {
    border-color: rgba(255, 225, 170, 0.85);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 214, 122, 0.2);
}

.engrave-upgrade-btn:disabled,
.engrave-equip-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.engrave-note {
    font-size: 13px;
    color: rgba(200, 210, 225, 0.8);
    min-height: 16px;
    line-height: 1.5;
}

.engrave-action-footer {
    display: flex;
    justify-content: flex-end;
}

.engrave-reset-btn {
    height: 38px;
    width: 40%;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 150, 120, 0.45);
    background: linear-gradient(140deg, rgba(255, 150, 120, 0.2), rgba(18, 22, 36, 0.92));
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: auto;
}

.engrave-reset-btn:hover:not(:disabled) {
    border-color: rgba(255, 185, 150, 0.75);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 150, 120, 0.2);
}

.engrave-reset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.engrave-effect-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 205, 140, 0.14), transparent 55%),
        rgba(3, 6, 14, 0.88);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.engrave-effect-overlay.open {
    display: flex;
}

.engrave-effect-modal {
    position: relative;
    width: min(980px, 92vw);
    max-height: 74vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid rgba(255, 214, 160, 0.3);
    background: rgba(10, 14, 24, 0.96);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    padding: 20px 24px 22px;
}

.engrave-effect-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 48px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.engrave-effect-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
}

.engrave-effect-close {
    border: none;
    background: rgba(12, 16, 26, 0.85);
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
}

.engrave-effect-body {
    margin-top: 16px;
    overflow: auto;
    padding-right: 6px;
}

.engrave-effect-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    font-size: 14px;
    color: rgba(235, 225, 210, 0.9);
    line-height: 1.55;
}

.engrave-effect-list > div {
    border-radius: 12px;
    border: 1px solid rgba(255, 214, 160, 0.18);
    background: rgba(12, 16, 26, 0.88);
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    padding-left: 18px;
    word-break: keep-all;
}

.engrave-effect-list > div::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 214, 160, 0.9), rgba(120, 200, 255, 0.45));
}

.transcend-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 18%, rgba(110, 230, 255, 0.18), transparent 55%),
        radial-gradient(circle at 85% 70%, rgba(255, 200, 120, 0.12), transparent 60%),
        rgba(3, 5, 12, 0.82);
    backdrop-filter: blur(10px);
    z-index: 5430;
    animation: fadeIn 0.22s ease;
}

.transcend-overlay.open {
    display: flex;
}

.transcend-modal {
    position: relative;
    width: min(1180px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 18%, rgba(130, 230, 255, 0.16), transparent 48%),
        radial-gradient(circle at 86% 85%, rgba(255, 214, 140, 0.1), transparent 58%),
        linear-gradient(160deg, rgba(9, 14, 28, 0.98), rgba(6, 8, 16, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.transcend-modal::before,
.transcend-modal::after {
    content: '';
    position: absolute;
    inset: -18%;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.transcend-modal::before {
    background:
        radial-gradient(circle at 25% 20%, rgba(170, 245, 255, 0.5), transparent 60%),
        radial-gradient(circle at 75% 80%, rgba(255, 220, 160, 0.45), transparent 65%);
    filter: blur(8px);
}

.transcend-modal::after {
    background:
        conic-gradient(from 120deg, rgba(140, 230, 255, 0.55), rgba(255, 255, 255, 0) 60%, rgba(255, 215, 150, 0.55), rgba(255, 255, 255, 0) 85%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25), transparent 60%);
    mix-blend-mode: screen;
    transform: scale(0.92);
}

.transcend-modal > * {
    position: relative;
    z-index: 1;
}

.transcend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 26, 0.6);
}

.transcend-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transcend-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #dff8ff;
}

.transcend-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.5;
}

.transcend-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.transcend-owned {
    display: flex;
    gap: 10px;
}

.transcend-owned-card {
    min-width: 150px;
    border-radius: 14px;
    border: 1px solid rgba(120, 210, 255, 0.2);
    background: rgba(11, 18, 32, 0.75);
    box-shadow: inset 0 0 12px rgba(100, 200, 255, 0.08);
}

.transcend-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(8, 12, 22, 0.8);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
}

.transcend-close:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.transcend-body {
    display: grid;
    grid-template-columns: minmax(300px, 375px) minmax(0, 1fr) minmax(130px, 160px);
    gap: 18px;
    padding: 18px 22px 22px;
    overflow: hidden;
}

.transcend-effect-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    padding-right: 6px;
}

.transcend-effect-card {
    --grade-accent: rgba(120, 200, 255, 0.6);
    --grade-border: rgba(255, 255, 255, 0.12);
    --grade-bg: rgba(12, 16, 28, 0.82);
    --grade-bar: linear-gradient(180deg, rgba(200, 220, 255, 0.85), rgba(120, 200, 255, 0.45));
    --stage-alpha: 0.08;
    border-radius: 14px;
    border: 1px solid var(--grade-border);
    border-left: 3px solid var(--grade-accent);
    background: linear-gradient(135deg, var(--grade-bg), rgba(9, 12, 22, 0.85));
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.transcend-effect-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: var(--grade-bar);
    opacity: 0.85;
}

.transcend-effect-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle at 15% 20%, var(--grade-accent), transparent 65%);
    opacity: var(--stage-alpha);
    pointer-events: none;
}

.transcend-effect-card[data-stage='0'] { --stage-alpha: 0.05; }
.transcend-effect-card[data-stage='1'] { --stage-alpha: 0.07; }
.transcend-effect-card[data-stage='2'] { --stage-alpha: 0.09; }
.transcend-effect-card[data-stage='3'] { --stage-alpha: 0.11; }
.transcend-effect-card[data-stage='4'] { --stage-alpha: 0.13; }
.transcend-effect-card[data-stage='5'] { --stage-alpha: 0.16; }

.transcend-effect-card[data-grade='0'] {
    --grade-accent: rgba(210, 210, 210, 0.7);
    --grade-border: rgba(210, 210, 210, 0.35);
    --grade-bg: rgba(235, 235, 235, 0.1);
    --grade-bar: linear-gradient(180deg, rgba(245, 245, 245, 0.95), rgba(190, 190, 190, 0.4));
}

.transcend-effect-card[data-grade='1'] {
    --grade-accent: rgba(80, 210, 120, 0.7);
    --grade-border: rgba(80, 210, 120, 0.35);
    --grade-bg: rgba(80, 210, 120, 0.14);
    --grade-bar: linear-gradient(180deg, rgba(110, 230, 150, 0.95), rgba(60, 150, 90, 0.45));
}

.transcend-effect-card[data-grade='2'] {
    --grade-accent: rgba(80, 160, 255, 0.75);
    --grade-border: rgba(80, 160, 255, 0.38);
    --grade-bg: rgba(80, 160, 255, 0.16);
    --grade-bar: linear-gradient(180deg, rgba(120, 190, 255, 0.95), rgba(60, 120, 210, 0.5));
}

.transcend-effect-card[data-grade='3'] {
    --grade-accent: rgba(170, 120, 255, 0.78);
    --grade-border: rgba(170, 120, 255, 0.4);
    --grade-bg: rgba(170, 120, 255, 0.18);
    --grade-bar: linear-gradient(180deg, rgba(190, 140, 255, 0.98), rgba(120, 80, 210, 0.5));
}

.transcend-effect-card[data-grade='4'] {
    --grade-accent: rgba(255, 210, 120, 0.8);
    --grade-border: rgba(255, 210, 120, 0.45);
    --grade-bg: rgba(255, 210, 120, 0.2);
    --grade-bar: linear-gradient(180deg, rgba(255, 225, 150, 0.98), rgba(200, 150, 70, 0.55));
}

.transcend-effect-card[data-grade='5'] {
    --grade-accent: rgba(255, 150, 80, 0.82);
    --grade-border: rgba(255, 150, 80, 0.48);
    --grade-bg: rgba(255, 150, 80, 0.2);
    --grade-bar: linear-gradient(180deg, rgba(255, 175, 110, 0.98), rgba(190, 100, 40, 0.55));
}

.transcend-effect-card[data-grade='6'] {
    --grade-accent: rgba(235, 235, 235, 0.85);
    --grade-border: rgba(220, 220, 220, 0.6);
    --grade-bg: rgba(235, 235, 235, 0.24);
    --grade-bar: linear-gradient(180deg, #f2f2f2, #f6c3c3, #f6deb2, #c7f0d6, #c0dbff, #d7caff, #f2f2f2);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4), 0 0 16px rgba(210, 210, 210, 0.12);
}

.transcend-effect-card.active {
    transform: translateY(-2px);
    border-color: var(--grade-accent);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.4), 0 0 18px var(--grade-accent);
}

.transcend-effect-name {
    font-weight: 600;
    font-size: 14px;
}

.transcend-effect-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.transcend-effect-grade {
    color: var(--grade-accent);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.transcend-effect-value {
    font-weight: 600;
    color: var(--text-primary);
}

.transcend-detail {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 26, 0.78);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.transcend-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.transcend-effect-title {
    font-size: 18px;
    font-weight: 700;
}

.transcend-effect-grade {
    font-size: 14px;
    font-weight: 700;
    color: #bdefff;
}

.transcend-effect-grade[data-grade='0'],
#transcend-current-grade[data-grade='0'],
#transcend-next-grade[data-grade='0'] {
    color: #f2f2f2;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.transcend-effect-grade[data-grade='1'],
#transcend-current-grade[data-grade='1'],
#transcend-next-grade[data-grade='1'] {
    color: #49d26b;
    text-shadow: 0 0 6px rgba(73, 210, 107, 0.35);
}

.transcend-effect-grade[data-grade='2'],
#transcend-current-grade[data-grade='2'],
#transcend-next-grade[data-grade='2'] {
    color: #4aa3ff;
    text-shadow: 0 0 6px rgba(74, 163, 255, 0.35);
}

.transcend-effect-grade[data-grade='3'],
#transcend-current-grade[data-grade='3'],
#transcend-next-grade[data-grade='3'] {
    color: #b37cff;
    text-shadow: 0 0 6px rgba(179, 124, 255, 0.35);
}

.transcend-effect-grade[data-grade='4'],
#transcend-current-grade[data-grade='4'],
#transcend-next-grade[data-grade='4'] {
    color: #ffd557;
    text-shadow: 0 0 6px rgba(255, 213, 87, 0.4);
}

.transcend-effect-grade[data-grade='5'],
#transcend-current-grade[data-grade='5'],
#transcend-next-grade[data-grade='5'] {
    color: #ff8a35;
    text-shadow: 0 0 6px rgba(255, 138, 53, 0.4);
}

.transcend-effect-grade[data-grade='6'],
#transcend-current-grade[data-grade='6'],
#transcend-next-grade[data-grade='6'] {
    background: linear-gradient(90deg, #d8d8d8, #f1b2b2, #f3d48a, #b9e4c5, #a9cfff, #cbbcff, #d8d8d8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

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

.transcend-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 22, 0.7);
    font-size: 12px;
    color: var(--text-secondary);
}

.transcend-detail-item strong {
    font-size: 15px;
    color: var(--text-primary);
}

.transcend-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.transcend-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(9, 14, 24, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: var(--text-secondary);
}

.transcend-summary-item strong {
    color: #d8f4ff;
    font-weight: 700;
}

.transcend-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transcend-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 26, 0.82);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transcend-card-title {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.transcend-cost-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transcend-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.transcend-cost-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--text-primary);
}

.transcend-cost-value .resource-icon {
    width: 16px;
    height: 16px;
}

.transcend-chance-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--success);
}

.transcend-action-buttons {
    display: grid;
    gap: 10px;
}

.transcend-upgrade-btn {
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(140, 220, 255, 0.45);
    background: linear-gradient(140deg, rgba(140, 220, 255, 0.35), rgba(20, 28, 46, 0.9));
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.4);
}

.transcend-upgrade-btn:hover:not(:disabled) {
    border-color: rgba(255, 214, 122, 0.7);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 214, 122, 0.2);
}

.transcend-upgrade-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.transcend-note {
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 16px;
    line-height: 1.4;
}

.transcend-result {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.transcend-result.show {
    opacity: 1;
}

.transcend-result.is-success {
    color: var(--success);
}

.transcend-result.is-fail {
    color: var(--danger);
}

.transcend-result-detail {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}

.raid-reward-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 209, 255, 0.18), transparent 55%),
        radial-gradient(circle at 85% 70%, rgba(255, 214, 122, 0.12), transparent 60%),
        rgba(3, 5, 12, 0.78);
    backdrop-filter: blur(10px);
    z-index: 5430;
    animation: fadeIn 0.22s ease;
}

.raid-reward-overlay.open {
    display: flex;
}

.raid-reward-modal {
    width: min(980px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 210, 255, 0.12), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255, 215, 140, 0.08), transparent 55%),
        linear-gradient(155deg, rgba(10, 14, 26, 0.98), rgba(6, 9, 17, 0.98));
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

.raid-reward-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.raid-reward-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.raid-reward-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.raid-reward-close:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.raid-reward-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.raid-reward-table-wrap {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 26, 0.75);
    max-height: min(420px, 60vh);
}

.raid-reward-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 900px;
}

.raid-reward-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(14, 18, 32, 0.95);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.raid-reward-table thead th:not([data-col="rewards"]),
.raid-reward-table tbody td:not(:nth-child(3)) {
    text-align: center;
}

.raid-reward-table thead th[data-col="rewards"],
.raid-reward-table tbody td:nth-child(3) {
    text-align: left;
}

.raid-reward-table th[data-col="boss"],
.raid-reward-table td:nth-child(1) {
    width: 14%;
    min-width: 120px;
}

.raid-reward-table th[data-col="difficulty"],
.raid-reward-table td:nth-child(2) {
    width: 14%;
    min-width: 120px;
}

.raid-reward-table th[data-col="status"],
.raid-reward-table td:nth-child(4) {
    width: 15%;
    min-width: 150px;
}

.raid-reward-table tbody td {
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    vertical-align: top;
}

.raid-reward-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.raid-reward-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.raid-reward-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.raid-reward-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(120, 200, 255, 0.12);
    border: 1px solid rgba(120, 200, 255, 0.35);
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.raid-reward-badge.is-lucky {
    background: rgba(255, 214, 122, 0.12);
    border-color: rgba(255, 214, 122, 0.4);
}

.raid-reward-empty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.raid-reward-status {
    font-weight: 700;
}

.raid-reward-status.is-available {
    color: var(--success);
}

.raid-reward-status.is-claimed {
    color: rgba(255, 255, 255, 0.6);
}

.raid-reward-status.is-login {
    color: var(--gold-strong);
}

.raid-reward-note {
    font-size: 12px;
    color: var(--text-secondary);
}

.rift-info-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 16%, rgba(120, 200, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% 82%, rgba(40, 120, 170, 0.2), transparent 50%),
        rgba(5, 10, 18, 0.72);
    backdrop-filter: blur(8px);
    z-index: 5200;
}

.rift-info-overlay.open {
    display: flex;
}

.rift-info-modal {
    width: min(620px, 92vw);
    max-height: 82vh;
    overflow: auto;
    background: linear-gradient(160deg, rgba(16, 22, 34, 0.98), rgba(8, 12, 20, 0.96));
    border-radius: 18px;
    border: 1px solid rgba(120, 200, 255, 0.26);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
    padding: 24px 28px 26px;
    color: var(--text-primary);
    position: relative;
}

.rift-info-modal::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--rift-accent-strong), transparent);
    opacity: 0.6;
}

.rift-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}

.rift-info-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e5f7ff;
    letter-spacing: 0.02em;
}

.rift-info-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(120, 200, 255, 0.2);
    background: rgba(8, 12, 20, 0.75);
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rift-info-close:hover {
    color: #ffffff;
    border-color: rgba(120, 200, 255, 0.6);
    background: rgba(16, 24, 38, 0.85);
}

.rift-info-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(230, 244, 255, 0.9);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rift-info-body > div {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(14, 24, 38, 0.7);
    border: 1px solid rgba(120, 200, 255, 0.18);
    color: rgba(220, 240, 255, 0.95);
    font-weight: 600;
}

.rift-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rift-info-list li {
    position: relative;
    padding: 10px 12px 10px 30px;
    border-radius: 10px;
    background: rgba(10, 18, 30, 0.6);
    border: 1px solid rgba(120, 200, 255, 0.16);
}

.rift-info-list li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rift-accent-strong);
    box-shadow: 0 0 8px var(--rift-accent-deep);
}

.class-info-overlay {
    --class-accent: rgba(112, 243, 156, 0.85);
    --class-accent-soft: rgba(112, 243, 156, 0.18);
    --class-accent-weak: rgba(112, 243, 156, 0.12);
    --class-accent-strong: rgba(112, 243, 156, 0.75);
    --class-panel: rgba(8, 12, 10, 0.96);
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, var(--class-accent-soft), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(32, 110, 70, 0.2), transparent 50%),
        rgba(5, 10, 12, 0.75);
    backdrop-filter: blur(8px);
    z-index: 5200;
}

.class-info-overlay[data-class="wizard"] {
    --class-accent: rgba(120, 190, 255, 0.85);
    --class-accent-soft: rgba(120, 190, 255, 0.18);
    --class-accent-weak: rgba(120, 190, 255, 0.12);
    --class-accent-strong: rgba(120, 190, 255, 0.75);
}

.class-info-overlay[data-class="warrior"] {
    --class-accent: rgba(255, 190, 120, 0.85);
    --class-accent-soft: rgba(255, 190, 120, 0.18);
    --class-accent-weak: rgba(255, 190, 120, 0.12);
    --class-accent-strong: rgba(255, 190, 120, 0.75);
}

.class-info-overlay.open {
    display: flex;
}

.class-info-modal {
    width: min(800px, 92vw);
    max-height: 82vh;
    overflow: auto;
    background: linear-gradient(160deg, rgba(14, 22, 18, 0.98), var(--class-panel));
    border-radius: 18px;
    border: 1px solid var(--class-accent-weak);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
    padding: 24px 26px 22px;
    color: var(--text-primary);
    position: relative;
}

.class-info-modal::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--class-accent), transparent);
    opacity: 0.6;
}

.class-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--class-accent-weak);
}

.class-info-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #eafff3;
    letter-spacing: 0.02em;
}

.class-info-subtitle {
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.class-info-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--class-accent-weak);
    background: rgba(8, 12, 20, 0.75);
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.class-info-close:hover {
    color: #ffffff;
    border-color: var(--class-accent-strong);
    background: rgba(16, 24, 18, 0.85);
}

.class-info-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(230, 255, 240, 0.9);
}

.class-info-desc {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(12, 20, 16, 0.7);
    border: 1px solid var(--class-accent-weak);
    color: rgba(230, 255, 240, 0.95);
    font-weight: 600;
}

.class-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.class-info-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(12, 20, 16, 0.55);
    border: 1px solid var(--class-accent-weak);
    font-size: 0.78rem;
    color: rgba(226, 255, 238, 0.9);
    letter-spacing: 0.2px;
}

.class-info-chip[data-level="낮음"] {
    color: #d9ffef;
}

.class-info-chip[data-level="중간"] {
    color: #fff3cf;
}

.class-info-chip[data-level="높음"] {
    color: #ffd5d5;
}

.class-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.class-info-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(112, 243, 156, 0.12);
    border: 1px solid rgba(112, 243, 156, 0.28);
    font-size: 0.78rem;
    color: rgba(226, 255, 238, 0.95);
    letter-spacing: 0.2px;
}

.refine-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 214, 122, 0.15), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(99, 209, 255, 0.12), transparent 55%),
        rgba(3, 5, 12, 0.75);
    backdrop-filter: blur(10px);
    z-index: 5400;
    animation: fadeIn 0.22s ease;
}

.refine-overlay.open {
    display: flex;
}

.refine-modal {
    position: relative;
    width: min(980px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 212, 140, 0.16), transparent 50%),
        radial-gradient(circle at 90% 18%, rgba(99, 209, 255, 0.12), transparent 55%),
        linear-gradient(160deg, rgba(14, 18, 30, 0.96), rgba(8, 10, 18, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.refine-modal > * {
    position: relative;
    z-index: 1;
}

.refine-modal::before {
    content: '';
    position: absolute;
    inset: -40%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.refine-modal::after {
    content: '';
    position: absolute;
    inset: -35%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.refine-modal.refine-flash-success::before {
    background: radial-gradient(circle at 50% 20%, rgba(120, 255, 200, 0.65), rgba(60, 220, 255, 0.2), transparent 60%);
    animation: refineFlashSuccess 0.7s ease;
}

.refine-modal.refine-flash-fail::before {
    background: radial-gradient(circle at 50% 20%, rgba(255, 120, 140, 0.65), rgba(255, 120, 120, 0.2), transparent 60%);
    animation: refineFlashFail 0.7s ease;
}

.refine-modal.refine-flash-tier-1::after {
    background: radial-gradient(circle at 50% 50%, rgba(255, 218, 140, 0.6), rgba(255, 170, 90, 0.25), transparent 60%);
    animation: refineBurst 0.9s ease;
}

.refine-modal.refine-flash-tier-2::after {
    background: radial-gradient(circle at 50% 50%, rgba(255, 210, 255, 0.65), rgba(160, 120, 255, 0.28), transparent 60%);
    animation: refineBurst 1.05s ease;
}

.refine-modal.refine-flash-tier-3::after {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 220, 0.7), rgba(255, 200, 120, 0.35), transparent 65%);
    animation: refineBurst 1.2s ease;
}

.refine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 214, 122, 0.18), rgba(0, 0, 0, 0));
}

.refine-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.refine-total {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(120, 200, 255, 0.35);
    background: rgba(10, 20, 32, 0.6);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.refine-total strong {
    color: #d9f1ff;
    font-size: 0.9rem;
}

.refine-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px 0;
}

.refine-owned-resources {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}

.refine-owned-card {
    min-width: 200px;
}

.refine-owned {
    display: flex;
    align-items: center;
    gap: 10px;
}

.refine-owned-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.2rem;
    font-weight: 700;
}

.refine-owned-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.refine-owned-value {
    color: #ffe6a8;
    font-weight: 800;
}

.refine-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.refine-title {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.refine-subtitle {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.refine-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: all 0.18s ease;
}

.refine-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 214, 122, 0.4);
}

.refine-tabs {
    display: flex;
    gap: 8px;
    padding: 0;
}

.refine-result {
    margin: 0 20px;
    max-height: 0;
    min-height: 0;
    border-radius: 12px;
    padding: 0;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-align: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.refine-result.show {
    opacity: 1;
    transform: translateY(0);
    max-height: 60px;
    margin: 8px 20px 6px;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, 0.08);
}

.refine-result.is-success {
    color: #d8fff0;
    border-color: rgba(120, 255, 200, 0.35);
    box-shadow: 0 0 20px rgba(120, 255, 200, 0.25);
}

.refine-result.is-fail {
    color: #ffd9de;
    border-color: rgba(255, 120, 140, 0.35);
    box-shadow: 0 0 20px rgba(255, 120, 140, 0.2);
}

.refine-tab {
    width: auto;
    min-width: 120px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.06);
}

.refine-tab.active {
    color: #261b08;
    background: linear-gradient(135deg, #ffd56a, #ffb347);
    border-color: rgba(255, 214, 122, 0.65);
    box-shadow: 0 12px 24px rgba(255, 184, 92, 0.25);
}

.refine-body {
    padding: 16px 20px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    overflow: auto;
}

.refine-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
    gap: 12px;
    align-items: stretch;
}

.refine-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.25);
}

.refine-card-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--text-secondary);
}

.refine-level-card {
    align-items: center;
    text-align: center;
    gap: 12px;
}

.refine-level-card .refine-card-title {
    font-size: 1.84rem;
}

.refine-level-display {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.65rem;
    font-weight: 800;
}

.refine-level-pill {
    padding: 12px 21px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    min-width: 105px;
}

.refine-level-pill.next {
    background: rgba(255, 214, 122, 0.12);
    border-color: rgba(255, 214, 122, 0.4);
    color: #ffe7b0;
}

.refine-level-arrow {
    opacity: 0.7;
}

.refine-effects-card {
    width: 100%;
}

.refine-effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.refine-subtitle-sm {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.refine-effect-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.refine-effect-item {
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 0.88rem;
}

.refine-info-card {
    grid-column: 1 / -1;
    padding: 12px 28px;
}

.refine-info-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.9fr);
    gap: 12px;
}

.refine-info-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.refine-info-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.refine-info-cost {
    align-self: stretch;
    justify-self: end;
}

.refine-chance-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.refine-chance-bar {
    position: relative;
    flex: 1;
    height: 14px;
    min-width: 252px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.refine-chance-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #63d1ff, #ffd56a);
    box-shadow: 0 0 12px rgba(255, 214, 122, 0.6);
    transition: width 0.2s ease;
}

.refine-artisan-bar span {
    background: linear-gradient(90deg, #ffcf6a, #ffdcb0);
    box-shadow: 0 0 12px rgba(255, 214, 122, 0.8);
}

.refine-chance-value {
    font-weight: 800;
    min-width: 60px;
    text-align: right;
}

.refine-bonus-rate {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.refine-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.refine-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.refine-metric strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.refine-cost-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
    align-items: center;
}

.refine-cost-item {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 4px;
}

.refine-cost-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.refine-cost-value {
    font-weight: 800;
    font-size: 1.5rem;
}

.refine-table-card {
    grid-column: 1 / -1;
}

.refine-table-wrapper {
    max-height: 240px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.refine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.refine-table th,
.refine-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.refine-table th {
    position: sticky;
    top: 0;
    background: rgba(8, 10, 18, 0.95);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.refine-table tr {
    transition: background 0.12s ease;
    cursor: pointer;
}

.refine-table tr:hover {
    background: rgba(99, 209, 255, 0.08);
}

.refine-table tr.is-current {
    background: rgba(255, 214, 122, 0.2);
}

.refine-table tr.is-next {
    background: rgba(99, 209, 255, 0.12);
}

.refine-table tr.is-missing {
    cursor: default;
}

.refine-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
}

.refine-note {
    flex: 1;
    min-width: 220px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.refine-note strong {
    color: #ffe6a8;
}

.refine-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.refine-action-btn {
    width: auto;
    min-width: 110px;
    padding: 10px 14px;
}

.refine-action-batch {
    min-width: 130px;
}

.class-meta.light {
    color: #c3e3ff;
    font-weight: 700;
}

.panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.panel-row.stack {
    grid-template-columns: 1fr;
}

.panel-row .panel-section {
    height: 100%;
}

.test-inline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.test-inline .toggle-row {
    margin: 0;
}

.test-inline .form-row {
    margin: 0;
}

.toggle-row.inline {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.practice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}

.raid-recommended-power {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-weight: 600;
    color: var(--text-secondary);
}

.raid-recommended-label {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.raid-recommended-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
}

.raid-recommended-value {
    font-size: 0.95rem;
}

.raid-recommended-power[data-tier='red'] {
    color: var(--danger);
}

.raid-recommended-power[data-tier='orange'] {
    color: var(--warning);
}

.raid-recommended-power[data-tier='lime'] {
    color: #c7ff8a;
}

.raid-recommended-power[data-tier='green'] {
    color: #35d482;
}

.raid-recommended-power[data-tier='blue'] {
    color: #6fd7ff;
}

.raid-recommended-power[data-tier='white'] {
    color: #2aa8ff;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-input-row input {
    flex: 1;
}

.form-toggle-btn {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 12, 20, 0.55);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.form-toggle-btn:hover {
    border-color: rgba(158, 252, 255, 0.4);
    color: var(--text-primary);
}

.form-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.form-status {
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-height: 1em;
}

.form-status[data-state='success'] {
    color: var(--success);
}

.form-status[data-state='error'] {
    color: var(--danger);
}

input.is-invalid {
    border-color: rgba(255, 94, 115, 0.7);
    box-shadow: 0 0 0 2px rgba(255, 94, 115, 0.15);
}

input.is-valid {
    border-color: rgba(112, 243, 156, 0.6);
}

@media (max-width: 1200px) {
    .mail-body {
        grid-template-columns: 1fr;
    }

    .mail-list-panel {
        min-height: auto;
    }

    .friend-body {
        grid-template-columns: 1fr;
    }

    .friend-list-panel {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .mail-header {
        padding: 18px 18px 10px;
    }

    .mail-resource-bar {
        padding: 10px 18px 12px;
    }

    .mail-body {
        padding: 16px 18px 20px;
    }

    .mail-resource-inputs {
        grid-template-columns: 1fr;
    }

    .friend-header {
        padding: 18px 18px 10px;
    }

    .friend-body {
        padding: 16px 18px 20px;
    }

    .friend-chat-form {
        flex-direction: column;
    }

    .friend-chat-form .primary-btn {
        width: 100%;
    }

    .friend-request-columns {
        grid-template-columns: 1fr;
    }
}

.slider-row input[type="range"] {
    accent-color: #ff6b6b;
}

.slider-row input[type="range"]#test-player-hp {
    accent-color: #63ffa8;
}

.slider-row label span {
    color: #ffef99;
    font-weight: 700;
}

label {
    font-size: 1rem;
    color: #f8f9ff;
    font-weight: 700;
}

select {
    color: #0b0c10;
}

.slider-row input[type="range"] {
    accent-color: #ff6b6b;
}

.slider-row input[type="range"]#test-player-hp {
    accent-color: #63ffa8;
}

.slider-row label span {
    color: #ffef99;
    font-weight: 800;
}

select,
button,
input[type="checkbox"],
input[type="range"] {
    font-family: inherit;
}

select {
    color: #f8fbff;
    background: #11131d;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

select option {
    color: #0b0c10;
    background: #f8fbff;
}

select,
button {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.08s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

select:hover,
button:hover {
    border-color: rgba(99, 209, 255, 0.5);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

button:active {
    transform: translateY(1px);
}

button:focus-visible,
select:focus-visible {
    outline: none;
    border-color: rgba(170, 210, 255, 0.7);
    box-shadow: 0 0 0 2px rgba(120, 170, 220, 0.25);
}

.primary-btn {
    background: linear-gradient(135deg, #63d1ff, #4c91ff);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #06101f;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.primary-btn:hover {
    box-shadow: 0 14px 30px rgba(76, 145, 255, 0.35);
}

.primary-btn:disabled,
.primary-btn:disabled:hover {
    background: linear-gradient(135deg, #7a8391, #5c6572);
    border-color: rgba(255, 255, 255, 0.14);
    color: #1f2632;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-weight: 600;
}

.secondary-btn:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.toggle-row .label {
    color: var(--text-primary);
    font-weight: 600;
}

.checkbox {
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
    cursor: pointer;
}

.volume-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.volume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.volume-row-label {
    min-width: 33px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.volume-label {
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.volume-control input[type="range"] {
    width: 180px;
    accent-color: var(--accent);
    cursor: pointer;
}

.volume-value {
    min-width: 33px;
    text-align: right;
    color: var(--text-primary);
    font-size: 0.9rem;
}

#buff-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#buff-toggle {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

#buff-toggle+label {
    color: var(--text-primary);
    cursor: pointer;
}

.buff-cost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 204, 112, 0.12);
    border: 1px solid rgba(255, 214, 136, 0.35);
    color: rgba(255, 235, 190, 0.95);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    box-shadow: inset 0 0 10px rgba(255, 205, 120, 0.15);
}

.buff-cost-coin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc, #ffd36b 45%, #c97a1f 100%);
    border: 1px solid rgba(255, 230, 170, 0.85);
    box-shadow: 0 0 8px rgba(255, 210, 120, 0.45), inset 0 0 6px rgba(255, 255, 255, 0.35);
    display: inline-block;
}

.settings-fab {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 30;
    font-weight: 700;
    transition: transform 0.08s ease, box-shadow 0.2s ease;
}

.settings-fab:hover {
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.55);
}

.settings-fab:active {
    transform: translateY(1px);
}

.settings-panel {
    position: fixed;
    top: 100px;
    left: 16px;
    width: 340px;
    background: rgba(12, 14, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 40;
}

.settings-panel.open {
    display: block;
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 700;
}

.settings-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 4px 8px;
    cursor: pointer;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 1800px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .multiplayer-panel {
        width: min(560px, 100%);
    }

    .multiplayer-config-panel {
        width: min(560px, 100%);
    }

    .resource-panel {
        width: min(750px, 100%);
    }

    .resource-panel.resource-panel-wide {
        width: min(1100px, 100%);
    }

    .narak-panel {
        grid-column: auto;
        width: min(750px, 100%);
    }

    .profile-panel {
        width: min(650px, 100%);
    }

    body.multi-mode .mp-side-stack {
        grid-column: auto;
    }

    .mp-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    body.solo-mode .solo-raid-row {
        flex-direction: column;
        gap: 12px;
    }

    .solo-raid-row .daily-quest-panel {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        margin-right: 0;
    }

    .solo-raid-row #controls-container {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }
}

@media (max-width: 768px) {
    .masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .combat-analyzer-mini {
        right: 10px;
        bottom: 10px;
    }

    .combat-analyzer-panel {
        left: 10px;
        right: 10px;
        bottom: 74px;
        width: auto;
    }

    .masthead-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .masthead-action.tutorial-action {
        margin-right: 16px;
    }

    .mode-switch {
        width: 100%;
    }

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

    .practice-row {
        grid-template-columns: 1fr;
    }

    .hell-key-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hell-meta-row {
        grid-template-columns: 1fr;
    }

    .rift-enter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .rift-enter-toggle {
        width: 100%;
        justify-content: center;
    }

    .rift-multi-label {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .hell-enter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hell-enter-toggle {
        width: 100%;
        justify-content: center;
    }

    .hell-multi-label {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .narak-enter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .narak-enter-toggle {
        width: 100%;
        justify-content: center;
    }

    .narak-multi-label {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    #game-message {
        font-size: 1.4rem;
    }

    .refine-body {
        grid-template-columns: 1fr;
    }

    .refine-row {
        grid-template-columns: 1fr;
    }

    .refine-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-slider {
        grid-template-columns: 1fr;
    }

    .admin-slider-value {
        text-align: left;
    }

    .admin-row-2 {
        grid-template-columns: 1fr;
    }

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

    .admin-inline-sliders {
        width: 100%;
        padding-left: 0;
        border-left: 0;
        flex-wrap: wrap;
    }

    .admin-inline-slider {
        grid-template-columns: auto 1fr auto;
    }

    .refine-tabs {
        flex-direction: column;
    }

    .refine-tab {
        width: 100%;
    }

    .refine-tabs-row {
        flex-direction: column;
        align-items: stretch;
    }

    .refine-owned-resources {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .refine-owned-card {
        width: 100%;
        min-width: 0;
    }

    .refine-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .refine-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .refine-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .refine-actions {
        width: 100%;
        justify-content: stretch;
    }

    .refine-action-btn {
        width: 100%;
    }

    .engrave-header {
        gap: 12px;
    }


    .engrave-header-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .engrave-header-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .engrave-summary-btn {
        width: 100%;
        transform: none;
        margin: 0 auto;
        text-align: center;
    }

    .engrave-close {
        justify-self: end;
    }

    .engrave-owned {
        width: 100%;
        flex-wrap: wrap;
    }

    .engrave-owned-card {
        width: 100%;
        min-width: 0;
    }

    .engrave-body {
        grid-template-columns: 1fr;
    }

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

    .engrave-panel {
        padding: 12px;
    }

    .engrave-effect-header {
        padding: 0 0 12px;
    }

    .engrave-effect-title {
        white-space: normal;
    }

    .engrave-card {
        flex: 1 1 160px;
    }

    .engrave-detail-grid {
        grid-template-columns: 1fr;
    }

    .transcend-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .transcend-header-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .transcend-owned {
        width: 100%;
        flex-wrap: wrap;
    }

    .transcend-owned-card {
        width: 100%;
        min-width: 0;
    }

    .transcend-body {
        grid-template-columns: 1fr;
    }

    .transcend-effect-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transcend-effect-card {
        flex: 1 1 180px;
    }

    .transcend-summary {
        grid-template-columns: 1fr;
    }

    .shop-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.jewel-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(120, 240, 180, 0.18), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(180, 130, 255, 0.16), transparent 58%),
        rgba(4, 6, 14, 0.8);
    backdrop-filter: blur(10px);
    z-index: 5420;
    animation: fadeIn 0.22s ease;
}

.jewel-overlay.open {
    display: flex;
}

.jewel-modal {
    position: relative;
    width: min(1500px, calc(100% - 28px), calc(100vh - 28px));
    aspect-ratio: 1 / 1;
    height: 1000px;
    max-height: none;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 10% 20%, rgba(120, 240, 180, 0.12), transparent 45%),
        radial-gradient(circle at 88% 85%, rgba(180, 130, 255, 0.12), transparent 55%),
        linear-gradient(155deg, rgba(9, 13, 24, 0.98), rgba(6, 9, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

.jewel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.jewel-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    max-width: 62%;
}

.jewel-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.jewel-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.jewel-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.jewel-resource-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 1;
}

.jewel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    order: 2;
}

.jewel-close:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.jewel-tabs {
    display: flex;
    gap: 8px;
    padding: 0 24px 14px;
}

.jewel-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(10, 14, 26, 0.6);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.jewel-tab.active {
    color: var(--text-primary);
    border-color: rgba(120, 240, 200, 0.45);
    box-shadow: 0 0 14px rgba(120, 240, 200, 0.25);
}

.jewel-body {
    display: grid;
    grid-template-columns: 450px minmax(0, calc((100% - 120px - 18px) / 1.25 + 200px));
    gap: 18px;
    padding: 0 24px 24px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.jewel-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.jewel-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 22, 0.72);
}

.jewel-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: auto;
    padding-right: 4px;
}

.jewel-card {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 24px 24px 24px 0;
    position: relative;
    --jewel-text-offset: 130px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 13, 24, 0.75);
    position: relative;
}

.jewel-card.is-equipped {
    border-color: rgba(255, 210, 120, 0.45);
    box-shadow: 0 0 18px rgba(255, 210, 120, 0.18);
}

.jewel-card.is-locked {
    opacity: 0.7;
}

.jewel-card-icon {
    position: absolute;
    left: 0;
    width: var(--jewel-text-offset);
    height: calc(100% - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.jewel-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding-left: var(--jewel-text-offset);
}

.jewel-card-title {
    font-size: 22px;
    font-weight: 600;
}

.jewel-card-effect {
    font-size: 18px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jewel-card-effect-line {
    line-height: 1.35;
}

.jewel-card-level {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.jewel-card-requirement {
    font-size: 22px;
    color: rgba(255, 210, 140, 0.9);
}

.jewel-card-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    align-self: flex-end;
}

.jewel-card-footer {
    margin-top: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}

.jewel-equip-btn,
.jewel-upgrade-btn,
.jewel-reset-btn {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 20, 35, 0.8);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    white-space: nowrap;
}

.jewel-upgrade-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
    white-space: normal;
    min-width: 92px;
}

.jewel-upgrade-title {
    font-size: 16px;
}

.jewel-upgrade-cost {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.jewel-equip-btn:disabled,
.jewel-upgrade-btn:disabled,
.jewel-reset-btn:disabled {
    opacity: 0.6;
}

.jewel-reset-btn {
    border-color: rgba(255, 150, 150, 0.45);
    background: rgba(40, 16, 22, 0.85);
}

.jewel-reset-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.jewel-reset-all-btn {
    border-radius: 12px;
    border: 1px solid rgba(255, 170, 170, 0.55);
    background: rgba(50, 18, 28, 0.85);
    color: var(--text-primary);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    order: 0;
    margin-right: 6px;
}

.jewel-reset-all-btn:disabled {
    opacity: 0.6;
}

.jewel-note {
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 16px;
}

.jewel-result {
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.jewel-result.show {
    opacity: 1;
}

.jewel-result.is-success {
    color: rgba(140, 255, 200, 0.95);
}

.jewel-result.is-fail {
    color: rgba(255, 140, 140, 0.95);
}

@media (max-width: 960px) {
    .jewel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .jewel-header-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .jewel-resource-bar {
        width: 100%;
        flex-wrap: wrap;
    }

    .jewel-body {
        grid-template-columns: 1fr;
    }
}