:root { --tile-size: 24px; }
body { font-family: 'Trebuchet MS', sans-serif; background-color: #e8f4f8; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 10px; box-sizing: border-box; }
.hidden { display: none !important; }
#start-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; border-radius: 15px; border: 3px solid #333; text-align: center; background-color: #fff8dc; }
#start-screen .start-form { display: flex; flex-direction: column; align-items: center; gap: 15px; }
#start-screen input { padding: 10px; font-size: 1.1em; border: 2px solid #ccc; border-radius: 5px; text-align: center; }
#lang-selection { display: none; }
#avatar-selection { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; max-width: 400px; }
.avatar-option { font-size: 2.5em; cursor: pointer; padding: 5px; border: 3px solid transparent; border-radius: 10px; transition: all 0.2s; }
.avatar-option:hover { background-color: #eaddb7; }
.avatar-option.selected { border-color: #005a9c; background-color: #cce7ff; }
#start-game-button:disabled { background-color: #ccc; cursor: not-allowed; }
#version-info { margin-top: 20px; font-size: 0.8em; color: #888; }
#title-header { text-align: center; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
#game-info { font-size: 1.2em; font-weight: bold; color: #333; margin-left: 20px; background-color: white; padding: 5px 15px; border-radius: 10px; border: 2px solid #555; text-align: center; }
#cycle-indicator { margin-top: 5px; }
#game-container { display: flex; border: 3px solid #333; background-color: #5F9EA0; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
#map { display: grid; position: relative; border-right: 3px solid #333; transition: background-color 2s ease-in-out; }
.day-bg { background-color: #8FBC8F; }
.night-bg { background-color: #2c3e50; }
.cave-bg { background-color: #4a4a4a; }
.tile { width: var(--tile-size); height: var(--tile-size); font-size: calc(var(--tile-size) * 0.8); display: flex; align-items: center; justify-content: center; user-select: none; }
.construction-lot { background-color: #a0522d; border-radius: 5px; }
#player { font-size: calc(var(--tile-size) * 0.9); position: absolute; transition: top 0.1s linear, left 0.1s linear; z-index: 10; }
#sidebar { width: 250px; padding: 0; background-color: #FFF8DC; display: flex; flex-direction: column; }
#sidebar > div { padding: 10px; }
#sidebar h2 { background-color: #d2b48c; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); margin: -10px -10px 10px -10px; padding: 8px 10px; text-align: center; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; }
#animal-list li, #kill-list li { padding: 5px; border-bottom: 1px solid #ddd; }
#animal-list li.not-found { color: #aaa; list-style-type: '⚪ '; }
#animal-list li.transporting { color: #000; font-weight: bold; list-style-type: '⚫ '; background-color: #fffacd; }
#animal-list li.caught { color: #2E8B57; font-weight: bold; text-decoration: line-through; list-style-type: '⭐ '; }
#inventory-section, #kill-list-section { border-top: 3px solid #bda26b; flex-shrink: 0; }
#inventory-list li, #kill-list li { cursor: pointer; padding: 8px; border-radius: 5px; }
#inventory-list li:hover { background-color: #eaddb7; }
#kill-list li { list-style-type: '💀 '; }
#battle-screen, #win-screen, #help-menu, #conflict-modal, #game-over-modal, #info-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 200; }
#battle-box, #win-box, #help-box, #conflict-box, #game-over-box, #info-box { background-color: white; padding: 25px 45px; border-radius: 10px; text-align: center; border: 4px solid #333; box-shadow: 0 5px 20px rgba(0,0,0,0.4); }
#win-box h2, #game-over-box h2, #info-box h2 { margin-top: 0; }
#win-box h2 { color: #DAA520; }
#game-over-box h2 { color: #c0392b; }
#info-box h2 { color: #2c3e50; }
button { padding: 10px 20px; margin: 5px; cursor: pointer; border: 2px solid #555; border-radius: 5px; font-weight: bold; }
#reset-button { background-color: #ff6b6b; color: white; }
#help-button { margin: 0 15px; font-size: 0.9em; }
#help-box { position: relative; background-color: #FFF8DC; text-align: left; width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto; }
#help-box h1, #help-box h2, #help-box h3, #help-box h4 { text-align: center; margin-top: 20px; }
#help-box h3, #help-box h4 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
#help-box ul { list-style-type: none; padding:0; }
#help-box ol { padding-left: 20px; }
#help-box ul li { margin-bottom: 8px; }
#help-box h4 { margin-bottom: 5px; }
#close-help-button { position: absolute; top: 10px; right: 10px; background: #ff4500; color: white; border: 2px solid #fff; border-radius: 50%; width: 30px; height: 30px; padding: 0; line-height: 30px; text-align: center; font-size: 1em; }
#mobile-error { display: flex; align-items: center; justify-content: center; width: 100%; height: 80vh; font-size: 2em; font-weight: bold; color: #c0392b; text-align: center; }
#status-bar { width: 100%; max-width: 1032px; box-sizing: border-box; background-color: #34495e; color: white; font-weight: bold; padding: 8px; margin-bottom: 10px; border-radius: 5px; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; min-height: 25px;}
#status-bar span { background-color: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 15px; margin: 2px 5px; }
.help-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9em; }
.help-table th, .help-table td { border: 1px solid #bda26b; padding: 8px; text-align: center; }
.help-table th { background-color: #d2b48c; color: white; }
.help-table .legendary-row { background-color: #fcf8e3; font-style: italic; }