@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Lora:ital@0;1&display=swap');

/* --- Global Styles & Variables --- */
:root {
    --bg-color: #1a1a1a;
    --primary-text: #e0e0e0;
    --secondary-text: #a0a0a0;
    --accent-color: #6a8dff;
    --card-bg: #2a2a2e;
    --border-color: #444;

    /* NEW: Add variables for dialogue text styling */
    --dialogue-font-family: 'Inter', sans-serif;
    --dialogue-font-size: 1.1em;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* --- Overlays & Modals --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150; /* Increased to be above the splash screen (z-index: 100) */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--card-bg);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    text-align: center;
    max-width: 400px;
    border: 1px solid var(--border-color);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

.modal-content p {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 25px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- NEW: Gallery Styles --- */
#splash-gallery-btn {}

#gallery-container {
    padding: 0;
    overflow: hidden;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
}

.gallery-header h2 {
    margin: 0;
}

.gallery-header .choice-button {
    padding: 8px 16px;
    margin: 0;
}

.gallery-content {
    padding: 25px;
    display: flex;
    flex-direction: row;
    gap: 15px;
}

/* Styles for the new clickable menu cards */
.gallery-menu-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.gallery-menu-card:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.gallery-card-icon {
    font-size: 2.5em;
}

.gallery-card-text {
    font-size: 1.2em;
    font-weight: 600;
}

/* Styles for the character selection screen */
#gallery-character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

#gallery-character-grid .choice-button {
    width: 100%;
}

/* --- NEW: Add this rule to style the thumbnail grid --- */
#gallery-item-grid {
    display: grid;
    /* This creates a responsive grid. Each column will be at least 200px,
       but can grow. New columns are added automatically as space allows. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.gallery-item-thumbnail {
    /* Reusing save-slot styles for consistency */
    position: relative;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-item-thumbnail:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.gallery-item-thumbnail.locked {
    filter: grayscale(1) brightness(0.5);
    cursor: not-allowed;
}

.gallery-item-thumbnail.locked::after {
    content: '🔒';
    font-size: 3em;
    color: white;
    text-shadow: 0 0 10px black;
}

#gallery-playback-overlay {
    z-index: 10001; /* Above all other modals */
    background-color: rgba(0, 0, 0, 0.9);
}

#gallery-playback-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    text-shadow: 0 0 5px black;
}

#gallery-playback-content {
    width: 90vw;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gallery-playback-content img,
#gallery-playback-content video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.text-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 25px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--primary-text);
    font-size: 1.1em;
    text-align: center;
    box-sizing: border-box;
}

.text-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(106, 141, 255, 0.3);
}

/* --- Age Gate Specific Styles --- */
#age-gate-overlay {
    z-index: 200; /* Highest z-index */
}

.age-gate-content {
    max-width: 600px;
    text-align: center;
}

.age-gate-content h2 {
    margin-top: 0;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.age-gate-content p {
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 1em;
}

.age-gate-buttons {
    margin-top: 30px;
}

.leave-button {
    background-color: #222 !important;
    text-decoration: none;
}

.leave-button:hover {
    background-color: #c9302c !important;
    border-color: #c9302c !important;
}

/* --- Splash Screen Styles --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/backgrounds/prologue/prologue-bar.webp');
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.5s ease-out, background-image 1.5s ease-in-out;
}

#splash-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.splash-content {
    position: relative;
    z-index: 101;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 20px;
}

/* NEW: Title Text Styling */
.splash-title {
    font-family: 'Russo One', sans-serif;
    /* Using clamp for a responsive font size that doesn't get too big or small */
    font-size: clamp(48px, 10vw, 150px);
    color: var(--primary-text); /* Softer base color for the text */
    text-transform: uppercase;
    margin: 0;
    /* A much softer, less intense neon glow for the default state */
    text-shadow:
        /* Very subtle white inner glow */
        0 0 5px rgba(255, 255, 255, 0.2),
        /* Tighter colored glow */
        0 0 15px var(--accent-color),
        0 0 25px var(--accent-color);
    animation: flicker 3.5s infinite alternate;
}

/* NEW: Keyframe animation for a subtle neon flicker effect */
@keyframes flicker {
    /* Bright flicker state - now even more subtle */
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.3),
            0 0 8px rgba(255, 255, 255, 0.3),
            0 0 18px var(--accent-color),
            0 0 38px var(--accent-color);
    }
    /* Dim flicker state - a very faint glow instead of completely off */
    20%, 24%, 55% {
        text-shadow: 0 0 6px var(--accent-color);
    }
}

.splash-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 250px;
}

.splash-button {
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-text);
    background-color: rgba(42, 42, 46, 0.7);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.splash-button:hover:not(:disabled) {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.splash-button:disabled {
    cursor: not-allowed;
    color: var(--secondary-text);
    background-color: rgba(30, 30, 30, 0.5);
    border-color: #333;
}

/* --- Splash Screen Music Toggle --- */
#music-toggle-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 102;
}

#music-toggle-btn {
    background-color: rgba(42, 42, 46, 0.7);
    border: 2px solid var(--border-color);
    color: var(--primary-text);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    /* A more precise centering method for single characters like emojis */
    text-align: center;
    padding: 0; /* Remove browser-default padding */
    line-height: 46px; /* Vertically centers the icon (height: 50px - border: 2px*2) */
}

#music-toggle-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* --- Main Game Container --- */
.container {
    /* A modern approach for a responsive, fixed-ratio container */
    width: 95vw; /* Use 95% of the viewport width */
    max-height: 95vh; /* But don't let it be taller than 95% of the viewport height */
    aspect-ratio: 16 / 9; /* Maintain a 16:9 widescreen aspect ratio */

    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    /* The body's flex properties will handle centering, so margin is no longer needed */
}

#story-view {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    /* background properties moved to .background-layer */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#story-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* --- NEW: Background Layers for Transitions --- */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Layers are hidden by default. The transition is now in a separate class. */
    z-index: 0; /* Positioned behind all content */
}

/* NEW: A dedicated class to activate the dissolve transition on demand */
.background-layer.transition-active {
    transition: opacity 0.8s ease-in-out;
}

/* NEW: Video Background Layers */
.video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0; /* Same level as image backgrounds */
}

.video-layer video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the layer without distortion */
}

/* A dedicated class to activate the dissolve transition on video layers */
.video-layer.transition-active {
    transition: opacity 0.8s ease-in-out;
}

/* --- Game Layers (Sprites & Exploration) --- */
#sprite-layer, #exploration-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

#sprite-layer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: opacity 0.25s ease-in-out;
}

.story-sprite {
    max-height: 80%;
    max-width: 40%;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.story-sprite.visible {
    opacity: 1;
}

.interactable-item {
    position: absolute;
    cursor: pointer;
    /* Smooth transitions for hover effects */
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
    /* A drop-shadow makes the image pop from the background */
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
    /* NEW: Prevent the browser from highlighting the icon on double-click */
    user-select: none;
    object-fit: contain; /* Ensures images scale correctly within their box */
}

/* General hover for icons & NPCs (non-masks) */
.interactable-item:not([data-hotspot-type='overlay']):hover {
    /* Scale up and increase brightness on hover for a nice effect */
    transform: scale(1.1);
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.6)) brightness(1.2);
}

/* Specific styles for masking hotspots */
.interactable-item[data-hotspot-type='overlay'] {
    /* Make the mask invisible by default */
    opacity: 0;
    /* It should not have a drop-shadow by default */
    filter: none;
    /* Ensure the transition is smooth */
    transition: opacity 0.2s ease-in-out;
    /* NEW: Force the image to stretch to the defined coordinates */
    object-fit: fill;
}

.interactable-item[data-hotspot-type='overlay']:hover {
    /* On hover, make it visible and bright */
    opacity: 1;
    filter: brightness(1.3);
    /* Do not scale masks */
    transform: scale(1);
}

/* --- NEW: Exploration UI Panels --- */
#exploration-ui-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.exploration-panel {
    /* This is the key to the vertical layout: content stacks on top of the toggle */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start; /* Aligns items to the left by default */
    gap: 10px;
    width: 190px; /* NEW: Define a fixed width for the entire panel */
    pointer-events: auto;
}

.exploration-panel.right {
    align-items: flex-end; /* Overrides the default to align items to the right */
}

.panel-toggle {
    /* NEW: Make the toggle fill the panel's width */
    width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary-text);
    background-color: rgba(42, 42, 46, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
}

.panel-content {
    display: flex;
    flex-direction: column; /* Buttons inside the content area stack vertically */
    gap: 10px;
    /* NEW: Add a background to the content area for readability */
    background-color: rgba(30, 30, 34, 0.75);
    backdrop-filter: blur(8px);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    max-height: 400px; /* A generous height for the expanded panel */
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
    opacity: 1;
}

.panel-content .panel-button {
    /* Buttons inside the panel will also fill the width */
    width: 100%;
    box-sizing: border-box;
    /* Same as .panel-toggle but can have its own styles */
    padding: 10px 18px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary-text);
    background-color: rgba(42, 42, 46, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.panel-button:hover, .panel-button.active, .panel-toggle:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.exploration-panel.collapsed .panel-content {
    max-height: 0;
    opacity: 0;
    /* NEW: Hide padding and border instantly when collapsed for a cleaner animation */
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    /* Adjust transition to include padding and border */
    transition: max-height 0.4s ease-out, opacity 0.2s ease-in, padding 0.3s, border-width 0.4s;
}
/* --- Dialogue & UI Controls --- */
.dialogue-container, #story-ui-controls {
    position: relative;
    z-index: 5; /* Ensure UI is on top */
}

.dialogue-container {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    transition: opacity 0.25s ease-in-out;
}

#side-image-container {
    flex-shrink: 0;
}

#side-image {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#side-image.active {
    opacity: 1;
}

#story-content {
    flex-grow: 1;
    min-height: 150px;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px; /* NEW: Use CSS variables for font styling */
    font-family: var(--dialogue-font-family);
    font-size: var(--dialogue-font-size);
    line-height: 1.6;
    cursor: pointer;
    /*backdrop-filter: blur(5px);*/
    box-sizing: border-box;
    user-select: none;
}

.speaker-name {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.narrator-text {
    font-style: italic;
    color: var(--secondary-text);
}

#choices-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.choice-button {
    background-color: var(--bg-color);
    color: var(--primary-text);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.choice-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.choice-button.skill-choice {
    border-left: 4px solid #9b59b6; /* Purple to match the skills app icon */
    position: relative;
    padding-left: 50px; /* Make space for the icon and skill name */
    text-align: left;
}

.choice-button.skill-choice::before {
    content: attr(data-skill-icon); /* Use a data attribute for the icon */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    opacity: 0.8;
}

#story-ui-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.ui-button {
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--primary-text);
    background-color: rgba(42, 42, 46, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.ui-button:hover:not(:disabled) {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.ui-button:disabled {
    cursor: not-allowed;
    color: var(--secondary-text);
    opacity: 0.6;
}

/* --- Save/Load Modal Styles --- */
.save-load-content {
    max-width: 800px;
    width: 90%;
}

#save-slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
}

.save-slot {
    position: relative; /* For the saving overlay */
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.save-slot:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.save-slot.empty {
    justify-content: center;
    align-items: center;
    font-style: italic;
    color: var(--secondary-text);
}

.save-slot-thumbnail {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #000;
}

.save-slot.empty .save-slot-info {
    text-align: center;
    width: 100%;
}

.save-slot-info .slot-number {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--accent-color);
}

.save-slot-info .slot-time {
    font-size: 0.8em;
    color: var(--secondary-text);
    margin-top: 5px;
}

.save-slot-info .slot-text {
    font-size: 0.9em;
    margin-top: 10px;
    font-style: italic;
    color: #ccc;
}

.saving-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 8px;
    z-index: 10;
    transition: opacity 0.2s ease;
}

/* --- Settings Modal Styles --- */
.settings-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
    font-size: 1.1em;
}

input[type="range"] {
    width: 80%;
    cursor: pointer;
}

.settings-select {
    background-color: var(--bg-color);
    color: var(--primary-text);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 80%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent-color);
}
.ui-button#settings-btn {
    font-size: 1.2em;
    padding: 4px 12px;
    line-height: 1;
}

/* --- Save Slot Delete Button --- */
.save-slot-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid #aaa;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px; /* Adjusted for border */
    text-align: center;
    cursor: pointer;
    z-index: 11; /* Higher than saving-overlay */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 0;
    backdrop-filter: blur(2px);
}

.save-slot-delete-btn:hover {
    background-color: #c9302c; /* Red on hover for delete action */
    border-color: #c9302c;
}

/* --- Modal Destructive Action Button --- */
.modal-buttons .delete-action {
    background-color: #a12b2b;
    border-color: #a12b2b;
}
.modal-buttons .delete-action:hover {
    background-color: #c9302c;
    border-color: #c9302c;
}

/* --- NEW: True Fullscreen Scaling --- */
body.fullscreen-active {
    /* Provide a black background for letterboxing/pillarboxing */
    background-color: #000;
}

body.fullscreen-active .container {
    /*
      This block of CSS scales the container to fill the screen
      by stretching to the full viewport, just like the splash screen.
      The #story-view's `background-size: cover` will handle the image.
    */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* Remove windowed-mode constraints */
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* --- UPGRADED: UI Hiding Feature --- */
/* Define a smooth transition for all primary UI elements. */
#story-view .dialogue-container,
#story-view #game-hud,
#story-view #exploration-ui-container,
#story-view #story-ui-controls,
#story-view #bottom-ui-controls,
#story-view #sprite-layer,
#story-view #quest-tracker-hud {
    transition: opacity 0.3s ease-in-out;
}

/* When the parent has the .ui-hidden class, fade out the elements and disable interaction */
#story-view.ui-hidden .dialogue-container,
#story-view.ui-hidden #game-hud, /* Added HUD */
#story-view.ui-hidden #exploration-ui-container,
#story-view.ui-hidden #story-ui-controls,
#story-view.ui-hidden #bottom-ui-controls,
#story-view.ui-hidden #sprite-layer,
#story-view.ui-hidden #quest-tracker-hud { /* Added sprite layer */
    opacity: 0 !important; /* Use !important to override inline styles from animations */
    pointer-events: none !important;
}

/* --- NEW: Screen Effects --- */
.flash-effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900; /* High z-index to cover everything except modals */
    pointer-events: none; /* Allows clicks to pass through */
    background-color: #ffffff; /* Default flash color */
    animation: flash-effect 1s ease-out forwards;
}

@keyframes flash-effect {
    0%   { opacity: 0; }
    /* Fade in over .25s (25% of 1s) */
    25%  { opacity: 1; }
    /* Fade out over .75s (75% of 1s) */
    100% { opacity: 0; }
}

/* --- NEW: Game HUD Styles --- */
#game-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 6; /* Same level as other UI panels */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(30, 30, 34, 0.75);
    backdrop-filter: blur(8px);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    pointer-events: auto; /* Allow interaction if needed, e.g., tooltips */
    opacity: 0; /* Hidden by default, made visible by JS */
    transition: opacity 0.3s ease-in-out;
}

#time-display {
    color: var(--primary-text);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    font-size: 1.1em;
}

#possession-meter-container {
    width: 200px;
    height: 20px;
    background-color: #1a1a1a;
    border: 1px solid #111;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

#possession-meter-bar {
    width: 0%; /* Initial state, controlled by JS */
    height: 100%;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    transition: width 0.5s ease-in-out;
}

#possession-meter-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
}

/* --- NEW: Fade-to-Black Transition Overlay --- */
#fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000; /* Pure black */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when invisible */
    z-index: 1100; /* Highest z-index to cover everything */
    /* The transition is set by JS for flexibility between fade-in and fade-out speeds. */
}

/* --- NEW: Phone UI Styles --- */
#bottom-ui-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: auto;
}

#phone-btn {
    font-size: 1.5em;
    padding: 10px 15px;
    border-radius: 12px;
}

#phone-modal .phone-screen {
    position: relative;
    background-color: #1c1c1e;
    width: 90vw;
    height: 90vh;
    max-width: 390px;
    max-height: 850px;
    border-radius: 40px;
    border: 8px solid #000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.phone-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
}

.phone-island {
    width: 120px;
    height: 30px;
    background-color: #000;
    border-radius: 15px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: #fff;
    text-align: center;
}

.app-icon:hover {
    transform: scale(1.1);
}

.app-icon-bg {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    background-color: #333; /* Default background */
}

.app-icon span {
    font-size: 0.8em;
    font-weight: 500;
}

.phone-footer {
    flex-shrink: 0;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* This pushes the footer to the bottom by making its top margin fill all available space. */
    margin-top: auto;
}

.phone-home-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.phone-home-button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
}

/* --- FINAL POLISH: Phone Status Icons & Signal Bars --- */
.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px; /* Using your preferred wider gap */
}

#phone-signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 12px;
}

.signal-bar {
    width: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    transition: background-color 0.5s ease-in-out;
}

.signal-bar:nth-child(1) { height: 25%; }
.signal-bar:nth-child(2) { height: 50%; }
.signal-bar:nth-child(3) { height: 75%; }
.signal-bar:nth-child(4) { height: 100%; }

.signal-bar.active {
    background-color: #fff;
}

/* This is the container for the icon OR text. It's now wider to fit the new icon. */
#phone-network-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* WIDENED to contain your perfect arc */
    height: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    position: relative;
}

/* This class turns the container into the WiFi icon */
#phone-network-status.wifi-icon {
    font-size: 0; /* Hide the "5G" text */
    /* The dot is now slightly larger and positioned at the bottom center */
    background-image: radial-gradient(circle, white 1.5px, transparent 1.5px);
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* The two arcs are created with pseudo-elements */
#phone-network-status.wifi-icon::before,
#phone-network-status.wifi-icon::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    border-color: #fff transparent transparent transparent;
    transform-origin: bottom center;
    left: 50%;
    transform: translateX(-50%);
}

/* The smaller, inner arc, now perfectly proportional */
#phone-network-status.wifi-icon::before {
    width: 12px;
    height: 7px;
    bottom: 3.5px; /* Nudged up to create a clean gap */
}

/* The larger, outer arc, using your perfect dimensions */
#phone-network-status.wifi-icon::after {
    width: 20px;
    height: 12px;
    bottom: 2px;
}

/* --- UPGRADED: Custom Phone Battery Meter --- */
#phone-battery-container {
    width: 28px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1px;
    box-sizing: border-box;
}

/* The little nub on the end of the battery */
#phone-battery-container::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 2px;
    width: 2px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0 1px 1px 0;
}

#phone-battery-level {
    height: 100%;
    width: 0%; /* Controlled by JS */
    border-radius: 2px;
    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

#phone-battery-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px #000;
    z-index: 1;
}

/* Color classes for the battery's inner fill */
#phone-battery-level.battery-ok {
    background-color: #4cd964;
}
#phone-battery-level.battery-low {
    background-color: #ffcc00;
}
#phone-battery-level.battery-critical {
    background-color: #ff3b30;
}

/* --- NEW: City Map Styles --- */
#city-map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4; /* Above background, below UI panels */
    background-color: #0d1a26;
    /* A subtle grid background */
    background-image:
            linear-gradient(rgba(17, 115, 185, 0.15) 1px, transparent 1px),
            linear-gradient(90deg, rgba(17, 115, 185, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

#city-map-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.map-node {
    position: absolute;
    width: 100px; /* A good click target size */
    height: 100px;
    transform: translate(-50%, -50%); /* Center the node on its coordinates */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.map-node-circle {
    width: 20px;
    height: 20px;
    background-color: #1a75ff;
    border: 3px solid #a8d4ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #1a75ff, 0 0 25px #1a75ff;
    transition: all 0.3s ease;
}

.map-node-label {
    margin-top: 10px;
    color: #e0e0e0;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 0 0 5px #000;
    transition: color 0.3s ease;
    pointer-events: none; /* So the label doesn't interfere with clicks */
}

.map-node:hover .map-node-circle {
    transform: scale(1.5);
    background-color: #ffdd57; /* A bright yellow for hover */
    border-color: #fff;
    box-shadow: 0 0 20px #ffdd57, 0 0 35px #ffdd57;
}

.map-node:hover .map-node-label {
    color: #ffdd57;
}

/* NEW: Styles for inaccessible map locations */
.map-node.locked {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.6);
}

.map-node.locked .map-node-circle {
    background-color: #555;
    border-color: #888;
    box-shadow: none;
    animation: none; /* Stop any pulsing animations */
}

.map-node.locked .map-node-label {
    color: #888;
}

/* Override hover effects for locked nodes */
.map-node.locked:hover .map-node-circle,
.map-node.locked:hover .map-node-label {
    transform: none;
    background-color: #555;
    border-color: #888;
    box-shadow: none;
    color: #888;
}

/* --- NEW: Phone Shop App Styles --- */
#phone-shop-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /*position: absolute; !* Sits on top of the app grid *!*/
    top: 0;
    left: 0;
    background-color: #1c1c1e; /* Same as phone background */
}

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.shop-header h2 {
    margin: 0;
    font-size: 1.1em;
}

#player-money-display {
    font-weight: 600;
    color: #4cd964; /* Green for money */
}

.shop-back-button {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 10px;
}

.shop-content {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

#shop-item-list {
    width: 100%;
    overflow-y: auto;
    border-right: 1px solid #3a3a3c;
    transition: width 0.3s ease;
}

#shop-item-list.details-visible {
    width: 40%; /* Shrink when details are shown */
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid #3a3a3c;
    transition: background-color 0.2s ease;
}

.shop-item:hover {
    background-color: #3a3a3c;
}

.shop-item.selected {
    background-color: var(--accent-color);
}

.shop-item-icon {
    font-size: 2em;
    flex-shrink: 0;
}

.shop-item-info {
    color: #fff;
}

.shop-item-name {
    font-weight: 600;
}

.shop-item-price {
    font-size: 0.9em;
    color: #a0a0a0;
}

.shop-item.owned .shop-item-price {
    color: #4cd964;
    font-weight: bold;
}

#shop-item-details {
    width: 0;
    opacity: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
}

#shop-item-details.visible {
    width: 60%;
    opacity: 1;
    padding: 20px;
}

#shop-item-details-icon {
    font-size: 4em;
    margin-bottom: 15px;
}

#shop-item-details-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

#shop-item-details-desc {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 20px;
    flex-grow: 1;
}

#buy-shop-item-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #007aff;
    color: #fff;
    transition: background-color 0.2s ease;
}

#buy-shop-item-btn:hover:not(:disabled) {
    background-color: #0056b3;
}

#buy-shop-item-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* --- NEW: Phone Contacts App Styles --- */
#phone-contacts-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /*position: absolute;*/
    top: 0;
    left: 0;
    background-color: #1c1c1e;
}

.contacts-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.contacts-header h2 {
    margin: 0;
    font-size: 1.1em;
    /* Center the title since the back button is the only other element */
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px); /* Adjust for back button width */
}

#contacts-list-container {
    flex-grow: 1;
    overflow-y: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #3a3a3c;
    transition: background-color 0.2s ease;
}

.contact-item:hover {
    background-color: #3a3a3c;
}

.contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #555;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.contact-info {
    color: #fff;
}

.contact-name {
    font-weight: 600;
    font-size: 1.1em;
}

.contact-status {
    font-size: 0.9em;
    color: #a0a0a0;
}

/* --- UPGRADED: Phone Contacts App Styles --- */
/* This ensures both list and detail views are positioned correctly */
#phone-contacts-view > #contact-list-view,
#phone-contacts-view > #contact-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

/* The new detail view content area */
.contact-detail-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 15px;
}

#contact-detail-avatar {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border: 3px solid #444;
}

.contact-detail-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #fff;
    width: 100%;
}

#contact-detail-status {
    text-align: center;
    font-size: 1em;
    margin-top: 10px;
}

.contact-relationship-meter {
    text-align: center;
    width: 100%;
}

.meter-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}


.hearts-container {
    /* --- THIS IS THE FIX --- */
    display: grid; /* Use grid for two rows */
    grid-template-columns: repeat(10, 1fr); /* 10 hearts per row */
    gap: 4px; /* A slightly smaller gap looks better in a grid */
    font-size: 1.2em; /* Reduce font size slightly to fit two rows cleanly */
    margin-top: 5px;
    justify-items: center; /* Center hearts within their grid cells */
}

.heart-icon {
    color: #444; /* Empty heart color */
    transition: color 0.3s ease, transform 0.3s ease;
}

.heart-icon.filled {
    color: #ff2d55; /* Filled heart color (Ember theme) */
    transform: scale(1.1);
}

#contact-log-btn {
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
}

#contact-message-btn {
    width: 100%;
    margin-top: auto; /* Pushes button to the very bottom */
    flex-shrink: 0;
}

/* --- NEW: Phone Messages App Styles --- */
#phone-messages-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* position: absolute; -- Per your request, this is commented out for a more realistic feel! */
    top: 0;
    left: 0;
    background-color: #1c1c1e;
}

/* This allows us to toggle between the thread list and a single thread */
#message-thread-list-view, #message-thread-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.messages-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
    gap: 15px;
}

.messages-header h2 {
    margin: 0;
    font-size: 1.1em;
    flex-grow: 1;
    text-align: center;
    transform: translateX(-12px); /* Balance back button */
}

#message-threads-container {
    flex-grow: 1;
    overflow-y: auto;
}

.thread-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #3a3a3c;
    transition: background-color 0.2s ease;
}

.thread-item:hover {
    background-color: #3a3a3c;
}

.thread-info {
    flex-grow: 1;
    overflow: hidden; /* Prevents long text from breaking layout */
}

.thread-last-message {
    font-size: 0.9em;
    color: #a0a0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Single Thread View --- */
#thread-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    /* This centers the contact info in the header */
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px); /* Balance back button */
}

#thread-header-avatar {
    width: 30px;
    height: 30px;
}

#thread-header-name {
    font-weight: 600;
}

#message-bubbles-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 75%;
    line-height: 1.4;
    width: fit-content; /* Make bubble only as wide as its content */
}

.message-bubble.player {
    background-color: #007aff; /* Blue for player */
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px; /* Gives it that classic chat bubble tail */
}

.message-bubble.contact {
    background-color: #3a3a3c; /* Gray for contact */
    color: #fff;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.message-input-area {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    border-top: 1px solid #3a3a3c;
    gap: 10px;
}

.message-input-area input {
    flex-grow: 1;
    background-color: #3a3a3c;
    border: 1px solid #555;
    border-radius: 18px;
    padding: 8px 15px;
    color: #fff;
}


/* NEW: Style for the choice buttons in the message input area */
.message-choice-button {
    background-color: #3a3a3c;
    border: 1px solid #555;
    border-radius: 18px;
    padding: 12px 15px;
    color: var(--accent-color);
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.message-choice-button:hover {
    background-color: #007aff;
    color: #fff;
}

/* --- NEW: Phone Save/Load App Styles --- */
#phone-saveload-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* position: absolute; -- Commented out for a more realistic feel */
    top: 0;
    left: 0;
    background-color: #1c1c1e;
}

.saveload-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.saveload-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px); /* Balance back button */
}

.saveload-app-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.saveload-app-content .choice-button {
    width: 80%;
    max-width: 300px;
}

/* --- NEW: Phone Settings App Styles --- */
#phone-settings-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* position: absolute; -- Commented out for a more realistic feel */
    top: 0;
    left: 0;
    background-color: #1c1c1e;
}

.settings-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.settings-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px); /* Balance back button */
}

.settings-app-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align settings to the top */
    padding: 30px 20px;
    gap: 20px;
    overflow-y: auto;
}

/* Reuse existing settings styles but scope them to the new container */
.settings-app-content .settings-option {
    width: 100%;
    margin: 0; /* Override default margin */
}

.settings-app-content .choice-button {
    margin-top: 20px; /* Add some space above the button */
    width: 80%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* --- NEW: Phone App Container & Stacking Fixes --- */

/* This is the new container for all app views */
#phone-app-container {
    flex-grow: 1; /* This makes the container fill all available vertical space */
    position: relative; /* This is the anchor for the absolute-positioned app views inside */
    overflow: hidden; /* Prevents any weird overflow issues */
}

/* This rule makes all app views stack on top of each other inside the new container */
#phone-app-container > .app-grid,
#phone-app-container > #phone-shop-view,
#phone-app-container > #phone-contacts-view,
#phone-app-container > #phone-messages-view,
#phone-app-container > #phone-saveload-view,
#phone-app-container > #phone-settings-view,
#phone-app-container > #phone-quest-view,
#phone-app-container > #phone-jobs-view,
#phone-app-container > #phone-companions-view,
#phone-app-container > #phone-inventory-view,
#phone-app-container > #phone-skills-view,
#phone-app-container > #phone-calendar-view {
    position: absolute;
    top: 0;
    left: 0;
}

/* This removes the old layout hack, as flex-grow now handles the positioning */
.phone-footer {
    margin-top: 0;
}

/* This ensures the confirmation modal always appears above the phone */
#return-to-title-confirm-modal {
    z-index: 160; /* Higher than the phone's z-index of 150 */
}

/* --- NEW: Quest Tracker HUD --- */
#quest-tracker-hud {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
    width: 250px;
    background-color: rgba(30, 30, 34, 0.75);
    backdrop-filter: blur(8px);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    /* CORRECTED: By default, the invisible element should not block clicks. */
    pointer-events: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#quest-tracker-hud.visible {
    opacity: 1;
    transform: translateX(0);
    /* NEW: When it becomes visible, it should become clickable. */
    pointer-events: auto;
}

#quest-tracker-hud h3 {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

#quest-tracker-hud p {
    margin: 0;
    font-size: 0.9em;
    color: var(--primary-text);
}


/* --- NEW: Phone Quest App Styles --- */
#phone-quest-view, #quest-list-view, #quest-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

.quest-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.quest-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px);
}

#quest-list-container {
    flex-grow: 1;
    overflow-y: auto;
}

.quest-list-item {
    padding: 15px 20px;
    border-bottom: 1px solid #3a3a3c;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quest-list-item:hover {
    background-color: #3a3a3c;
}

.quest-list-item h4 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 1.1em;
}

.quest-list-item p {
    margin: 0;
    font-size: 0.9em;
    color: #a0a0a0;
}

.quest-list-item.completed h4 {
    color: #a0a0a0;
    text-decoration: line-through;
}

/* Quest Detail View */
#quest-detail-view .quest-app-header {
    justify-content: space-between;
}
#quest-detail-view .quest-app-header h2 {
    transform: none;
    margin: 0;
}

.quest-detail-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    color: #fff;
}

.quest-detail-content h3 {
    margin-top: 0;
}

.quest-detail-content p {
    color: #a0a0a0;
    font-style: italic;
    margin-bottom: 20px;
}

.quest-stage {
    margin-bottom: 15px;
    font-size: 1em;
}

.quest-stage.completed {
    text-decoration: line-through;
    color: #a0a0a0;
}

#track-quest-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #007aff;
    color: #fff;
    margin-top: 20px;
}

#track-quest-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* ... after .quest-detail-content styles ... */

/* --- NEW: Phone Jobs App Styles --- */
#phone-jobs-view, #job-list-view, #job-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

.job-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.job-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px);
}

#job-list-container {
    flex-grow: 1;
    overflow-y: auto;
}

.job-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #3a3a3c;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.job-list-item:hover {
    background-color: #3a3a3c;
}

.job-poster-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.job-list-info {
    flex-grow: 1;
    color: #fff;
}

.job-list-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.job-list-info p {
    margin: 0;
    font-size: 0.9em;
    color: #4cd964; /* Green for money */
    font-weight: bold;
}

/* Job Detail View */
.job-detail-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.job-detail-header {
    text-align: center;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.job-detail-header .job-poster-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
}

.job-detail-header h3 {
    margin: 0;
    font-size: 1.3em;
}

.job-detail-header p {
    margin: 5px 0 0 0;
    font-size: 1.1em;
    color: #4cd964;
    font-weight: bold;
}

.job-detail-body {
    flex-grow: 1;
}

.job-detail-body p {
    line-height: 1.6;
    color: #a0a0a0;
}

#accept-job-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #007aff;
    color: #fff;
    margin-top: 20px;
    flex-shrink: 0;
}

#accept-job-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* --- UPGRADED: Phone Companions (Ember) App Styles --- */
#phone-companions-view, #companion-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

#player-money-display-companions {
    font-weight: 600;
    color: #4cd964; /* Green for money */
}

/* This is the main view for the card swiping */
#companion-list-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Important for card animations */
}

.companion-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.companion-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#companion-card-stack {
    flex-grow: 1;
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.companion-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    cursor: pointer;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Gradient overlay for text readability */
.companion-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border-radius: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.companion-card-info {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.companion-card-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.8em;
    text-shadow: 0 2px 4px #000;
}

.companion-card-info p {
    margin: 0;
    font-size: 1em;
    font-style: italic;
    text-shadow: 0 1px 3px #000;
}

/* Card animation classes */
.companion-card.swipe-left {
    transform: translateX(-150%) rotate(-20deg);
    opacity: 0;
}

.companion-card.swipe-right {
    transform: translateX(150%) rotate(20deg);
    opacity: 0;
}

#companion-actions {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    flex-shrink: 0;
}

.companion-action-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #444;
    background-color: #2c2c2e;
    font-size: 2em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.companion-action-btn:hover {
    transform: scale(1.1);
}

.companion-action-btn.pass:hover {
    background-color: #ff3b30;
    border-color: #ff3b30;
}

.companion-action-btn.like:hover {
    background-color: #ff2d55;
    border-color: #ff2d55;
}

/* Styles for the detail view remain largely the same */
.companion-detail-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.companion-detail-header {
    text-align: center;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.companion-detail-header .contact-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
}

.companion-detail-header h3 {
    margin: 0;
    font-size: 1.5em;
}

.companion-detail-body {
    flex-grow: 1;
}

.companion-detail-body p {
    line-height: 1.6;
    color: #a0a0a0;
    font-style: italic;
    text-align: center;
    font-size: 1.1em;
}

#arrange-meeting-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: #ff2d55; /* Ember App Theme Color */
    color: #fff;
    margin-top: 20px;
    flex-shrink: 0;
    transition: background-color 0.2s ease; /* ADD THIS LINE */
}

/* ADD THIS NEW RULE */
#arrange-meeting-btn:hover:not(:disabled) {
    background-color: #d62649; /* A slightly darker, richer red for the hover state */
}

#arrange-meeting-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* --- UPGRADED: Phone Inventory App Styles --- */
#phone-inventory-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

.inventory-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.inventory-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px);
}

#inventory-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    /* NEW: This creates the grid layout */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    align-content: flex-start; /* Prevents items from stretching vertically */
}

.inventory-item {
    /* RE-STYLED for a grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background-color: #2c2c2e;
    border-radius: 12px;
    position: relative; /* For the quantity badge */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.inventory-item:hover {
    background-color: #3a3a3c;
}

.inventory-item-icon {
    font-size: 2.5em; /* Slightly larger icon */
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-item-name {
    /* RE-STYLED for a grid */
    font-weight: 500;
    font-size: 0.8em;
    color: #fff;
    text-align: center;
}

/* NEW: Style for the quantity badge */
.inventory-item-quantity {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 10px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.inventory-empty-message {
    text-align: center;
    color: #a0a0a0;
    font-style: italic;
    padding-top: 40px;
    /* NEW: Make it span the whole grid */
    grid-column: 1 / -1;
}

/* --- UPGRADED: Phone Skills App Styles --- */
#phone-skills-view, #skill-list-view, #skill-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

.skills-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.skills-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px);
}

#skills-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
    align-content: flex-start;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: #2c2c2e;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-top: 4px solid var(--accent-color);
}

.skill-item:hover {
    background-color: #3a3a3c;
    transform: translateY(-3px);
}

.skill-item.passive {
    border-top-color: #ff9500; /* Orange for passive skills */
}

.skill-item.locked {
    background-color: #222;
    border-top-color: #555;
    filter: grayscale(50%);
    opacity: 0.7;
}

.skill-item-icon {
    font-size: 2.5em;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-item-name {
    font-weight: 500;
    font-size: 0.8em;
    color: #fff;
    text-align: center;
}

.skill-item.locked .skill-item-name {
    color: #999;
}

/* --- Skill Detail View --- */
.skill-detail-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.skill-detail-header {
    text-align: center;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.skill-detail-header .skill-item-icon {
    font-size: 4em;
    width: auto;
    height: auto;
    margin-bottom: 10px;
}

.skill-detail-header h3 {
    margin: 0;
    font-size: 1.5em;
}

.skill-detail-header .skill-type-badge {
    margin-top: 8px;
    display: inline-block; /* Allows margin-top to work */
    font-size: 0.8em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
}

.skill-detail-header .skill-type-badge.active {
    background-color: var(--accent-color);
}

.skill-detail-header .skill-type-badge.passive {
    background-color: #ff9500;
}

.skill-detail-body {
    flex-grow: 1;
}

.skill-detail-body p {
    line-height: 1.6;
    color: #a0a0a0;
    font-size: 1.05em;
}

.skill-detail-body .skill-unlock-req {
    font-style: italic;
    color: #ffcc00; /* Gold for unlock requirements */
    text-align: center;
    border: 1px dashed #ffcc00;
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(255, 204, 0, 0.05);
}


/* --- Notification System --- */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000; /* High z-index to ensure it's on top of everything */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none; /* Allows clicks to pass through the container itself */
}

.notification-toast {
    background-color: rgba(20, 20, 25, 0.85);
    color: #f0f0f0;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border-left: 4px solid transparent;
    animation: slideInAndOut 3.5s ease-in-out forwards;
    opacity: 0;
    max-width: 350px;
    text-align: right;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Color variations for different notification types */
.notification-toast.positive {
    color: #d4ffde;
    border-left-color: #4CAF50;
}

.notification-toast.negative {
    color: #ffd4d4;
    border-left-color: #f44336;
}

.notification-toast.neutral {
    color: #d4e4ff;
    border-left-color: #2196F3;
}

@keyframes slideInAndOut {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    15% {
        opacity: 1;
        transform: translateX(0);
    }
    85% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Add this to your main stylesheet to fix button states */

button:disabled,
button[disabled] {
    cursor: not-allowed;
    pointer-events: none; /* This is the key to preventing hover effects */
    opacity: 0.4; /* Makes it look visually disabled */
}

/* --- NEW: Inline Dialogue Overlay --- */
#inline-dialogue-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200; /* Above everything else */
    cursor: pointer;
    padding: 20px;
    box-sizing: border-box;
}

#inline-dialogue-box {
    background-color: var(--card-bg);
    padding: 25px 35px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    max-width: 600px;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.6;
    font-style: italic;
    color: var(--secondary-text);
}

/* --- Notification System --- */
.phone-btn-wrapper,
.app-icon {
    position: relative; /* This is crucial for positioning the dot */
}

.notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: #ff3b30; /* A vibrant iOS-style red */
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.7);
    transform: scale(0); /* Start scaled down and invisible */
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1; /* Ensure it's on top of its parent */
}

.notification-dot.visible {
    transform: scale(1); /* Animate to full size */
}

/* --- NEW: Phone Message Image Bubble Styles --- */
.message-bubble.image-bubble {
    background-color: transparent; /* No background color for image bubbles */
    padding: 0; /* No padding */
    max-width: 60%; /* A bit smaller than text bubbles to look nice */
    /* overflow: hidden; -- REMOVED to prevent clipping the image */
}

.message-bubble.image-bubble img {
    width: 100%;
    display: block; /* Removes any extra space below the image */
    cursor: pointer; /* Indicates the image is clickable */
    transition: transform 0.2s ease;
    /* THIS IS THE FIX: Apply the radius directly to the image */
    border-radius: 12px;
}

.message-bubble.image-bubble img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* --- NEW: Phone Image Viewer --- */
#phone-image-viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1c1e;
    z-index: 10; /* Above the message bubbles but inside the phone */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

#phone-image-viewer-content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

#phone-image-viewer-close-btn {
    position: absolute;
    top: 45px; /* Position below the phone's top header */
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    z-index: 11;
}

/* --- NEW: Skill Cost Display Styles --- */

/* Styles the cost in the Skills App detail view */
.skill-detail-cost {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #555;
    font-size: 1em;
    color: #a0a0a0;
    text-align: center;
}

.skill-detail-cost span {
    font-weight: bold;
    color: #e74c3c; /* A nice red for the cost value */
}

/* Styles the cost on the dialogue choice button */
.skill-choice-cost {
    float: right; /* Pushes the cost to the far right of the button */
    color: #e74c3c;
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 15px; /* Ensures some space from the text */
}

/* A small fix to make disabled skill choices more obvious */
.choice-button.disabled-skill-choice {
    border-left-color: #555;
}

/* --- NEW: Calendar App Styles --- */
#phone-calendar-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

.calendar-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.calendar-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-12px);
}

#calendar-events-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calendar-event-item {
    background-color: #2c2c2e;
    border-radius: 12px;
    padding: 15px;
    border-left: 4px solid var(--accent-color);
}

.calendar-event-item h4 {
    margin: 0 0 5px 0;
    color: #fff;
}

.calendar-event-time {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 15px;
}

.calendar-event-cancel-btn {
    width: 100%;
    padding: 8px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #a12b2b;
    background-color: transparent;
    color: #ff8a80;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-event-cancel-btn:hover {
    background-color: #a12b2b;
    color: #fff;
}

.calendar-empty-message {
    text-align: center;
    color: #a0a0a0;
    font-style: italic;
    padding-top: 40px;
}

/* --- NEW: Schedule Input Modal Styles --- */
.schedule-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0;
    text-align: left;
    width: 100%;
}

.schedule-input-group label {
    font-weight: bold;
    font-size: 1em;
    color: var(--secondary-text);
}

.schedule-input-group .settings-select {
    width: 100%;
}

/* --- Scheduling Modal Button Enhancements --- */

/* This makes both buttons in the modal expand to fill the available space,
   ensuring they are the same width. */
#schedule-input-modal .modal-buttons .choice-button {
    flex: 1;
}

/* This specifically targets the cancel button to give it a red, "destructive action" look. */
#schedule-cancel-btn {
    background-color: #a12b2b;
    border-color: #a12b2b;
}

/* This ensures the hover effect for the cancel button is also red. */
#schedule-cancel-btn:hover {
    background-color: #c9302c;
    border-color: #c9302c;
}

#return-to-title-btn-phone {
    background-color: #a12b2b;
    border-color: #a12b2b;
}

#return-to-title-btn-phone:hover {
    background-color: #c9302c;
    border-color: #c9302c;
}