@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(74862a5214b4aa880490.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;
}

/* --- NEW: Exploration On-Screen Sprite Layer --- */
#exploration-sprite-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This layer does not intercept clicks */
    z-index: 1; /* Sits above the background but below other interactive layers */
}

.exploration-on-screen-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the <img> scale just like the background-image */
}

#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);
}

/* ... at the end of the file, or near other .panel-button styles ... */

/* --- NEW: Exploration Panel Button Enhancements --- */

/* This targets the button itself when it contains an avatar */
.panel-button.has-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px; /* Adjust padding for the new layout */
    text-align: left; /* Align text to the left */
}

/* This styles the small avatar image inside the button */
.panel-button-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Prevents the image from shrinking */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* This styles the text part of the button */
.panel-button-text {
    flex-grow: 1; /* Allows the text to take up the remaining space */
    white-space: normal;
    word-break: break-word;
}

.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;
}

/* --- NEW: Styles for clickable links within dialogue text --- */
#story-content a {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: bold;
    transition: filter 0.2s ease;
}

#story-content a:hover {
    filter: brightness(1.2);
}

.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;
}

/* --- THIS IS THE FIX: Updated Skill Choice Button Styles --- */
.choice-button.skill-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
}

.skill-choice-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.skill-choice-sprite {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.skill-choice-text {
    flex-grow: 1;
    text-align: left;
}

.choice-button.disabled-skill-choice .skill-choice-icon,
.choice-button.disabled-skill-choice .skill-choice-sprite {
    filter: grayscale(1);
    opacity: 0.6;
}

#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;
    /* --- NEW: Prepare container for both icons and sprites --- */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shop-item-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures sprite fits without distortion */
}

.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;
    /* --- NEW: Prepare container for both icons and sprites --- */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.shop-item-sprite-large {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#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 */
}

/* --- NEW: Generic App Header for Detail Views --- */
/* This is used by Contacts, Companions, Skills, etc. for a consistent look. */
.contact-app-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3a3c;
    flex-shrink: 0;
    color: #fff;
}

.contact-app-header h2 {
    margin: 0;
    font-size: 1.1em;
    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,
#phone-contacts-view > #contact-log-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

/* --- Contact Detail View --- */
.contact-detail-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto; /* Allow scrolling if content is too long */
}

.contact-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
}

.contact-detail-header .contact-avatar {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 3px solid #444;
    margin-bottom: 10px;
}

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

.contact-detail-header .contact-status {
    font-size: 1em;
    color: #a0a0a0;
}

.relationship-hearts-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 100%;
    font-size: 1.8em; /* Slightly smaller to fit better */
}

.heart-container {
    position: relative;
    line-height: 1;
}

.heart-background {
    color: #444; /* The color of the empty heart */
}

.heart-foreground {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden; /* This clips the heart character based on the width */
    white-space: nowrap; /* Prevents the heart character from wrapping */
    transition: width 0.4s ease-in-out; /* Smoothly animates the fill */
}

.contact-detail-body {
    flex-grow: 1; /* Pushes the actions to the bottom */
}

.contact-detail-body p {
    color: #a0a0a0;
    line-height: 1.5;
    text-align: center;
}

.contact-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
}

.contact-detail-actions 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;
}

.contact-detail-actions button:hover:not(:disabled) {
    background-color: var(--accent-color);
}

.contact-detail-actions button:disabled {
    background-color: #2c2c2e;
    color: #777;
    cursor: not-allowed;
}

/* --- NEW: Styles for Contact Detail Action Buttons --- */
.contact-detail-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.action-button-emoji {
    font-size: 1.2em;
}

.action-button-icon {
    height: 24px;
    object-fit: contain;
}

/* --- NEW: Affinity Node States --- */
.affinity-node.unlocked {
    background-color: #2e7d32; /* A deep green for available quests */
    border: 2px solid #66bb6a;
    color: #fff;
    cursor: pointer;
    animation: pulse 2s infinite;
}

.affinity-node.unlocked:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #66bb6a;
}

.affinity-node.active {
    background-color: #1565c0; /* A cool blue for in-progress quests */
    border: 2px solid #42a5f5;
    color: #fff;
    cursor: not-allowed;
}

.affinity-node.completed {
    background-color: #ffc107; /* A golden color for completed quests */
    border: 2px solid #ffd54f;
    color: #000;
    cursor: not-allowed;
}

.affinity-node.placeholder {
    background-color: transparent;
    border: 2px dashed #333;
    cursor: default;
}

/* A simple pulse animation for unlocked nodes to draw attention */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 187, 106, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 187, 106, 0);
    }
}

/* --- NEW: Contact Stats View --- */
#contact-stats-view,
#phone-contacts-view > #contact-stats-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #1c1c1e;
}

#contact-stats-content {
    flex-grow: 1;
    display: flex;
    padding: 20px;
    gap: 20px;
    overflow: hidden;
}

#stats-profile-image-container {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stats-profile-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

#stats-affinity-container {
    flex: 1;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #3a3a3c;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}

#stats-affinity-avatar {
    width: 100px;
    height: 100px;
    border-radius: 10%; /* The border-radius is kept for the shape */
    overflow: hidden; /* Ensures the image inside is clipped */
    transition: all 0.3s ease; /* Smooth transition for the shadow */
    margin-bottom: 5px; /* Adds a small gap below the avatar */
}

/* NEW: Style for Virtue (Blue) affinities */
/* This selector was corrected to use an ID (#) instead of a class (.) */
#stats-affinity-avatar.virtue {
    border: 1px solid #007aff;
    box-shadow: 0 0 15px #007aff;
}

/* NEW: Style for Vice (Red) affinities */
/* This selector was also corrected to use an ID (#) instead of a class (.) */
#stats-affinity-avatar.vice {
    border: 1px solid #c0392b;
    box-shadow: 0 0 15px #c0392b;
}

#stats-affinity-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#stats-affinity-name {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
}

/* NEW: Style for Virtue (Blue) affinity text */
#stats-affinity-name.virtue {
    color: #007aff;
}

/* NEW: Style for Vice (Red) affinity text */
#stats-affinity-name.vice {
    color: #c0392b;
}

#stats-affinity-nodes {
    /* NEW: Changed to a 2x2 grid layout */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px;
    max-width: 140px;
}

.affinity-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transition: all 0.2s ease;
}

.affinity-node.locked {
    background-color: #2c2c2e;
    border: 2px solid #444;
    color: #666;
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
}


/* --- 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-info h4 {
    margin: 0 0 3px 0; /* Adds a tiny bit of space below the name */
}

.thread-info p {
    margin: 0; /* Removes all default margins */
}

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

.thread-last-message.unread {
    color: #fff;
    font-weight: bold;
}

/* --- Single Thread View --- */
#thread-header-info {
    display: flex;
    align-items: center;
    flex-direction: column;
    /* 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 */
}

/* Set the base z-index for the app grid */
#phone-app-container > .app-grid {
    z-index: 1;
}

#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-inventory-view,
#phone-app-container > #phone-skills-view,
#phone-app-container > #phone-calendar-view {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* 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 App Cooldown Styles --- */

/* Makes the entire list item look disabled */
.job-list-item.on-cooldown {
    opacity: 0.6;
    /* The item is still clickable to see details, so we don't change the cursor */
}

/* Styles the new cooldown text in the list view */
.job-list-info .job-cooldown-status {
    margin: 0;
    font-size: 0.9em;
    color: #ffcc00; /* A nice gold/yellow for cooldowns */
    font-weight: bold;
}

/* Add these new rules to your CSS file, near the other job app styles */

/* This new container will hold the pay and duration side-by-side */
.job-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

/* Re-style the pay display to fit within the new container */
.job-list-info .job-pay {
    margin: 0;
    font-size: 0.9em;
    color: #4cd964; /* Green for money */
    font-weight: bold;
}

/* Style for the new duration text in the list view */
.job-list-info .job-duration {
    margin: 0;
    font-size: 0.8em;
    color: #a0a0a0; /* A neutral gray for secondary info */
    font-style: italic;
}

/* Style for the duration text in the detail view */
.job-detail-duration {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-top: 8px;
    font-style: italic;
}

/* Style for unavailable jobs' duration text */
.job-duration.unavailable,
.job-detail-duration.unavailable {
    color: #ff3b30; /* A clear red to indicate unavailability */
    font-weight: bold;
    font-style: normal; /* Override the italic style for this specific case */
}

/* A small tweak to the disabled button to make the text more readable */
#accept-job-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.8; /* Slightly more visible than default */
}

.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 Inventory App Styles --- */
#phone-inventory-view,
#inventory-list-view, /* NEW: Apply to both views */
#inventory-detail-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 */
}

/* NEW: Styles for the dedicated detail view content area */
.inventory-detail-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    overflow-y: auto;
    color: #fff;
}

.inventory-detail-icon {
    font-size: 4em;
    margin-bottom: 15px; /* --- NEW: Add explicit dimensions to control sprite size --- */
    width: 100px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-detail-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.inventory-detail-desc {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 20px;
    flex-grow: 1;
}

.inventory-detail-use-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;
}


.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-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 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 #8B0000;
}

.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:hover .skill-item-icon {
    border-color: var(--accent-color);
}

.skill-item-icon {
    font-size: 2.5em;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- THIS IS THE FIX: Make it a circular avatar --- */
    border-radius: 50%;
    background-color: #222;
    border: 2px solid #444;
    transition: border-color 0.2s ease;
}

/* --- NEW: Styles for custom skill sprites --- */
.skill-item-sprite {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents stretching */
    border-radius: 50%;
}

.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;
}

/* --- THIS IS THE FIX: Apply a grayscale filter to the icon in the detail view when locked --- */
.skill-detail-content.locked .skill-item-icon {
    filter: grayscale(1);
    opacity: 0.6;
}

.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;
    /* --- THIS IS THE FIX: Make it a larger circular avatar --- */
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #222;
    border: 3px solid #444;
}

/* --- NEW: Styles for custom skill sprites in the detail view --- */
.skill-item-sprite-large {
    /* A fixed size for a consistent look in the detail view */
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

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

/* NEW: Style for the skill level display */
.skill-detail-level {
    font-size: 1em;
    color: #ffcc00; /* A gold color for the level */
    font-weight: bold;
    margin-bottom: 10px;
}

.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; */
    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: #8B0000; /* 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: #8B0000;
    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;
}

.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);
}

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

#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;
}

/*
  NEW: This class is used to treat the city map as a dynamic,
  blurred background during dialogue scenes.
*/
#city-map-container.in-background {
    /* Keep it visible but move it behind the dialogue UI (which is at z-index 2) */
    z-index: 1;
    opacity: 1;

    /* Ensure it doesn't interfere with dialogue clicks */
    pointer-events: none;

    /* Smoothly transition the filter effect */
    transition: filter 0.5s ease-out;
}

/* --- NEW: Barback Minigame Styles --- */
#barback-minigame-container {
    width: 90%;
    max-width: 800px;
    height: 90%;
    max-height: 600px;
    background-color: #3a2d24; /* Wood grain color */
    background-image: url(7fe1a650577d30d702c3.webp);
    background-size: cover;
    background-position: center 40%;
    border: 4px solid #5c4a3c;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#bar-customer-area {
    flex-shrink: 0;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    gap: 40px;
}

/* NEW: Style for the individual customer slot */
.bar-customer-slot {
    position: relative; /* For positioning the order bubble */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar-customer-sprite {
    width: 200px;
    height: 200px;
    /* background-image is now set by JS */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.bar-customer-order {
    position: absolute;
    bottom: 210px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
}

#bar-work-area {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: rgba(20, 15, 10, 0.8);
    border-top: 4px solid #5c4a3c;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

/* NEW: Container for both ingredient shelves */
#bar-ingredient-shelves {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* NEW: Style for each row of ingredients */
.ingredient-shelf {
    display: flex;
    justify-content: flex-start; /* Align items to the start for scrolling */
    gap: 10px; /* Reduced gap */
    flex-wrap: nowrap; /* Prevent wrapping to a new line */
    width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling */
    padding: 5px 10px 15px 10px; /* Add padding for scrollbar and aesthetics */
    box-sizing: border-box;

    /* Custom scrollbar for a better look */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--card-bg);
}

.ingredient-shelf::-webkit-scrollbar {
    height: 8px;
}

.ingredient-shelf::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.ingredient-shelf::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
    border: 2px solid var(--card-bg);
}

/* NEW: A wrapper for the bottle and its label */
.ingredient-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Gap between bottle and label */
    width: 65px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ingredient-wrapper:hover {
    transform: scale(1.1);
}

.ingredient-bottle {
    width: 100%; /* Take full width of wrapper */
    height: 65px; /* Give it a fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    font-size: 2em; /* Reduced size for emojis */
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.ingredient-wrapper:hover .ingredient-bottle {
    border-color: var(--accent-color);
}

/* NEW: Style for the text label under each ingredient */
.ingredient-label {
    font-size: 0.6em; /* Reduced size */
    font-weight: bold;
    color: var(--secondary-text);
    text-align: center;
    line-height: 1.2; /* Control line spacing */
    width: 100%; /* Ensure it uses the full container width */
    word-break: break-word; /* Allow long words to break */
}

/* NEW: Styles for the custom ingredient sprites to scale them down. */
.ingredient-sprite {
    width: 35px; /* Reduced size */
    height: 35px; /* Reduced size */
    object-fit: contain; /* Maintain aspect ratio without stretching */
}

#bar-mixing-station {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #111;
    padding: 10px;
    border-radius: 8px;
    min-height: 40px;
}

.station-label {
    font-weight: bold;
    color: var(--secondary-text);
}

#bar-current-mix {
    display: flex;
    gap: 5px;
    font-size: 1.5em;
    /* NEW: Align items vertically for mixed content (emojis and images) */
    align-items: center;
}

/* NEW: Style for the small ingredient sprites in the mix */
.mix-ingredient-sprite {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#bar-serve-btn {
    width: 50%;
    margin: 10px auto 0;
}

#bar-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 3px #000;
}

/* --- NEW: Handyman Minigame Styles --- */
#handyman-minigame-container {
    width: 90%;
    max-width: 600px;
    background-color: #4a4a52;
    border: 4px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#handyman-problem-area {
    flex-basis: 60%;
    background-color: #2a2a2e;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#handyman-problem-image {
    max-width: 80%;
    max-height: 250px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#handyman-problem-description {
    font-size: 1.2em;
    font-style: italic;
    color: var(--primary-text);
}

#handyman-toolbox-area {
    flex-basis: 40%;
    background-color: #3a3a40;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.toolbox-label {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--secondary-text);
}

#handyman-tool-shelf {
    display: flex;
    gap: 20px;
}

.handyman-tool {
    width: 80px;
    height: 80px;
    background-color: var(--card-bg);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    font-size: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.handyman-tool:hover, .handyman-tool.selected {
    transform: scale(1.1);
    border-color: var(--accent-color);
    background-color: #3f3f46;
}

/* NEW: Styles for the custom tool sprites to scale them down. */
.handyman-tool-sprite {
    width: 60px;
    height: 60px;
    object-fit: contain; /* Maintain aspect ratio */
}

#handyman-fix-btn {
    width: 60%;
    margin-top: 10px;
}

/* --- NEW: Cleaner Minigame Styles --- */
#cleaner-minigame-container {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    position: relative;
}

#cleaner-hud {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    z-index: 2;
    text-shadow: 0 1px 3px #000;
}

#cleaner-scene-area {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
}

/* NEW: Styles for the draggable items */
.cleaner-item {
    position: absolute;
    cursor: grab;
    transition: all 0.2s ease;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5)); /* Make sprites pop from the background */
    object-fit: contain; /* Ensure sprites scale correctly */
}

.cleaner-item:hover {
    transform: scale(1.05);
    filter: drop-shadow(3px 6px 8px rgba(0, 0, 0, 0.6)) brightness(1.1);
}

.cleaner-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.1);
}

/* NEW: Styles for the drop zone area */
#cleaner-drop-zone-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 1;
}

.cleaner-drop-zone {
    width: 120px;
    height: 120px;
    background-color: rgba(42, 42, 46, 0.7);
    border: 3px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--primary-text);
    font-weight: bold;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.cleaner-drop-zone.drag-over {
    background-color: rgba(106, 141, 255, 0.5);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

#cleaner-finish-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 200px;
}

/* --- Missing Inventory Button States --- */
.inventory-detail-use-btn:hover:not(:disabled) {
    background-color: #0056b3;
}

.inventory-detail-use-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

.inventory-item-sprite-large {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#luciverse-view {
    /* This now behaves like the city map container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4; /* Above background, below UI panels */
    background-color: #0d1a26;
    background-image: radial-gradient(circle at 20% 20%, rgba(106, 141, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(76, 217, 100, 0.1) 0%, transparent 30%);
    z-index: 100; /* High z-index to cover the game view */
    display: flex;
    flex-direction: column;
}

/* --- THIS IS THE FIX --- */
#luciverse-map-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.luciverse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.luciverse-header h2 {
    margin: 0;
    font-family: 'Russo One', sans-serif;
    color: var(--accent-color);
    text-shadow: 0 0 10px var(--accent-color);
}

#luciverse-map-container {
    flex-grow: 1;
    position: relative;
    overflow: auto; /* Allow panning/scrolling if map is large */
}

.luciverse-node {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}

.luciverse-node:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 10; /* Bring hovered node to the front */
}

.luciverse-node-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    background-color: rgba(106, 141, 255, 0.2);
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color), inset 0 0 10px rgba(106, 141, 255, 0.5);
    transition: all 0.3s ease;
}

/* --- NEW: Style for the custom node sprites --- */
.luciverse-node-sprite {
    width: 100%;
    height: 100%;
    /* --- THIS IS THE FIX --- */
    object-fit: cover; /* Ensures the image fills the circle without distortion */
    border-radius: 50%; /* Clips the square image into a circle */
}

.luciverse-node:hover .luciverse-node-icon {
    background-color: rgba(255, 221, 87, 0.3);
    border-color: #ffdd57;
    box-shadow: 0 0 20px #ffdd57, inset 0 0 15px rgba(255, 221, 87, 0.6);
}

.luciverse-node-label {
    color: #e0e0e0;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 0 0 5px #000;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: 4px;
}

.luciverse-node.locked {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
}

.luciverse-node.locked:hover {
    transform: translate(-50%, -50%); /* Disable hover scale */
}

.luciverse-node.locked .luciverse-node-icon {
    background-color: rgba(85, 85, 85, 0.2);
    border-color: #555;
    box-shadow: none;
}

/* --- NEW: Luciverse Node Exploration View --- */
#luciverse-node-view {
    width: 100%;
    height: 100%;
    position: relative;
    /* The background image will be set by JS */
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
}

/* A semi-transparent overlay to make interactables stand out */
#luciverse-node-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

/* --- NEW: Luciverse On-Screen Sprite Layer --- */
#luciverse-sprite-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This layer does not intercept clicks */
    z-index: 1; /* Sits above the background/overlay but below UI panels */
}

.luciverse-on-screen-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the <img> scale just like the background-image */
}

/* The nav panel is positioned absolutely within the node view */
#luciverse-nav-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

/* The activity panel is also positioned absolutely */
#luciverse-activity-panel {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}

/* --- NEW: Luciverse UI Hiding --- */

/* Add a smooth transition to the UI elements */
#luciverse-view .luciverse-header,
#luciverse-view #luciverse-nav-panel,
#luciverse-view #luciverse-activity-panel {
    transition: opacity 0.3s ease-in-out;
}

/* When the parent has .ui-hidden, fade them out and disable interaction */
#luciverse-view.ui-hidden .luciverse-header,
#luciverse-view.ui-hidden #luciverse-nav-panel,
#luciverse-view.ui-hidden #luciverse-activity-panel {
    opacity: 0;
    pointer-events: none;
}

/* Add this to your main game stylesheet (e.g., main.css or similar) */
.dialogue-link {
    color: var(--primary-color); /* Or another color that stands out */
    text-decoration: underline;
    font-weight: bold;
}

.dialogue-link:hover {
    color: var(--accent-color); /* A brighter color on hover */
    cursor: pointer;
}

/* --- NEW: Luciverse Context-Aware UI --- */

/* When the phone is in Luciverse mode, hide specific, non-essential apps */
.phone-modal.luciverse-mode .app-icon[data-app="contacts"],
.phone-modal.luciverse-mode .app-icon[data-app="messages"],
.phone-modal.luciverse-mode .app-icon[data-app="shop"],
.phone-modal.luciverse-mode .app-icon[data-app="jobs"],
.phone-modal.luciverse-mode .app-icon[data-app="calendar"],
.phone-modal.luciverse-mode .app-icon[data-app="inventory"],
.phone-modal.luciverse-mode .app-icon[data-app="skills"],
.phone-modal.luciverse-mode .app-icon[data-app="gallery"] {
    display: none;
}

/* --- Quest Markers on Map --- */
.quest-marker {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.quest-marker.main-quest {
    background-color: #ffd700; /* Gold */
}

.quest-marker.side-quest {
    background-color: #0099ff; /* Blue */
}

/* --- Quest Markers on Map --- */
.quest-avatar-container {
    position: absolute;
    top: -5px;
    /* right: -5px; */
    width: 30px;
    height: 30px;
    z-index: 10;
}

.quest-avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: #333; /* Fallback color */
    object-fit: cover;
    transition: transform 0.2s ease-out;
}

.main-quest-border {
    border: 3px solid #ffd700; /* Gold */
}

.side-quest-border {
    border: 3px solid #0099ff; /* Blue */
}

/* Fanning effect for multiple avatars */
.quest-avatar-container.multiple .quest-avatar:nth-child(1) {
    z-index: 3;
    transform: translateX(-60%);
}

.quest-avatar-container.multiple .quest-avatar:nth-child(2) {
    z-index: 2;
    transform: translateX(-30%);
}

.quest-avatar-container.multiple .quest-avatar:nth-child(3) {
    z-index: 1;
    /* No transform needed, it's the base */
}

#minigame-timer-container {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5em;
    color: #ffcc00;
    text-shadow: 0 0 10px #ffcc00;
}

/* Re-using the main possession meter styles for the minigame version */
#minigame-possession-meter-container {
    width: 300px;
    height: 25px;
    background-color: #1a1a1a;
    border: 1px solid #111;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#minigame-possession-meter-bar {
    height: 100%;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    transition: width 0.1s linear; /* Faster transition for mashing */
}

/* Add this to your main stylesheet, e.g., style.css */
#interactive-ui-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

/* --- NEW: Interactive Minigame HUD Styles --- */
#interactive-minigame-hud {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 11; /* Above story UI controls */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: rgba(30, 30, 34, 0.8);
    padding: 25px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#minigame-timer-container {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5em;
    color: #ffcc00;
    text-shadow: 0 0 10px #ffcc00;
}

/* Re-using the main possession meter styles for the minigame version */
#minigame-possession-meter-container {
    width: 40px;
    height: 200px;
    background-color: #1a1a1a;
    border: 1px solid #111;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    /* NEW: Align the bar to the bottom for vertical fill */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#minigame-possession-meter-bar {
    width: 100%;
    background: linear-gradient(to top, #c0392b, #e74c3c);
    transition: height 0.1s linear; /* Animate height instead of width */
}

/* This selector was corrected from a class to an ID to match the HTML element */
#minigame-possession-meter-bar.fill-mode {
    /* NEW: A pink/purple gradient for the relationship fill meter */
    background: linear-gradient(to top, #e91e63, #ff4081);
}

#minigame-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.9em;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
}

/* --- NEW: Soul Meter Styles --- */
#soul-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);
}

#soul-meter-bar {
    width: 100%; /* Starts full */
    height: 100%;
    background: linear-gradient(to right, #00c6ff, #0072ff); /* A cool blue gradient */
    transition: width 0.5s ease-in-out;
}

#soul-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: Arcade Button Style --- */
.arcade-button {
    width: 150px;
    height: 150px;
    font-size: 1.5em !important;
    font-weight: bold;
    color: #fff;
    background: #c0392b; /* Red base color */
    border: 5px solid #2c3e50;
    border-radius: 50%;
    box-shadow: 0 10px 0 #7b241c, /* Darker red for depth */ inset 0 -5px 10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
    transition: all 0.05s linear;
    text-transform: uppercase;
}

.arcade-button:active {
    transform: translateY(5px); /* Push the button down */
    box-shadow: 0 5px 0 #7b241c, /* Reduce the depth shadow */ inset 0 -2px 5px rgba(0, 0, 0, 0.4);
}