/*
 *  Insel-Monarchie.de, das Browser Game
 * 
 *  PHP Version 8
 * 
 *  Kategorie:            Insel-Monarchie.de
 *  Paket:                Admintool / Datentool
 *  Author:               Michael Hamann [KaMi] (kami@insel-monarchie.de)
 *  ------
 *  Created Date:         Sunday December 29th 2024
 *  Last Modified:        Sunday December 29th 2024 10:13:37
 *  ------
 *  Copyright:            2006 - 2024 Insel-Monarchie.de
 *  Lizenz:               https://www.insel-monarchie.de/license.txt
 *  Link:                 https://www.insel-monarchie.de
 * 
 *  -----------------
 *  Header-Shortcut:       CTRL + ALT + H / 2x Drücken
 * 
 */

/* ========================================================= */
/*                         News Seite                        */
/* ========================================================= */

.news-page {
    width: 100%;
}

.news-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.news-summary div,
.news-card,
.news-empty {
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.news-summary div,
.news-empty {
    padding: 10px;
}

.news-summary span,
.news-kicker,
.news-meta span {
    display: block;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.news-summary strong {
    display: block;
    margin-top: 3px;
    color: #1f160f;
    overflow-wrap: anywhere;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.news-card {
    min-width: 0;
    padding: 12px;
    color: #1f160f;
}

.news-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #d0ad80;
}

.news-card-header h2 {
    margin: 3px 0 0;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.news-card-header time,
.news-date {
    flex: 0 0 auto;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.news-meta {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.news-body {
    margin-top: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.news-body p {
    margin: 0 0 8px;
}

.news-body p:last-child,
.news-body ul:last-child,
.news-body ol:last-child {
    margin-bottom: 0;
}

.news-body ul,
.news-body ol {
    margin: 8px 0;
    padding-left: 22px;
}

.news-body-empty {
    color: #5f4229;
}

@media (max-width: 760px) {
    .news-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-card-header {
        display: block;
    }

    .news-card-header time,
    .news-date {
        display: block;
        margin-top: 5px;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .news-summary {
        grid-template-columns: 1fr;
    }
}

 
/* ========================================================= */
/*                       Player Seite                        */
/* ========================================================= */

/* Container für die Spieleransicht */
.player-page {
    width: 100%;
}

.player-controls {
    margin: 10px 0;
}

.player-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.player-summary div,
.player-row,
.player-detail {
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.player-summary div {
    padding: 10px;
}

.player-summary span,
.player-detail-grid span,
.player-detail-header span {
    display: block;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.player-summary strong,
.player-detail-grid strong {
    display: block;
    margin-top: 3px;
    color: #1f160f;
    overflow-wrap: anywhere;
}

.player-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.player-list-head,
.player-row {
    display: grid;
    grid-template-columns: 60px minmax(150px, 2fr) minmax(120px, 1.2fr) 80px 110px 140px;
    gap: 8px;
    align-items: center;
}

.player-list-head {
    padding: 0 10px 3px;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.player-row {
    padding: 9px 10px;
    color: #1f160f;
}

.player-rank {
    font-weight: bold;
}

.player-name a {
    color: #2c1a10;
    font-weight: bold;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.player-name a:hover,
.player-action:hover,
.player-detail-back:hover {
    text-decoration: underline;
}

.player-ally {
    overflow-wrap: anywhere;
}

.player-actions,
.player-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.player-action,
.player-detail-back {
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background: linear-gradient(to bottom, #fff4db, #c9a06d);
    color: #1f160f;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.player-action-secondary,
.player-detail-banner {
    background: #f9f1e7;
}

.player-empty {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

/* ========================================================= */
/*                 Player Detail Seite                       */
/* ========================================================= */
.player-detail {
    max-width: 900px;
    margin: 15px auto;
    padding: 14px;
}

.player-detail-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #9e764c;
}

.player-detail-header strong {
    display: block;
    margin-top: 3px;
    font-size: 24px;
    overflow-wrap: anywhere;
}

.player-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.player-detail-grid div {
    padding: 10px;
    border: 1px solid #d0ad80;
    border-radius: 5px;
    background-color: #fff8ec;
}

.player-profile-text {
    padding: 12px;
    border: 1px dashed #9e764c;
    border-radius: 5px;
    background-color: #fff8ec;
    overflow-wrap: anywhere;
}

.player-profile-text h2 {
    margin: 0 0 8px;
    font-size: 16px;
}

.player-detail-actions {
    justify-content: flex-start;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .player-summary,
    .player-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-list-head {
        display: none;
    }

    .player-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .player-row > div:not(.player-actions) {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
    }

    .player-row > div:not(.player-actions)::before {
        content: attr(data-label);
        color: #5f4229;
        font-weight: bold;
    }

    .player-actions {
        justify-content: flex-start;
        margin-top: 4px;
    }
}

@media (max-width: 520px) {
    .player-summary,
    .player-detail-grid {
        grid-template-columns: 1fr;
    }

    .player-action,
    .player-detail-back {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ========================================================= */
/*                       Allianz Seite                       */
/* ========================================================= */

.alliance-page {
    width: 100%;
}

.alliance-controls {
    margin: 10px 0;
}

.alliance-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.alliance-summary div,
.alliance-row,
.alliance-empty {
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.alliance-summary div,
.alliance-empty {
    padding: 10px;
}

.alliance-summary span {
    display: block;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.alliance-summary strong {
    display: block;
    margin-top: 3px;
    color: #1f160f;
    overflow-wrap: anywhere;
}

.alliance-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.alliance-list-head,
.alliance-row {
    display: grid;
    grid-template-columns: 60px minmax(160px, 2fr) minmax(90px, 1fr) 100px 90px 120px;
    gap: 8px;
    align-items: center;
}

.alliance-list-head {
    padding: 0 10px 3px;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.alliance-row {
    padding: 9px 10px;
    color: #1f160f;
}

.alliance-rank,
.alliance-name {
    font-weight: bold;
}

.alliance-name,
.alliance-tag {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .alliance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alliance-list-head {
        display: none;
    }

    .alliance-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .alliance-row > div {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px;
    }

    .alliance-row > div::before {
        content: attr(data-label);
        color: #5f4229;
        font-weight: bold;
    }
}

@media (max-width: 520px) {
    .alliance-summary {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/*                       World Seite                         */
/* ========================================================= */

.world-page {
    width: 100%;
}

.world-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

.world-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.world-ocean-card {
    display: flex;
    min-height: 82px;
    padding: 8px 6px;
    border: 1px solid #4d3a26;
    border-radius: 8px;
    background: #f9f1e7;
    color: #000;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.world-ocean-card strong {
    display: block;
    font-size: 13px;
}

.world-ocean-card span {
    display: block;
}

.world-ocean-card:hover {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.world-empty {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

@media (max-width: 520px) {
    .world-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 521px) and (max-width: 760px) {
    .world-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .world-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}



/* ========================================================= */
/*                       Ocean Seite                         */
/* ========================================================= */

/* Container für Grid-Layout */
/* Flexible Anordnung von Elementen im Raster mit anpassbaren Spalten und Abständen */
.grid-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 Spalten pro Zeile */
    gap: 5px; /* Abstand zwischen den Kästchen */
    margin-top: 5px; /* Abstand nach oben */
    margin-bottom: 5px; /* Abstand nach unten */
}

.ocean-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: flex-end;
    margin: 10px 0;
}

.ocean-controls label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}

.ocean-controls select {
    min-width: 180px;
    padding: 5px;
}

.ocean-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

.ocean-grid {
    grid-template-columns: repeat(10, minmax(85px, 1fr));
}

/* Einzelnes Grid-Element */
/* Definiert das Erscheinungsbild und die Anpassungen für jedes einzelne Rasterelement */
.grid-item {
    color: var(--ocean-text); /* Textfarbe */
    border: 1px solid #9e764c; /* Rahmenfarbe */
    padding: 10px; /* Innenabstand */
    text-align: center; /* Zentrierte Ausrichtung des Textes */
    font-size: 12px; /* Schriftgröße */
    border-radius: 5px; /* Abgerundete Ecken */
    background-image: var(--ocean-background-2), var(--ocean-background); /* Hintergrundbilder */
    background-repeat: no-repeat; /* Keine Wiederholung der Bilder */
    background-size: cover; /* Skalierung der Bilder */
    background-color: #f4e1c1; /* Helle Hintergrundfarbe */    
    overflow: hidden; /* Versteckt Überlaufinhalte */
}

.grid-item-empty {
    opacity: 0.72;
}

.grid-item-number {
    font-weight: bold;
    margin-bottom: 4px;
}

/* Responsives Design für kleinere Bildschirme */
/* Anpassung der Spaltenanzahl und Kartengröße für kleinere Displays */
@media (max-width: 768px) {
    .ocean-grid {
        min-width: 900px;
    }
}

@media (max-width: 480px) {
    .grid-item {
        min-height: 70px;
    }
}


/* ========================================================= */
/*                       Change Seite                        */
/* ========================================================= */
.change-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

.change-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.change-card {
    min-width: 0;
    border: 1px solid #9e764c;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    padding: 10px;
    background-color: #f9f1e7;
    font-size: 14px;
}

.change-card-header {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    padding: 5px;
    background: linear-gradient(to bottom, #fff4db, #9e764c);
    border-radius: 5px 5px 0 0;
}

.change-card-body p {
    margin: 7px 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.change-empty {
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
}

@media (max-width: 1100px) {
    .change-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .change-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .change-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/*                       Statistik Seite                     */
/* ========================================================= */
.stats-page {
    width: 100%;
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.stats-summary div,
.stats-row,
.stats-empty {
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.stats-summary div,
.stats-empty {
    padding: 10px;
}

.stats-summary span {
    display: block;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.stats-summary strong {
    display: block;
    margin-top: 3px;
    color: #1f160f;
    overflow-wrap: anywhere;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.stats-list-head,
.stats-row {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) 125px 95px 75px 75px 80px minmax(180px, 1.7fr) 80px 90px;
    gap: 8px;
    align-items: center;
}

.stats-list-head {
    padding: 0 10px 3px;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.stats-row {
    padding: 9px 10px;
    color: #1f160f;
}

.stats-game strong,
.stats-build strong {
    display: block;
    overflow-wrap: anywhere;
}

.stats-game span,
.stats-build span,
.stats-register {
    display: block;
    margin-top: 2px;
    color: #5f4229;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.stats-status {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #fff8ec;
    font-size: 12px;
    font-weight: bold;
}

.stats-status-aktiv {
    border-color: #5f7f48;
    color: #29451f;
}

.stats-status-beendet {
    border-color: #81705d;
    color: #5f4229;
}

.stats-status-geschlossen {
    border-color: #9a6c62;
    color: #62342b;
}

@media (max-width: 1100px) {
    .stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-list-head {
        display: none;
    }

    .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 6px 10px;
    }

    .stats-row > div {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
    }

    .stats-row > div::before {
        content: attr(data-label);
        color: #5f4229;
        font-weight: bold;
    }

    .stats-game span,
    .stats-build span,
    .stats-register {
        grid-column: 2;
    }

    .stats-build {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .stats-summary,
    .stats-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/*                       Hall of Fame Seite                  */
/* ========================================================= */

.hof-page {
    width: 100%;
}

.hof-controls {
    margin: 10px 0;
}

.hof-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.hof-summary div,
.hof-panel,
.hof-row,
.hof-empty {
    border: 1px solid #9e764c;
    border-radius: 5px;
    background-color: #f9f1e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.hof-summary div,
.hof-empty {
    padding: 10px;
}

.hof-summary span,
.hof-panel-title span {
    display: block;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.hof-summary strong {
    display: block;
    margin-top: 3px;
    color: #1f160f;
    overflow-wrap: anywhere;
}

.hof-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 10px;
}

.hof-panel {
    min-width: 0;
    padding: 10px;
}

.hof-panel-title {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d0ad80;
}

.hof-panel-title h2 {
    margin: 0;
    color: #1f160f;
    font-size: 18px;
}

.hof-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hof-list-head,
.hof-row {
    display: grid;
    gap: 8px;
    align-items: center;
}

.hof-player-row {
    grid-template-columns: 55px minmax(120px, 1.5fr) minmax(90px, 1fr) 80px 100px;
}

.hof-alliance-row {
    grid-template-columns: 55px minmax(130px, 1.5fr) minmax(70px, 0.8fr) 80px 100px;
}

.hof-list-head {
    padding: 0 8px 3px;
    color: #5f4229;
    font-size: 12px;
    font-weight: bold;
}

.hof-row {
    padding: 8px;
    color: #1f160f;
    background-color: #fff8ec;
}

.hof-rank,
.hof-name {
    font-weight: bold;
}

.hof-name,
.hof-tag {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .hof-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hof-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hof-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hof-list-head {
        display: none;
    }

    .hof-player-row,
    .hof-alliance-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .hof-row > div {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 8px;
    }

    .hof-row > div::before {
        content: attr(data-label);
        color: #5f4229;
        font-weight: bold;
    }
}

@media (max-width: 520px) {
    .hof-summary {
        grid-template-columns: 1fr;
    }

    .hof-panel-title {
        display: block;
    }

    .hof-panel-title span {
        margin-top: 3px;
    }
}

/* ========================================================= */
/*                       Tools Seite                         */
/* ========================================================= */