/* Contenedor root que incluye TODO lo que hay en */ #root { width: 1200px; height: 800px; transform-origin: top left; top: 0; left: 0; } .relative { position: relative; } #game-container { display: flex; /* Use flex to center canvas if it's smaller than container */ justify-content: center; align-items: center; overflow: hidden; width: 1200px; /* Max width relative to viewport */ height: 800px; /* Example: 240 * 3 */ background-color: #222; /* Dark grey for canvas container if needed */ box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); } canvas#gameCanvas { display: block; /* Canvas internal resolution is set via JS */ /* CSS handles the scaled size */ width: 100%; /* Fit container width */ height: 100%; /* Fit container height */ object-fit: contain; /* Scale while maintaining aspect ratio */ background-color: #333333; /* Default canvas background if nothing is drawn */ } /* Settings Modal Styles */ .modal { display: flex; /* Initially visible, JS will hide game until settings are submitted */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */ justify-content: center; align-items: center; font-family: "Courier New", Courier, monospace; } .modal-content { background-color: #f0f0f0; /* Lighter grey for a softer look */ color: #333; margin: auto; padding: 20px; /* Slightly reduced padding */ border: 1px solid #dcdcdc; /* Lighter border */ width: 80%; max-width: 450px; /* Slightly increased max-width */ border-radius: 10px; /* Slightly more rounded corners */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Softer shadow */ text-align: left; } .modal-content p { margin: 10px 0; font-size: 16px; } .modal-content p span { font-weight: bold; color: #d9534f; /* A reddish color for emphasis */ color: #fff; /* White text for better contrast on dark background */ font-weight: normal; } #stats-modal .modal-content h2 { color: #ffc107; /* Bright yellow for "Game Over!" title */ font-size: 28px; /* Larger title */ border-bottom: 2px solid #ffc107; /* Yellow underline */ padding-bottom: 10px; margin-bottom: 25px; /* More space below title */ } #stats-modal .modal-content p { font-size: 18px; /* Slightly larger paragraph text */ margin: 15px 0; /* More vertical spacing for stats */ } #stats-modal .modal-content p span { color: #82cfff; /* Light blue for stat values */ font-size: 20px; /* Larger stat values */ } .modal-content h2 { text-align: center; margin-top: 0; color: #333; /* Default heading color for other modals */ } .setting-group { margin-bottom: 25px; /* Increased bottom margin for more separation */ padding: 15px; /* Added padding within the group */ background-color: #f9f9f9; /* Light background for each group */ border-radius: 6px; /* Rounded corners for the group */ border: 1px solid #e0e0e0; /* Subtle border */ } .setting-group label { display: block; margin-bottom: 10px; /* Increased space below label */ font-weight: bold; color: #555; /* Darker grey for label text */ font-size: 15px; /* Slightly smaller label */ } .setting-group div { /* Targets divs holding radio buttons and their labels */ margin-bottom: 8px; /* Spacing between radio options */ display: flex; /* Align radio button and its label nicely */ align-items: center; } .setting-group input[type="radio"] { margin-right: 10px; /* More space after radio button */ accent-color: #50e3c2; /* Match game's greenish color */ transform: scale(1.1); /* Slightly larger radio buttons */ } .setting-group input[type="number"] { width: 70px; /* Slightly wider */ padding: 8px 10px; /* More padding */ border: 1px solid #ccc; border-radius: 4px; font-family: "Courier New", Courier, monospace; font-size: 16px; text-align: center; } .setting-group select { width: 100%; padding: 10px 12px; /* Increased padding */ border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: "Courier New", Courier, monospace; font-size: 16px; /* Consistent font size */ background-color: white; /* Ensure select background is white */ } #stats-modal .modal-content { /* Specific styles for stats modal content */ background: linear-gradient(135deg, #2c3e50, #34495e); /* Dark gradient background */ color: #ecf0f1; /* Light text color for contrast */ border: 2px solid #ffc107; /* Yellow border */ box-shadow: 0 0 25px rgba(255, 193, 7, 0.5); /* Yellow glow */ } .modal-content button { background-color: #007bff; /* Professional blue */ color: white; /* White text for good contrast */ padding: 10px 20px; /* Adjusted padding */ border: none; border-radius: 6px; /* Slightly more rounded */ cursor: pointer; font-size: 16px; font-family: "Courier New", Courier, monospace; font-weight: bold; display: block; width: 100%; margin-top: 15px; /* Increased top margin for better spacing */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transitions */ } .stats-buttons-container { /* New container for stats modal buttons */ display: flex; justify-content: space-between; gap: 10px; /* Space between buttons */ margin-top: 25px; /* Space above the button group, moved from individual button */ } #stats-modal .modal-content button { /* Style for buttons within the stats modal */ background-color: #ffc107; /* Yellow to match highlights */ color: #2c3e50; /* Dark text for contrast on yellow */ /* display: block; and width: 100%; from .modal-content button are overridden by flex context for these buttons */ flex-grow: 1; /* Distribute space among buttons in the flex container */ width: auto; /* Allow button width to be determined by flex container */ margin-top: 0; /* Original margin-top is now on the .stats-buttons-container */ } #stats-modal .modal-content button:hover { /* This existing hover rule will apply to both buttons */ background-color: #f39c12; /* Darker yellow on hover */ color: #000; transform: translateY(-2px); /* Slight lift on hover */ } .modal-content button:hover { background-color: #0056b3; /* Darker blue on hover */ color: white; /* Keep text white */ transform: translateY(-2px); /* Slight lift effect */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */ } /* Initially hide the countdown duration if count up is selected */ #countdown-duration-group { /* JS will manage display based on radio button selection */ } /* New styles for the top bar layout */ #top-bar-info { position: absolute; top: 10px; left: 10px; right: 10px; height: 164px; width: fit-content; /* Increased height slightly for two lines of stats */ display: flex; align-items: center; z-index: 10; /* Above canvas, below modals */ font-family: "Courier New", Courier, monospace; color: #ffffff; } #hud-stats { flex: 0 0 20%; /* Takes up 20% of the top bar width */ display: flex; flex-direction: column; /* Stack counter and timer vertically */ justify-content: center; padding-right: 10px; /* Space between stats and banner */ height: 100%; border-radius: 5px 0 0 5px; /* Rounded corners on the left */ padding-left: 10px; box-sizing: border-box; gap: 6px; /* Adds vertical spacing between the stacked children */ } #hud-question-counter { font-size: 24px; /* Slightly smaller font for counter */ line-height: 1.4; /* Tighter line height for stacked text */ color: #fff; /* Lighter text color for better contrast on darker bg */ background-image: url(images/ui_question.png); background-repeat: no-repeat; background-size: contain; width: 147px; height: 61px; text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 50px; } #hud-timer { font-size: 24px; /* Slightly larger font for readability */ line-height: 1.4; /* Adjust line height for stacked text */ color: #fff; /* Lighter text color for better contrast on darker bg */ background-image: url(images/ui_time.png); background-repeat: no-repeat; background-size: contain; width: 147px; height: 61px; text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 50px; } #instructions-banner-container { display: none; /* Initially hidden, JS will show it */ /* position: absolute; removed */ /* top: 10px; removed */ /* left: 10px; removed */ /* right: 10px; removed */ height: 58px; width: 644px; /* Fill the height of #top-bar-info */ flex-grow: 1; /* Dark semi-transparent background */ color: #ffffff; /* White text */ overflow: hidden; /* Crucial for the scrolling text effect */ /* Rounded corners on the right */ /* z-index: 10; /* Not needed here, parent #top-bar-info handles it */ position: relative; background-image: url(images/ui_instructions.png); background-repeat: no-repeat; background-size: cover; margin-left: 20px; margin-top: -64px; /* Needed for absolute positioning of text child */ } #instructions-banner-text { position: absolute; /* Will be scrolled by adjusting 'left' */ white-space: nowrap; /* Ensures text stays on a single line */ line-height: 40px; /* Vertically center text in container (matches #top-bar-info height) */ font-family: "Courier New", Courier, monospace; font-size: 22px; /* Slightly smaller to fit more text potentially */ padding-left: 10px; padding-top: 6px; /* Add some padding so text doesn't start at the very edge */ /* 'left' style will be manipulated by JavaScript for scrolling */ } .question-box { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 10px; color: #222; z-index: 10; width: 814px; height: 167px; text-align: left; pointer-events: none; background-image: url(./images/prompt.png); background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; } #question-box-wrapper{ position: absolute; left:50px; top:40px; width:724px; height:127px; overflow: hidden; } /* Overlays shown above the player (black bg, white text) */ #player-instructions { position: absolute; left: 50%; transform: translateX(-50%); bottom: 220px; /* ajusta para colocarlo justo encima de la rana */ pointer-events: none; /* no bloquea entradas */ text-align: center; z-index: 60; } .player-instruction { display: flex; flex-direction: column; background: #000; color: #fff; padding: 6px 10px; margin: 4px 0; border-radius: 6px; font-family: "Courier New", Courier, monospace; font-size: 16px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } /* Diferenciar tamaño/énfasis entre líneas */ #player-instructions .top { font-size: 14px; opacity: 0.95; } #player-instructions .bottom { font-size: 14px; opacity: 0.95; } /* Splash screen overlay */ #progress-screen { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ width: 1200px; height: 800px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; background: rgba(0, 0, 0, 1); pointer-events: auto; } /* Splash screen overlay */ #splash-screen { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ width: 1200px; height: 800px; display: flex; align-items: center; justify-content: center; z-index: 9998; background: rgba(0, 0, 0, 0.85); pointer-events: auto; } /* Center content container so image scales and button sits in the middle */ #splash-screen .splash-content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Full-cover splash image, keep aspect ratio and cover area */ .splash-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); } /* Play button centered above image */ .splash-play-btn { position: relative; bottom: -320px; z-index: 2; width: 339px; height: 175px; background-image: url(./images/play_button_normal.png); cursor: pointer; border: none; background-color: transparent; } .splash-play-btn:hover { background-image: url(./images/play_button_hover.png); } /* small responsive clamp in case root is scaled down */ @media (max-width: 1200px) { #splash-screen { width: 100%; height: 100%; } }