/* public/styles/modals/modalEvent.css */

/* Define root variables for consistency with other modals */
:root {
    --event-primary-font: 'Roboto Mono', monospace;
    --event-accent-font: 'Press Start 2P', cursive;
    --event-glow-color: #00FFDC;
    --event-text-primary: #E0F0FF;
    --event-text-secondary: #A0C0E0;
    --event-cost-color: #FF6B6B; /* A vibrant red for costs */
}

.event-modal {
    display: flex; /* Changed from none to flex to allow centering */
    position: fixed;
    z-index: 1001; /* Above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    justify-content: center; /* Added for consistency */
    align-items: center; /* Added for consistency */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.event-modal.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.event-modal-content {
    background: linear-gradient(145deg, rgba(10, 25, 40, 0.97), rgba(20, 35, 55, 0.97));
    margin: auto;
    padding: 0;
    border: 1px solid rgba(0, 255, 220, 0.6);
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 50px rgba(0, 255, 220, 0.7), 0 0 20px rgba(0,0,0,0.4);
    color: var(--event-text-primary);
    font-family: var(--event-primary-font);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow whole modal to scroll */
    max-height: 85vh; /* Prevent modal from being too tall on any screen */
}

.event-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    background-color: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0, 255, 220, 0.4);
}

.event-modal-header h2 {
    font-family: var(--event-accent-font);
    font-size: 1.2em;
    margin: 0;
    color: var(--event-glow-color);
    text-shadow: 0 0 6px rgba(0, 255, 220, 0.8);
    font-weight: normal;
}

.event-modal-close {
    background: none;
    border: none;
    color: var(--event-text-secondary);
    font-size: 2.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.event-modal-close:hover,
.event-modal-close:focus {
    color: var(--event-glow-color);
    transform: scale(1.1);
}

/* Custom scrollbar for modal content (Webkit browsers) */
.event-modal-content::-webkit-scrollbar {
    width: 8px;
}
.event-modal-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.event-modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 220, 0.5);
    border-radius: 4px;
}
.event-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 220, 0.8);
}

.event-modal-body {
    padding: 20px 25px;
    line-height: 1.7;
    font-size: 0.9em;
    text-align: justify;
    /* overflow-y: auto; <<< REMOVED to allow whole modal to scroll */
}

/* Custom scrollbar for modal body (Webkit browsers) */
.event-modal-body::-webkit-scrollbar {
    display: none; /* Hide the body-specific scrollbar */
}

.event-modal-image {
    max-width: 100%;
    max-height: 200px; /* Made image more discreet */
    object-fit: cover; /* Prevents image stretching */
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 255, 220, 0.4);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.event-modal-choices {
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid rgba(0, 255, 220, 0.2);
    background-color: rgba(0,0,0,0.2);
}

.event-choice-button {
    background-color: rgba(0, 255, 220, 0.1);
    border: 1px solid var(--event-glow-color);
    color: var(--event-glow-color);
    padding: 15px;
    text-align: left;
    text-decoration: none;
    font-size: 0.8em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    font-family: var(--event-primary-font);
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-choice-button:hover:not(:disabled) {
    background-color: rgba(0, 255, 220, 0.25);
    box-shadow: 0 0 12px rgba(0, 255, 220, 0.5);
    transform: translateY(-2px);
}

.event-choice-button:disabled {
    border-color: rgba(160, 192, 224, 0.3);
    background-color: rgba(160, 192, 224, 0.1);
    color: rgba(160, 192, 224, 0.4);
    cursor: not-allowed;
}

/* Styles for choice content separation */
.choice-main-content {
    flex-grow: 1;
    padding-right: 15px;
}

.choice-outcomes {
    flex-shrink: 0;
    width: 160px; /* Adjust width as needed */
    border-left: 1px solid rgba(0, 255, 220, 0.3);
    padding-left: 15px;
    font-size: 0.9em;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.outcome-block {
    margin-bottom: 8px;
}

.outcome-block:last-child {
    margin-bottom: 0;
}

.outcome-chance {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    font-size: 0.95em;
}

.outcome-chance.success {
    color: #4CFFC5; /* Light green */
}

.outcome-chance.failure {
    color: #FF7B7B; /* Light red */
}

.outcome-chance.guaranteed {
    color: #FFD43B; /* Yellow */
}

.outcome-results {
    font-size: 0.9em;
    color: var(--event-text-secondary);
}

.outcome-results ul {
    list-style-type: '» ';
    padding-left: 12px;
    margin: 0;
}

.outcome-results li {
    padding-left: 5px;
}

.outcome-results li.positive {
    color: #8DFFD5;
}

.outcome-results li.negative {
    color: #FFAAAA;
}

.outcome-results li.neutral {
    color: var(--event-text-secondary);
}

/* For skill checks */
.skill-check-info {
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
    font-style: italic;
    font-family: 'Courier New', Courier, monospace;
}

.skill-check-info .player-stat {
    color: #00f8f8; /* Bright cyan for player's stat value */
    font-weight: bold;
}

.cost-info {
    font-size: 0.8em;
    color: var(--event-cost-color);
    margin-top: 8px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.7);
}

.cost-info .cost-item {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.cost-info .cost-icon {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
}

/* --- Outcome Result Styling --- */
.event-modal-body.outcome-success,
.event-modal-body.outcome-failure,
.event-modal-body.outcome-neutral {
    border-radius: 8px;
    transition: background-color 0.4s ease, border-color 0.4s ease;
    /* Padding is inherited from the base .event-modal-body style */
}

.event-modal-body.outcome-success {
    background-color: rgba(24, 99, 83, 0.4); /* Dark Turquoise Green */
    border: 1px solid rgba(56, 217, 169, 0.5);
}

.event-modal-body.outcome-failure {
    background-color: rgba(102, 33, 33, 0.4); /* Dark Red */
    border: 1px solid rgba(255, 107, 107, 0.5);
}

.event-modal-body.outcome-neutral {
    background-color: rgba(115, 88, 25, 0.4); /* Dark Amber/Yellow */
    border: 1px solid rgba(255, 212, 59, 0.5);
}

/* --- Event Rewards/Consequences --- */
.event-rewards-container {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed rgba(160, 192, 224, 0.4);
    border-radius: 8px;
    background-color: rgba(0,0,0,0.2);
}

.event-rewards-container h4 {
    margin: 0 0 10px 0;
    font-family: var(--event-accent-font);
    color: var(--event-text-secondary);
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid rgba(160, 192, 224, 0.2);
    padding-bottom: 8px;
}

.event-rewards-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.event-rewards-container li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reward-value {
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
}

.reward-value.positive {
    color: #38D9A9; /* Turquoise Green */
}

.reward-value.negative {
    color: #FF6B6B; /* Reddish Pink */
}

.reward-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 5px;
}

/* Dice Roll Animation Styles */
.dice-roll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 40, 0.95);
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px; /* Match parent */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.dice-roll-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.dice-container {
    perspective: 1000px;
    margin-bottom: 25px;
}

.dice {
    width: 100px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--event-glow-color);
    border-radius: 10px;
    font-family: var(--event-accent-font);
    font-size: 1.8em;
    color: var(--event-glow-color);
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
}

.dice.rolling {
    animation: spin 2.5s ease-out forwards;
}

@keyframes spin {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(1080deg) scale(1.2); }
    100% { transform: rotateY(1800deg) scale(1); }
}

.dice-roll-info {
    text-align: center;
    color: var(--event-text-secondary);
    font-family: var(--event-primary-font);
    margin-bottom: 25px;
}

.dice-roll-info h4 {
    font-family: var(--event-accent-font);
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: var(--event-text-primary);
}

.dice-roll-result-text {
    font-family: var(--event-accent-font);
    font-size: 1.6em;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.dice-roll-result-text.visible {
    opacity: 1;
    transform: scale(1);
}

.dice-roll-result-text.success {
    color: #50C878; /* Bright Green */
    text-shadow: 0 0 8px #50C878;
}

.dice-roll-result-text.failure {
    color: var(--event-cost-color);
    text-shadow: 0 0 8px var(--event-cost-color);
}

/* Chance color coding */
.skill-check-info .chance-high {
    color: #38D9A9; /* Turquoise Green */
    font-weight: bold;
}

.skill-check-info .chance-medium {
    color: #FFD43B; /* Yellowish Orange */
    font-weight: bold;
}

.skill-check-info .chance-low {
    color: #FF6B6B; /* Reddish Pink */
    font-weight: bold;
}

.event-modal .outcome-section {
    border: 1px solid #00f8f8;
}

/* Cooldown Notice - Inspired by modalWallet.css */
.event-cooldown-notice {
    text-align: center;
    padding: 25px 20px;
    font-size: 0.95em;
    color: #FFD700; /* Gold/Amber color for notice */
    background-color: rgba(255, 215, 0, 0.1); /* Faint background */
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    font-family: var(--event-primary-font);
    letter-spacing: 0.5px;
    line-height: 1.6;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    margin: 20px 0;
}

.event-cooldown-notice strong {
    font-family: var(--event-accent-font);
    font-size: 1.2em;
    color: #FFFFFF;
    display: block;
    margin-bottom: 12px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}

.event-cooldown-notice span {
    display: block;
    margin-top: 5px;
}