/* --- Thematic Styling --- */
body {
    font-family: 'EB Garamond', serif;
    background-color: #f4e4bc;
    background-image:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.05) 100%),
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    color: #2D241E;
    height: 100vh;
    overflow: hidden;
}

.font-header {
    font-family: 'Playfair Display', serif;
}

.font-display {
    font-family: 'Cinzel', serif;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #8C7B6C;
    border-radius: 4px;
    border: 2px solid #f4e4bc;
}

::-webkit-scrollbar-thumb:hover {
    background: #5D4F45;
}

/* Bubbles */
.chat-bubble-jane {
    background-color: #FDFBF7;
    border: 1px solid #D6CFC7;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 4px 16px 16px 16px;
    position: relative;
}

.chat-bubble-jane::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 12px 0;
    border-color: transparent #D6CFC7 transparent transparent;
}

.chat-bubble-user {
    background-color: #2C3E50;
    color: #FDFBF7;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 16px 4px 16px 16px;
    position: relative;
}

/* Edit Button on User Messages */
.edit-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #B8860B;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 14px;
    z-index: 10;
}

.message {
    position: relative;
}

.message:hover .edit-btn {
    opacity: 1;
}

.edit-btn:hover {
    background: #DAA520;
    transform: scale(1.1);
}

/* Version Controls for AI Bubble */
.version-controls {
    border-top: 1px solid #e5e5e5;
    margin-top: 8px;
    padding-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #8C7B6C;
    font-family: sans-serif;
    user-select: none;
}

.v-btn {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.v-btn:hover {
    background: #EAE3D8;
    color: #4A4036;
}

.v-btn.disabled {
    opacity: 0.3;
    cursor: default;
}

/* Loading Animation */
.quill-loading::after {
    content: '✒';
    display: inline-block;
    animation: write 1s infinite alternate;
    margin-left: 5px;
}

@keyframes write {
    from {
        transform: rotate(0deg) translate(0, 0);
    }

    to {
        transform: rotate(15deg) translate(2px, -2px);
    }
}

/* UI Elements */
textarea:focus {
    outline: none;
    border-color: #8B7355;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.2);
}

.btn-regency {
    background: linear-gradient(to bottom, #4A4036, #2D241E);
    color: #FDFBF7;
    border: 1px solid #1A1510;
    transition: all 0.2s;
}

.btn-regency:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-regency:active {
    transform: translateY(0);
}

/* Modal Styling - Consistent with Style Guide */
.modal-title {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4a3728;
}

.modal-body {
    font-family: 'Cormorant Garamond', serif;
    color: #3d3328;
}

.modal-hint {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: rgba(61, 51, 40, 0.5);
}

/* Modal Button - matches .cc-btn pattern */
.modal-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 100%);
    color: #faf7f0;
    border: none;
    box-shadow: 0 2px 8px rgba(107, 68, 35, 0.3);
}

.modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 68, 35, 0.4);
}

.modal-btn-secondary {
    background: transparent;
    color: #8b7355;
    border: 1px solid rgba(139, 90, 43, 0.3);
}

.modal-btn-secondary:hover {
    background: rgba(139, 90, 43, 0.1);
}

.modal-btn-danger {
    background: linear-gradient(135deg, #8B0000 0%, #5c0000 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3);
}

.modal-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.4);
}

/* Save Slot Picker */
.save-slot-card {
    background: #FDFBF7;
    border: 1px solid rgba(139, 90, 43, 0.3);
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.save-slot-card:hover {
    border-color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 90, 43, 0.15);
}

.save-slot-card.empty {
    background: rgba(0, 0, 0, 0.03);
    border-style: dashed;
}

.save-slot-card.autosave {
    border-color: #6B8E23;
    background: rgba(107, 142, 35, 0.05);
}

.save-slot-card .slot-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #4A3728;
    margin-bottom: 4px;
}

.save-slot-card .slot-info {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    color: #8b7355;
}

.save-slot-card .slot-date {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.7rem;
    color: #a09080;
    margin-top: 4px;
}

.save-slot-card.empty .slot-name {
    color: #a09080;
    font-weight: 400;
    font-style: italic;
}

/* Dropdown Menu Styling */
.dropdown-menu {
    font-family: 'Cormorant Garamond', serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: #8b7355;
    transition: all 0.3s ease;
    padding: 10px 16px;
    display: block;
}

.dropdown-item:hover {
    background: rgba(139, 90, 43, 0.1);
    color: #4a3728;
}

.dropdown-item-header {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #4a3728;
    font-weight: 600;
}

.dropdown-item-danger {
    color: #8B0000;
}

.dropdown-item-danger:hover {
    background: rgba(139, 0, 0, 0.1);
    color: #5c0000;
}

/* Footer Info Text */
.footer-info {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #8b7355;
    opacity: 0.7;
}


/* Wax Seal Icons (E2 - Embossed Inner Ring) */
.seal-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
    position: relative;
}

.seal-icon::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1.5px solid;
}

.seal-jane {
    background: radial-gradient(circle at 30% 30%, #E8C547 0%, #A07C00 100%);
    color: #2C2010;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.seal-jane::before {
    border-color: rgba(255, 255, 255, 0.25);
}

.seal-player {
    background: radial-gradient(circle at 30% 30%, #722F37 0%, #3D1A1E 100%);
    color: #FDFBF7;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.seal-player::before {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ====================================
   START SCREEN - DAY CYCLE
   ==================================== */

.start-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0a1020;
    /* Dark blue-black to match night scene, prevents grey washout */
}

.start-bg-layer {
    position: absolute;
    inset: -50px;
    background-size: cover;
    background-position: center 42%;
}

.start-zoom-animate {
    animation: startSlowZoom 120s ease-in-out infinite alternate;
}

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

    100% {
        transform: scale(1.06) translateX(-10px);
    }
}

/* ===== DAY LAYERS ===== */
.start-bg-day-sky {
    background-image: url('assets/backgrounds/start/spring.png');
    z-index: 8;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    animation: startDayFadeSky 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

.start-bg-day-ground {
    background-image: url('assets/backgrounds/start/spring.png');
    z-index: 7;
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    animation: startDayFadeGround 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

/* ===== DUSK LAYERS ===== */
.start-bg-dusk-sky {
    background-image: url('assets/backgrounds/start/dusk.png');
    z-index: 6;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    animation: startDuskFadeSky 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

.start-bg-dusk-ground {
    background-image: url('assets/backgrounds/start/dusk.png');
    z-index: 5;
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    animation: startDuskFadeGround 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

/* ===== NIGHT LAYERS ===== */
.start-bg-night-sky {
    background-image: url('assets/backgrounds/start/night.png');
    z-index: 4;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    animation: startNightFadeSky 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

.start-bg-night-ground {
    background-image: url('assets/backgrounds/start/night.png');
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    animation: startNightFadeGround 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

/* ===== DAWN LAYERS ===== */
.start-bg-dawn-sky {
    background-image: url('assets/backgrounds/start/dawn.png');
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 65%);
    animation: startDawnFadeSky 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

.start-bg-dawn-ground {
    background-image: url('assets/backgrounds/start/dawn.png');
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 60%, black 100%);
    animation: startDawnFadeGround 60s ease-in-out infinite, startSlowZoom 120s ease-in-out infinite alternate;
}

/* 
 * Z-ORDER: Day(8) > Dusk(6) > Night(4) > Dawn(2)
 * APPROACH: Bottom layer is always 100%. Top layers fade OUT to reveal what's beneath.
 * Each layer reaches 100% BEFORE the layer above starts fading.
 *
 * Timeline (60s cycle):
 * 0-25%: Day visible (top layer at 100%)
 * 25-50%: Day fades out, Dusk was already 100% underneath
 * 50-75%: Dusk fades out, Night was already 100% underneath  
 * 75-100%: Night fades out, Dawn was already 100% underneath
 * Then Dawn fades out to reveal Day again
 */

/* DAY (z-8, highest): Visible 0-25%, then fades out */
@keyframes startDayFadeSky {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* DUSK (z-6): Must be at 100% by 20% (before Day fades). Fades out 45-55% */
@keyframes startDuskFadeSky {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    15% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* NIGHT (z-4): Must be at 100% by 45% (before Dusk fades). Fades out 70-80% */
@keyframes startNightFadeSky {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    40% {
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* DAWN (z-2, lowest): Must be at 100% by 70% (before Night fades). Fades out 95-100% */
@keyframes startDawnFadeSky {
    0% {
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    65% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Vignette and overlay */
.start-vignette {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
}

.start-text-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 100%);
}

/* ===== FIREFLIES ===== */
.start-fireflies {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 12;
}

.start-firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fffacd 0%, #ffd700 40%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 250, 205, 0.8), 0 0 20px 5px rgba(255, 215, 0, 0.4);
    animation: startFireflyFloat var(--duration) infinite ease-in-out, startFireflyGlow var(--glow-duration, 3s) infinite ease-in-out;
    animation-delay: var(--delay);
}

.start-firefly.wave1 {
    animation: startFireflyFloat var(--duration) infinite ease-in-out, startWave1Visibility 60s ease-in-out infinite;
}

.start-firefly.wave2 {
    animation: startFireflyFloat var(--duration) infinite ease-in-out, startWave2Visibility 60s ease-in-out infinite;
}

.start-firefly.wave3 {
    animation: startFireflyFloat var(--duration) infinite ease-in-out, startWave3Visibility 60s ease-in-out infinite;
}

@keyframes startFireflyFloat {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(5px, 10px);
    }

    40% {
        transform: translate(10px, 5px);
    }

    60% {
        transform: translate(8px, -12px);
    }

    80% {
        transform: translate(-5px, -8px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes startFireflyGlow {

    0%,
    100% {
        box-shadow: 0 0 6px 2px rgba(255, 250, 205, 0.5), 0 0 12px 4px rgba(255, 215, 0, 0.25);
    }

    50% {
        box-shadow: 0 0 15px 4px rgba(255, 250, 205, 1), 0 0 25px 8px rgba(255, 215, 0, 0.5);
    }
}

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

    36% {
        opacity: 0;
    }

    38% {
        opacity: 0.2;
    }

    41% {
        opacity: 0.5;
    }

    45% {
        opacity: 0.8;
    }

    68% {
        opacity: 1;
    }

    72% {
        opacity: 0.5;
    }

    74% {
        opacity: 0.2;
    }

    76% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    50% {
        opacity: 0;
    }

    52% {
        opacity: 0.2;
    }

    55% {
        opacity: 0.5;
    }

    58% {
        opacity: 0.8;
    }

    68% {
        opacity: 1;
    }

    72% {
        opacity: 0.4;
    }

    74% {
        opacity: 0.15;
    }

    76% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    58% {
        opacity: 0;
    }

    60% {
        opacity: 0.2;
    }

    63% {
        opacity: 0.5;
    }

    66% {
        opacity: 0.8;
    }

    68% {
        opacity: 1;
    }

    72% {
        opacity: 0.3;
    }

    74% {
        opacity: 0.1;
    }

    76% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ===== START SCREEN CONTENT ===== */
.start-content {
    position: relative;
    z-index: 20;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 80px 40px;
}

.start-title-container {
    text-align: center;
    animation: startFadeInUp 2s ease-out 0.5s both;
}

@keyframes startFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.start-pre-title {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 8px;
    color: #ffe066;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-shadow:
        0 0 30px rgba(0, 0, 0, 1),
        0 0 60px rgba(0, 0, 0, 1),
        0 2px 15px rgba(0, 0, 0, 1),
        0 0 80px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(255, 224, 100, 0.5);
}

.start-main-title {
    font-family: 'Cinzel', serif;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 12px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 50px rgba(0, 0, 0, 1), 0 0 100px rgba(0, 0, 0, 0.9), 0 4px 25px rgba(0, 0, 0, 1), 0 0 120px rgba(0, 0, 0, 0.8);
    line-height: 1.1;
}

.start-subtitle {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 20px;
    animation: startSubtitleShadow 60s ease-in-out infinite;
}

@keyframes startSubtitleShadow {

    0%,
    18% {
        text-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 1), 0 2px 20px rgba(0, 0, 0, 1), 0 0 80px rgba(0, 0, 0, 0.9);
    }

    25% {
        text-shadow: 0 0 20px rgba(0, 0, 0, 1), 0 0 40px rgba(0, 0, 0, 0.8), 0 2px 15px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 0.6);
    }

    35%,
    68% {
        text-shadow: 0 0 20px rgba(0, 0, 0, 1), 0 0 40px rgba(0, 0, 0, 0.8), 0 2px 15px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 0.6);
    }

    75% {
        text-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 1), 0 2px 20px rgba(0, 0, 0, 1), 0 0 80px rgba(0, 0, 0, 0.9);
    }

    85%,
    100% {
        text-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 1), 0 2px 20px rgba(0, 0, 0, 1), 0 0 80px rgba(0, 0, 0, 0.9);
    }
}

.start-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.start-ornament-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, #ffe066, transparent);
}

.start-ornament-symbol {
    color: #ffe066;
    font-size: 1.5rem;
    text-shadow: 0 0 20px rgba(255, 224, 100, 0.8), 0 0 40px rgba(255, 224, 100, 0.6);
}

.start-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: startFadeInUp 2s ease-out 1.2s both;
}

.start-menu-btn {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid #ffe066;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 18px 60px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.start-menu-btn:hover {
    border-color: #ffe066;
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 224, 100, 0.4);
}

.start-menu-btn.primary {
    background: rgba(0, 0, 0, 0.7);
    border-color: #ffe066;
}

.start-menu-btn.primary:hover {
    background: rgba(0, 0, 0, 0.9);
}

.start-bottom-info {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    animation: startFadeInUp 2s ease-out 1.8s both;
    z-index: 21;
}

.start-version {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 3px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.start-quick-start {
    margin-top: 30px;
    opacity: 0.7;
    font-size: 0.9rem;
    padding: 12px 40px;
}

.start-quick-start:hover {
    opacity: 1;
}

.start-loading-overlay {
    position: fixed;
    inset: 0;
    background: #2d4a2d;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: startFadeOut 1.5s ease-out 0.5s forwards;
}

@keyframes startFadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

.start-loading-text {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #a8d8a8;
    letter-spacing: 8px;
    animation: startLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes startLoadingPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .start-main-title {
        font-size: 2.5rem;
        letter-spacing: 6px;
    }

    .start-pre-title {
        font-size: 0.9rem;
        letter-spacing: 4px;
    }

    .start-subtitle {
        font-size: 1.1rem;
    }

    .start-menu-btn {
        padding: 14px 40px;
        font-size: 0.9rem;
    }
}

/* ====================================
   CHARACTER CREATION - LETTER STYLE
   ==================================== */

.cc-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.cc-bg-layer {
    position: absolute;
    inset: 0;
    background-image: url('assets/backgrounds/scenes/indoor_sitting_room.png');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.1);
}

.cc-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}

.cc-window-darken {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to right,
            rgba(20, 18, 15, 0.55) 0%,
            rgba(20, 18, 15, 0.4) 20%,
            rgba(20, 18, 15, 0.2) 40%,
            transparent 55%);
}

.cc-sunbeam {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(135deg,
            rgba(255, 220, 150, 0.15) 0%,
            rgba(255, 220, 150, 0.05) 30%,
            transparent 60%);
    animation: ccSunPulse 8s ease-in-out infinite;
}

@keyframes ccSunPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* Dust Motes */
.cc-dust-motes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.cc-dust-mote {
    position: absolute;
    width: var(--size, 2px);
    height: var(--size, 2px);
    background: radial-gradient(circle,
            rgba(255, 235, 180, 0.9) 0%,
            rgba(255, 220, 150, 0.4) 50%,
            transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation:
        ccDustLife var(--duration, 20s) ease-in-out var(--delay, 0s) infinite,
        ccDustDrift var(--duration, 20s) ease-in-out var(--delay, 0s) infinite;
}

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

    15% {
        opacity: var(--opacity, 0.6);
    }

    85% {
        opacity: var(--opacity, 0.6);
    }

    100% {
        opacity: 0;
    }
}

@keyframes ccDustDrift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(15px, 30px) rotate(90deg);
    }

    50% {
        transform: translate(-10px, 60px) rotate(180deg);
    }

    75% {
        transform: translate(20px, 90px) rotate(270deg);
    }

    100% {
        transform: translate(0, 120px) rotate(360deg);
    }
}

/* Content Container */
.cc-content {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 30px;
    padding-right: 5%;
}

.cc-letter-container {
    position: relative;
    max-width: 650px;
    width: 100%;
    animation: ccSlideInFromBottom 1s ease-out 1.5s both;
}

@keyframes ccSlideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Letter Paper */
.cc-letter-paper {
    background: linear-gradient(135deg, #fdfcf8 0%, #f5f0e6 50%, #faf7f0 100%);
    padding: 40px 45px;
    position: relative;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 8px 15px rgba(0, 0, 0, 0.4),
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 0 50px 20px rgba(0, 0, 0, 0.65),
        0 0 90px 40px rgba(0, 0, 0, 0.5);
}

/* Header */
.cc-letter-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.2);
}

.cc-letter-date {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    color: #8b7355;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.cc-letter-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4a3728;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

.cc-letter-subtitle {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    color: #8b7355;
    font-size: 1rem;
    margin-top: 8px;
}

/* Form Elements */
.cc-form-section {
    margin-bottom: 20px;
}

.cc-section-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B8860B;
    margin-bottom: 8px;
}

.cc-form-input,
.cc-form-textarea,
.cc-form-select {
    width: 100%;
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-size: 1rem;
    color: #3d3328;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-left: 2px solid rgba(139, 90, 43, 0.3);
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.cc-form-input:focus,
.cc-form-textarea:focus,
.cc-form-select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.7);
    border-left-color: #B8860B;
}

.cc-form-input::placeholder,
.cc-form-textarea::placeholder {
    color: rgba(61, 51, 40, 0.4);
    font-style: italic;
}

.cc-form-textarea {
    resize: vertical;
    min-height: 60px;
}

.cc-form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b5a2b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Random Name Generator Button */
.cc-random-name-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.15) 0%, rgba(139, 90, 43, 0.25) 100%);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-random-name-btn:hover {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.25) 0%, rgba(139, 90, 43, 0.4) 100%);
    border-color: #B8860B;
    transform: scale(1.05);
}

.cc-random-name-btn:active {
    transform: scale(0.95);
}

.cc-form-row {
    display: grid;
    gap: 20px;
    grid-template-columns: 2fr 1fr;
}

/* Photo Upload */
.cc-photo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.cc-photo-btn {
    background: rgba(139, 90, 43, 0.08);
    border: 1px solid rgba(139, 90, 43, 0.3);
    color: #8b5a2b;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cc-photo-btn:hover {
    background: rgba(139, 90, 43, 0.15);
}

.cc-photo-hint {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: rgba(61, 51, 40, 0.5);
    font-size: 0.9rem;
}

/* Wax Seal */
.cc-wax-seal {
    position: absolute;
    bottom: -25px;
    right: 50px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #722F37 0%, #3D1A1E 100%);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-wax-seal::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.cc-seal-initial {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #FDFBF7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Actions */
.cc-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(139, 90, 43, 0.15);
}

.cc-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.cc-btn-secondary {
    background: transparent;
    color: #8b7355;
    border: 1px solid rgba(139, 90, 43, 0.3);
}

.cc-btn-secondary:hover {
    background: rgba(139, 90, 43, 0.1);
}

.cc-btn-primary {
    background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 100%);
    color: #faf7f0;
    box-shadow: 0 2px 8px rgba(107, 68, 35, 0.3);
}

.cc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 68, 35, 0.4);
}

.cc-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Portrait Section */
.cc-portrait-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(139, 90, 43, 0.15);
}

.cc-portrait-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cc-portrait-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #4a3728;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cc-portrait-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #8b7355;
    font-size: 0.9rem;
}

.cc-portrait-loading {
    text-align: center;
    padding: 30px;
}

.cc-portrait-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(184, 134, 11, 0.3);
    border-top-color: #B8860B;
    border-radius: 50%;
    animation: ccSpin 1s linear infinite;
}

@keyframes ccSpin {
    to {
        transform: rotate(360deg);
    }
}

.cc-portrait-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.cc-portrait-choice {
    aspect-ratio: 3/4;
    border: 3px solid rgba(139, 90, 43, 0.3);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f0ebe0;
}

.cc-portrait-choice:hover {
    border-color: #B8860B;
    transform: scale(1.02);
}

.cc-portrait-choice.selected {
    border-color: #B8860B;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.3);
}

.cc-portrait-choice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
    .cc-content {
        padding: 15px;
        padding-right: 15px;
        justify-content: center;
    }

    .cc-letter-paper {
        padding: 30px 25px;
    }

    .cc-letter-title {
        font-size: 1.4rem;
        letter-spacing: 2px;
    }

    .cc-form-row {
        grid-template-columns: 1fr;
    }

    .cc-wax-seal {
        width: 45px;
        height: 45px;
        right: 30px;
        bottom: -18px;
    }

    .cc-seal-initial {
        font-size: 1.1rem;
    }

    .cc-portrait-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ====================================
   STREAM-OPTIMIZED CHAT UI LAYOUT
   ==================================== */

/* ========== SCENE BACKGROUND ========== */
.scene-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* Constrain width to visible area (flush with chat panel) for maximum zoom out */
    width: calc(100% - 560px);
    z-index: 0;
}

.scene-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Position image to show more of the center/left */
    object-position: center center;
}

/* Gradient from left (visible scene) to right (text column background) */
.scene-gradient {
    position: absolute;
    inset: 0;
    /* Tight shadow right at the edge of the image */
    background: linear-gradient(to right,
            transparent 0%,
            transparent 85%,
            rgba(26, 24, 18, 0.6) 95%,
            rgba(26, 24, 18, 1) 100%);
}

.scene-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 50%, transparent 20%, rgba(0, 0, 0, 0.3) 100%);
}

/* ========== BOTTOM-LEFT HEADER ========== */
.game-header {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.header-menu-buttons {
    display: flex;
    gap: 8px;
}

.header-menu-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #d4af37;
}

.header-menu-btn svg {
    width: 16px;
    height: 16px;
}

.header-menu-btn.btn-pulsing {
    animation: pulse-glow 1.5s infinite;
}

.header-menu-btn.btn-gold {
    background: rgba(212, 175, 55, 0.25);
    border-color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    50% {
        box-shadow: 0 0 15px 3px rgba(212, 175, 55, 0.6);
    }
}

/* Scene transition indicator for input buttons */
.input-btn.btn-pulsing {
    animation: pulse-glow 1.5s infinite;
}

.input-btn.btn-gold {
    background: rgba(212, 175, 55, 0.25);
    border-color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
    color: #D4AF37;
}

/* Disabled buttons should not show hover effects */
.input-btn:disabled,
.input-btn.opacity-50,
button:disabled,
button.opacity-50 {
    pointer-events: none;
}

.input-btn:disabled:hover,
.input-btn.opacity-50:hover,
button:disabled:hover {
    transform: none !important;
    background: inherit !important;
    box-shadow: none !important;
}

.header-divider {
    width: 1px;
    height: 30px;
    background: rgba(212, 175, 55, 0.3);
}

.header-text {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.header-datetime {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: rgba(212, 175, 55, 0.8);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.header-location {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #fff;
}

.status-indicator {
    position: absolute;
    top: -24px;
    left: 0;
    font-size: 0.65rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: rgba(212, 175, 55, 0.7);
    transition: opacity 0.5s;
}

/* Header dropdown styling */
.header-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: rgba(20, 18, 14, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 200;
}

.header-dropdown:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-dropdown .dropdown-item {
    display: block;
    padding: 10px 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.header-dropdown .dropdown-item:hover {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
}

.header-dropdown .dropdown-item-danger {
    color: #c75050;
}

.header-dropdown .dropdown-item-danger:hover {
    background: rgba(199, 80, 80, 0.15);
}

.header-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.15);
    margin: 4px 0;
}

/* ========== TEXT COLUMN ========== */
.text-column {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    /* Fully opaque background */
    background: rgb(26, 24, 18);
    padding-left: 28px;
}

.text-column-top-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: rgb(26, 24, 18);
    z-index: 20;
    pointer-events: none;
}

.conversation {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px 20px 0;
    position: relative;
}

/* Text column scrollbar */
.conversation::-webkit-scrollbar {
    width: 5px;
}

.conversation::-webkit-scrollbar-track {
    background: transparent;
}

.conversation::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 3px;
}

/* ========== INPUT AREA (Minimalist Design) ========== */
.input-area {
    padding: 0 24px 16px 0;
    background: transparent;
}

.input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    position: relative;
}

.input-field {
    flex: 1;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    background: transparent;
    color: #fdfcf8;
    resize: none;
    outline: none;
    line-height: 1.5;
    overflow-y: hidden;
    transition: border-color 0.2s ease;
}

.input-field::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.input-field:focus {
    border-bottom-color: rgba(212, 175, 55, 0.6);
}

/* Inline send button */
.send-btn-inline {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #D4AF37;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-bottom: 6px;
}

.send-btn-inline:hover {
    background: rgba(212, 175, 55, 0.15);
    transform: scale(1.1);
}

.send-btn-inline svg {
    width: 18px;
    height: 18px;
}

/* Actions bar below input */
.actions-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.actions-spacer {
    flex: 1;
}

/* Text button style */
.text-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    padding: 6px 0;
}

.text-btn:hover {
    color: #D4AF37;
}

.text-btn svg {
    width: 14px;
    height: 14px;
}

/* Scene button group (Next Scene + POV caret) */
.scene-btn-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.pov-caret-btn {
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    transition: all 0.2s;
}

.pov-caret-btn:hover {
    color: #D4AF37;
}

.pov-caret-btn svg {
    width: 10px;
    height: 10px;
}

/* POV dropdown (opens upward) */
.pov-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    background: rgba(20, 18, 14, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 200;
}

.pov-dropdown:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pov-dropdown-header {
    padding: 10px 16px 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.6);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.pov-character-list {
    padding: 4px 0;
}

.pov-character-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: none;
    text-align: left;
}

.pov-character-item:hover {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
}


/* ========== SCENE BLOCKS ========== */
.scene-block.collapsed {
    margin-bottom: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(212, 175, 55, 0.25);
    transition: all 0.2s ease;
}

.scene-block.collapsed:hover {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(212, 175, 55, 0.6);
}

.scene-header-collapsed {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scene-block.collapsed .scene-header-collapsed {
    display: flex;
}

.scene-block.expanded .scene-header-collapsed {
    display: none;
}

.scene-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.7);
    white-space: nowrap;
}

.scene-preview {
    flex: 1;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.scene-expand-hint {
    font-size: 0.8rem;
    color: rgba(212, 175, 55, 0.5);
}

.scene-block.collapsed:hover .scene-expand-hint {
    color: rgba(212, 175, 55, 0.9);
}

/* Expanded scene styling */
.scene-block.expanded {
    margin-bottom: 0;
}

.scene-header-expanded {
    display: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    margin-bottom: 16px;
    cursor: pointer;
}

/* Sticky headers for expanded scenes */
.scene-block.expanded .scene-header-expanded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: rgb(26, 24, 18);
    z-index: 10;
    margin-left: -28px;
    padding-left: 28px;
    margin-right: -28px;
    padding-right: 28px;
}

.scene-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.8);
}

.scene-collapse-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.scene-header-expanded:hover .scene-collapse-hint {
    color: rgba(212, 175, 55, 0.8);
}

.scene-content,
.scene-messages {
    display: none;
    padding-bottom: 20px;
}

.scene-block.expanded .scene-content,
.scene-block.expanded .scene-messages {
    display: block;
}

/* Current scene styling */
.scene-block.current {
    margin-bottom: 0;
}

.scene-block.current .scene-header-expanded {
    cursor: default;
}

.scene-block.current .scene-collapse-hint {
    display: none;
}

.scene-block.current .scene-content {
    display: block;
}

/* ========== MESSAGE STYLING ========== */
.message {
    margin-bottom: 18px;
}

.message-speaker {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: rgba(212, 175, 55, 0.8);
}

.message-speaker.player {
    color: rgba(200, 112, 112, 0.9);
}

/* Stream-sized text for readability */
.message-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
}

.message-text p {
    margin-bottom: 1em;
}

.message-text p:last-child {
    margin-bottom: 0;
}

.message-text.narrator {
    color: rgba(255, 255, 255, 0.88);
}

.message-text.player-action {
    background: rgba(114, 47, 55, 0.2);
    padding: 12px 16px;
    border-left: 3px solid #722F37;
    border-radius: 0 4px 4px 0;
}

/* ========== FULLSCREEN GALLERY ========== */
.scene-image-display {
    position: fixed;
    top: 16px;
    left: 16px;
    right: calc(560px + 16px);
    bottom: 100px;
    z-index: 5;
    display: none;
    background: rgba(10, 8, 6, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    overflow: hidden;
}

.scene-image-display.visible {
    display: flex;
}

.gallery-fullscreen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.gallery-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

/* Collapsible thumbnail strip */
.gallery-strip {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    overflow-x: auto;
    flex-shrink: 0;
    height: 50px;
    transition: height 0.2s ease, padding 0.2s ease;
}

.gallery-strip:hover {
    height: 70px;
    padding: 10px 12px;
}

.gallery-strip-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-strip-title {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.5);
    white-space: nowrap;
}

.gallery-strip-thumbs {
    display: flex;
    gap: 6px;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.gallery-strip:hover .gallery-thumb {
    width: 50px;
    height: 50px;
}

.gallery-thumb:hover {
    border-color: rgba(212, 175, 55, 0.5);
}

.gallery-thumb.active {
    border-color: #D4AF37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.2s ease;
}

.gallery-close:hover {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    border-color: #D4AF37;
}

/* ========== OVERLAY CONTAINER ========== */
.overlay-container {
    position: fixed;
    top: 24px;
    left: 24px;
    bottom: 100px;
    z-index: 60;
    display: flex;
    gap: 16px;
    pointer-events: none;
}

.overlay-panel {
    width: 480px;
    max-height: 100%;
    background: rgba(20, 18, 14, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    display: none;
    flex-direction: column;
    pointer-events: auto;
    overflow: hidden;
}

.overlay-panel.visible {
    display: flex;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .text-column {
        width: 100%;
        padding-left: 16px;
    }

    .scene-gradient {
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(26, 24, 18, 0.7) 30%,
                rgba(26, 24, 18, 0.95) 50%);
    }

    .game-header {
        bottom: auto;
        top: 16px;
        left: 16px;
        right: 16px;
        padding: 8px 12px;
    }

    .scene-image-display {
        top: 60px;
        left: 8px;
        right: 8px;
        bottom: 50%;
    }

    .input-field {
        min-height: 50px;
        font-size: 1rem;
    }

    /* When header moves to top, dropdowns should open downward */
    .header-dropdown {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 8px;
        transform: translateY(-10px);
    }

    .header-dropdown:not(.hidden) {
        transform: translateY(0);
    }
}

/* ========== PARCHMENT JOURNAL PANEL ========== */
.journal-panel {
    width: 520px;
    background: linear-gradient(135deg, #e8ddd0 0%, #dbd0c0 50%, #cfc4b4 100%);
    border: none;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(120, 100, 75, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(120, 100, 75, 0.08);
    position: relative;
}

/* Worn paper texture effect */
.journal-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(100, 85, 65, 0.015) 3px,
            rgba(100, 85, 65, 0.015) 6px);
    pointer-events: none;
    border-radius: 4px;
}

/* Wax seal decoration */
.journal-wax-seal {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #722F37 0%, #3D1A1E 100%);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Inner ring */
.journal-wax-seal::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.journal-wax-seal::after {
    content: attr(data-initial);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #FDFBF7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.journal-panel .panel-header {
    padding: 24px 24px 16px 60px;
    border-bottom: 2px solid rgba(100, 85, 65, 0.15);
    background: transparent;
    position: relative;
    z-index: 10;
}

.journal-panel .panel-close {
    position: absolute;
    left: 20px;
    top: 20px;
    background: rgba(74, 63, 53, 0.08);
    border: 1px solid rgba(100, 85, 65, 0.25);
    color: #6d5f50;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.journal-panel .panel-close:hover {
    background: rgba(74, 63, 53, 0.15);
    color: #4a3f35;
}

.journal-panel .panel-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #4a3f35;
    letter-spacing: 3px;
}

.journal-panel .journal-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #7a6b5a;
    margin-top: 4px;
}

.journal-panel .panel-content {
    padding: 20px 24px;
    color: #3a352e;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Journal section styles (parchment version) */
.journal-section {
    margin-bottom: 20px;
}

.journal-panel .journal-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6d5f50;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(100, 85, 65, 0.15);
}

.journal-panel .journal-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #3a352e;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border-left: none;
}

.journal-panel .journal-text strong {
    color: #4a3f35;
}

/* Parchment scrollbar */
.journal-panel .panel-content::-webkit-scrollbar {
    width: 6px;
}

.journal-panel .panel-content::-webkit-scrollbar-track {
    background: rgba(100, 85, 65, 0.05);
}

.journal-panel .panel-content::-webkit-scrollbar-thumb {
    background: rgba(100, 85, 65, 0.2);
    border-radius: 3px;
}

/* ========== JOURNAL TABS ========== */
.journal-tabs {
    display: flex;
    border-bottom: 1px solid rgba(100, 85, 65, 0.2);
    background: rgba(200, 190, 175, 0.3);
    padding: 0 12px;
    gap: 2px;
}

.journal-tab {
    flex: 1;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7a6b5a;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.journal-tab:hover {
    color: #4a3f35;
    background: rgba(255, 255, 255, 0.3);
}

.journal-tab.active {
    color: #4a3f35;
    border-bottom-color: #8B5A2B;
    background: rgba(255, 255, 255, 0.5);
}

/* ========== JOURNAL PAGES CONTAINER ========== */
.journal-pages-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.journal-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 24px;
    overflow-y: auto;
    background: transparent;
    display: none;
}

.journal-page.active {
    display: block;
}

/* Page scrollbar styling */
.journal-page::-webkit-scrollbar {
    width: 6px;
}

.journal-page::-webkit-scrollbar-track {
    background: rgba(100, 85, 65, 0.05);
}

.journal-page::-webkit-scrollbar-thumb {
    background: rgba(100, 85, 65, 0.2);
    border-radius: 3px;
}

/* ============================================
   Auth Modal Overlay Styles
   ============================================ */

.auth-card {
    background: linear-gradient(180deg, #FDFBF7 0%, #F4EFE6 100%);
    border: 1px solid rgba(139, 90, 43, 0.2);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    max-width: 420px;
    width: 100%;
    margin: 1rem;
    z-index: 10;
}

.auth-header {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
    background: linear-gradient(180deg, #F9F6F0 0%, #FDFBF7 100%);
}

.auth-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: #4A4036;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: #8C7B6C;
    font-style: italic;
}

.auth-form {
    padding: 1.5rem 2rem 2rem;
}

.auth-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(139, 90, 43, 0.25);
    background: white;
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    color: #4A4036;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
    outline: none;
    border-color: #B8860B;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
}

.auth-input::placeholder {
    color: #B8A99A;
}

.auth-label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8B5A2B;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.auth-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn-primary {
    background: linear-gradient(180deg, #8B5A2B 0%, #6B4423 100%);
    color: #F4EFE6;
    box-shadow: 0 4px 12px rgba(107, 68, 35, 0.3);
}

.auth-btn-primary:hover {
    background: linear-gradient(180deg, #9B6A3B 0%, #7B5433 100%);
    box-shadow: 0 6px 16px rgba(107, 68, 35, 0.4);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-google {
    background: white;
    border: 1px solid rgba(139, 90, 43, 0.25);
    color: #4A4036;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.auth-btn-google:hover {
    background: #F9F6F0;
    border-color: rgba(139, 90, 43, 0.4);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    gap: 1rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(139, 90, 43, 0.2);
}

.auth-divider span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    color: #8C7B6C;
    font-style: italic;
}

.auth-toggle {
    text-align: center;
    padding: 1rem 2rem;
    border-top: 1px solid rgba(139, 90, 43, 0.15);
    background: #F9F6F0;
}

.auth-toggle p {
    font-family: 'EB Garamond', serif;
    color: #8C7B6C;
    font-size: 0.95rem;
    margin: 0;
}

.auth-toggle a {
    color: #8B5A2B;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-toggle a:hover {
    color: #6B4423;
}

.auth-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: 0.75rem 1rem;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    margin: 0 2rem;
    display: none;
}

.auth-error.visible {
    display: block;
}

.auth-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    padding: 0.75rem 1rem;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    margin: 0 2rem;
    display: none;
}

.auth-success.visible {
    display: block;
}

.auth-link {
    color: #8B5A2B;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    display: inline-block;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.auth-link:hover {
    color: #6B4423;
}

.auth-forgot-text {
    font-family: 'EB Garamond', serif;
    color: #8C7B6C;
    margin-bottom: 1.5rem;
    text-align: center;
}

.google-icon {
    width: 18px;
    height: 18px;
}

.auth-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-loading.visible {
    display: flex;
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-top-color: #8B5A2B;
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hide forms that aren't active */
.auth-form-section {
    display: none;
}

.auth-form-section.active {
    display: block;
}

/* Decorative seal */
.auth-seal {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #C41E3A 0%, #8B0000 50%, #5C0000 100%);
    border-radius: 50%;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========== JOURNAL LETTERS (Collapsible) ========== */
.letter-item {
    margin-bottom: 12px;
    border: 1px solid rgba(100, 85, 65, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.2s ease;
}

.letter-item:hover {
    border-color: rgba(100, 85, 65, 0.35);
    background: rgba(255, 255, 255, 0.4);
}

.letter-item[open] {
    background: rgba(255, 255, 255, 0.5);
}

.letter-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    gap: 12px;
}

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

.letter-summary::before {
    content: '▸';
    font-size: 0.7rem;
    color: #8B5A2B;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.letter-item[open] .letter-summary::before {
    transform: rotate(90deg);
}

.letter-parties {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: #4a3f35;
    flex: 1;
}

.letter-parties strong {
    color: #3a352e;
}

.letter-scene {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    font-style: italic;
    color: #8b7355;
    white-space: nowrap;
}

.letter-content {
    padding: 14px 18px 16px;
    margin: 0 10px 10px;
    background: rgba(253, 251, 247, 0.7);
    border-top: 1px dashed rgba(100, 85, 65, 0.2);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.8;
    color: #3a352e;
    white-space: pre-wrap;
    border-radius: 0 0 3px 3px;
}

/* ========== FLOATING FEEDBACK FLAG BUTTON ========== */
.floating-feedback-btn {
    position: fixed;
    bottom: 30px;
    right: 590px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(26, 24, 18, 0.85);
    border: 1.5px solid #ffaa00;
    color: #ffaa00;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.floating-feedback-btn:hover {
    transform: scale(1.12);
    background: rgba(40, 32, 10, 0.95);
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.45);
}

.floating-feedback-btn.hidden {
    display: none;
}

/* Tooltip that slides in on hover */
.feedback-btn-tooltip {
    position: absolute;
    right: 46px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: all 0.25s ease;
    pointer-events: none;
}

.floating-feedback-btn:hover .feedback-btn-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* ========== GLOBAL FLOATING FEEDBACK BUTTON (start / character creation) ========== */
.floating-feedback-btn-global {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(26, 24, 18, 0.80);
    border: 1.5px solid #ffaa00;
    color: #ffaa00;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.floating-feedback-btn-global:hover {
    transform: scale(1.12);
    background: rgba(40, 32, 10, 0.95);
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.45);
}

.floating-feedback-btn-global.hidden {
    display: none;
}

/* Tooltip for global button */
.feedback-btn-tooltip-global {
    position: absolute;
    right: 46px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: all 0.25s ease;
    pointer-events: none;
}

.floating-feedback-btn-global:hover .feedback-btn-tooltip-global {
    opacity: 1;
    transform: translateX(0);
}

/* ========== FEEDBACK MODAL ========== */
.feedback-modal-card {
    position: relative;
    background: linear-gradient(135deg, #fdfcf8 0%, #f4f0e6 100%);
    border: 2px double #8b5a2b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    padding: 36px 40px 32px;
    border-radius: 4px;
    max-width: 480px;
    width: 100%;
}

.feedback-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #8b7355;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.feedback-modal-close:hover {
    color: #4a3728;
}

.feedback-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: #4a3728;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.feedback-modal-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #8b7355;
    font-size: 1rem;
    margin-bottom: 18px;
}

.feedback-modal-textarea {
    width: 100%;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #3d3328;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-left: 2px solid rgba(139, 90, 43, 0.35);
    padding: 10px 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.feedback-modal-textarea:focus {
    border-left-color: #B8860B;
    background: rgba(255, 255, 255, 0.8);
}

.feedback-modal-textarea::placeholder {
    color: rgba(61, 51, 40, 0.4);
    font-style: italic;
}

.feedback-modal-options {
    margin-top: 12px;
    margin-bottom: 8px;
}

.feedback-modal-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #8b7355;
    font-size: 0.95rem;
    cursor: pointer;
}

.feedback-modal-error {
    color: #c75050;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 8px;
}

.feedback-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.feedback-modal-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.feedback-modal-btn-primary {
    background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 100%);
    color: #faf7f0;
    box-shadow: 0 2px 8px rgba(107, 68, 35, 0.3);
    flex: 1;
}

.feedback-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 68, 35, 0.4);
}

.feedback-modal-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.feedback-modal-btn-secondary {
    background: transparent;
    color: #8b7355;
    border: 1px solid rgba(139, 90, 43, 0.3);
}

.feedback-modal-btn-secondary:hover {
    background: rgba(139, 90, 43, 0.08);
}