/**
 * Engine Base CSS
 * Core styling for the survival game engine
 */

/* Fix the typo in outro-animation-container (it was missing a dot) */
.outro-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Animation element style */
.animation-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

/* Basic Reset & Body Styling */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3vh; /* 2x larger base font size */
    background-color: #f0f0f0;
    background-attachment: fixed;
    overflow-x:hidden;
}

/* Background styling for game content and body */
.game-background {
    background-size: cover;
    background-position: center center;
}

body.game-background {
    background-attachment: fixed;
}

/* Fixed Background Workaround for Mobile */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Container layouts - keep layout the same but use relative sizing */
.game-container {
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.game-stats {
    top:1vh;
    flex-grow: 0;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    z-index: 40;
}

/* The scrollable area in normal mode */
.game-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Resource display - shrunken by 20% from original size */
.resource-display {
    display: inline-block;
    position: relative;
    width: 4.8vw !important; /* Reduced by 20% from 6vw */
    height: 4.8vw !important; /* Reduced by 20% from 6vw */
    margin: 1vh 1vh; /* Keeping the same margins */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.resource-icon {
    width: 4.8vw; /* Reduced by 20% from 6vw */
    height: 4.8vw; /* Reduced by 20% from 6vw */
    margin-right: 1vw;
}

.resource-name {
    margin-right: 1vw;
    font-weight: bold;
    font-size: 3vh; /* 2x larger */
}

.resource-value {
    position: absolute;
    bottom: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect centering */
    color: white;
    text-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.8), 
                -0.1vw -0.1vw 0.2vw rgba(0, 0, 0, 0.8), 
                0.1vw -0.1vw 0.2vw rgba(0, 0, 0, 0.8), 
                -0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.8);
    font-size: 2.5vh; /* 2x larger - was ~12px */
    font-weight: bold;
    text-align: center;
    z-index: 10;
}

/* Resource positive and negative value styling */
.resource-positive {
    color: #7eff7e;
}

.resource-negative {
    color: #ff7e7e;
}

.resource-max {
    color: #777;
    font-size: 2.4vh; /* 2x larger - was ~12px */
}

/* Stage content - 2x larger fonts */
.stage-title {
    margin-top: 0;
    margin-bottom: 2vh;
    color: #222;
    font-size: 4vh; /* 2x larger */
}

.stage-content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2vh 2vw;
    border-radius: 0.8vh;
    margin-bottom: 3vh;
    font-size: 3vh; /* 2x larger */
}

/* Choice buttons - 2x larger text */
.choices-list {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.choice-button {
    padding: 2vh 3vw;
    background-color: #3a7ca5;
    border: none;
    border-radius: 0.8vh;
    color: white;
    font-size: 3vh; /* 2x larger - was ~16px */
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
}

.choice-button:hover {
    background-color: #2c6084;
}

.choice-button:active {
    background-color: #1d4058;
}

/* Control buttons - 2x larger text */
.game-control-button {
    padding: 1.5vh 3vw;
    background-color: #6c757d;
    border: none;
    border-radius: 0.8vh;
    color: white;
    font-size: 2.8vh; /* 2x larger - was ~14px */
    cursor: pointer;
    transition: background-color 0.2s;
}

.game-control-button:hover {
    background-color: #5a6268;
}

/* Control icons - base styles only, positioning done in JS */
.control-icon {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    width: 4.8vw; /* Reduced by 20% from 6vw */
    height: 4.8vw; /* Reduced by 20% from 6vw */
}

.control-icon img {
    width: 100%;
    height: 100%;
}

/* Resource icon container - base styles only, positioning done in JS */
.resource-icon-container {
    display: block;
    position: absolute;
    right: -4vw;
    margin: 0;
    width: 4.8vw; /* Reduced by 20% from 6vw */
    height: 4.8vw; /* Reduced by 20% from 6vw */
    z-index: 10;
}

.resource-icon-container .resource-display {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Vertical spacing for resource icons - starting at the top with proper offsets */
#game-content-wrapper .resource-icon-container:nth-of-type(1) { top: 2vh; }  /* First resource icon */
#game-content-wrapper .resource-icon-container:nth-of-type(2) { top: 10vh; } /* Second resource icon */
#game-content-wrapper .resource-icon-container:nth-of-type(3) { top: 18vh; } /* Third resource icon */
#game-content-wrapper .resource-icon-container:nth-of-type(4) { top: 26vh; } /* Fourth resource icon */
#game-content-wrapper .resource-icon-container:nth-of-type(5) { top: 34vh; } /* Fifth resource icon */
#game-content-wrapper .resource-icon-container:nth-of-type(6) { top: 42vh; } /* Sixth resource icon */

/* Game events - 2x larger text */
.game-event {
    position: absolute;
    top: 3vh;
    right: 3vw;
    max-width: 50vw;
    background-color: #4a5568;
    color: white;
    padding: 2vh 2vw;
    border-radius: 0.8vh;
    box-shadow: 0 0.8vh 1.2vh rgba(0, 0, 0, 0.1);
    z-index: 5;
    animation: slide-in 0.3s ease-out;
}

.game-event h3 {
    margin-top: 0;
    margin-bottom: 1.5vh;
    font-size: 3.6vh; /* 2x larger - was ~18px */
}

.game-event p {
    margin: 0;
    font-size: 2.8vh; /* 2x larger - was ~14px */
}

.game-event.fade-out {
    animation: fade-out 1s ease-in forwards;
}

/* Mini game results - 2x larger text */
.mini-game-results-container {
    max-width: 90vw;
    margin: 0 auto;
}

.game-results {
    margin-bottom: 3vh;
    font-size: 3vh; /* 2x larger */
}

.positive-change {
    color: #38a169;
    font-size: 3vh; /* 2x larger */
}

.negative-change {
    color: #e53e3e;
    font-size: 3vh; /* 2x larger */
}

.penalty-message {
    background-color: #fed7d7;
    color: #c53030;
    padding: 1.5vh 2vw;
    margin: 1.5vh 0;
    border-radius: 0.8vh;
    font-size: 3vh; /* 2x larger */
}

.resources-gained {
    margin-top: 2vh;
    font-size: 3vh; /* 2x larger */
}

.resources-gained ul {
    margin: 1vh 0;
    padding-left: 4vw;
    font-size: 2.8vh; /* 2x larger */
}

/* Resource feedback styling - 2x larger text */
.resource-feedback {
    margin-top: 2vh;
    padding-top: 1.5vh;
    border-top: 0.2vh dashed #ddd;
    font-size: 3vh; /* 2x larger */
}

.resource-changes {
    margin: 1vh 0;
}

.resource-changes ul {
    list-style: none;
    padding-left: 2vw;
    margin: 1vh 0;
}

.resource-changes.positive li::before {
    content: "▲ ";
    color: #38a169;
    font-size: 2.5vh; /* 2x larger */
}

.resource-changes.negative li::before {
    content: "▼ ";
    color: #e53e3e;
    font-size: 2.5vh; /* 2x larger */
}

.resource-changes ul li {
    font-size: 2.8vh; /* 2x larger */
}

.event-resource-changes {
    margin-top: 1.5vh;
    font-size: 2.8vh; /* 2x larger - was ~14px */
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.8vh;
    padding: 1vh;
}

.game-event .resource-changes.positive li {
    color: #b9f6ca;
    font-size: 2.8vh; /* 2x larger */
}

.game-event .resource-changes.negative li {
    color: #ffcdd2;
    font-size: 2.8vh; /* 2x larger */
}

/* Game modal overlay */
.game-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* Game modal types */
.event-modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

.mini-game-intro-modal-overlay,
.mini-game-completion-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}

/* Game modal */
.game-modal {
    background-color: #fff;
    color: #333;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Modal content */
.modal-content {
    margin-bottom: 10px;
    font-size: 3vh;
    line-height: 1.5;
}

/* Modal type specific styling */
.event-modal {
    background-color: #f8f9fa;
    border-left: 5px solid #6c757d;
}

.mini-game-intro-modal {
    background-color: #e8f4f8;
    border-left: 5px solid #3498db;
}

.mini-game-completion-modal {
    background-color: #f0fff4;
    border-left: 5px solid #2ecc71;
}

/* Modal titles */
.modal-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 4vh;
    color: #2c3e50;
}

/* Modal buttons container */
.modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Modal buttons */
.modal-buttons button,
.game-button {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2.8vh;
    border: none;
    transition: background-color 0.2s;
}

.game-button.primary,
.game-button.default {
    background-color: #3498db;
    color: white;
}

.game-button.primary:hover,
.game-button.default:hover {
    background-color: #2980b9;
}

.game-button.secondary {
    background-color: #95a5a6;
    color: white;
}

.game-button.secondary:hover {
    background-color: #7f8c8d;
}

.game-button.success {
    background-color: #2ecc71;
    color: white;
}

.game-button.success:hover {
    background-color: #27ae60;
}

.game-button.danger {
    background-color: #e74c3c;
    color: white;
}

.game-button.danger:hover {
    background-color: #c0392b;
}

/* Game button small size */
.game-button.small {
    background-color: #fc0;
    color: black;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.game-button.small:hover {
    background-color: #e6b800;
}

/* Panels (inventory, journal, save/load) */
.game-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1500;
    width: 80%;
    max-width: 800px;
    max-height: 80%;
    overflow-y: auto;
}

.panel-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

/* Inventory specific panel */
.inventory-panel {
    background-color: #f8f9fa;
}

/* Journal specific panel */
.journal-panel {
    background-color: #fff9e6;
}

/* Save/Load specific panel */
.save-load-panel {
    background-color: #f0f5ff;
}

/* Debug panel styling */
.debug-panel {
    position: fixed;
    top: 10vh;
    right: 0;
    width: 25vw;
    height: 80vh;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    z-index: 1000;
    overflow-y: auto;
    border-left: 2px solid #fc0;
    border-bottom: 2px solid #fc0;
    padding: 15px;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

/* Debug panel header */
.debug-panel-header h3 {
    margin-top: 0;
    color: #fc0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Close debug panel button */
#close-debug-panel {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.5em;
}

/* Debug minigames list */
#debug-minigames-list {
    margin-top: 15px;
}

/* Debug minigame item */
.debug-minigame-item {
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(50, 50, 50, 0.6);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Resource tassel containers */
.resource-tassel-container {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 10;
}
.resource-tassel-container.left-tassels { left: 0; }
.resource-tassel-container.right-tassels { right: 0; }

/* Resource tooltip styling */
.resource-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 1vh 1vw;
    border-radius: 0.5vh;
    z-index: 1000;
    font-size: 2.2vh;
    max-width: 20vw;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.3);
}

/* Inventory tooltip */
.inventory-tooltip {
    position: absolute;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 5px;
    width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Game message styling */
.game-message {
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    z-index: 1500;
    font-size: 2.8vh;
    max-width: 80vw;
    text-align: center;
    animation: fade-in 0.3s ease-out;
}

/* Message types */
.message-info {
    background-color: rgba(52, 152, 219, 0.9);
}

.message-error {
    background-color: rgba(231, 76, 60, 0.9);
}

.message-event {
    background-color: rgba(46, 204, 113, 0.9);
}

.message-feedback {
    background-color: rgba(52, 73, 94, 0.9);
}

/* Game Over screen */
.game-over-screen {
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.game-over-content {
    text-align: center;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    max-width: 600px;
}

.game-over-content h1 {
    font-size: 6vh;
    color: #ff4d4d;
    margin-bottom: 20px;
}

.game-over-content p {
    font-size: 3vh;
    margin-bottom: 30px;
}

.game-over-content button {
    padding: 15px 30px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 3vh;
    cursor: pointer;
    transition: background-color 0.3s;
}

.game-over-content button:hover {
    background-color: #ff3333;
}