/* --- Catan Variablen --- */
:root {
    --water: #4aa0d6;
    --sand: #e8dcb5;
    --brick: #d32f2f;
    --wood: #388e3c;
    --sheep: #8bc34a;
    --wheat: #fbc02d;
    --ore: #616161;
    --parchment: #fdf5e6;
    --text-dark: #3e2723;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--water);
    /* Ein leichtes Muster im Meer */
    background-image: radial-gradient(circle, #5bb4eb 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-dark);
    padding: 20px;
    display: flex;
    justify-content: center;
    margin: 0;
}

.container {
    max-width: 900px;
    width: 100%;
    background-color: var(--parchment);
    border: 8px solid var(--sand);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}

/* --- Typografie --- */
h1, h2, h3 { 
    font-family: 'MedievalSharp', cursive; 
    text-align: center; 
    text-transform: uppercase; 
}

h1 { 
    font-size: 2.5rem; 
    margin-bottom: 0; 
    text-shadow: 2px 2px 0px var(--wheat); 
}

.subtitle { 
    text-align: center; 
    font-style: italic; 
    margin-bottom: 30px; 
    color: #5d4037; 
}

/* --- Buttons --- */
.btn-main {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    background: var(--brick);
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    border-radius: 5px;
    border-bottom: 4px solid #b71c1c;
    transition: transform 0.1s;
    box-sizing: border-box;
}

.btn-main:hover { 
    transform: translateY(2px); 
    border-bottom-width: 2px; 
    background: #c62828; 
}

.btn-back { 
    display: inline-block; 
    margin-bottom: 15px; 
    color: var(--text-dark); 
    text-decoration: none; 
    font-weight: bold; 
}

/* --- Leaderboard Tabelle --- */
.leaderboard { 
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 40px; 
}

.leaderboard th { 
    background-color: var(--brick); 
    color: white; 
    font-family: 'MedievalSharp', cursive; 
    padding: 10px; 
}

.leaderboard td { 
    padding: 10px; 
    text-align: center; 
    border-bottom: 1px solid #ccc; 
    vertical-align: middle; 
}

/* Hexagon Rang */
.rank-hex { 
    width: 30px; 
    height: 35px; 
    background: var(--ore); 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto; 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    font-family: 'MedievalSharp'; 
}

.rank-1 .rank-hex { background: #ffd700; color: black; transform: scale(1.3); }
.rank-2 .rank-hex { background: #c0c0c0; color: black; }
.rank-3 .rank-hex { background: #cd7f32; color: white; }

.score-box { 
    font-weight: bold; 
    font-size: 1.2rem; 
    color: var(--brick); 
}

/* --- Formular Styles --- */
.form-box { 
    background: #fff8e1; 
    border: 2px dashed var(--wood); 
    padding: 20px; 
    border-radius: 10px; 
}

.form-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

label { 
    display: block; 
    font-weight: bold; 
    font-size: 0.9rem; 
    margin-bottom: 5px; 
}

select, input[type="text"], input[type="date"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-family: 'Roboto'; 
    font-size: 1rem; 
}

/* Checkbox Grid */
.checkbox-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    font-size: 0.9rem; 
    background: white; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}

.checkbox-item { 
    display: flex; 
    align-items: center; 
}

.checkbox-item input { 
    margin-right: 8px; 
}

/* --- Historie Cards --- */
.history-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 15px; 
}

.game-card { 
    background: white; 
    border: 2px solid var(--wood); 
    border-radius: 8px; 
    padding: 15px; 
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1); 
    position: relative; 
}

.game-date { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    font-size: 0.8rem; 
    color: #999; 
}

.expansion-tags { 
    margin-bottom: 10px; 
    padding-right: 60px; /* Platz für Datum lassen */
}

.exp-tag { 
    display: inline-block; 
    background: #eee; 
    color: #555; 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-size: 0.7rem; 
    margin-right: 3px; 
    margin-bottom: 3px;
    border: 1px solid #ddd; 
}

/* --- BILDER ANZEIGE (OPTIMIERT) --- */
.game-image-container {
    width: 100%;
    /* Feste Höhe: Groß genug für Details */
    height: 300px; 
    margin: 15px 0;
    border-radius: 8px;
    border: 2px solid var(--wood); /* Holzrahmen */
    background-color: #222; /* Dunkler Hintergrund (Kino-Effekt) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.game-image-container img {
    width: 100%;
    height: 100%;
    /* CONTAIN = Bild wird komplett angezeigt, nichts abgeschnitten */
    object-fit: contain; 
    cursor: pointer;
    transition: transform 0.3s ease;
}

.game-image-container img:hover {
    transform: scale(1.02);
}

/* --- Statistiken in der Karte --- */
.winner { 
    font-size: 1.1rem; 
    margin-bottom: 8px; 
    border-bottom: 1px dashed #ccc; 
    padding-bottom: 5px; 
}

.stats-item { 
    font-size: 0.85rem; 
    color: #555; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 2px; 
}

.guests { 
    margin-top: 10px; 
    font-size: 0.8rem; 
    font-style: italic; 
    color: #777; 
    border-top: 1px solid #eee; 
    padding-top: 5px;
}

/* --- Badges (Farben) --- */
.badge { padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; color: white; display: inline-block; margin: 1px;}
.b-road { background: var(--brick); }
.b-army { background: var(--ore); }
.b-harbor { background: var(--water); }
.b-rich { background: var(--wheat); color: black; }
.b-poor { background: #5d4037; }

/* --- Lightbox / Modal (Popup für Bilder) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0;
    width: 100%; height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
    backdrop-filter: blur(5px);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 95%;
    max-height: 95vh;
    border: 3px solid white;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

/* --- Responsive Design --- */
@media (max-width: 600px) { 
    .form-grid, .checkbox-grid { grid-template-columns: 1fr; } 
    button { grid-column: span 1; } 
    .container { padding: 10px; border-width: 4px; }
    .game-image-container { height: 250px; } /* Auf Handy etwas kleiner */
}

/* --- Siedlung Icon (SVG) - Optimiert --- */
.settlement-icon {
    width: 20px;       /* Standardgröße am PC (etwas kleiner als vorher) */
    height: 20px;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    display: inline-block;
    position: relative;
    top: -2px; /* Zieht das Icon minimal hoch, damit es mittig zum Text sitzt */
}

/* --- Handy Optimierung --- */
@media (max-width: 600px) {
    .settlement-icon {
        width: 16px !important;  /* Auf dem Handy schön klein */
        height: 16px !important;
        margin-right: 3px;
        top: -1px;
    }
}