/* /Components/ConsoleComponent.razor.rz.scp.css */
.console-container[b-70t8b2fip5] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.console-container.console-fullscreen[b-70t8b2fip5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    padding: 16px;
}

.console-paper[b-70t8b2fip5] {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.console-header[b-70t8b2fip5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 255, 0, 0.05);
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}

.console-title[b-70t8b2fip5] {
    color: #00ff00 !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.console-header-actions[b-70t8b2fip5] {
    display: flex;
    gap: 8px;
}

.console-output[b-70t8b2fip5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background: #000000;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #00ff00;
    min-height: 200px;
    max-height: 500px;
}

.console-fullscreen .console-output[b-70t8b2fip5] {
    max-height: none;
}

.console-output[b-70t8b2fip5]::-webkit-scrollbar {
    width: 8px;
}

.console-output[b-70t8b2fip5]::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.console-output[b-70t8b2fip5]::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.console-output[b-70t8b2fip5]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.console-lines[b-70t8b2fip5] {
    font-family: 'Consolas', 'Courier New', monospace !important;
}

.console-line[b-70t8b2fip5] {
    margin: 0;
    padding: 2px 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: 'Consolas', 'Courier New', monospace;
    animation: fadeIn-b-70t8b2fip5 0.2s ease-in;
}

[b-70t8b2fip5] .console-line * {
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

[b-70t8b2fip5] .console-line ul,
[b-70t8b2fip5] .console-line ol {
    margin-left: 14px !important;
    margin-top: -14px !important;
    margin-bottom: -14px !important;
}

[b-70t8b2fip5] .console-line ul *,
[b-70t8b2fip5] .console-line ol * {
    margin-top: -14px !important;
}

[b-70t8b2fip5] .console-line blockquote {
    border-left: 3px solid;
    padding-left: 10px;
    line-height: 0;
    background-color: #ffffff19;
}

@keyframes fadeIn-b-70t8b2fip5 {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.console-input-container[b-70t8b2fip5] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #333;
    align-items: center;
}

[b-70t8b2fip5] .console-input {
    flex: 1;
}

[b-70t8b2fip5] .console-input .mud-input-root {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
}

[b-70t8b2fip5] .console-input input {
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 14px !important;
    padding-left: 14px !important;
}

[b-70t8b2fip5] .console-input .mud-input-slot {
    padding-left: 14px !important;
}

[b-70t8b2fip5] .console-input .mud-input-adornment {
    color: white !important;
}

[b-70t8b2fip5] .console-input .mud-input-slot ::placeholder {
    color: #555 !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
}



.console-submit-btn:active[b-70t8b2fip5] {
    transform: translateY(0);
}

/* Add a subtle glow effect */
.console-paper[b-70t8b2fip5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 30px rgba(0, 255, 0, 0.05);
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .console-output[b-70t8b2fip5] {
        font-size: 12px;
        padding: 12px;
    }
    
    .console-input-container[b-70t8b2fip5] {
        flex-direction: column;
        gap: 8px;
    }
    
    .console-submit-btn[b-70t8b2fip5] {
        width: 100%;
    }
}

/* /Components/DialogueInputBoxComponent.razor.rz.scp.css */
/* ===== DIALOGUE INPUT BOX CONTAINER ===== */
.dialogue-input-box[b-y6qz3jvpu4] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    right: 35%;
    border-radius: 0 1.2vw 1.2vw 1.2vw; /* No rounding on top-left for tab connection */
    background: rgba(30, 30, 40, 0.9);
    box-shadow: 0 0.8vw 3.2vw rgba(0, 0, 0, 0.3);
    overflow: visible;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    border: 0.15vw solid rgba(255, 255, 255, 0.2);
    opacity: 0.95;
    z-index: 5;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

/* ===== TAB HEADER ===== */
.dialogue-input-header[b-y6qz3jvpu4] {
    position: absolute;
    top: 0;
    left: -1px;
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    padding: 0.4vw 1.2vw 0.5vw 1.2vw;
    max-width: 60%;
    background: linear-gradient(135deg, var(--header-color, #6c7fd1) 0%, var(--header-color-light, #8a9fe8) 100%);
    color: #fff;
    font-weight: 600;
    font-size: max(min(1.6vw, 15px), 12px);
    border-radius: 1.2vw 1.2vw 0 0;
    border: 0.15vw solid rgba(255, 255, 255, 0.2);
    border-bottom: none; /* No bottom border where it connects to box */
    letter-spacing: 0.3px;
    text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.4);
    box-shadow: 0 -0.2vw 0.8vw rgba(0, 0, 0, 0.2);
    transform: translateY(-100%);
    z-index: 10;
}

.dialogue-input-name[b-y6qz3jvpu4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header loading indicator (small dots) */
.header-loading-indicator[b-y6qz3jvpu4] {
    display: flex;
    gap: 0.25vw;
    align-items: center;
}

.loading-dot[b-y6qz3jvpu4] {
    width: 0.5vw;
    height: 0.5vw;
    min-width: 5px;
    min-height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    animation: pulse-dot-b-y6qz3jvpu4 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(2)[b-y6qz3jvpu4] {
    animation-delay: 0.2s;
}

.loading-dot:nth-child(3)[b-y6qz3jvpu4] {
    animation-delay: 0.4s;
}

@keyframes pulse-dot-b-y6qz3jvpu4 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ===== CONTENT AREA ===== */
.dialogue-input-content[b-y6qz3jvpu4] {
    padding: 0.8vw;
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

/* ===== DIALOGUE MODE ===== */
.dialogue-text[b-y6qz3jvpu4] {
    color: #f3f3f3;
    font-size: min(16px, max(12px, 1.3vw));
    padding: 0.2vw 0.3vw;
    line-height: 1.6;
    min-height: 3.5vw;
    max-height: 18vw;
    overflow-y: auto;
    text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.15);
}

/* ===== LOADING MODE ===== */
.loading-container[b-y6qz3jvpu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5vw 0;
    gap: 1.2vw;
}

.loading-spinner[b-y6qz3jvpu4] {
    position: relative;
    width: 4vw;
    height: 4vw;
    min-width: 40px;
    min-height: 40px;
}

.spinner-ring[b-y6qz3jvpu4] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.25vw solid transparent;
    border-top-color: #6c7fd1;
    animation: spin-b-y6qz3jvpu4 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.spinner-ring:nth-child(2)[b-y6qz3jvpu4] {
    border-top-color: #8a9fe8;
    animation-delay: -0.5s;
    animation-duration: 2s;
}

.spinner-ring:nth-child(3)[b-y6qz3jvpu4] {
    border-top-color: rgba(108, 127, 209, 0.5);
    animation-delay: -1s;
    animation-duration: 2.5s;
}

@keyframes spin-b-y6qz3jvpu4 {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.loading-message[b-y6qz3jvpu4] {
    color: #f3f3f3;
    font-size: min(13px, max(10px, 1.1vw));
    font-style: italic;
    opacity: 0.8;
    animation: fade-pulse-b-y6qz3jvpu4 2s ease-in-out infinite;
}

@keyframes fade-pulse-b-y6qz3jvpu4 {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ===== INPUT MODE ===== */
.input-row[b-y6qz3jvpu4] {
    position: relative;
    display: flex;
}

.dialogue-input-field[b-y6qz3jvpu4] {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.06);
    color: #f3f3f3;
    border: 0.12vw solid rgba(255, 255, 255, 0.15);
    border-radius: 0.8vw;
    font-size: min(15px, max(11px, 1.2vw));
    padding: 0.7vw 7vw 0.7vw 0.8vw; /* Extra padding on right for buttons */
    font-family: inherit;
    resize: none;
    min-height: 3.2vw;
    max-height: 18vw;
    line-height: 1.5;
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: inset 0 0.1vw 0.3vw rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.dialogue-input-field:hover[b-y6qz3jvpu4] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.dialogue-input-field:focus[b-y6qz3jvpu4] {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(108, 127, 209, 0.6);
    box-shadow: 0 0 0 0.15vw rgba(108, 127, 209, 0.2), inset 0 0.1vw 0.3vw rgba(0, 0, 0, 0.1);
    outline: none;
}

.dialogue-input-field[b-y6qz3jvpu4]::placeholder {
    color: rgba(243, 243, 243, 0.4);
    font-style: italic;
}

/* ===== BUTTONS ===== */
.dialogue-input-buttons[b-y6qz3jvpu4] {
    position: absolute;
    right: 0.5vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    z-index: 10;
    padding: 0.4vw 0; /* Vertical padding to prevent touching edges */
}

.input-button[b-y6qz3jvpu4] {
    min-width: 28px;
    min-height: 28px;
    width: 2.8vw;
    height: 2.8vw;
    max-width: 36px;
    max-height: 36px;
    font-weight: 600;
    padding: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.15);
    color: #f3f3f3;
    backdrop-filter: blur(10px);
    box-shadow: 0 0.2vw 0.6vw rgba(0, 0, 0, 0.2);
}

.input-button:hover:not(.disabled)[b-y6qz3jvpu4] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.3);
}

.input-button:active:not(.disabled)[b-y6qz3jvpu4] {
    transform: scale(0.95);
}

.input-button.disabled[b-y6qz3jvpu4] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.roll-button[b-y6qz3jvpu4] {
    background: linear-gradient(135deg, #d4a53c 0%, #b8860b 50%, #d4a53c 100%);
    color: #1a1a1a;
    border: 0.1vw solid rgba(201, 162, 39, 0.5);
}

.roll-button:hover:not(.disabled)[b-y6qz3jvpu4] {
    background: linear-gradient(135deg, #e6b84d 0%, #d4a53c 50%, #e6b84d 100%);
    border-color: #d4a53c;
}

.button-icon[b-y6qz3jvpu4] {
    font-size: min(14px, max(11px, 1.3vw));
}
/* /Components/PlayerActionComponent.razor.rz.scp.css */
 
/* /Components/PlayerConditionComponent.razor.rz.scp.css */
.player-condition-panel[b-9ph9gfc5mz] {
    position: absolute;
    bottom: 10px;
    right: 0;
    display: flex;
    align-items: flex-start;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-condition-panel.collapsed[b-9ph9gfc5mz] {
    transform: translateX(0);
}

.player-condition-panel.expanded[b-9ph9gfc5mz] {
    transform: translateX(0);
}

.panel-toggle[b-9ph9gfc5mz] {
    width: 2vw;
    min-width: 24px;
    max-width: 28px;
    height: 2.5vw;
    min-height: 30px;
    max-height: 36px;
    background: rgba(0, 0, 0, 0.75);
    border: 0.1vw solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: 0.8vw 0 0 0.8vw;
    color: white;
    font-size: min(14px, max(10px, 1.2vw));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: -0.2vw 0.2vw 0.8vw rgba(0, 0, 0, 0.3);
    z-index: 11;
    position: relative;
    top: 1.2vw; /* Offset down to sit on flat part of panel */
}

.panel-toggle:hover[b-9ph9gfc5mz] {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
}

.panel-toggle:active[b-9ph9gfc5mz] {
    transform: scale(0.95);
}

.panel-content[b-9ph9gfc5mz] {
    background: rgba(0, 0, 0, 0.75);
    border: 0.1vw solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: 0.8vw 0 0 0.8vw;
    backdrop-filter: blur(10px);
    overflow: hidden;
    pointer-events: auto;
    box-shadow: -0.4vw 0.4vw 1.2vw rgba(0, 0, 0, 0.3);
}

/* ===== COMPACT VIEW ===== */
.resources-compact[b-9ph9gfc5mz] {
    display: flex;
    flex-direction: column;
    gap: 0.4vw;
    padding: 0.8vw;
    min-width: 8vw;
}

.resource-compact[b-9ph9gfc5mz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4vw;
    padding: 0.2vw 0;
}

.compact-label[b-9ph9gfc5mz] {
    font-weight: 700;
    font-size: min(13px, max(10px, 1.1vw));
    text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.8);
}

.compact-value[b-9ph9gfc5mz] {
    font-size: min(12px, max(9px, 1vw));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0.1vw 0.2vw rgba(0, 0, 0, 0.8);
    font-feature-settings: 'tnum';
}

/* ===== EXPANDED VIEW ===== */
.resources-expanded[b-9ph9gfc5mz] {
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
    padding: 1vw 1.2vw;
    min-width: 16vw;
    max-width: 22vw;
}

.resource-bar-container[b-9ph9gfc5mz] {
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
}

.resource-header[b-9ph9gfc5mz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resource-label[b-9ph9gfc5mz] {
    font-weight: 700;
    font-size: min(13px, max(10px, 1.1vw));
    color: white;
    text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.9);
}

.resource-value[b-9ph9gfc5mz] {
    font-size: min(11px, max(9px, 0.95vw));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0.1vw 0.2vw rgba(0, 0, 0, 0.9);
    font-feature-settings: 'tnum';
}

.resource-track[b-9ph9gfc5mz] {
    height: 1.4vw;
    min-height: 14px;
    max-height: 18px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.8vw;
    overflow: hidden;
    border: 0.08vw solid rgba(255, 255, 255, 0.25);
    position: relative;
    box-shadow: inset 0 0.1vw 0.3vw rgba(0, 0, 0, 0.5);
}

.resource-fill[b-9ph9gfc5mz] {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.8vw;
    position: relative;
}

.resource-fill[b-9ph9gfc5mz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    border-radius: 0.8vw 0.8vw 0 0;
}

.resource-fill[b-9ph9gfc5mz]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    animation: shimmer-b-9ph9gfc5mz 2s infinite;
}

@keyframes shimmer-b-9ph9gfc5mz {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Animation for panel appearing */
@keyframes slideIn-b-9ph9gfc5mz {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.player-condition-panel[b-9ph9gfc5mz] {
    animation: slideIn-b-9ph9gfc5mz 0.3s ease-out;
}
/* /Components/Stage/ActorComponent.razor.rz.scp.css */
@keyframes fadeIn-b-d3aqbz7f88 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes doubleHop-b-d3aqbz7f88 {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes kiss-b-d3aqbz7f88 {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.2);
    }
    40% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.25);
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    60% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(1);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
    }
}

@keyframes idle-breathing-b-d3aqbz7f88 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes idle-sway-b-d3aqbz7f88 {
    0% {
        transform: skewX(-0.5deg) translateX(0.5%);
    }
    50% {
        transform: skewX(0.5deg) translateX(-0.5%);
    }
    100% {
        transform: skewX(-0.5deg) translateX(0.5%);
    }
}

.actor-wrapper[b-d3aqbz7f88] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 1s ease-in-out;
    user-select: none;
}

.actor-image[b-d3aqbz7f88] {
    display: block;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0px 0px 6px #00000099);
    transition: inherit;
}

.actor-image.fade-in[b-d3aqbz7f88] {
    animation: fadeIn-b-d3aqbz7f88 1s ease-in-out;
}

.actor-image.double-hop[b-d3aqbz7f88] {
    animation: doubleHop-b-d3aqbz7f88 0.75s ease-in-out infinite;
}

.actor-image.kiss[b-d3aqbz7f88] {
    animation: kiss-b-d3aqbz7f88 3s ease-in-out;
}

.actor-image.idle[b-d3aqbz7f88] {
    animation: idle-breathing-b-d3aqbz7f88 5s infinite ease-in-out;
}

.actor-image.idle-sway[b-d3aqbz7f88] {
    animation: idle-sway-b-d3aqbz7f88 6s ease-in-out infinite;
}

.actor-image.invert[b-d3aqbz7f88] {
    filter: invert(1) drop-shadow(0px 0px 6px #00000099);
}

/* /Components/Stage/ActorInfoPanelComponent.razor.rz.scp.css */
.actor-info-panel[b-ma04bd68go] {
    padding: clamp(6px, 0.6vw, 10px) clamp(9px, 0.9vw, 14px);
    border-radius: clamp(8px, 0.75vw, 12px);
    background: rgba(6, 10, 24, 0.92);
    color: #fff;
    box-shadow: 0 clamp(6px, 0.75vw, 12px) clamp(18px, 2.25vw, 36px) rgba(0, 0, 0, 0.35);
    border: clamp(0.8px, 0.08vw, 1.5px) solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 0.9vw, 14px);
    pointer-events: auto;
}

.actor-info-panel--empty[b-ma04bd68go] {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(11px, 1vw, 14px);
    justify-content: center;
    text-align: left;
    min-height: 0;
}

.actor-info-empty[b-ma04bd68go] {
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.15vw, 3px);
}

.actor-info-empty-label[b-ma04bd68go] {
    font-size: clamp(9px, 0.8vw, 11px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.actor-info-empty-location[b-ma04bd68go] {
    font-weight: 600;
}

.actor-info-empty-time[b-ma04bd68go] {
    font-size: clamp(10px, 0.9vw, 13px);
    opacity: 0.85;
}

.actor-nameplate[b-ma04bd68go] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(9px, 0.85vw, 12px);
    letter-spacing: 0.05em;
    padding: clamp(2px, 0.3vw, 5px) clamp(5px, 0.6vw, 9px);
    border-radius: clamp(2px, 0.3vw, 5px);
    color: white;
    text-shadow: 0 0 clamp(1px, 0.15vw, 2px) black, 0 0 clamp(1px, 0.15vw, 2px) black, 0 0 clamp(1px, 0.15vw, 2px) black;
    white-space: nowrap;
    flex-shrink: 0;
}

.actor-health[b-ma04bd68go] {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.45vw, 7px);
    font-size: clamp(9px, 0.85vw, 12px);
    flex: 1;
    min-width: clamp(100px, 11vw, 160px);
}

.actor-health-label[b-ma04bd68go] {
    font-weight: 600;
    opacity: 0.85;
}

.actor-health-bar[b-ma04bd68go] {
    flex: 1;
    height: clamp(5px, 0.6vw, 9px);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.actor-health-bar-fill[b-ma04bd68go] {
    height: 100%;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.actor-health-value[b-ma04bd68go] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.actor-stats[b-ma04bd68go] {
    display: flex;
    gap: clamp(6px, 0.75vw, 12px);
    flex-shrink: 0;
}

.actor-stat[b-ma04bd68go] {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.3vw, 5px);
    font-size: clamp(10px, 0.9vw, 13px);
}

.actor-stat-icon[b-ma04bd68go] {
    font-size: clamp(11px, 1vw, 14px);
}

/* /Components/Stage/CGOverlayComponent.razor.rz.scp.css */
.cg-overlay[b-vedvc0l6o2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3; /* Above background/actors but below dialogue box and controls */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
}

.cg-overlay.visible[b-vedvc0l6o2] {
    opacity: 1;
}

.cg-overlay.fading-out[b-vedvc0l6o2] {
    opacity: 0;
}

.cg-image[b-vedvc0l6o2] {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    
    /* Subtle entrance animation */
    animation: cg-entrance-b-vedvc0l6o2 1s ease-out;
}

@keyframes cg-entrance-b-vedvc0l6o2 {
    0% {
        transform: scale(1.02);
        filter: brightness(0.7);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* When fading out, don't animate entrance */
.cg-overlay.fading-out .cg-image[b-vedvc0l6o2] {
    animation: none;
}

/* /Components/Stage/CharactersPanelComponent.razor.rz.scp.css */
/* Characters Panel - positioned within scene */
.characters-panel[b-7xhtzqkqyb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 14, 24, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.characters-panel.visible[b-7xhtzqkqyb] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header */
.characters-header[b-7xhtzqkqyb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(
        90deg,
        rgba(85, 100, 130, 0.4) 0%,
        rgba(100, 115, 145, 0.3) 50%,
        rgba(85, 100, 130, 0.4) 100%
    );
    border-bottom: 1px solid rgba(140, 160, 200, 0.25);
    flex-shrink: 0;
}

.characters-title[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #d8e0f0;
    letter-spacing: 0.5px;
    font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
}

.characters-icon[b-7xhtzqkqyb] {
    font-size: 18px;
}

.back-button[b-7xhtzqkqyb] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0b8d8;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: 4px;
}

.back-button:hover[b-7xhtzqkqyb] {
    background: rgba(100, 140, 200, 0.3);
    border-color: rgba(100, 140, 200, 0.5);
}

.characters-close[b-7xhtzqkqyb] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0b0c8;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.characters-close:hover[b-7xhtzqkqyb] {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff9090;
}

/* Scrollable Content */
.characters-scroll[b-7xhtzqkqyb] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.characters-scroll[b-7xhtzqkqyb]::-webkit-scrollbar {
    width: 6px;
}

.characters-scroll[b-7xhtzqkqyb]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.characters-scroll[b-7xhtzqkqyb]::-webkit-scrollbar-thumb {
    background: rgba(140, 160, 200, 0.35);
    border-radius: 3px;
}

.characters-scroll[b-7xhtzqkqyb]::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 160, 200, 0.55);
}

/* Loading State */
.loading-state[b-7xhtzqkqyb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    text-align: center;
}

.loading-spinner[b-7xhtzqkqyb] {
    font-size: 32px;
    animation: spin-b-7xhtzqkqyb 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-7xhtzqkqyb {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-state p[b-7xhtzqkqyb] {
    color: #8898b8;
    font-size: 14px;
}

/* Character List Item */
.character-list-item[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(140, 160, 200, 0.15);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.character-list-item:hover[b-7xhtzqkqyb] {
    background: rgba(50, 65, 95, 0.7);
    border-color: rgba(140, 160, 200, 0.35);
    transform: translateX(4px);
}

.character-list-item:last-child[b-7xhtzqkqyb] {
    margin-bottom: 0;
}

.character-avatar[b-7xhtzqkqyb] {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
}

.character-avatar img[b-7xhtzqkqyb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.avatar-placeholder[b-7xhtzqkqyb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.character-list-info[b-7xhtzqkqyb] {
    flex: 1;
    min-width: 0;
}

.character-name[b-7xhtzqkqyb] {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

.character-nickname[b-7xhtzqkqyb] {
    font-size: 12px;
    color: #8898b8;
    font-style: italic;
}

.character-list-stats[b-7xhtzqkqyb] {
    display: flex;
    gap: 8px;
}

.mini-stat[b-7xhtzqkqyb] {
    font-size: 12px;
    color: #a8b8d0;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 8px;
    border-radius: 12px;
}

.chevron[b-7xhtzqkqyb] {
    font-size: 20px;
    color: #6878a0;
    opacity: 0.7;
}

/* Character Detail View */
.character-detail[b-7xhtzqkqyb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.character-preview[b-7xhtzqkqyb] {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(20, 25, 40, 0.3) 0%, rgba(30, 40, 60, 0.5) 100%);
    border-radius: 12px;
    overflow: hidden;
}

.character-preview-image[b-7xhtzqkqyb] {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.character-preview-placeholder[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6878a0;
    font-size: 14px;
}

/* Info Section */
.character-info-section[b-7xhtzqkqyb] {
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(140, 160, 200, 0.15);
    border-radius: 10px;
    padding: 14px;
}

.info-row[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(140, 160, 200, 0.08);
}

.info-row:last-child[b-7xhtzqkqyb] {
    border-bottom: none;
}

.info-row label[b-7xhtzqkqyb] {
    font-size: 13px;
    color: #8898b8;
    font-weight: 500;
}

.color-input-wrapper[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-input[b-7xhtzqkqyb] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-input[b-7xhtzqkqyb]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input[b-7xhtzqkqyb]::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.color-value[b-7xhtzqkqyb] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    color: #a8b8d0;
}

.number-input[b-7xhtzqkqyb] {
    width: 80px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(140, 160, 200, 0.2);
    border-radius: 6px;
    color: #d8e0f0;
    font-size: 13px;
    text-align: right;
}

.number-input:focus[b-7xhtzqkqyb] {
    outline: none;
    border-color: rgba(140, 160, 200, 0.5);
}

.scale-value[b-7xhtzqkqyb],
.nickname-list[b-7xhtzqkqyb] {
    font-size: 13px;
    color: #a8b8d0;
}

/* Relationship Section */
.relationship-section[b-7xhtzqkqyb] {
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(140, 160, 200, 0.15);
    border-radius: 10px;
    padding: 14px;
}

.section-header[b-7xhtzqkqyb] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 12px;
    font-weight: 600;
    color: #a0b0c8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(140, 160, 200, 0.15);
}

.relationship-stats[b-7xhtzqkqyb] {
    display: flex;
    justify-content: space-around;
}

.stat-item[b-7xhtzqkqyb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-icon[b-7xhtzqkqyb] {
    font-size: 20px;
}

.stat-value[b-7xhtzqkqyb] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 600;
}

.stat-value.positive[b-7xhtzqkqyb] {
    color: #6dd46d;
}

.stat-value.negative[b-7xhtzqkqyb] {
    color: #e66;
}

.stat-value.neutral[b-7xhtzqkqyb] {
    color: #a8b8d0;
}

/* Sprites Section */
.sprites-section[b-7xhtzqkqyb] {
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(140, 160, 200, 0.15);
    border-radius: 10px;
    padding: 14px;
}

.outfit-group[b-7xhtzqkqyb] {
    margin-bottom: 16px;
}

.outfit-group:last-child[b-7xhtzqkqyb] {
    margin-bottom: 0;
}

.outfit-header[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.outfit-name[b-7xhtzqkqyb] {
    font-weight: 600;
    font-size: 14px;
    color: #d0d8e8;
}

.current-badge[b-7xhtzqkqyb] {
    background: rgba(100, 180, 100, 0.25);
    color: #8ddb8d;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.outfit-description[b-7xhtzqkqyb] {
    font-size: 12px;
    color: #7888a8;
    margin: 0 0 10px 0;
    font-style: italic;
}

.sprite-grid[b-7xhtzqkqyb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.sprite-card[b-7xhtzqkqyb] {
    background: rgba(20, 28, 45, 0.6);
    border: 1px solid rgba(140, 160, 200, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sprite-card:hover[b-7xhtzqkqyb] {
    border-color: rgba(140, 160, 200, 0.35);
    transform: translateY(-2px);
}

.sprite-card.current[b-7xhtzqkqyb] {
    border-color: rgba(100, 180, 100, 0.4);
    box-shadow: 0 0 12px rgba(100, 180, 100, 0.15);
}

.sprite-thumbnail[b-7xhtzqkqyb] {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.sprite-thumbnail img[b-7xhtzqkqyb] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.sprite-missing[b-7xhtzqkqyb] {
    color: #5868a0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sprite-info[b-7xhtzqkqyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
}

.sprite-emotion[b-7xhtzqkqyb] {
    font-size: 11px;
    color: #a0b0c8;
    text-transform: capitalize;
}

.delete-btn[b-7xhtzqkqyb] {
    background: rgba(180, 80, 80, 0.15);
    border: 1px solid rgba(180, 80, 80, 0.25);
    color: #c08080;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s ease;
}

.delete-btn:hover:not(:disabled)[b-7xhtzqkqyb] {
    background: rgba(200, 80, 80, 0.3);
    border-color: rgba(200, 80, 80, 0.5);
    color: #e09090;
}

.delete-btn:disabled[b-7xhtzqkqyb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.no-outfits[b-7xhtzqkqyb] {
    color: #7888a8;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Empty State */
.empty-characters[b-7xhtzqkqyb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    height: 100%;
}

.empty-icon[b-7xhtzqkqyb] {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-characters p[b-7xhtzqkqyb] {
    margin: 6px 0;
    color: #7888a8;
    font-size: 14px;
}

.empty-hint[b-7xhtzqkqyb] {
    font-size: 12px !important;
    opacity: 0.65;
}

/* Footer */
.characters-footer[b-7xhtzqkqyb] {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(140, 160, 200, 0.12);
    text-align: center;
    flex-shrink: 0;
}

.hint-text[b-7xhtzqkqyb] {
    color: #5878a0;
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* ============================================
   SPRITE PREVIEW MODAL
   ============================================ */

.sprite-preview-modal[b-7xhtzqkqyb] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: modal-fade-in-b-7xhtzqkqyb 0.2s ease-out;
    cursor: pointer;
}

@keyframes modal-fade-in-b-7xhtzqkqyb {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sprite-preview-content[b-7xhtzqkqyb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90%;
    max-height: 90%;
    cursor: default;
    animation: modal-scale-in-b-7xhtzqkqyb 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-scale-in-b-7xhtzqkqyb {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sprite-preview-image[b-7xhtzqkqyb] {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.sprite-preview-label[b-7xhtzqkqyb] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 600;
    color: #d8e0f0;
    text-transform: capitalize;
    letter-spacing: 1px;
    background: rgba(30, 40, 60, 0.8);
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid rgba(140, 160, 200, 0.3);
}

.sprite-preview-close[b-7xhtzqkqyb] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #d0d8e8;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sprite-preview-close:hover[b-7xhtzqkqyb] {
    background: rgba(255, 80, 80, 0.3);
    border-color: rgba(255, 80, 80, 0.5);
    color: #ff9090;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .characters-header[b-7xhtzqkqyb] {
        padding: 10px 14px;
    }
    
    .characters-title[b-7xhtzqkqyb] {
        font-size: 14px;
    }
    
    .characters-scroll[b-7xhtzqkqyb] {
        padding: 12px 14px;
    }
    
    .character-preview[b-7xhtzqkqyb] {
        height: 150px;
    }
    
    .sprite-grid[b-7xhtzqkqyb] {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
        gap: 8px;
    }
    
    .characters-footer[b-7xhtzqkqyb] {
        padding: 8px 14px;
    }
    
    .hint-text[b-7xhtzqkqyb] {
        font-size: 10px;
    }
}
/* /Components/Stage/DiceRollOverlayComponent.razor.rz.scp.css */
.dice-roll-overlay[b-s2gihv5acr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
    background: rgba(0, 0, 0, 0);
}

.dice-roll-overlay.visible[b-s2gihv5acr] {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.dice-roll-container[b-s2gihv5acr] {
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.97) 0%, rgba(35, 40, 70, 0.97) 100%);
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 16px;
    padding: 24px 32px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 
        0 0 40px rgba(200, 180, 100, 0.3),
        0 0 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dice-roll-overlay.animating .dice-roll-container[b-s2gihv5acr] {
    transform: scale(1);
}

.dice-roll-overlay.dismissing[b-s2gihv5acr] {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: opacity 0.35s ease-out, background 0.35s ease-out, backdrop-filter 0.35s ease-out;
    pointer-events: none;
}

.dice-roll-overlay.dismissing .dice-roll-container[b-s2gihv5acr] {
    transform: scale(0.9) translateY(-20px);
    transition: transform 0.35s ease-out;
}

.dice-roll-header[b-s2gihv5acr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 180, 100, 0.3);
}

.dice-icon[b-s2gihv5acr] {
    font-size: 28px;
    animation: dice-spin-b-s2gihv5acr 0.6s ease-out;
}

@keyframes dice-spin-b-s2gihv5acr {
    0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

.skill-name[b-s2gihv5acr] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 600;
    color: #c9b278;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dice-roll-main[b-s2gihv5acr] {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.d20-section[b-s2gihv5acr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.d20-label[b-s2gihv5acr] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 12px;
    color: rgba(200, 180, 100, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.d20-value[b-s2gihv5acr] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: roll-in-b-s2gihv5acr 0.6s ease-out;
}

@keyframes roll-in-b-s2gihv5acr {
    0% { opacity: 0; transform: translateY(-20px) rotateX(90deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

.d20-value.crit-fail[b-s2gihv5acr] {
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    animation: roll-in-b-s2gihv5acr 0.6s ease-out, crit-pulse-b-s2gihv5acr 0.5s ease-in-out 0.6s;
}

.d20-value.crit-success[b-s2gihv5acr] {
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: roll-in-b-s2gihv5acr 0.6s ease-out, crit-pulse-b-s2gihv5acr 0.5s ease-in-out 0.6s;
}

@keyframes crit-pulse-b-s2gihv5acr {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.modifiers-section[b-s2gihv5acr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.modifier-row[b-s2gihv5acr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    animation: slide-in-b-s2gihv5acr 0.4s ease-out backwards;
}

.modifier-row:nth-child(1)[b-s2gihv5acr] { animation-delay: 0.3s; }
.modifier-row:nth-child(2)[b-s2gihv5acr] { animation-delay: 0.4s; }
.modifier-row:nth-child(3)[b-s2gihv5acr] { animation-delay: 0.5s; }
.modifier-row:nth-child(4)[b-s2gihv5acr] { animation-delay: 0.6s; }

@keyframes slide-in-b-s2gihv5acr {
    0% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

.modifier-label[b-s2gihv5acr] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modifier-value[b-s2gihv5acr] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 600;
}

.modifier-value.positive[b-s2gihv5acr] {
    color: #6dd46d;
}

.modifier-value.negative[b-s2gihv5acr] {
    color: #e66;
}

.dice-roll-footer[b-s2gihv5acr] {
    border-top: 1px solid rgba(200, 180, 100, 0.3);
    padding-top: 16px;
}

.total-section[b-s2gihv5acr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    animation: fade-up-b-s2gihv5acr 0.4s ease-out 0.7s backwards;
}

@keyframes fade-up-b-s2gihv5acr {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.total-label[b-s2gihv5acr],
.dc-label[b-s2gihv5acr] {
    font-size: 12px;
    color: rgba(200, 180, 100, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.total-value[b-s2gihv5acr],
.dc-value[b-s2gihv5acr] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.vs-text[b-s2gihv5acr] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
}

.result-section[b-s2gihv5acr] {
    text-align: center;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 10px 16px;
    border-radius: 8px;
    animation: result-reveal-b-s2gihv5acr 0.5s ease-out 0.9s backwards;
}

@keyframes result-reveal-b-s2gihv5acr {
    0% { opacity: 0; transform: scale(0.8); }
    50% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.result-section.critical-failure[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(180, 30, 30, 0.4) 0%, rgba(120, 20, 20, 0.4) 100%);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.5);
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

.result-section.failure[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(140, 60, 60, 0.4) 0%, rgba(100, 40, 40, 0.4) 100%);
    color: #e88;
    border: 1px solid rgba(238, 136, 136, 0.4);
}

.result-section.minor-failure[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(180, 140, 60, 0.4) 0%, rgba(140, 100, 40, 0.4) 100%);
    color: #eeb055;
    border: 1px solid rgba(238, 176, 85, 0.4);
}

.result-section.minor-success[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(80, 140, 80, 0.4) 0%, rgba(60, 100, 60, 0.4) 100%);
    color: #7dc97d;
    border: 1px solid rgba(125, 201, 125, 0.4);
}

.result-section.success[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(60, 160, 60, 0.4) 0%, rgba(40, 120, 40, 0.4) 100%);
    color: #5ddb5d;
    border: 1px solid rgba(93, 219, 93, 0.5);
    text-shadow: 0 0 10px rgba(93, 219, 93, 0.3);
}

.result-section.critical-success[b-s2gihv5acr] {
    background: linear-gradient(135deg, rgba(200, 160, 40, 0.4) 0%, rgba(160, 120, 20, 0.4) 100%);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.6);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: result-reveal-b-s2gihv5acr 0.5s ease-out 0.9s backwards, golden-glow-b-s2gihv5acr 1.5s ease-in-out infinite 1.4s;
}

@keyframes golden-glow-b-s2gihv5acr {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); }
}

.click-hint[b-s2gihv5acr] {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(200, 180, 100, 0.6);
    letter-spacing: 1px;
    animation: hint-pulse-b-s2gihv5acr 2s ease-in-out infinite 1.5s;
}

@keyframes hint-pulse-b-s2gihv5acr {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* /Components/Stage/HistoryPanelComponent.razor.rz.scp.css */
/* History Panel - positioned within scene */
.history-panel[b-1hvityp4iz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 14, 24, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.history-panel.visible[b-1hvityp4iz] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header */
.history-header[b-1hvityp4iz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(
        90deg,
        rgba(50, 65, 110, 0.4) 0%,
        rgba(60, 75, 120, 0.3) 50%,
        rgba(50, 65, 110, 0.4) 100%
    );
    border-bottom: 1px solid rgba(100, 120, 180, 0.25);
    flex-shrink: 0;
}

.history-title[b-1hvityp4iz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #d0d8f0;
    letter-spacing: 0.5px;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.scene-count[b-1hvityp4iz] {
    font-size: 12px;
    font-weight: 400;
    color: #7888a8;
    margin-left: 4px;
}

.history-icon[b-1hvityp4iz] {
    font-size: 18px;
}

.history-close[b-1hvityp4iz] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #90a0c0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-close:hover[b-1hvityp4iz] {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff9090;
}

/* Scrollable Content */
.history-scroll[b-1hvityp4iz] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    /* No smooth scroll - we want instant jumps */
}

/* Custom scrollbar */
.history-scroll[b-1hvityp4iz]::-webkit-scrollbar {
    width: 6px;
}

.history-scroll[b-1hvityp4iz]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.history-scroll[b-1hvityp4iz]::-webkit-scrollbar-thumb {
    background: rgba(100, 120, 180, 0.35);
    border-radius: 3px;
}

.history-scroll[b-1hvityp4iz]::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 120, 180, 0.55);
}

/* Loading and pagination indicators */
.loading-indicator[b-1hvityp4iz],
.load-more-indicator[b-1hvityp4iz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(80, 110, 170, 0.12);
    border-radius: 8px;
    border: 1px dashed rgba(100, 140, 200, 0.25);
    color: #90a8c8;
    font-size: 13px;
}

.load-more-indicator[b-1hvityp4iz] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-indicator:hover[b-1hvityp4iz] {
    background: rgba(80, 110, 170, 0.2);
    border-color: rgba(100, 140, 200, 0.4);
    color: #a0c0e0;
}

.loading-spinner[b-1hvityp4iz] {
    animation: spin-b-1hvityp4iz 1s linear infinite;
    font-size: 16px;
}

@keyframes spin-b-1hvityp4iz {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Scene Groups */
.scene-group[b-1hvityp4iz] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(100, 120, 180, 0.12);
}

.scene-group:last-child[b-1hvityp4iz] {
    border-bottom: none;
    margin-bottom: 0;
}

/* Player Action Marker */
.player-action-marker[b-1hvityp4iz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: linear-gradient(
        90deg,
        rgba(80, 110, 170, 0.15) 0%,
        rgba(60, 90, 150, 0.08) 100%
    );
    border-radius: 6px;
    border-left: 3px solid rgba(100, 150, 230, 0.5);
}

.turn-badge[b-1hvityp4iz] {
    background: rgba(90, 120, 180, 0.35);
    color: #a0c4ff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.action-text[b-1hvityp4iz] {
    color: #b0c4e0;
    font-size: 13px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* History Entries */
.history-entry[b-1hvityp4iz] {
    padding: 10px 14px;
    margin: 6px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.history-entry:hover[b-1hvityp4iz] {
    background: rgba(100, 120, 180, 0.1);
    transform: translateX(3px);
}

/* Dialogue Entry */
.dialogue-entry[b-1hvityp4iz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.speaker-name[b-1hvityp4iz] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.emotion-tag[b-1hvityp4iz] {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.65;
    font-style: italic;
}

.entry-text[b-1hvityp4iz] {
    margin: 0;
    color: #c8d0e8;
    font-size: 14px;
    line-height: 1.55;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Narration Entry */
.narration-entry[b-1hvityp4iz] {
    padding-left: 10px;
    border-left: 2px solid rgba(140, 160, 200, 0.25);
}

.narration-entry .entry-text[b-1hvityp4iz] {
    color: #a8b8d8;
    font-style: italic;
}

/* Empty State */
.empty-history[b-1hvityp4iz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    height: 100%;
}

.empty-icon[b-1hvityp4iz] {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-history p[b-1hvityp4iz] {
    margin: 6px 0;
    color: #7888a8;
    font-size: 14px;
}

.empty-hint[b-1hvityp4iz] {
    font-size: 12px !important;
    opacity: 0.65;
}

/* Footer */
.history-footer[b-1hvityp4iz] {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(100, 120, 180, 0.12);
    text-align: center;
    flex-shrink: 0;
}

.hint-text[b-1hvityp4iz] {
    color: #5878a0;
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .history-header[b-1hvityp4iz] {
        padding: 10px 14px;
    }
    
    .history-title[b-1hvityp4iz] {
        font-size: 14px;
    }
    
    .history-scroll[b-1hvityp4iz] {
        padding: 12px 14px;
    }
    
    .entry-text[b-1hvityp4iz] {
        font-size: 13px;
    }
    
    .history-footer[b-1hvityp4iz] {
        padding: 8px 14px;
    }
    
    .hint-text[b-1hvityp4iz] {
        font-size: 10px;
    }
}
/* /Components/Stage/OverallLevelUpOverlayComponent.razor.rz.scp.css */
.overall-level-overlay[b-uhru6us6a4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
    background: rgba(0, 0, 0, 0);
}

.overall-level-overlay.visible[b-uhru6us6a4] {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
}

.overall-level-overlay.dismissing[b-uhru6us6a4] {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: opacity 0.35s ease-out, background 0.35s ease-out, backdrop-filter 0.35s ease-out;
    pointer-events: none;
}

.overall-level-container[b-uhru6us6a4] {
    background: radial-gradient(circle at 30% 0%, rgba(255, 215, 0, 0.18) 0%, rgba(25, 30, 45, 0.98) 40%, rgba(40, 50, 70, 0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 18px;
    padding: 26px 30px;
    min-width: 360px;
    max-width: 520px;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.22),
        0 0 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.82) translateY(18px);
    animation: overall-container-enter-b-uhru6us6a4 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes overall-container-enter-b-uhru6us6a4 {
    0% {
        opacity: 0;
        transform: scale(0.82) translateY(18px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.overall-level-overlay.dismissing .overall-level-container[b-uhru6us6a4] {
    transform: scale(0.92) translateY(-18px);
    transition: transform 0.35s ease-out;
}

.overall-level-header[b-uhru6us6a4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.28);
}

.overall-icon[b-uhru6us6a4] {
    font-size: 26px;
    animation: overall-sparkle-b-uhru6us6a4 1.6s ease-in-out infinite;
}

@keyframes overall-sparkle-b-uhru6us6a4 {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.12) rotate(10deg); opacity: 0.85; }
}

.overall-title[b-uhru6us6a4] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffe9a8;
    text-transform: uppercase;
    letter-spacing: 2.2px;
}

.overall-level-body[b-uhru6us6a4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.overall-level-row[b-uhru6us6a4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.overall-level-label[b-uhru6us6a4] {
    color: rgba(255, 215, 0, 0.75);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.overall-level-value[b-uhru6us6a4] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 34px;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 22px rgba(255, 215, 0, 0.35);
}

.overall-bonus[b-uhru6us6a4] {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 14px 14px;
}

.bonus-title[b-uhru6us6a4] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 12px;
    font-weight: 700;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.bonus-line[b-uhru6us6a4] {
    color: #e0d8c8;
    font-size: 14px;
}

.bonus-value[b-uhru6us6a4] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 800;
    color: #6dd46d;
}

.click-hint[b-uhru6us6a4] {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 215, 0, 0.65);
    letter-spacing: 1px;
    animation: hint-pulse-b-uhru6us6a4 2s ease-in-out infinite 1.5s;
}

@keyframes hint-pulse-b-uhru6us6a4 {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@media (max-width: 520px) {
    .overall-level-container[b-uhru6us6a4] {
        min-width: 300px;
        max-width: 95%;
        padding: 20px 20px;
    }
    .overall-level-value[b-uhru6us6a4] {
        font-size: 28px;
    }
}


/* /Components/Stage/PropComponent.razor.rz.scp.css */
/* /Components/Stage/SceneComponent.razor.rz.scp.css */
/* Scene wrapper - handles fullscreen mode */
.scene-wrapper[b-anu7nklptt] {
    /* Normal mode - no special styling needed */
}

.scene-wrapper--fullscreen[b-anu7nklptt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.scene[b-anu7nklptt] {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: calc(96vh * (16 / 9));
    max-height: 96vh;
    border: 2px solid black;
    border-radius: 8px;
    margin: auto; 
    display: block;
    background-color: white;
    position: relative;
    cursor: pointer;
    outline: none; /* For focus state from tabindex */
}

.scene--fullscreen[b-anu7nklptt] {
    /* Maintain 16:9 aspect ratio with black bars */
    aspect-ratio: 16 / 9;
    width: 100vw;
    height: calc(100vw * (9 / 16));
    max-height: 100vh;
    max-width: calc(100vh * (16 / 9));
    border: none;
    border-radius: 0;
    margin: 0;
    cursor: default;
}

.scene:focus[b-anu7nklptt] {
    outline: none;
    border-color: rgba(100, 140, 200, 0.5);
}

.scene.not-ready[b-anu7nklptt] {
    cursor: not-allowed;
}

.scene-positioner[b-anu7nklptt] {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.scene-bg[b-anu7nklptt] {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform-origin: top left;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    
    /* Fade in animation */
    animation: fadeIn-b-anu7nklptt 1s ease-in-out;
}

@keyframes fadeIn-b-anu7nklptt {
    from { opacity: 0; }
    to { opacity: 1; }
}

.actor-info-overlay[b-anu7nklptt] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    pointer-events: none;
}

.actor-info-overlay[b-anu7nklptt] (.actor-info-panel) {
    pointer-events: none;
}

/* Scene buttons container */
.scene-buttons[b-anu7nklptt] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: flex;
    gap: 8px;
}

/* Common button styles */
.history-button[b-anu7nklptt],
.skills-button[b-anu7nklptt],
.characters-button[b-anu7nklptt],
.fullscreen-button[b-anu7nklptt],
.settings-button[b-anu7nklptt] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 25, 40, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(100, 120, 180, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.history-button:hover[b-anu7nklptt],
.skills-button:hover[b-anu7nklptt],
.characters-button:hover[b-anu7nklptt],
.fullscreen-button:hover[b-anu7nklptt],
.settings-button:hover[b-anu7nklptt] {
    opacity: 1;
    transform: scale(1.08);
}

.history-button:hover[b-anu7nklptt] {
    background: rgba(50, 60, 100, 0.9);
    border-color: rgba(130, 150, 220, 0.6);
}

.skills-button[b-anu7nklptt] {
    border-color: rgba(200, 160, 80, 0.3);
}

.skills-button:hover[b-anu7nklptt] {
    background: rgba(80, 60, 40, 0.9);
    border-color: rgba(220, 180, 100, 0.6);
}

.characters-button[b-anu7nklptt] {
    border-color: rgba(140, 160, 200, 0.3);
}

.characters-button:hover[b-anu7nklptt] {
    background: rgba(60, 70, 100, 0.9);
    border-color: rgba(160, 180, 220, 0.6);
}

.fullscreen-button[b-anu7nklptt] {
    border-color: rgba(180, 100, 200, 0.3);
}

.fullscreen-button:hover[b-anu7nklptt] {
    background: rgba(80, 50, 100, 0.9);
    border-color: rgba(200, 120, 220, 0.6);
}

.settings-button[b-anu7nklptt] {
    border-color: rgba(200, 160, 100, 0.3);
}

.settings-button:hover[b-anu7nklptt] {
    background: rgba(80, 60, 40, 0.9);
    border-color: rgba(220, 180, 120, 0.6);
}

.history-button-icon[b-anu7nklptt],
.skills-button-icon[b-anu7nklptt],
.characters-button-icon[b-anu7nklptt],
.fullscreen-button-icon[b-anu7nklptt],
.settings-button-icon[b-anu7nklptt] {
    font-size: 20px;
}

/* Scene state when any panel is open */
.scene.panel-open[b-anu7nklptt] {
    cursor: default;
}

/* ============================================
   SCENE EFFECTS
   ============================================ */

/* Screen shake animation - applied to content wrapper to avoid interrupting fadeIn */
.scene.shaking .scene-content-wrapper[b-anu7nklptt] {
    animation: screen-shake-b-anu7nklptt 0.25s ease-in-out;
}

@keyframes screen-shake-b-anu7nklptt {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-8px, -4px) rotate(-0.5deg); }
    20% { transform: translate(8px, 4px) rotate(0.5deg); }
    30% { transform: translate(-6px, 6px) rotate(-0.3deg); }
    40% { transform: translate(6px, -6px) rotate(0.3deg); }
    50% { transform: translate(-4px, 4px) rotate(-0.2deg); }
    60% { transform: translate(4px, -4px) rotate(0.2deg); }
    70% { transform: translate(-3px, 2px) rotate(-0.1deg); }
    80% { transform: translate(3px, -2px) rotate(0.1deg); }
    90% { transform: translate(-1px, 1px) rotate(0deg); }
}

/* Low health visual effect wrapper */
.scene-content-wrapper[b-anu7nklptt] {
    position: absolute;
    inset: 0;
    transition: filter 0.5s ease;
}

/* Low health blur and desaturation - applied via inline style */
.scene-content-wrapper.low-health[b-anu7nklptt] {
    /* Filter values set dynamically via CSS variable */
    filter: blur(var(--health-blur, 0px)) saturate(var(--health-saturation, 1));
}
/* /Components/Stage/SceneEffectsComponent.razor.rz.scp.css */
/* Damage flash overlay */
.damage-flash[b-79wu25gv8i] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 0%, rgba(180, 0, 0, 0.6) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 45;
    transition: opacity 0.1s ease-out;
}

.damage-flash.active[b-79wu25gv8i] {
    opacity: 1;
    animation: damage-flash-pulse-b-79wu25gv8i 0.35s ease-out;
}

@keyframes damage-flash-pulse-b-79wu25gv8i {
    0% {
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.3) 0%, rgba(200, 0, 0, 0.8) 100%);
    }
    20% {
        opacity: 1;
        background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.4) 0%, rgba(200, 0, 0, 0.9) 100%);
    }
    60% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 0%, rgba(180, 0, 0, 0.6) 100%);
    }
}

/* Low health vignette overlay */
.low-health-vignette[b-79wu25gv8i] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0) 30%, 
        rgba(80, 0, 0, 0.3) 60%,
        rgba(60, 0, 0, 0.6) 80%,
        rgba(40, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 44;
    transition: opacity 0.5s ease;
}

/* /Components/Stage/SettingsPanelComponent.razor.rz.scp.css */
/* Settings Panel - positioned within scene */
.settings-panel[b-5x66aft06s] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 14, 24, 0.97);
    backdrop-filter: blur(12px);
    border-radius: 6px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.settings-panel.visible[b-5x66aft06s] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header */
.settings-header[b-5x66aft06s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(
        90deg,
        rgba(100, 80, 60, 0.4) 0%,
        rgba(120, 95, 70, 0.3) 50%,
        rgba(100, 80, 60, 0.4) 100%
    );
    border-bottom: 1px solid rgba(200, 160, 100, 0.25);
    flex-shrink: 0;
}

.settings-title[b-5x66aft06s] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #e8d8c0;
    letter-spacing: 0.5px;
    font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
}

.settings-icon[b-5x66aft06s] {
    font-size: 18px;
}

.settings-close[b-5x66aft06s] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c0a880;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-close:hover[b-5x66aft06s] {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff9090;
}

/* Tabs */
.settings-tabs[b-5x66aft06s] {
    display: flex;
    padding: 8px 12px;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(200, 160, 100, 0.15);
    flex-shrink: 0;
    overflow-x: auto;
}

.tab-btn[b-5x66aft06s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #8898a8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-5x66aft06s] {
    background: rgba(200, 160, 100, 0.1);
    color: #c0b090;
}

.tab-btn.active[b-5x66aft06s] {
    background: rgba(200, 160, 100, 0.2);
    border-color: rgba(200, 160, 100, 0.4);
    color: #e8d8b0;
}

.tab-icon[b-5x66aft06s] {
    font-size: 14px;
}

/* Scrollable Content */
.settings-scroll[b-5x66aft06s] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.settings-scroll[b-5x66aft06s]::-webkit-scrollbar {
    width: 6px;
}

.settings-scroll[b-5x66aft06s]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.settings-scroll[b-5x66aft06s]::-webkit-scrollbar-thumb {
    background: rgba(200, 160, 100, 0.35);
    border-radius: 3px;
}

.settings-scroll[b-5x66aft06s]::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 160, 100, 0.55);
}

/* Loading State */
.loading-state[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    text-align: center;
}

.loading-spinner[b-5x66aft06s] {
    font-size: 32px;
    animation: spin-b-5x66aft06s 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-5x66aft06s {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-state p[b-5x66aft06s] {
    color: #8898b8;
    font-size: 14px;
}

/* Tab Content */
.tab-content[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section Headers */
.section-header[b-5x66aft06s] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 13px;
    font-weight: 600;
    color: #c0a880;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(200, 160, 100, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-divider[b-5x66aft06s] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 160, 100, 0.3), transparent);
    margin: 8px 0;
}

/* Form Groups */
.form-group[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row[b-5x66aft06s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label[b-5x66aft06s] {
    font-size: 12px;
    font-weight: 600;
    color: #a09888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"][b-5x66aft06s],
.form-group input[type="number"][b-5x66aft06s],
.form-group select[b-5x66aft06s],
.form-group textarea[b-5x66aft06s] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 160, 100, 0.25);
    border-radius: 6px;
    color: #e0d8c8;
    font-size: 13px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus[b-5x66aft06s],
.form-group select:focus[b-5x66aft06s],
.form-group textarea:focus[b-5x66aft06s] {
    outline: none;
    border-color: rgba(200, 160, 100, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 12px rgba(200, 160, 100, 0.15);
}

.form-group textarea[b-5x66aft06s] {
    resize: vertical;
    min-height: 100px;
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.5;
}

.form-group select[b-5x66aft06s] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a09888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-group input[type="range"][b-5x66aft06s] {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.form-group input[type="range"][b-5x66aft06s]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(145deg, #c9a860, #a08040);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.form-group input[type="range"][b-5x66aft06s]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(145deg, #c9a860, #a08040);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.form-group .hint[b-5x66aft06s] {
    font-size: 11px;
    color: #7888a0;
    font-style: italic;
}

/* Checkbox styling */
.checkbox-group[b-5x66aft06s] {
    flex-direction: row;
    align-items: center;
}

.checkbox-label[b-5x66aft06s] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px !important;
    text-transform: none !important;
    color: #c0b8a0 !important;
}

.checkbox-label input[type="checkbox"][b-5x66aft06s] {
    width: 18px;
    height: 18px;
    accent-color: #c9a860;
    cursor: pointer;
}

/* Action Buttons */
.action-btn[b-5x66aft06s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(30, 35, 50, 0.8);
    border: 1px solid rgba(200, 160, 100, 0.35);
    border-radius: 8px;
    color: #d8c8a0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-5x66aft06s] {
    background: rgba(50, 55, 70, 0.9);
    border-color: rgba(200, 160, 100, 0.6);
    transform: translateY(-1px);
}

.action-btn.primary[b-5x66aft06s] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.25) 0%, rgba(140, 100, 40, 0.25) 100%);
    border-color: rgba(200, 160, 100, 0.5);
}

.action-btn.primary:hover[b-5x66aft06s] {
    background: linear-gradient(145deg, rgba(200, 160, 80, 0.35) 0%, rgba(160, 120, 60, 0.35) 100%);
    border-color: rgba(220, 180, 120, 0.7);
}

.action-btn.secondary[b-5x66aft06s] {
    background: rgba(25, 30, 45, 0.8);
    border-color: rgba(140, 160, 200, 0.3);
    color: #b0c0d8;
}

.action-btn.secondary:hover[b-5x66aft06s] {
    background: rgba(35, 45, 65, 0.9);
    border-color: rgba(140, 160, 200, 0.5);
}

.button-row[b-5x66aft06s] {
    display: flex;
    gap: 10px;
}

.button-row .action-btn[b-5x66aft06s] {
    flex: 1;
}

/* Alerts */
.alert[b-5x66aft06s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 12px;
}

.alert.success[b-5x66aft06s] {
    background: rgba(80, 160, 80, 0.15);
    border: 1px solid rgba(100, 180, 100, 0.3);
    color: #90d890;
}

.alert.error[b-5x66aft06s] {
    background: rgba(180, 60, 60, 0.15);
    border: 1px solid rgba(200, 80, 80, 0.3);
    color: #e89090;
}

.alert-icon[b-5x66aft06s] {
    font-size: 16px;
}

.alert-close[b-5x66aft06s] {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-close:hover[b-5x66aft06s] {
    opacity: 1;
}

/* Empty States */
.empty-state[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
}

.empty-icon[b-5x66aft06s] {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-state p[b-5x66aft06s] {
    margin: 4px 0;
    color: #7888a8;
    font-size: 14px;
}

.empty-state .hint[b-5x66aft06s] {
    font-size: 12px;
    opacity: 0.7;
}

/* Memory List */
.memory-list[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.memory-item[b-5x66aft06s] {
    background: rgba(30, 35, 50, 0.6);
    border: 1px solid rgba(200, 160, 100, 0.15);
    border-radius: 8px;
    padding: 12px;
}

.memory-header[b-5x66aft06s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.memory-sequence[b-5x66aft06s] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: #a09080;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.memory-weight[b-5x66aft06s] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: #a0a8b0;
}

.memory-weight.weight-high[b-5x66aft06s] {
    background: rgba(200, 80, 80, 0.25);
    color: #e89090;
}

.memory-weight.weight-medium[b-5x66aft06s] {
    background: rgba(200, 160, 80, 0.25);
    color: #e8c878;
}

.memory-weight.weight-low[b-5x66aft06s] {
    background: rgba(80, 140, 200, 0.25);
    color: #88c0e8;
}

/* Stats Row */
.stats-row[b-5x66aft06s] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card[b-5x66aft06s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(30, 35, 50, 0.6);
    border: 1px solid rgba(200, 160, 100, 0.15);
    border-radius: 8px;
}

.stat-value[b-5x66aft06s] {
    font-size: 20px;
    font-weight: 700;
    color: #e8d8b0;
}

.stat-label[b-5x66aft06s] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8090a0;
    margin-top: 4px;
}

.memory-description[b-5x66aft06s] {
    font-size: 13px;
    color: #c8d0d8;
    line-height: 1.5;
    margin: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.memory-characters[b-5x66aft06s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.character-tag[b-5x66aft06s] {
    font-size: 10px;
    color: #a0b8c8;
    background: rgba(100, 140, 180, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(100, 140, 180, 0.3);
}

/* Plot Threads */
.thread-list[b-5x66aft06s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thread-item[b-5x66aft06s] {
    background: rgba(30, 35, 50, 0.6);
    border: 1px solid rgba(140, 100, 180, 0.2);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid rgba(180, 140, 220, 0.5);
}

.thread-item.resolved[b-5x66aft06s] {
    opacity: 0.6;
    border-left-color: rgba(100, 180, 100, 0.5);
}

.thread-header[b-5x66aft06s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.thread-title[b-5x66aft06s] {
    font-weight: 600;
    font-size: 14px;
    color: #d0c0e0;
}

.thread-status[b-5x66aft06s] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.thread-status.active[b-5x66aft06s] {
    background: rgba(180, 140, 220, 0.2);
    color: #c0a8e0;
    border: 1px solid rgba(180, 140, 220, 0.3);
}

.thread-status.resolved[b-5x66aft06s] {
    background: rgba(100, 180, 100, 0.2);
    color: #90d890;
    border: 1px solid rgba(100, 180, 100, 0.3);
}

.thread-description[b-5x66aft06s] {
    font-size: 13px;
    color: #b0b8c8;
    line-height: 1.5;
    margin: 0;
}

/* Footer */
.settings-footer[b-5x66aft06s] {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(200, 160, 100, 0.12);
    text-align: center;
    flex-shrink: 0;
}

.hint-text[b-5x66aft06s] {
    color: #6878a0;
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .settings-header[b-5x66aft06s] {
        padding: 10px 14px;
    }
    
    .settings-title[b-5x66aft06s] {
        font-size: 14px;
    }
    
    .settings-tabs[b-5x66aft06s] {
        padding: 6px 10px;
    }
    
    .tab-btn[b-5x66aft06s] {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .tab-btn span:not(.tab-icon)[b-5x66aft06s] {
        display: none;
    }
    
    .settings-scroll[b-5x66aft06s] {
        padding: 12px 14px;
    }
    
    .form-row[b-5x66aft06s] {
        grid-template-columns: 1fr;
    }
    
    .button-row[b-5x66aft06s] {
        flex-direction: column;
    }
    
    .settings-footer[b-5x66aft06s] {
        padding: 8px 14px;
    }
    
    .hint-text[b-5x66aft06s] {
        font-size: 10px;
    }
}

/* /Components/Stage/SkillsPanelComponent.razor.rz.scp.css */
/* Skills Panel - positioned within scene */
.skills-panel[b-x48ooo7b4p] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 14, 24, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.skills-panel.visible[b-x48ooo7b4p] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header */
.skills-header[b-x48ooo7b4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(
        90deg,
        rgba(110, 85, 50, 0.4) 0%,
        rgba(140, 100, 60, 0.3) 50%,
        rgba(110, 85, 50, 0.4) 100%
    );
    border-bottom: 1px solid rgba(200, 160, 80, 0.25);
    flex-shrink: 0;
}

.skills-title[b-x48ooo7b4p] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #e8d8b8;
    letter-spacing: 0.5px;
    font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
}

.skills-icon[b-x48ooo7b4p] {
    font-size: 18px;
}

.skills-close[b-x48ooo7b4p] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c0a878;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.skills-close:hover[b-x48ooo7b4p] {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff9090;
}

/* Scrollable Content */
.skills-scroll[b-x48ooo7b4p] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scroll-behavior: smooth;
}

/* Overall Progress (top, more prominent) */
.overall-progress[b-x48ooo7b4p] {
    background: radial-gradient(circle at 25% 0%, rgba(255, 215, 0, 0.18) 0%, rgba(30, 35, 50, 0.75) 45%, rgba(30, 35, 50, 0.6) 100%);
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 12px;
    padding: 14px 14px;
    margin-bottom: 18px;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.08);
}

.overall-progress-header[b-x48ooo7b4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.overall-progress-title[b-x48ooo7b4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffe9a8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.overall-progress-icon[b-x48ooo7b4p] {
    font-size: 16px;
}

.overall-progress-level[b-x48ooo7b4p] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 800;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.22);
    padding: 3px 10px;
    border-radius: 8px;
}

.overall-xp-bar[b-x48ooo7b4p] {
    height: 10px;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 215, 0, 0.12);
}

.overall-xp-fill[b-x48ooo7b4p] {
    height: 100%;
    background: linear-gradient(90deg, #c9a050 0%, #f0d878 45%, #ffd700 100%);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.overall-xp-fill[b-x48ooo7b4p]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
}

.overall-xp-text[b-x48ooo7b4p] {
    font-size: 11px;
    color: rgba(232, 216, 168, 0.75);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Custom scrollbar */
.skills-scroll[b-x48ooo7b4p]::-webkit-scrollbar {
    width: 6px;
}

.skills-scroll[b-x48ooo7b4p]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.skills-scroll[b-x48ooo7b4p]::-webkit-scrollbar-thumb {
    background: rgba(200, 160, 80, 0.35);
    border-radius: 3px;
}

.skills-scroll[b-x48ooo7b4p]::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 160, 80, 0.55);
}

/* Skill Groups */
.skill-group[b-x48ooo7b4p] {
    margin-bottom: 20px;
}

.skill-group:last-child[b-x48ooo7b4p] {
    margin-bottom: 0;
}

.skill-group-header[b-x48ooo7b4p] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 13px;
    font-weight: 600;
    color: #c9b278;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}

/* Skill Entry */
.skill-entry[b-x48ooo7b4p] {
    background: rgba(30, 35, 50, 0.6);
    border: 1px solid rgba(200, 160, 80, 0.15);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.skill-entry:hover[b-x48ooo7b4p] {
    background: rgba(40, 45, 65, 0.8);
    border-color: rgba(200, 160, 80, 0.3);
}

.skill-entry:last-child[b-x48ooo7b4p] {
    margin-bottom: 0;
}

.skill-info[b-x48ooo7b4p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.skill-name[b-x48ooo7b4p] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #e0d8c8;
}

.skill-level[b-x48ooo7b4p] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #c9b278;
    background: rgba(200, 160, 80, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
}

.skill-modifier[b-x48ooo7b4p] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}

.skill-modifier.positive[b-x48ooo7b4p] {
    color: #6dd46d;
}

.skill-modifier.negative[b-x48ooo7b4p] {
    color: #e66;
}

/* XP Bar */
.skill-xp-bar[b-x48ooo7b4p] {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.skill-xp-fill[b-x48ooo7b4p] {
    height: 100%;
    background: linear-gradient(90deg, #c9a050 0%, #e8c878 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.skill-xp-fill[b-x48ooo7b4p]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: 3px 3px 0 0;
}

.skill-xp-text[b-x48ooo7b4p] {
    font-size: 11px;
    color: #8898a8;
    text-align: right;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Empty State */
.empty-skills[b-x48ooo7b4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    height: 100%;
}

.empty-icon[b-x48ooo7b4p] {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-skills p[b-x48ooo7b4p] {
    margin: 6px 0;
    color: #7888a8;
    font-size: 14px;
}

.empty-hint[b-x48ooo7b4p] {
    font-size: 12px !important;
    opacity: 0.65;
}

/* Footer */
.skills-footer[b-x48ooo7b4p] {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(200, 160, 80, 0.12);
    text-align: center;
    flex-shrink: 0;
}

.hint-text[b-x48ooo7b4p] {
    color: #7a6848;
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .skills-header[b-x48ooo7b4p] {
        padding: 10px 14px;
    }
    
    .skills-title[b-x48ooo7b4p] {
        font-size: 14px;
    }
    
    .skills-scroll[b-x48ooo7b4p] {
        padding: 12px 14px;
    }
    
    .skill-entry[b-x48ooo7b4p] {
        padding: 10px 12px;
    }
    
    .skill-name[b-x48ooo7b4p] {
        font-size: 13px;
    }
    
    .skills-footer[b-x48ooo7b4p] {
        padding: 8px 14px;
    }
    
    .hint-text[b-x48ooo7b4p] {
        font-size: 10px;
    }
}









/* /Components/Stage/SkillXPOverlayComponent.razor.rz.scp.css */
.skill-xp-overlay[b-l2l3wgqrlj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
    background: rgba(0, 0, 0, 0);
}

.skill-xp-overlay.visible[b-l2l3wgqrlj] {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.skill-xp-overlay.dismissing[b-l2l3wgqrlj] {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: opacity 0.35s ease-out, background 0.35s ease-out, backdrop-filter 0.35s ease-out;
    pointer-events: none;
}

.skill-xp-container[b-l2l3wgqrlj] {
    background: linear-gradient(145deg, rgba(25, 30, 45, 0.97) 0%, rgba(40, 50, 70, 0.97) 100%);
    border: 2px solid rgba(200, 180, 100, 0.5);
    border-radius: 16px;
    padding: 24px 28px;
    min-width: 340px;
    max-width: 450px;
    box-shadow: 
        0 0 40px rgba(200, 180, 100, 0.25),
        0 0 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.8) translateY(20px);
    animation: xp-container-enter-b-l2l3wgqrlj 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes xp-container-enter-b-l2l3wgqrlj {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.skill-xp-overlay.dismissing .skill-xp-container[b-l2l3wgqrlj] {
    transform: scale(0.9) translateY(-20px);
    transition: transform 0.35s ease-out;
}

/* Header */
.skill-xp-header[b-l2l3wgqrlj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(200, 180, 100, 0.25);
}

.xp-icon[b-l2l3wgqrlj] {
    font-size: 24px;
    animation: sparkle-b-l2l3wgqrlj 1.5s ease-in-out infinite;
}

@keyframes sparkle-b-l2l3wgqrlj {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.15) rotate(10deg); opacity: 0.8; }
}

.xp-title[b-l2l3wgqrlj] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 18px;
    font-weight: 600;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Skill Gains List */
.skill-gains[b-l2l3wgqrlj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 400px;
    overflow-y: auto;
}

.skill-gain-entry[b-l2l3wgqrlj] {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
    animation: gain-entry-enter-b-l2l3wgqrlj 0.4s ease-out backwards;
}

.skill-gain-entry:nth-child(1)[b-l2l3wgqrlj] { animation-delay: 0.1s; }
.skill-gain-entry:nth-child(2)[b-l2l3wgqrlj] { animation-delay: 0.2s; }
.skill-gain-entry:nth-child(3)[b-l2l3wgqrlj] { animation-delay: 0.3s; }
.skill-gain-entry:nth-child(4)[b-l2l3wgqrlj] { animation-delay: 0.4s; }

@keyframes gain-entry-enter-b-l2l3wgqrlj {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

.skill-gain-entry.leveled-up[b-l2l3wgqrlj] {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, rgba(200, 160, 40, 0.15) 0%, rgba(180, 140, 30, 0.1) 100%);
    animation: gain-entry-enter-b-l2l3wgqrlj 0.4s ease-out backwards, level-up-glow-b-l2l3wgqrlj 2s ease-in-out infinite;
}

@keyframes level-up-glow-b-l2l3wgqrlj {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
}

/* Gain Header */
.gain-header[b-l2l3wgqrlj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.gain-skill-name[b-l2l3wgqrlj] {
    font-size: 15px;
    font-weight: 600;
    color: #e0d8c8;
}

.level-up-badge[b-l2l3wgqrlj] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.4);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: level-badge-pulse-b-l2l3wgqrlj 0.6s ease-out;
}

@keyframes level-badge-pulse-b-l2l3wgqrlj {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Gain Progress Section */
.gain-progress[b-l2l3wgqrlj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gain-level[b-l2l3wgqrlj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.level-label[b-l2l3wgqrlj] {
    font-size: 11px;
    color: rgba(200, 180, 100, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.level-value[b-l2l3wgqrlj] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.level-value.level-changed[b-l2l3wgqrlj] {
    color: #ffd700;
    animation: level-number-pop-b-l2l3wgqrlj 0.5s ease-out;
}

@keyframes level-number-pop-b-l2l3wgqrlj {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    100% { transform: scale(1); }
}

.modifier-value[b-l2l3wgqrlj] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 600;
}

.modifier-value.positive[b-l2l3wgqrlj] {
    color: #6dd46d;
}

.modifier-value.negative[b-l2l3wgqrlj] {
    color: #e66;
}

/* XP Bar */
.gain-xp-bar[b-l2l3wgqrlj] {
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.gain-xp-fill-bg[b-l2l3wgqrlj] {
    position: absolute;
    height: 100%;
    background: rgba(200, 160, 80, 0.3);
    border-radius: 5px;
    transition: width 0s;
}

.gain-xp-fill[b-l2l3wgqrlj] {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #c9a050 0%, #f0d878 50%, #ffd700 100%);
    border-radius: 5px;
    transition: width 0s;
    box-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.gain-xp-fill.filling[b-l2l3wgqrlj] {
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gain-xp-fill[b-l2l3wgqrlj]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    border-radius: 5px 5px 0 0;
}

/* XP Info */
.gain-xp-info[b-l2l3wgqrlj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.xp-gained[b-l2l3wgqrlj] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #6dd46d;
    animation: xp-text-glow-b-l2l3wgqrlj 0.5s ease-out;
}

@keyframes xp-text-glow-b-l2l3wgqrlj {
    0% { opacity: 0; transform: translateY(5px); }
    50% { text-shadow: 0 0 10px rgba(109, 212, 109, 0.8); }
    100% { opacity: 1; transform: translateY(0); }
}

.xp-progress[b-l2l3wgqrlj] {
    font-size: 11px;
    color: #8898a8;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Click Hint */
.click-hint[b-l2l3wgqrlj] {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: rgba(200, 180, 100, 0.6);
    letter-spacing: 1px;
    animation: hint-pulse-b-l2l3wgqrlj 2s ease-in-out infinite 1.5s;
}

@keyframes hint-pulse-b-l2l3wgqrlj {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Responsive */
@media (max-width: 500px) {
    .skill-xp-container[b-l2l3wgqrlj] {
        min-width: 280px;
        max-width: 95%;
        padding: 18px 20px;
    }
    
    .xp-title[b-l2l3wgqrlj] {
        font-size: 16px;
    }
    
    .skill-gain-entry[b-l2l3wgqrlj] {
        padding: 12px 14px;
    }
    
    .gain-skill-name[b-l2l3wgqrlj] {
        font-size: 14px;
    }
    
    .level-value[b-l2l3wgqrlj] {
        font-size: 18px;
    }
}

















/* /Components/Stage/SlashAnimationComponent.razor.rz.scp.css */
/* SVG overlay for slash animations */
.slash-arc-layer[b-79qhh3ly2m] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

/* Any slash path we create */
.slash-arc[b-79qhh3ly2m] {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    /* Glow effect */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.7));
    opacity: 0;
}

/* Animation class - Normal speed (default) */
.slash-arc.animate[b-79qhh3ly2m] {
    animation: slash-arc-draw-b-79qhh3ly2m 0.5s ease-out forwards;
}

/* Fast speed variant */
.slash-arc.animate.speed-fast[b-79qhh3ly2m] {
    animation: slash-arc-draw-b-79qhh3ly2m 0.3s ease-out forwards;
}

/* Slow speed variant */
.slash-arc.animate.speed-slow[b-79qhh3ly2m] {
    animation: slash-arc-draw-b-79qhh3ly2m 1s ease-out forwards;
}

@keyframes slash-arc-draw-b-79qhh3ly2m {
    0% {
        stroke-dashoffset: var(--arc-length, 2000);
        opacity: 0.2;
    }
    30% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* /Pages/CharacterCreator.razor.rz.scp.css */
/* Creator Container */
.creator-container[b-9c8sa4fdxb] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 30%, #0f0c1f 60%, #14162a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    padding: 40px 20px;
}

/* Animated Background */
.animated-background[b-9c8sa4fdxb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.mystical-orb[b-9c8sa4fdxb] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    animation: mystical-float-b-9c8sa4fdxb 30s ease-in-out infinite;
    will-change: transform;
}

.orb-1[b-9c8sa4fdxb] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200, 180, 100, 0.4), rgba(139, 92, 66, 0.2));
    top: -20%;
    left: -15%;
    animation-delay: 0s;
}

.orb-2[b-9c8sa4fdxb] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 80, 140, 0.35), rgba(70, 50, 100, 0.2));
    bottom: -20%;
    right: -15%;
    animation-delay: 10s;
}

.orb-3[b-9c8sa4fdxb] {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(80, 120, 180, 0.3), rgba(50, 80, 130, 0.15));
    top: 40%;
    right: 10%;
    animation-delay: 20s;
}

@keyframes mystical-float-b-9c8sa4fdxb {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(100px, -100px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-80px, 80px) scale(0.95) rotate(240deg);
    }
}

/* Creator Content */
.creator-content[b-9c8sa4fdxb] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    animation: fadeInUp-b-9c8sa4fdxb 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp-b-9c8sa4fdxb {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Creator Card */
.creator-card[b-9c8sa4fdxb] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.95) 0%, rgba(35, 40, 70, 0.95) 100%);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    color: white;
}

.card-border[b-9c8sa4fdxb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.5);
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(200, 180, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-glow[b-9c8sa4fdxb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.08) 0%, rgba(200, 180, 100, 0.03) 100%);
    opacity: 1;
    border-radius: 20px;
    pointer-events: none;
}

/* Scroll Decorations */
.scroll-decoration[b-9c8sa4fdxb] {
    position: absolute;
    width: 35px;
    height: 35px;
    border-style: solid;
    border-color: rgba(200, 180, 100, 0.5);
    pointer-events: none;
    z-index: 2;
}

.scroll-top-left[b-9c8sa4fdxb] {
    top: 16px;
    left: 16px;
    border-width: 2px 0 0 2px;
    border-radius: 8px 0 0 0;
}

.scroll-top-right[b-9c8sa4fdxb] {
    top: 16px;
    right: 16px;
    border-width: 2px 2px 0 0;
    border-radius: 0 8px 0 0;
}

.scroll-bottom-left[b-9c8sa4fdxb] {
    bottom: 16px;
    left: 16px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 8px;
}

.scroll-bottom-right[b-9c8sa4fdxb] {
    bottom: 16px;
    right: 16px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 8px 0;
}

/* Card Header */
.card-header[b-9c8sa4fdxb] {
    position: relative;
    padding: 48px 40px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 180, 100, 0.2);
    z-index: 1;
}

.quest-marker[b-9c8sa4fdxb] {
    font-size: 56px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 16px rgba(200, 180, 100, 0.5));
    animation: quest-float-b-9c8sa4fdxb 3s ease-in-out infinite;
}

@keyframes quest-float-b-9c8sa4fdxb {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.card-title[b-9c8sa4fdxb] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgb(232, 216, 168);
    text-shadow: 
        0 0 30px rgba(200, 180, 100, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(200, 180, 100, 0.2);
    text-transform: uppercase;
    margin: 0 0 12px 0;
    background: linear-gradient(180deg, #fff 0%, #e8d8a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.card-subtitle[b-9c8sa4fdxb] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* Card Divider */
.card-divider[b-9c8sa4fdxb],
.section-divider[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 40px;
    margin: 24px 0;
}

.divider-ornament[b-9c8sa4fdxb] {
    color: #c9b278;
    font-size: 10px;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.6);
}

.divider-line[b-9c8sa4fdxb] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.4) 50%, transparent 100%);
}

/* Card Body */
.card-body[b-9c8sa4fdxb] {
    position: relative;
    padding: 0 40px 48px;
    z-index: 1;
}

/* Form Section */
.form-section[b-9c8sa4fdxb] {
    margin-bottom: 24px;
}

.section-title[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 22px;
    font-weight: 700;
    color: #e8d8a8;
    margin: 0 0 16px 0;
    letter-spacing: 2px;
}

.section-icon[b-9c8sa4fdxb] {
    font-size: 22px;
    filter: drop-shadow(0 0 10px rgba(200, 180, 100, 0.5));
}

.section-description[b-9c8sa4fdxb] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 16px 0;
}

.section-description .highlight[b-9c8sa4fdxb] {
    color: #c9b278;
    font-weight: 600;
}

/* RPG Input */
.rpg-input-group[b-9c8sa4fdxb] {
    margin-bottom: 16px;
}

.rpg-input[b-9c8sa4fdxb] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 8px;
    font-size: 15px;
    color: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.rpg-input[b-9c8sa4fdxb]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rpg-input:focus[b-9c8sa4fdxb] {
    outline: none;
    border-color: rgba(200, 180, 100, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2);
}

.rpg-textarea[b-9c8sa4fdxb] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 8px;
    font-size: 15px;
    color: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.rpg-textarea[b-9c8sa4fdxb]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rpg-textarea:focus[b-9c8sa4fdxb] {
    outline: none;
    border-color: rgba(200, 180, 100, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2);
}

/* Appearance Section */
.appearance-section[b-9c8sa4fdxb] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.appearance-preview[b-9c8sa4fdxb] {
    width: 200px;
    height: 280px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.character-preview-image[b-9c8sa4fdxb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-placeholder[b-9c8sa4fdxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.placeholder-icon[b-9c8sa4fdxb] {
    font-size: 48px;
    opacity: 0.5;
}

.placeholder-text[b-9c8sa4fdxb] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.appearance-controls[b-9c8sa4fdxb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.generate-btn[b-9c8sa4fdxb] {
    align-self: flex-start;
}

/* Skills Table */
.skills-table[b-9c8sa4fdxb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.skill-edit-row[b-9c8sa4fdxb] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

.skill-edit-row:hover[b-9c8sa4fdxb] {
    background: rgba(200, 180, 100, 0.05);
}

.skill-name-input[b-9c8sa4fdxb] {
    width: 100%;
    min-width: 0;
}

.rpg-select[b-9c8sa4fdxb] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 180, 100, 0.3);
    border-radius: 6px;
    color: #e0d5c7;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rpg-select:hover[b-9c8sa4fdxb] {
    border-color: rgba(200, 180, 100, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

.rpg-select:focus[b-9c8sa4fdxb] {
    outline: none;
    border-color: #c9b278;
    box-shadow: 0 0 8px rgba(201, 178, 120, 0.3);
}

.rpg-select option[b-9c8sa4fdxb] {
    background: #1a1410;
    color: #e0d5c7;
}

.add-skill-section[b-9c8sa4fdxb] {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Attributes Container */
.attributes-container[b-9c8sa4fdxb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.attribute-row[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.attribute-row:hover[b-9c8sa4fdxb] {
    background: rgba(200, 180, 100, 0.05);
    border-color: rgba(200, 180, 100, 0.3);
}

.attribute-info[b-9c8sa4fdxb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attribute-name[b-9c8sa4fdxb] {
    font-size: 16px;
    font-weight: 600;
    color: #e8d8a8;
    letter-spacing: 0.5px;
}

.attribute-desc[b-9c8sa4fdxb] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.attribute-controls[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attribute-value[b-9c8sa4fdxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.level-value[b-9c8sa4fdxb] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.modifier-value[b-9c8sa4fdxb] {
    font-size: 12px;
    color: #c9b278;
    font-weight: 500;
}

/* Skills Container */
.skills-container[b-9c8sa4fdxb] {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.skill-row[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(200, 180, 100, 0.1);
    transition: background 0.2s ease;
}

.skill-row:last-child[b-9c8sa4fdxb] {
    border-bottom: none;
}

.skill-row:hover[b-9c8sa4fdxb] {
    background: rgba(200, 180, 100, 0.05);
}

.skill-info[b-9c8sa4fdxb] {
    flex: 1;
}

.skill-name[b-9c8sa4fdxb] {
    font-size: 14px;
    color: #e0d5c7;
    font-weight: 500;
}

.skill-controls[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow-btn[b-9c8sa4fdxb] {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #c9b278;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.arrow-btn:hover:not(:disabled)[b-9c8sa4fdxb] {
    background: rgba(200, 180, 100, 0.2);
    border-color: rgba(200, 180, 100, 0.6);
    box-shadow: 0 0 10px rgba(200, 180, 100, 0.3);
}

.arrow-btn:disabled[b-9c8sa4fdxb] {
    opacity: 0.3;
    cursor: not-allowed;
}

.skill-level[b-9c8sa4fdxb] {
    min-width: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #e8d8a8;
}

.remove-btn[b-9c8sa4fdxb] {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 4px;
    background: rgba(255, 100, 100, 0.1);
    color: #ff6666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.remove-btn:hover[b-9c8sa4fdxb] {
    background: rgba(255, 100, 100, 0.3);
    border-color: rgba(255, 100, 100, 0.6);
}

/* Resources Container */
.resources-container[b-9c8sa4fdxb] {
    margin-bottom: 16px;
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
}

.resource-row[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(200, 180, 100, 0.1);
}

.resource-row:last-child[b-9c8sa4fdxb] {
    border-bottom: none;
}

.resource-color[b-9c8sa4fdxb] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}

.resource-info[b-9c8sa4fdxb] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 120px;
}

.resource-name[b-9c8sa4fdxb] {
    font-size: 14px;
    color: #e0d5c7;
    font-weight: 500;
}

.resource-short[b-9c8sa4fdxb] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.resource-description[b-9c8sa4fdxb] {
    flex: 1;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.color-picker[b-9c8sa4fdxb] {
    width: 40px;
    height: 32px;
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.color-picker[b-9c8sa4fdxb]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker[b-9c8sa4fdxb]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Add Item Section */
.add-item-section[b-9c8sa4fdxb],
.add-resource-section[b-9c8sa4fdxb] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.add-input[b-9c8sa4fdxb] {
    flex: 1;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.add-input-short[b-9c8sa4fdxb] {
    width: 80px;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.add-btn[b-9c8sa4fdxb] {
    width: auto !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
}

/* RPG Buttons */
.rpg-btn[b-9c8sa4fdxb] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 32px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    color: #e8d8a8;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-btn .btn-glow[b-9c8sa4fdxb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.15) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rpg-btn:hover:not(:disabled) .btn-glow[b-9c8sa4fdxb] {
    opacity: 1;
}

.rpg-btn .btn-icon[b-9c8sa4fdxb],
.rpg-btn .btn-text[b-9c8sa4fdxb] {
    position: relative;
    z-index: 1;
}

.rpg-btn .btn-icon[b-9c8sa4fdxb] {
    font-size: 18px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-btn .btn-icon.spinning[b-9c8sa4fdxb] {
    animation: spin-b-9c8sa4fdxb 1s linear infinite;
}

@keyframes spin-b-9c8sa4fdxb {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rpg-btn:hover:not(:disabled)[b-9c8sa4fdxb] {
    transform: translateY(-2px);
    border-color: rgba(200, 180, 100, 0.9);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn:hover:not(:disabled) .btn-icon:not(.spinning)[b-9c8sa4fdxb] {
    transform: scale(1.2) rotate(5deg);
}

.rpg-btn:active:not(:disabled)[b-9c8sa4fdxb] {
    transform: translateY(0);
}

.rpg-btn.primary-btn[b-9c8sa4fdxb] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.3) 0%, rgba(140, 100, 40, 0.3) 100%);
    border-color: rgba(200, 180, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.rpg-btn.secondary-btn[b-9c8sa4fdxb] {
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
    border-color: rgba(200, 180, 100, 0.5);
}

.rpg-btn:disabled[b-9c8sa4fdxb] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Action Buttons */
.action-buttons[b-9c8sa4fdxb] {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.action-buttons .rpg-btn[b-9c8sa4fdxb] {
    flex: 1;
}

.create-btn[b-9c8sa4fdxb] {
    flex: 2 !important;
}

/* Info Box */
.info-box[b-9c8sa4fdxb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    margin: 24px 0;
    background: rgba(100, 120, 200, 0.15);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 10px;
    color: rgba(200, 210, 255, 0.9);
    font-size: 13px;
    line-height: 1.5;
}

.info-icon[b-9c8sa4fdxb] {
    font-size: 20px;
    flex-shrink: 0;
}

.info-text[b-9c8sa4fdxb] {
    flex: 1;
}

.info-text strong[b-9c8sa4fdxb] {
    color: #c9b278;
}

/* Error Message */
.error-message[b-9c8sa4fdxb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 24px;
    background: rgba(180, 50, 50, 0.2);
    border: 2px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    color: #ffb3b3;
    font-size: 14px;
    position: relative;
}

.error-icon[b-9c8sa4fdxb] {
    font-size: 20px;
    flex-shrink: 0;
}

.error-text[b-9c8sa4fdxb] {
    flex: 1;
}

.error-close[b-9c8sa4fdxb] {
    background: none;
    border: none;
    color: #ffb3b3;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.error-close:hover[b-9c8sa4fdxb] {
    color: #fff;
    transform: scale(1.2);
}

/* Import Section Styles */
.import-section[b-9c8sa4fdxb] {
    background: rgba(100, 80, 140, 0.1);
    border: 2px solid rgba(120, 100, 160, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.import-controls[b-9c8sa4fdxb] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: stretch;
    margin-top: 12px;
}

.import-input[b-9c8sa4fdxb] {
    min-width: 0;
    width: 100%;
}

.import-btn[b-9c8sa4fdxb] {
    white-space: nowrap;
    min-width: fit-content;
}

/* Responsive Design */
@media (max-width: 768px) {
    .creator-container[b-9c8sa4fdxb] {
        padding: 20px 16px;
    }
    
    .creator-content[b-9c8sa4fdxb] {
        max-width: 100%;
    }
    
    .card-header[b-9c8sa4fdxb] {
        padding: 32px 24px 24px;
    }
    
    .card-title[b-9c8sa4fdxb] {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .card-divider[b-9c8sa4fdxb],
    .section-divider[b-9c8sa4fdxb],
    .card-body[b-9c8sa4fdxb] {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .appearance-section[b-9c8sa4fdxb] {
        flex-direction: column;
    }
    
    .appearance-preview[b-9c8sa4fdxb] {
        width: 100%;
        height: 200px;
    }
    
    .add-item-section[b-9c8sa4fdxb],
    .add-resource-section[b-9c8sa4fdxb] {
        flex-wrap: wrap;
    }
    
    .add-input[b-9c8sa4fdxb] {
        min-width: 100%;
    }
    
    .resource-row[b-9c8sa4fdxb] {
        flex-wrap: wrap;
    }
    
    .resource-description[b-9c8sa4fdxb] {
        width: 100%;
        margin-top: 8px;
    }
    
    .action-buttons[b-9c8sa4fdxb] {
        flex-direction: column;
    }
    
    .create-btn[b-9c8sa4fdxb] {
        flex: 1 !important;
    }
}

/* /Pages/Home.razor.rz.scp.css */
/* Reset and Base */
*[b-ozc5ap9b5g] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home-container[b-ozc5ap9b5g] {
    min-height: calc(100vh - 48px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 30%, #0f0c1f 60%, #14162a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Animated Background */
.animated-background[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.mystical-orb[b-ozc5ap9b5g] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    will-change: transform;
    animation: mystical-float-b-ozc5ap9b5g 30s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
}

.orb-1[b-ozc5ap9b5g] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200, 180, 100, 0.4), rgba(139, 92, 66, 0.2));
    top: -20%;
    left: -15%;
    animation-delay: calc(0s + var(--animation-offset, 0s));
}

.orb-2[b-ozc5ap9b5g] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 80, 140, 0.35), rgba(70, 50, 100, 0.2));
    bottom: -20%;
    right: -15%;
    animation-delay: calc(10s + var(--animation-offset, 0s));
}

.orb-3[b-ozc5ap9b5g] {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(80, 120, 180, 0.3), rgba(50, 80, 130, 0.15));
    top: 40%;
    right: 10%;
    animation-delay: calc(20s + var(--animation-offset, 0s));
}

@keyframes mystical-float-b-ozc5ap9b5g {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(100px, -100px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-80px, 80px) scale(0.95) rotate(240deg);
    }
}

/* Magic Particles */
.particle-container[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.magic-particle[b-ozc5ap9b5g] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(200, 180, 100, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200, 180, 100, 0.8);
    left: var(--x);
    top: var(--y);
    animation: particle-drift-b-ozc5ap9b5g 15s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0s) + var(--animation-offset, 0s));
    opacity: 0;
}

@keyframes particle-drift-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 0.3 - 50px), calc(var(--y) * -0.2 - 80px));
    }
}

.home-content[b-ozc5ap9b5g] {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 32px 80px;
}

/* Hero Section */
.hero-section[b-ozc5ap9b5g] {
    text-align: center;
    color: white;
    margin-bottom: 120px;
    animation: fadeInUp-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes fadeInUp-b-ozc5ap9b5g {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ancient Badge */
.ancient-badge[b-ozc5ap9b5g] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 10px 24px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.8) 0%, rgba(35, 40, 70, 0.8) 100%);
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: badge-entrance-b-ozc5ap9b5g 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(0.2s + var(--animation-offset, 0s));
}

@keyframes badge-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(-30deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

.badge-ornament[b-ozc5ap9b5g] {
    font-size: 16px;
    color: #c9b278;
    animation: ornament-glow-b-ozc5ap9b5g 3s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes ornament-glow-b-ozc5ap9b5g {
    0%, 100% {
        opacity: 0.7;
        text-shadow: 0 0 5px rgba(201, 178, 120, 0.5);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(201, 178, 120, 0.8);
    }
}

.badge-text[b-ozc5ap9b5g] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 13px;
    font-weight: 600;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Hero Title */
.hero-title[b-ozc5ap9b5g] {
    margin: 0 0 32px 0;
    animation: title-entrance-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.3s + var(--animation-offset, 0s));
}

@keyframes title-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.title-main[b-ozc5ap9b5g] {
    display: block;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 80px;
    font-weight: 800;
    letter-spacing: 8px;
    color: rgb(232, 216, 168);
    text-shadow: 
        0 0 30px rgba(200, 180, 100, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(200, 180, 100, 0.2);
    text-transform: uppercase;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #fff 0%, #e8d8a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.title-subtitle[b-ozc5ap9b5g] {
    display: block;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 6px;
    color: #c9b278;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(201, 178, 120, 0.4);
}

/* Hero Divider */
.hero-divider[b-ozc5ap9b5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 32px auto;
    max-width: 400px;
    animation: divider-entrance-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.5s + var(--animation-offset, 0s));
}

@keyframes divider-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.divider-ornament[b-ozc5ap9b5g] {
    color: #c9b278;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.6);
}

.divider-line[b-ozc5ap9b5g] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.6) 50%, transparent 100%);
}

/* Hero Description */
.hero-description[b-ozc5ap9b5g] {
    font-size: 20px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 0 auto 48px;
    animation: description-entrance-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.6s + var(--animation-offset, 0s));
}

@keyframes description-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-text[b-ozc5ap9b5g] {
    color: #c9b278;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(201, 178, 120, 0.3);
}

/* RPG Buttons */
.cta-buttons[b-ozc5ap9b5g] {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 48px 0 64px;
    animation: buttons-entrance-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.8s + var(--animation-offset, 0s));
}

@keyframes buttons-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rpg-btn[b-ozc5ap9b5g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 48px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    color: #e8d8a8;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-btn .btn-glow[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.15) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rpg-btn:hover .btn-glow[b-ozc5ap9b5g] {
    opacity: 1;
}

.rpg-btn .btn-icon[b-ozc5ap9b5g],
.rpg-btn .btn-text[b-ozc5ap9b5g] {
    position: relative;
    z-index: 1;
}

.rpg-btn .btn-icon[b-ozc5ap9b5g] {
    font-size: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-btn:hover[b-ozc5ap9b5g] {
    transform: translateY(-4px);
    border-color: rgba(200, 180, 100, 0.9);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn:hover .btn-icon[b-ozc5ap9b5g] {
    transform: scale(1.2) rotate(5deg);
}

.rpg-btn:active[b-ozc5ap9b5g] {
    transform: translateY(-2px);
}

.rpg-btn.primary-btn[b-ozc5ap9b5g] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.3) 0%, rgba(140, 100, 40, 0.3) 100%);
    border-color: rgba(200, 180, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.rpg-btn.epic-btn[b-ozc5ap9b5g] {
    background: linear-gradient(145deg, rgba(200, 160, 40, 0.4) 0%, rgba(160, 120, 20, 0.4) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: epic-pulse-b-ozc5ap9b5g 2s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes epic-pulse-b-ozc5ap9b5g {
    0%, 100% {
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(255, 215, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

/* Stats Showcase */
.stats-showcase[b-ozc5ap9b5g] {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    animation: stats-entrance-b-ozc5ap9b5g 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(1s + var(--animation-offset, 0s));
}

@keyframes stats-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card[b-ozc5ap9b5g] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
    border: 1px solid rgba(200, 180, 100, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover[b-ozc5ap9b5g] {
    transform: translateY(-4px);
    border-color: rgba(200, 180, 100, 0.5);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-card .stat-icon[b-ozc5ap9b5g] {
    font-size: 32px;
    filter: drop-shadow(0 0 10px rgba(200, 180, 100, 0.5));
}

.stat-content[b-ozc5ap9b5g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-ozc5ap9b5g] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.stat-label[b-ozc5ap9b5g] {
    font-size: 11px;
    color: rgba(200, 180, 100, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Features Section */
.features-section[b-ozc5ap9b5g] {
    margin-top: 100px;
    margin-bottom: 100px;
}

.section-header[b-ozc5ap9b5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 60px;
    animation: fadeInUp-b-ozc5ap9b5g 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--animation-offset, 0s);
}

.header-ornament-left[b-ozc5ap9b5g],
.header-ornament-right[b-ozc5ap9b5g] {
    font-size: 12px;
    color: rgba(200, 180, 100, 0.5);
    letter-spacing: 2px;
}

.section-title[b-ozc5ap9b5g] {
    text-align: center;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 42px;
    font-weight: 700;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(200, 180, 100, 0.4);
}

.features-grid[b-ozc5ap9b5g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.feature-card[b-ozc5ap9b5g] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: card-entrance-b-ozc5ap9b5g 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.feature-card:nth-child(1)[b-ozc5ap9b5g] { animation-delay: calc(0.1s + var(--animation-offset, 0s)); }
.feature-card:nth-child(2)[b-ozc5ap9b5g] { animation-delay: calc(0.2s + var(--animation-offset, 0s)); }
.feature-card:nth-child(3)[b-ozc5ap9b5g] { animation-delay: calc(0.3s + var(--animation-offset, 0s)); }
.feature-card:nth-child(4)[b-ozc5ap9b5g] { animation-delay: calc(0.4s + var(--animation-offset, 0s)); }

@keyframes card-entrance-b-ozc5ap9b5g {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateX(-15deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.card-border[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 16px;
    transition: all 0.5s ease;
    pointer-events: none;
}

.card-glow[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.1) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 16px;
    pointer-events: none;
}

.feature-card:hover[b-ozc5ap9b5g] {
    transform: translateY(-8px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-card:hover .card-border[b-ozc5ap9b5g] {
    border-color: rgba(200, 180, 100, 0.6);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.3);
}

.feature-card:hover .card-glow[b-ozc5ap9b5g] {
    opacity: 1;
}

.feature-icon[b-ozc5ap9b5g] {
    font-size: 48px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(200, 180, 100, 0.4));
    position: relative;
    z-index: 1;
}

.feature-title[b-ozc5ap9b5g] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 24px;
    font-weight: 700;
    color: #e8d8a8;
    margin-bottom: 16px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

.feature-description[b-ozc5ap9b5g] {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.feature-stats[b-ozc5ap9b5g] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.mini-stat[b-ozc5ap9b5g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 180, 100, 0.2);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.feature-card:hover .mini-stat[b-ozc5ap9b5g] {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(200, 180, 100, 0.3);
}

.mini-stat-icon[b-ozc5ap9b5g] {
    font-size: 12px;
}

.mini-stat-text[b-ozc5ap9b5g] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* Call to Adventure Section */
.call-to-adventure[b-ozc5ap9b5g] {
    margin-top: 100px;
    margin-bottom: 80px;
}

.adventure-card[b-ozc5ap9b5g] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    border-radius: 20px;
    padding: 80px 48px;
    text-align: center;
    backdrop-filter: blur(20px);
    overflow: hidden;
    animation: fadeInUp-b-ozc5ap9b5g 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--animation-offset, 0s);
}

.adventure-card-border[b-ozc5ap9b5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.5);
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(200, 180, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.adventure-card-glow[b-ozc5ap9b5g] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(200, 180, 100, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: glow-pulse-b-ozc5ap9b5g 4s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes glow-pulse-b-ozc5ap9b5g {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Scroll Decorations */
.scroll-decoration[b-ozc5ap9b5g] {
    position: absolute;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: rgba(200, 180, 100, 0.5);
    pointer-events: none;
}

.scroll-top-left[b-ozc5ap9b5g] {
    top: 20px;
    left: 20px;
    border-width: 2px 0 0 2px;
    border-radius: 8px 0 0 0;
}

.scroll-top-right[b-ozc5ap9b5g] {
    top: 20px;
    right: 20px;
    border-width: 2px 2px 0 0;
    border-radius: 0 8px 0 0;
}

.scroll-bottom-left[b-ozc5ap9b5g] {
    bottom: 20px;
    left: 20px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 8px;
}

.scroll-bottom-right[b-ozc5ap9b5g] {
    bottom: 20px;
    right: 20px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 8px 0;
}

.adventure-content[b-ozc5ap9b5g] {
    position: relative;
    z-index: 1;
}

.quest-marker[b-ozc5ap9b5g] {
    font-size: 64px;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 16px rgba(200, 180, 100, 0.5));
    animation: quest-float-b-ozc5ap9b5g 3s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes quest-float-b-ozc5ap9b5g {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.adventure-title[b-ozc5ap9b5g] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 48px;
    font-weight: 800;
    color: #e8d8a8;
    margin-bottom: 24px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(200, 180, 100, 0.4);
}

.adventure-description[b-ozc5ap9b5g] {
    font-size: 20px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto 48px;
}

.quest-footer[b-ozc5ap9b5g] {
    margin-top: 24px;
}

.footer-text[b-ozc5ap9b5g] {
    font-size: 13px;
    color: rgba(200, 180, 100, 0.6);
    letter-spacing: 1px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid[b-ozc5ap9b5g] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .home-content[b-ozc5ap9b5g] {
        padding: 60px 24px 60px;
    }
    
    .hero-section[b-ozc5ap9b5g] {
        margin-bottom: 80px;
    }
    
    .title-main[b-ozc5ap9b5g] {
        font-size: 56px;
        letter-spacing: 4px;
    }
    
    .title-subtitle[b-ozc5ap9b5g] {
        font-size: 20px;
        letter-spacing: 3px;
    }
    
    .hero-description[b-ozc5ap9b5g] {
        font-size: 18px;
    }
    
    .section-title[b-ozc5ap9b5g] {
        font-size: 32px;
        letter-spacing: 2px;
    }
    
    .header-ornament-left[b-ozc5ap9b5g],
    .header-ornament-right[b-ozc5ap9b5g] {
        display: none;
    }
    
    .stats-showcase[b-ozc5ap9b5g] {
        gap: 20px;
    }
    
    .stat-card[b-ozc5ap9b5g] {
        padding: 12px 20px;
    }
    
    .stat-card .stat-icon[b-ozc5ap9b5g] {
        font-size: 28px;
    }
    
    .stat-value[b-ozc5ap9b5g] {
        font-size: 18px;
    }
    
    .stat-label[b-ozc5ap9b5g] {
        font-size: 10px;
    }
    
    .features-grid[b-ozc5ap9b5g] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-card[b-ozc5ap9b5g] {
        padding: 28px;
    }
    
    .feature-icon[b-ozc5ap9b5g] {
        font-size: 40px;
    }
    
    .feature-title[b-ozc5ap9b5g] {
        font-size: 20px;
    }
    
    .feature-description[b-ozc5ap9b5g] {
        font-size: 14px;
    }
    
    .adventure-card[b-ozc5ap9b5g] {
        padding: 60px 32px;
        border-radius: 16px;
    }
    
    .adventure-title[b-ozc5ap9b5g] {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    .adventure-description[b-ozc5ap9b5g] {
        font-size: 18px;
    }
    
    .quest-marker[b-ozc5ap9b5g] {
        font-size: 48px;
    }
    
    .rpg-btn[b-ozc5ap9b5g] {
        width: 100%;
        max-width: 360px;
        justify-content: center;
    }
    
    .scroll-decoration[b-ozc5ap9b5g] {
        width: 30px;
        height: 30px;
    }
    
    .scroll-top-left[b-ozc5ap9b5g],
    .scroll-top-right[b-ozc5ap9b5g] {
        top: 15px;
    }
    
    .scroll-bottom-left[b-ozc5ap9b5g],
    .scroll-bottom-right[b-ozc5ap9b5g] {
        bottom: 15px;
    }
    
    .scroll-top-left[b-ozc5ap9b5g],
    .scroll-bottom-left[b-ozc5ap9b5g] {
        left: 15px;
    }
    
    .scroll-top-right[b-ozc5ap9b5g],
    .scroll-bottom-right[b-ozc5ap9b5g] {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .home-content[b-ozc5ap9b5g] {
        padding: 48px 20px 48px;
    }
    
    .title-main[b-ozc5ap9b5g] {
        font-size: 42px;
        letter-spacing: 2px;
    }
    
    .title-subtitle[b-ozc5ap9b5g] {
        font-size: 16px;
        letter-spacing: 2px;
    }
    
    .hero-description[b-ozc5ap9b5g] {
        font-size: 16px;
    }
    
    .section-title[b-ozc5ap9b5g] {
        font-size: 28px;
    }
    
    .adventure-title[b-ozc5ap9b5g] {
        font-size: 28px;
    }
    
    .adventure-description[b-ozc5ap9b5g] {
        font-size: 16px;
    }
    
    .rpg-btn[b-ozc5ap9b5g] {
        padding: 16px 36px;
        font-size: 16px;
    }
    
    .feature-card[b-ozc5ap9b5g] {
        padding: 24px;
    }
    
    .adventure-card[b-ozc5ap9b5g] {
        padding: 48px 24px;
    }
    
    .badge-text[b-ozc5ap9b5g] {
        font-size: 11px;
        letter-spacing: 1px;
    }
    
    .badge-ornament[b-ozc5ap9b5g] {
        font-size: 14px;
    }
    
    .stats-showcase[b-ozc5ap9b5g] {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .stat-card[b-ozc5ap9b5g] {
        width: 100%;
        max-width: 280px;
    }
}

/* Animation for fade in */
@keyframes fadeIn-b-ozc5ap9b5g {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Hero Section Divider */
.hero-section-divider[b-ozc5ap9b5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 48px auto 32px;
    max-width: 400px;
    opacity: 0.5;
}

.hero-section-divider .divider-ornament[b-ozc5ap9b5g] {
    color: #c9b278;
    font-size: 8px;
    text-shadow: 0 0 8px rgba(201, 178, 120, 0.4);
}

.hero-section-divider .divider-line[b-ozc5ap9b5g] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.3) 50%, transparent 100%);
}

/* Discord CTA - Compact Banner with Venture Theme */
.discord-cta[b-ozc5ap9b5g] {
    margin: 0 auto 0;
    max-width: 615px;
    opacity: 0;
    animation: fadeIn-b-ozc5ap9b5g 1s ease-out forwards;
    animation-delay: calc(0.6s + var(--animation-offset, 0s));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 28px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.85) 0%, rgba(35, 40, 70, 0.85) 100%);
    border: 2px solid rgba(88, 101, 242, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(88, 101, 242, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.discord-cta[b-ozc5ap9b5g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.08) 0%, rgba(88, 101, 242, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.discord-cta:hover[b-ozc5ap9b5g] {
    border-color: rgba(88, 101, 242, 0.6);
    box-shadow: 
        0 6px 28px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(88, 101, 242, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.discord-cta:hover[b-ozc5ap9b5g]::before {
    opacity: 1;
}

.discord-cta-icon[b-ozc5ap9b5g] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #5865f2;
    filter: drop-shadow(0 2px 8px rgba(88, 101, 242, 0.5));
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.discord-cta:hover .discord-cta-icon[b-ozc5ap9b5g] {
    color: #7289ff;
    filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.7));
    transform: scale(1.1);
}

.discord-cta-text[b-ozc5ap9b5g] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #e8d8a8;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.discord-cta-link[b-ozc5ap9b5g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.15) 100%);
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 8px;
    color: #e8d8a8;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Cinzel', 'Georgia', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.2);
    position: relative;
    z-index: 1;
}

.discord-cta-link:hover[b-ozc5ap9b5g] {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.3) 0%, rgba(88, 101, 242, 0.25) 100%);
    border-color: rgba(88, 101, 242, 0.6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35);
    transform: translateY(-1px);
}

.discord-cta-link svg[b-ozc5ap9b5g] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.discord-cta-link:hover svg[b-ozc5ap9b5g] {
    transform: translateX(2px);
}

/* Responsive adjustments for Discord CTA */
@media (max-width: 768px) {
    .hero-section-divider[b-ozc5ap9b5g] {
        margin: 40px auto 24px;
    }
    
    .discord-cta[b-ozc5ap9b5g] {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
        gap: 12px;
    }
    
    .discord-cta-text[b-ozc5ap9b5g] {
        font-size: 14px;
    }
    
    .discord-cta-icon[b-ozc5ap9b5g] {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 480px) {
    .hero-section-divider[b-ozc5ap9b5g] {
        margin: 32px auto 20px;
        max-width: 300px;
    }
    
    .discord-cta[b-ozc5ap9b5g] {
        margin: 0 auto 0;
        padding: 18px 16px;
    }
    
    .discord-cta-text[b-ozc5ap9b5g] {
        font-size: 13px;
    }
    
    .discord-cta-link[b-ozc5ap9b5g] {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* /Pages/Login.razor.rz.scp.css */
/* Reset and Base */
*[b-f7gxcqdkxk] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-container[b-f7gxcqdkxk] {
    min-height: calc(100vh - 48px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 30%, #0f0c1f 60%, #14162a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    padding: 40px 20px;
}

/* Animated Background */
.animated-background[b-f7gxcqdkxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.mystical-orb[b-f7gxcqdkxk] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    animation: mystical-float-b-f7gxcqdkxk 30s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
    will-change: transform;
}

.orb-1[b-f7gxcqdkxk] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200, 180, 100, 0.4), rgba(139, 92, 66, 0.2));
    top: -20%;
    left: -15%;
    animation-delay: calc(0s + var(--animation-offset, 0s));
}

.orb-2[b-f7gxcqdkxk] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 80, 140, 0.35), rgba(70, 50, 100, 0.2));
    bottom: -20%;
    right: -15%;
    animation-delay: calc(10s + var(--animation-offset, 0s));
}

.orb-3[b-f7gxcqdkxk] {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(80, 120, 180, 0.3), rgba(50, 80, 130, 0.15));
    top: 40%;
    right: 10%;
    animation-delay: calc(20s + var(--animation-offset, 0s));
}

@keyframes mystical-float-b-f7gxcqdkxk {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(100px, -100px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-80px, 80px) scale(0.95) rotate(240deg);
    }
}

/* Magic Particles */
.particle-container[b-f7gxcqdkxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.magic-particle[b-f7gxcqdkxk] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(200, 180, 100, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200, 180, 100, 0.8);
    left: var(--x);
    top: var(--y);
    animation: particle-drift-b-f7gxcqdkxk 15s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0s) + var(--animation-offset, 0s));
    opacity: 0;
}

@keyframes particle-drift-b-f7gxcqdkxk {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 0.3 - 50px), calc(var(--y) * -0.2 - 80px));
    }
}

.login-content[b-f7gxcqdkxk] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    animation: fadeInUp-b-f7gxcqdkxk 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes fadeInUp-b-f7gxcqdkxk {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card[b-f7gxcqdkxk] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    color: white;
}

.card-border[b-f7gxcqdkxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(200, 180, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-glow[b-f7gxcqdkxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.05) 0%, rgba(200, 180, 100, 0.02) 100%);
    opacity: 1;
    border-radius: 20px;
    pointer-events: none;
}

/* Scroll Decorations */
.scroll-decoration[b-f7gxcqdkxk] {
    position: absolute;
    width: 30px;
    height: 30px;
    border-style: solid;
    border-color: rgba(200, 180, 100, 0.5);
    pointer-events: none;
    z-index: 2;
}

.scroll-top-left[b-f7gxcqdkxk] {
    top: 15px;
    left: 15px;
    border-width: 2px 0 0 2px;
    border-radius: 8px 0 0 0;
}

.scroll-top-right[b-f7gxcqdkxk] {
    top: 15px;
    right: 15px;
    border-width: 2px 2px 0 0;
    border-radius: 0 8px 0 0;
}

.scroll-bottom-left[b-f7gxcqdkxk] {
    bottom: 15px;
    left: 15px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 8px;
}

.scroll-bottom-right[b-f7gxcqdkxk] {
    bottom: 15px;
    right: 15px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 8px 0;
}

/* Login Header */
.login-header[b-f7gxcqdkxk] {
    position: relative;
    padding: 48px 40px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 180, 100, 0.2);
    z-index: 1;
}

.ancient-badge[b-f7gxcqdkxk] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.8) 0%, rgba(35, 40, 70, 0.8) 100%);
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.badge-ornament[b-f7gxcqdkxk] {
    font-size: 14px;
    color: #c9b278;
}

.badge-text[b-f7gxcqdkxk] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 11px;
    font-weight: 600;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-title[b-f7gxcqdkxk] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 6px;
    color: rgb(232, 216, 168);
    text-shadow: 
        0 0 30px rgba(200, 180, 100, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(200, 180, 100, 0.2);
    text-transform: uppercase;
    margin: 0 0 8px 0;
    background: linear-gradient(180deg, #fff 0%, #e8d8a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle[b-f7gxcqdkxk] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 4px;
    color: #c9b278;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(201, 178, 120, 0.4);
    margin: 0;
}

/* Login Body */
.login-body[b-f7gxcqdkxk] {
    position: relative;
    padding: 40px;
    z-index: 1;
}

.form-title[b-f7gxcqdkxk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 28px;
    font-weight: 700;
    color: #e8d8a8;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
}

.form-icon[b-f7gxcqdkxk] {
    font-size: 28px;
    filter: drop-shadow(0 0 10px rgba(200, 180, 100, 0.5));
}

.form-description[b-f7gxcqdkxk] {
    text-align: center;
    margin: 0 0 32px 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
}

.login-form[b-f7gxcqdkxk] {
    margin-bottom: 30px;
}

.rpg-input[b-f7gxcqdkxk] {
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 8px;
    font-size: 15px;
    color: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.rpg-input[b-f7gxcqdkxk]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rpg-input:focus[b-f7gxcqdkxk] {
    outline: none;
    border-color: rgba(200, 180, 100, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2);
}

/* RPG Buttons */
.rpg-btn[b-f7gxcqdkxk] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 32px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    color: #e8d8a8;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.rpg-btn .btn-glow[b-f7gxcqdkxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.15) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rpg-btn:hover:not(:disabled) .btn-glow[b-f7gxcqdkxk] {
    opacity: 1;
}

.rpg-btn .btn-icon[b-f7gxcqdkxk],
.rpg-btn .btn-text[b-f7gxcqdkxk] {
    position: relative;
    z-index: 1;
}

.rpg-btn .btn-icon[b-f7gxcqdkxk] {
    font-size: 18px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-btn:hover:not(:disabled)[b-f7gxcqdkxk] {
    transform: translateY(-2px);
    border-color: rgba(200, 180, 100, 0.9);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn:hover:not(:disabled) .btn-icon[b-f7gxcqdkxk] {
    transform: scale(1.2) rotate(5deg);
}

.rpg-btn:active:not(:disabled)[b-f7gxcqdkxk] {
    transform: translateY(0);
}

.rpg-btn.primary-btn[b-f7gxcqdkxk] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.3) 0%, rgba(140, 100, 40, 0.3) 100%);
    border-color: rgba(200, 180, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.rpg-btn:disabled[b-f7gxcqdkxk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpg-btn.google-btn[b-f7gxcqdkxk] {
    margin-top: 0;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
}

.google-icon[b-f7gxcqdkxk] {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

.login-toggle[b-f7gxcqdkxk] {
    margin-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.login-toggle a[b-f7gxcqdkxk] {
    color: #c9b278;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.3);
    transition: all 0.3s ease;
}

.login-toggle a:hover[b-f7gxcqdkxk] {
    color: #e8d8a8;
    text-shadow: 0 0 15px rgba(201, 178, 120, 0.5);
}

.error-message[b-f7gxcqdkxk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(180, 50, 50, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    color: #ffb3b3;
    font-size: 14px;
}

.error-icon[b-f7gxcqdkxk] {
    font-size: 16px;
}

/* Divider */
.divider[b-f7gxcqdkxk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 30px 0;
}

.divider-ornament[b-f7gxcqdkxk] {
    color: #c9b278;
    font-size: 10px;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.6);
}

.divider-line[b-f7gxcqdkxk] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.4) 50%, transparent 100%);
}

.divider-text[b-f7gxcqdkxk] {
    font-size: 12px;
    color: rgba(200, 180, 100, 0.6);
    letter-spacing: 2px;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-container[b-f7gxcqdkxk] {
        padding: 20px 16px;
    }
    
    .login-content[b-f7gxcqdkxk] {
        max-width: 100%;
    }
    
    .login-header[b-f7gxcqdkxk] {
        padding: 32px 24px 24px;
    }
    
    .hero-title[b-f7gxcqdkxk] {
        font-size: 42px;
        letter-spacing: 4px;
    }
    
    .hero-subtitle[b-f7gxcqdkxk] {
        font-size: 14px;
        letter-spacing: 3px;
    }
    
    .login-body[b-f7gxcqdkxk] {
        padding: 32px 24px;
    }
    
    .form-title[b-f7gxcqdkxk] {
        font-size: 24px;
    }
    
    .scroll-decoration[b-f7gxcqdkxk] {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .login-header[b-f7gxcqdkxk] {
        padding: 24px 20px 20px;
    }
    
    .hero-title[b-f7gxcqdkxk] {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    .hero-subtitle[b-f7gxcqdkxk] {
        font-size: 12px;
        letter-spacing: 2px;
    }
    
    .login-body[b-f7gxcqdkxk] {
        padding: 24px 20px;
    }
    
    .form-title[b-f7gxcqdkxk] {
        font-size: 22px;
    }
    
    .rpg-btn[b-f7gxcqdkxk] {
        padding: 14px 24px;
        font-size: 14px;
    }
    
    .badge-text[b-f7gxcqdkxk] {
        font-size: 10px;
        letter-spacing: 1px;
    }
    
    .scroll-decoration[b-f7gxcqdkxk] {
        width: 20px;
        height: 20px;
    }
    
    .scroll-top-left[b-f7gxcqdkxk],
    .scroll-top-right[b-f7gxcqdkxk] {
        top: 12px;
    }
    
    .scroll-bottom-left[b-f7gxcqdkxk],
    .scroll-bottom-right[b-f7gxcqdkxk] {
        bottom: 12px;
    }
    
    .scroll-top-left[b-f7gxcqdkxk],
    .scroll-bottom-left[b-f7gxcqdkxk] {
        left: 12px;
    }
    
    .scroll-top-right[b-f7gxcqdkxk],
    .scroll-bottom-right[b-f7gxcqdkxk] {
        right: 12px;
    }
}
/* /Pages/Novel.razor.rz.scp.css */
/* Reset and Base */
*[b-sdzpjs3w68] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Game Container - replaces MudContainer */
.game-container[b-sdzpjs3w68] {
    padding: 16px;
    width: 100%;
    max-width: 100%;
}

/* Novel Container - Initial Setup Screen */
.novel-container[b-sdzpjs3w68] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 30%, #0f0c1f 60%, #14162a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    padding: 40px 20px;
}

/* Animated Background */
.animated-background[b-sdzpjs3w68] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.mystical-orb[b-sdzpjs3w68] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    animation: mystical-float-b-sdzpjs3w68 30s ease-in-out infinite;
    will-change: transform;
}

.orb-1[b-sdzpjs3w68] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200, 180, 100, 0.4), rgba(139, 92, 66, 0.2));
    top: -20%;
    left: -15%;
    animation-delay: 0s;
}

.orb-2[b-sdzpjs3w68] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 80, 140, 0.35), rgba(70, 50, 100, 0.2));
    bottom: -20%;
    right: -15%;
    animation-delay: 10s;
}

.orb-3[b-sdzpjs3w68] {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(80, 120, 180, 0.3), rgba(50, 80, 130, 0.15));
    top: 40%;
    right: 10%;
    animation-delay: 20s;
}

@keyframes mystical-float-b-sdzpjs3w68 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(100px, -100px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-80px, 80px) scale(0.95) rotate(240deg);
    }
}

/* Magic Particles */
.particle-container[b-sdzpjs3w68] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.magic-particle[b-sdzpjs3w68] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(200, 180, 100, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200, 180, 100, 0.8);
    left: var(--x);
    top: var(--y);
    animation: particle-drift-b-sdzpjs3w68 15s ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes particle-drift-b-sdzpjs3w68 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 0.3 - 50px), calc(var(--y) * -0.2 - 80px));
    }
}

/* Adventure Setup Content */
.adventure-setup-content[b-sdzpjs3w68] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    animation: fadeInUp-b-sdzpjs3w68 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp-b-sdzpjs3w68 {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adventure Card */
.adventure-card[b-sdzpjs3w68] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.95) 0%, rgba(35, 40, 70, 0.95) 100%);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    color: white;
}

.card-border[b-sdzpjs3w68] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.5);
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(200, 180, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-glow[b-sdzpjs3w68] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.08) 0%, rgba(200, 180, 100, 0.03) 100%);
    opacity: 1;
    border-radius: 20px;
    pointer-events: none;
}

/* Scroll Decorations */
.scroll-decoration[b-sdzpjs3w68] {
    position: absolute;
    width: 35px;
    height: 35px;
    border-style: solid;
    border-color: rgba(200, 180, 100, 0.5);
    pointer-events: none;
    z-index: 2;
}

.scroll-top-left[b-sdzpjs3w68] {
    top: 16px;
    left: 16px;
    border-width: 2px 0 0 2px;
    border-radius: 8px 0 0 0;
}

.scroll-top-right[b-sdzpjs3w68] {
    top: 16px;
    right: 16px;
    border-width: 2px 2px 0 0;
    border-radius: 0 8px 0 0;
}

.scroll-bottom-left[b-sdzpjs3w68] {
    bottom: 16px;
    left: 16px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 8px;
}

.scroll-bottom-right[b-sdzpjs3w68] {
    bottom: 16px;
    right: 16px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 8px 0;
}

/* Card Header */
.card-header[b-sdzpjs3w68] {
    position: relative;
    padding: 48px 40px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 180, 100, 0.2);
    z-index: 1;
}

.quest-marker[b-sdzpjs3w68] {
    font-size: 56px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 16px rgba(200, 180, 100, 0.5));
    animation: quest-float-b-sdzpjs3w68 3s ease-in-out infinite;
}

@keyframes quest-float-b-sdzpjs3w68 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.card-title[b-sdzpjs3w68] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgb(232, 216, 168);
    text-shadow: 
        0 0 30px rgba(200, 180, 100, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(200, 180, 100, 0.2);
    text-transform: uppercase;
    margin: 0 0 12px 0;
    background: linear-gradient(180deg, #fff 0%, #e8d8a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.card-subtitle[b-sdzpjs3w68] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* Card Divider */
.card-divider[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 40px;
    margin: 24px 0;
}

.divider-ornament[b-sdzpjs3w68] {
    color: #c9b278;
    font-size: 10px;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.6);
}

.divider-line[b-sdzpjs3w68] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.4) 50%, transparent 100%);
}

/* Card Body */
.card-body[b-sdzpjs3w68] {
    position: relative;
    padding: 0 40px 48px;
    z-index: 1;
}

/* Form Section */
.form-section[b-sdzpjs3w68] {
    margin-bottom: 32px;
}

.section-title[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 24px;
    font-weight: 700;
    color: #e8d8a8;
    margin: 0 0 24px 0;
    letter-spacing: 2px;
}

.section-icon[b-sdzpjs3w68] {
    font-size: 24px;
    filter: drop-shadow(0 0 10px rgba(200, 180, 100, 0.5));
}

/* RPG Input Group */
.rpg-input-group[b-sdzpjs3w68] {
    margin-bottom: 20px;
}

.rpg-label[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #c9b278;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-icon[b-sdzpjs3w68] {
    font-size: 14px;
}

.rpg-input[b-sdzpjs3w68] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 8px;
    font-size: 15px;
    color: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.rpg-input[b-sdzpjs3w68]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rpg-input:focus[b-sdzpjs3w68] {
    outline: none;
    border-color: rgba(200, 180, 100, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2);
}

/* RPG Buttons */
.rpg-btn[b-sdzpjs3w68] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 32px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    color: #e8d8a8;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(200, 180, 100, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-btn .btn-glow[b-sdzpjs3w68] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.15) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rpg-btn:hover:not(:disabled) .btn-glow[b-sdzpjs3w68] {
    opacity: 1;
}

.rpg-btn .btn-icon[b-sdzpjs3w68],
.rpg-btn .btn-text[b-sdzpjs3w68] {
    position: relative;
    z-index: 1;
}

.rpg-btn .btn-icon[b-sdzpjs3w68] {
    font-size: 18px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-btn:hover:not(:disabled)[b-sdzpjs3w68] {
    transform: translateY(-2px);
    border-color: rgba(200, 180, 100, 0.9);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 180, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn:hover:not(:disabled) .btn-icon[b-sdzpjs3w68] {
    transform: scale(1.2) rotate(5deg);
}

.rpg-btn:active:not(:disabled)[b-sdzpjs3w68] {
    transform: translateY(0);
}

.rpg-btn.primary-btn[b-sdzpjs3w68] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.3) 0%, rgba(140, 100, 40, 0.3) 100%);
    border-color: rgba(200, 180, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.rpg-btn.secondary-btn[b-sdzpjs3w68] {
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
    border-color: rgba(200, 180, 100, 0.5);
}

.rpg-btn.discord-venture-btn[b-sdzpjs3w68] {
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    border: 2px solid rgba(88, 101, 242, 0.5);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(88, 101, 242, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-btn.discord-venture-btn .btn-glow[b-sdzpjs3w68] {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.05) 100%);
}

.rpg-btn.discord-venture-btn:hover:not(:disabled)[b-sdzpjs3w68] {
    border-color: rgba(88, 101, 242, 0.8);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(88, 101, 242, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn.discord-venture-btn .btn-discord-icon[b-sdzpjs3w68] {
    position: relative;
    z-index: 1;
    color: #5865f2;
    filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.6));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-btn.discord-venture-btn:hover:not(:disabled) .btn-discord-icon[b-sdzpjs3w68] {
    color: #7289ff;
    filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.8));
    transform: scale(1.2) rotate(5deg);
}

.rpg-btn.discord-venture-btn .btn-text[b-sdzpjs3w68] {
    color: #e8d8a8;
}

.rpg-btn:disabled[b-sdzpjs3w68] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Section Divider */
.section-divider[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px 0;
}

.divider-text[b-sdzpjs3w68] {
    font-size: 12px;
    color: rgba(200, 180, 100, 0.6);
    letter-spacing: 2px;
    font-weight: 600;
}

/* Error Message */
.error-message[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 24px;
    background: rgba(180, 50, 50, 0.2);
    border: 2px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    color: #ffb3b3;
    font-size: 14px;
    position: relative;
}

.error-icon[b-sdzpjs3w68] {
    font-size: 20px;
    flex-shrink: 0;
}

.error-text[b-sdzpjs3w68] {
    flex: 1;
}

.error-close[b-sdzpjs3w68] {
    background: none;
    border: none;
    color: #ffb3b3;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.error-close:hover[b-sdzpjs3w68] {
    color: #fff;
    transform: scale(1.2);
}

/* Adventure Header Container - For Active Adventures */
.adventure-header-container[b-sdzpjs3w68] {
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 100%);
    border-bottom: 2px solid rgba(200, 180, 100, 0.3);
    padding: 16px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.adventure-header[b-sdzpjs3w68] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.adventure-id-section[b-sdzpjs3w68] {
    flex: 1;
    min-width: 280px;
}

.id-display[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.8) 0%, rgba(35, 40, 70, 0.8) 100%);
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.id-icon[b-sdzpjs3w68] {
    font-size: 24px;
    filter: drop-shadow(0 0 10px rgba(200, 180, 100, 0.5));
}

.id-content[b-sdzpjs3w68] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.id-label[b-sdzpjs3w68] {
    font-size: 11px;
    color: rgba(200, 180, 100, 0.8);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.id-value[b-sdzpjs3w68] {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.icon-btn[b-sdzpjs3w68] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 180, 100, 0.3);
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn .btn-icon[b-sdzpjs3w68] {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.icon-btn:hover[b-sdzpjs3w68] {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(200, 180, 100, 0.6);
    box-shadow: 0 0 15px rgba(200, 180, 100, 0.3);
}

.icon-btn:hover .btn-icon[b-sdzpjs3w68] {
    transform: scale(1.15);
}

.adventure-actions[b-sdzpjs3w68] {
    display: flex;
    gap: 12px;
}

.rpg-btn.settings-btn[b-sdzpjs3w68] {
    width: auto;
    padding: 12px 24px;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .novel-container[b-sdzpjs3w68] {
        padding: 20px 16px;
    }
    
    .adventure-setup-content[b-sdzpjs3w68] {
        max-width: 100%;
    }
    
    .card-header[b-sdzpjs3w68] {
        padding: 32px 24px 24px;
    }
    
    .card-title[b-sdzpjs3w68] {
        font-size: 32px;
        letter-spacing: 2px;
    }
    
    .quest-marker[b-sdzpjs3w68] {
        font-size: 48px;
    }
    
    .card-divider[b-sdzpjs3w68],
    .card-body[b-sdzpjs3w68] {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .card-body[b-sdzpjs3w68] {
        padding-bottom: 32px;
    }
    
    .section-title[b-sdzpjs3w68] {
        font-size: 20px;
    }
    
    .scroll-decoration[b-sdzpjs3w68] {
        width: 25px;
        height: 25px;
    }
    
    .adventure-header[b-sdzpjs3w68] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .adventure-id-section[b-sdzpjs3w68] {
        min-width: 100%;
    }
    
    .adventure-actions[b-sdzpjs3w68] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .card-header[b-sdzpjs3w68] {
        padding: 24px 20px 20px;
    }
    
    .card-title[b-sdzpjs3w68] {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    .quest-marker[b-sdzpjs3w68] {
        font-size: 40px;
    }
    
    .card-divider[b-sdzpjs3w68],
    .card-body[b-sdzpjs3w68] {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .card-body[b-sdzpjs3w68] {
        padding-bottom: 24px;
    }
    
    .section-title[b-sdzpjs3w68] {
        font-size: 18px;
    }
    
    .rpg-btn[b-sdzpjs3w68] {
        padding: 14px 24px;
        font-size: 14px;
    }
    
    .scroll-decoration[b-sdzpjs3w68] {
        width: 20px;
        height: 20px;
    }
    
    .scroll-top-left[b-sdzpjs3w68],
    .scroll-top-right[b-sdzpjs3w68] {
        top: 12px;
    }
    
    .scroll-bottom-left[b-sdzpjs3w68],
    .scroll-bottom-right[b-sdzpjs3w68] {
        bottom: 12px;
    }
    
    .scroll-top-left[b-sdzpjs3w68],
    .scroll-bottom-left[b-sdzpjs3w68] {
        left: 12px;
    }
    
    .scroll-top-right[b-sdzpjs3w68],
    .scroll-bottom-right[b-sdzpjs3w68] {
        right: 12px;
    }
    
    .adventure-header-container[b-sdzpjs3w68] {
        padding: 12px 16px;
    }
    
    .id-display[b-sdzpjs3w68] {
        padding: 10px 16px;
    }
}

/* Manual Load Divider */
.manual-load-divider[b-sdzpjs3w68] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.manual-load-divider .divider-line[b-sdzpjs3w68] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.3) 50%, transparent 100%);
}

.manual-load-divider .divider-text[b-sdzpjs3w68] {
    font-size: 12px;
    color: rgba(200, 180, 100, 0.5);
    letter-spacing: 1px;
    text-transform: lowercase;
}
/* /Pages/Stories.razor.rz.scp.css */
/* Reset and Base */
*[b-mek4dwee5n] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.stories-container[b-mek4dwee5n] {
    min-height: calc(100vh - 48px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0a0c1a 0%, #1a1428 30%, #0f0c1f 60%, #14162a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    padding: 40px 20px;
}

/* Animated Background */
.animated-background[b-mek4dwee5n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.mystical-orb[b-mek4dwee5n] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    animation: mystical-float-b-mek4dwee5n 30s ease-in-out infinite;
    animation-delay: var(--animation-offset, 0s);
    will-change: transform;
}

.orb-1[b-mek4dwee5n] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200, 180, 100, 0.4), rgba(139, 92, 66, 0.2));
    top: -20%;
    left: -15%;
    animation-delay: calc(0s + var(--animation-offset, 0s));
}

.orb-2[b-mek4dwee5n] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 80, 140, 0.35), rgba(70, 50, 100, 0.2));
    bottom: -20%;
    right: -15%;
    animation-delay: calc(10s + var(--animation-offset, 0s));
}

.orb-3[b-mek4dwee5n] {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(80, 120, 180, 0.3), rgba(50, 80, 130, 0.15));
    top: 40%;
    right: 10%;
    animation-delay: calc(20s + var(--animation-offset, 0s));
}

@keyframes mystical-float-b-mek4dwee5n {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(100px, -100px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-80px, 80px) scale(0.95) rotate(240deg);
    }
}

/* Magic Particles */
.particle-container[b-mek4dwee5n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.magic-particle[b-mek4dwee5n] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(200, 180, 100, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200, 180, 100, 0.8);
    left: var(--x);
    top: var(--y);
    animation: particle-drift-b-mek4dwee5n 15s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0s) + var(--animation-offset, 0s));
    opacity: 0;
}

@keyframes particle-drift-b-mek4dwee5n {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 0.3 - 50px), calc(var(--y) * -0.2 - 80px));
    }
}

.stories-content[b-mek4dwee5n] {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInUp-b-mek4dwee5n 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--animation-offset, 0s);
}

@keyframes fadeInUp-b-mek4dwee5n {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.stories-header[b-mek4dwee5n] {
    text-align: center;
    margin-bottom: 24px;
}

.ancient-badge[b-mek4dwee5n] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.8) 0%, rgba(35, 40, 70, 0.8) 100%);
    border: 2px solid rgba(200, 180, 100, 0.4);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.badge-ornament[b-mek4dwee5n] {
    font-size: 14px;
    color: #c9b278;
}

.badge-text[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 11px;
    font-weight: 600;
    color: #e8d8a8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-title[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgb(232, 216, 168);
    text-shadow: 
        0 0 30px rgba(200, 180, 100, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(200, 180, 100, 0.2);
    text-transform: uppercase;
    margin: 0 0 8px 0;
    background: linear-gradient(180deg, #fff 0%, #e8d8a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.page-subtitle[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 4px;
    color: #c9b278;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(201, 178, 120, 0.4);
    margin: 0;
}

.header-divider[b-mek4dwee5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px auto 32px;
    max-width: 400px;
}

.divider-ornament[b-mek4dwee5n] {
    color: #c9b278;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(201, 178, 120, 0.6);
}

.divider-line[b-mek4dwee5n] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 178, 120, 0.6) 50%, transparent 100%);
}

/* New Story Section */
.new-story-section[b-mek4dwee5n] {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.new-story-btn[b-mek4dwee5n] {
    max-width: 300px;
}

/* Loading State */
.loading-state[b-mek4dwee5n] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner[b-mek4dwee5n] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(200, 180, 100, 0.2);
    border-top-color: #c9b278;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin-b-mek4dwee5n 1s linear infinite;
}

@keyframes spin-b-mek4dwee5n {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 16px;
    color: #c9b278;
    letter-spacing: 1px;
}

/* Empty State */
.empty-state[b-mek4dwee5n] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-mek4dwee5n] {
    font-size: 64px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 16px rgba(200, 180, 100, 0.5));
}

.empty-title[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 28px;
    font-weight: 700;
    color: #e8d8a8;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.empty-description[b-mek4dwee5n] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Stories List */
.stories-list[b-mek4dwee5n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Story Card */
.story-card[b-mek4dwee5n] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.story-card:hover[b-mek4dwee5n] {
    transform: translateY(-2px);
}

.story-card:hover .card-border[b-mek4dwee5n] {
    border-color: rgba(200, 180, 100, 0.6);
    box-shadow: 0 0 20px rgba(200, 180, 100, 0.3);
}

.story-card:hover .card-glow[b-mek4dwee5n] {
    opacity: 1;
}

.card-border[b-mek4dwee5n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 180, 100, 0.3);
    border-radius: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.card-glow[b-mek4dwee5n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.05) 0%, rgba(200, 180, 100, 0.02) 100%);
    opacity: 0;
    border-radius: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.story-info[b-mek4dwee5n] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.story-title-row[b-mek4dwee5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.story-title[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 22px;
    font-weight: 700;
    color: #e8d8a8;
    margin: 0;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-edit-container[b-mek4dwee5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.title-input[b-mek4dwee5n] {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(200, 180, 100, 0.5);
    border-radius: 6px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 18px;
    font-weight: 700;
    color: #e8d8a8;
    outline: none;
}

.title-input:focus[b-mek4dwee5n] {
    border-color: rgba(200, 180, 100, 0.8);
    box-shadow: 0 0 15px rgba(200, 180, 100, 0.3);
}

.icon-btn[b-mek4dwee5n] {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 180, 100, 0.3);
    border-radius: 6px;
    color: #c9b278;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.icon-btn:hover[b-mek4dwee5n] {
    background: rgba(200, 180, 100, 0.2);
    border-color: rgba(200, 180, 100, 0.5);
}

.edit-btn[b-mek4dwee5n] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.story-card:hover .edit-btn[b-mek4dwee5n] {
    opacity: 1;
}

.save-btn:hover[b-mek4dwee5n] {
    color: #8eff8e;
    border-color: rgba(100, 200, 100, 0.5);
}

.cancel-btn:hover[b-mek4dwee5n] {
    color: #ff8e8e;
    border-color: rgba(200, 100, 100, 0.5);
}

.story-meta[b-mek4dwee5n] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.meta-item[b-mek4dwee5n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.meta-icon[b-mek4dwee5n] {
    font-size: 14px;
}

.story-id[b-mek4dwee5n] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

.id-label[b-mek4dwee5n] {
    color: rgba(200, 180, 100, 0.5);
    margin-right: 4px;
}

.story-actions[b-mek4dwee5n] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* RPG Buttons */
.rpg-btn[b-mek4dwee5n] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid rgba(200, 180, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(35, 40, 70, 0.9) 100%);
    color: #e8d8a8;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(200, 180, 100, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.rpg-btn .btn-glow[b-mek4dwee5n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(200, 180, 100, 0.15) 0%, rgba(200, 180, 100, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rpg-btn:hover:not(:disabled) .btn-glow[b-mek4dwee5n] {
    opacity: 1;
}

.rpg-btn .btn-icon[b-mek4dwee5n],
.rpg-btn .btn-text[b-mek4dwee5n] {
    position: relative;
    z-index: 1;
}

.rpg-btn:hover:not(:disabled)[b-mek4dwee5n] {
    transform: translateY(-2px);
    border-color: rgba(200, 180, 100, 0.9);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(200, 180, 100, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn:active:not(:disabled)[b-mek4dwee5n] {
    transform: translateY(0);
}

.rpg-btn:disabled[b-mek4dwee5n] {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpg-btn.primary-btn[b-mek4dwee5n] {
    background: linear-gradient(145deg, rgba(180, 140, 60, 0.3) 0%, rgba(140, 100, 40, 0.3) 100%);
    border-color: rgba(200, 180, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(200, 180, 100, 0.5);
}

.rpg-btn.secondary-btn[b-mek4dwee5n] {
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.7) 0%, rgba(35, 40, 70, 0.7) 100%);
}

.rpg-btn.resume-btn[b-mek4dwee5n] {
    background: linear-gradient(145deg, rgba(60, 140, 80, 0.3) 0%, rgba(40, 100, 60, 0.3) 100%);
    border-color: rgba(100, 200, 120, 0.6);
    color: #c8f0d0;
}

.rpg-btn.resume-btn:hover[b-mek4dwee5n] {
    border-color: rgba(100, 200, 120, 0.9);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(100, 200, 120, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn.delete-btn[b-mek4dwee5n] {
    background: linear-gradient(145deg, rgba(80, 40, 40, 0.3) 0%, rgba(60, 30, 30, 0.3) 100%);
    border-color: rgba(200, 100, 100, 0.5);
    color: #f0c8c8;
}

.rpg-btn.delete-btn:hover[b-mek4dwee5n] {
    border-color: rgba(200, 100, 100, 0.8);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(200, 100, 100, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rpg-btn.danger-btn[b-mek4dwee5n] {
    background: linear-gradient(145deg, rgba(180, 60, 60, 0.4) 0%, rgba(140, 40, 40, 0.4) 100%);
    border-color: rgba(255, 100, 100, 0.7);
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
}

.rpg-btn.danger-btn:hover[b-mek4dwee5n] {
    border-color: rgba(255, 100, 100, 0.9);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 100, 100, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Modal */
.modal-overlay[b-mek4dwee5n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-mek4dwee5n 0.2s ease;
}

@keyframes fadeIn-b-mek4dwee5n {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-card[b-mek4dwee5n] {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.98) 0%, rgba(35, 40, 70, 0.98) 100%);
    border-radius: 16px;
    padding: 32px;
    max-width: 450px;
    width: 100%;
    backdrop-filter: blur(20px);
    animation: slideUp-b-mek4dwee5n 0.3s ease;
}

@keyframes slideUp-b-mek4dwee5n {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-mek4dwee5n] {
    text-align: center;
    margin-bottom: 20px;
}

.modal-icon[b-mek4dwee5n] {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

.modal-title[b-mek4dwee5n] {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 24px;
    font-weight: 700;
    color: #e8d8a8;
    margin: 0;
    letter-spacing: 2px;
}

.modal-body[b-mek4dwee5n] {
    margin-bottom: 28px;
    text-align: center;
}

.modal-body p[b-mek4dwee5n] {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body strong[b-mek4dwee5n] {
    color: #e8d8a8;
}

.warning-text[b-mek4dwee5n] {
    color: rgba(255, 180, 180, 0.9) !important;
    font-size: 14px;
}

.modal-actions[b-mek4dwee5n] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Load More Section */
.load-more-section[b-mek4dwee5n] {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.load-more-btn[b-mek4dwee5n] {
    min-width: 250px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stories-container[b-mek4dwee5n] {
        padding: 24px 16px;
    }
    
    .page-title[b-mek4dwee5n] {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    .page-subtitle[b-mek4dwee5n] {
        font-size: 14px;
        letter-spacing: 2px;
    }
    
    .story-card[b-mek4dwee5n] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .story-actions[b-mek4dwee5n] {
        flex-direction: row;
        justify-content: stretch;
    }
    
    .story-actions .rpg-btn[b-mek4dwee5n] {
        flex: 1;
    }
    
    .modal-actions[b-mek4dwee5n] {
        flex-direction: column;
    }
    
    .modal-actions .rpg-btn[b-mek4dwee5n] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-title[b-mek4dwee5n] {
        font-size: 28px;
    }
    
    .story-title[b-mek4dwee5n] {
        font-size: 18px;
    }
    
    .story-meta[b-mek4dwee5n] {
        gap: 10px;
    }
    
    .meta-item[b-mek4dwee5n] {
        font-size: 13px;
    }
    
    .rpg-btn[b-mek4dwee5n] {
        padding: 10px 18px;
        font-size: 12px;
    }
}