/* ============================================================
   RESOURCE PILLS — suroviny v hospodářství
   ============================================================ */
.resource-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* ============================================================
   ECON TABLE — přehled a prostory v hospodářství
   ============================================================ */
.econ-table {
    border-collapse: collapse;
    font-size: 0.9rem;
}
.econ-table td {
    padding: 5px 12px;
    vertical-align: middle;
}
.econ-table td:first-child {
    color: rgba(255,255,255,0.65);
    width: auto;
}
.econ-table td:last-child {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    padding-left: 16px;
}
.econ-table tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.econ-table tr:last-child {
    border-bottom: none;
}

/* ============================================================
   BATTLE MODAL — sdílená tabulka armád (.bat-*)
   ============================================================ */
.bat-table {
    border-collapse: collapse;
    font-size: 0.88rem;
    table-layout: fixed;
}

.bat-table tr {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    height: 2.4rem;
}

.bat-table tr:last-child {
    border-bottom: none;
}

.bat-name {
    padding: 0 0.5rem 0 0.25rem;
    width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 2rem;
}

.bat-val {
    padding: 0 0.25rem;
    width: 35%;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 2rem;
}

.bat-input {
    width: 70px !important;
    margin-left: auto;
    display: block;
    padding: 0.05rem 0.35rem !important;
    font-size: 0.85rem !important;
    height: 1.3rem !important;
    line-height: 1.3rem !important;
    text-align: center;
    background: rgba(0,0,0,0.35) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}

.bat-unit-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.bat-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
    margin: 0 0 0.2rem 0;
}

@media (max-width: 420px) {
    .bat-input  { width: 56px !important; }
    .bat-table  { font-size: 0.82rem; }
}

/* Prevent army modal unit count overflow and wrapping on mobile */
.army-row-hover .col-2[col][title="Počet"],
.army-row-hover .col-2[col][title="Počet"] span {
        font-size: 0.98em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
        display: inline-block;
        vertical-align: middle;
}

@media (max-width: 600px) {
    .army-row-hover .col-2[col][title="Počet"],
    .army-row-hover .col-2[col][title="Počet"] span {
        font-size: 0.93em;
        max-width: 48px;
    }
}

/* Marketplace error box for selling runes/equipment: always show full error, no wrap/overflow */
.alert-danger, .marketplace-error-box {
        white-space: pre-line;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 1em;
        padding: 8px 12px;
        margin: 6px 0 10px 0;
        border-radius: 6px;
        background: #3a1a1a;
        color: #ffd6d6;
        border: 1.5px solid #a04040;
        box-shadow: 0 2px 8px rgba(80,30,30,0.13);
}
/* Styl pro box s odměnou */
.reward-box {
    background: rgba(60, 40, 10, 0.93);
    border: 1.5px solid #bfa05a;
    border-radius: 8px;
    padding: 16px 14px 10px 14px;
    margin-bottom: 10px;
    color: #ffe9b0;
    font-size: 1.08em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    text-align: center;
}

/* Styl pro box se ztrátami */
.losses-box {
    background: rgba(80, 30, 30, 0.92);
    border: 1.5px solid #a04040;
    border-radius: 8px;
    padding: 12px 14px 8px 14px;
    margin-bottom: 10px;
    color: #ffd6d6;
    font-size: 1.04em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
}

/* Styl pro nadpis modalu */
.battle-modal-title h3 {
    color: #ffe9b0;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #000, 0 0 2px #bfa05a;
    margin-bottom: 0.5em;
}
/* Styl pro collapsible battle log
    background: rgba(32, 24, 10, 0.97);
    border: 1px solid #704010;


*/
.battle-log-toggle {
    background: linear-gradient(90deg, #2d1a05 0%, #3a2a1a 100%);
    color: #e0d0b0;
    border: 1px solid #704010;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
}
.battle-log-toggle:hover {
    background: #704010;
    color: #fffbe0;
}

#battleLogContainer {

    border-radius: 8px;
    padding: 18px 14px 10px 14px;
    margin-bottom: 18px;
    color: #f5e6c5;
    font-size: 1.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    max-height: 400px;
    overflow-y: auto;
    word-break: break-word;
}
.battle-report {
    font-family: 'Consolas', 'Courier New', monospace;
    white-space: normal;
    line-height: 1.5;
}

/* --- Battle log blocks (.bl-*) --- */
.bl-armies {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #444;
    line-height: 1.6;
}
.bl-round {
    margin: 8px 0 2px;
}
.bl-round hr {
    border: none;
    border-top: 1px solid #555;
    margin: 0 0 3px;
}
.bl-round-title {
    font-size: 1.0em;
    font-weight: bold;
    color: #c8c8c8;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.bl-attack {
    margin: 1px 0;
    padding: 2px 6px;
    border-left: 2px solid rgba(255,255,255,0.07);
    line-height: 1.55;
}
.bl-attack:hover {
    background: rgba(255,255,255,0.04);
}
.bl-hit {
    font-weight: 500;
}
.bl-skip {
    opacity: 0.38;
    font-size: 0.82em;
    padding: 1px 4px;
    margin: 1px 0;
}
.bl-stats {
    margin: 6px 0 4px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.35);
    border-left: 3px solid #555;
    font-size: 0.88em;
    color: #a8a8a8;
    line-height: 1.7;
}
.bl-end {
    border: none;
    border-top: 1px solid #666;
    margin: 10px 0 6px;
}

/* ============================================================
   BATTLE RESULT MODAL (.br-*) — HoMM4 inspired
   ============================================================ */
.br-modal {
    font-family: 'Times New Roman', serif;
    color: #e0d0b0;
    background: #0e0c0a;
    border-radius: 2px;
    overflow: hidden;
}

/* --- Header banner --- */
.br-header {
    padding: 16px 20px 12px;
    text-align: center;
    border-bottom: 2px solid;
    position: relative;
}
.br-header.br-victory {
    background: linear-gradient(135deg, #0f1f08 0%, #182f0e 50%, #0f1f08 100%);
    border-color: #4a8a2a;
}
.br-header.br-defeat {
    background: linear-gradient(135deg, #1f0808 0%, #2e1010 50%, #1f0808 100%);
    border-color: #8a2a2a;
}
.br-title {
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.br-victory .br-title { color: #80d050; text-shadow: 0 0 18px #3a7a10; }
.br-defeat  .br-title { color: #e05050; text-shadow: 0 0 18px #7a1010; }

/* --- Two-column casualties --- */
.br-casualties {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.br-side { padding: 14px 16px; }
.br-our-side   { background: rgba(30, 50, 90, 0.25); }
.br-enemy-side { background: rgba(90, 30, 30, 0.25); }
.br-divider    { background: rgba(255, 255, 255, 0.09); }

.br-side-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(224, 208, 176, 0.55);
    margin-bottom: 9px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Loss rows */
.br-loss-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.br-loss-item:last-child { border-bottom: none; }
.br-unit-name  { color: #c8b890; }
.br-our-side   .br-unit-count { color: #e05050; font-weight: 700; }
.br-enemy-side .br-unit-count { color: #7fd060; font-weight: 700; }
.br-no-losses {
    font-size: 0.82rem;
    color: rgba(224,208,176,0.38);
    font-style: italic;
    padding: 3px 0;
}

/* --- Rewards section --- */
.br-rewards {
    padding: 12px 16px 14px;
    background: rgba(25, 18, 4, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.br-rewards-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(224, 208, 176, 0.55);
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}
.br-rewards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 7px;
}
.br-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 5px;
    padding: 8px 8px 6px;
    text-align: center;
    gap: 3px;
    transition: border-color 0.15s;
}
.br-reward-item:hover { border-color: rgba(201, 162, 39, 0.6); }
.br-reward-icon      { font-size: 1.25rem; line-height: 1; }
.br-reward-icon img  { width: 22px; height: 22px; vertical-align: middle; }
.br-reward-value {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffe9a0;
    line-height: 1.2;
}
.br-reward-label {
    font-size: 0.63rem;
    color: rgba(224, 208, 176, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Wide reward (full row) */
.br-reward-item.br-reward-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
}
.br-reward-item.br-reward-wide .br-reward-label { font-size: 0.75rem; }
/* Vulkan special */
.br-reward-item.br-vulkan {
    grid-column: 1 / -1;
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.12);
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.2);
}
/* Defeat info */
.br-defeat-reward {
    padding: 12px 16px;
    background: rgba(80, 20, 20, 0.3);
    text-align: center;
    color: #e05050;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* --- Log toggle section --- */
.br-log-section {
    padding: 10px 16px 14px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .br-casualties { grid-template-columns: 1fr; }
    .br-divider { display: none; }
    .br-enemy-side { border-top: 1px solid rgba(255,255,255,0.08); }
    .br-rewards-list { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }
    .br-title { font-size: 1rem; }
}
/* ============================================================
   END BATTLE RESULT MODAL
   ============================================================ */

body {
    font-family: 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #e0d0b0;
    height: 100vh;
    overflow: hidden;
}

.main-container {
    display: flex;
    height: 100vh;

}

.game-title {
    text-align: center;
}

.left-panel {
    width: 300px;
    background-color: #1a3050;
    padding: 20px;
    border-right: 2px solid #704010;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

.kingdom-info {
background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 20px;
  width: fit-content;
  margin: 0px auto auto auto;
}

.resource-row {
    display: flex;
    justify-content: start;
    margin: 0;
}

.resource-label {
    font-weight: bold;
    color: #e0d0b0;
}

.resource-label > i {
  margin: 0 10px;
}
.resource-label > img {
    margin: 0 7px;
    vertical-align: text-bottom;
}

.main-panel {
    flex: 1;
    padding: 1em 20vw;
    background-color: #121212;
    overflow-y: auto;
    height: 100vh;
    width: 100vw;
    padding-bottom:0; /*calc(150px + env(safe-area-inset-bottom, 0px));*/
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 50px;
    padding: 12px 10px !important;
    margin: 0;
    background: linear-gradient(135deg, #2a4060 0%, #1a3050 100%);
    color: #e0d0b0;
    border: 1px solid rgba(112, 64, 16, 0.3) !important;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-button:hover {
    background: linear-gradient(135deg, #3a5070 0%, #2a4060 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #ffd700;
}

.nav-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.building-panel {
    border: +px solid #704010;
    border-radius: 8px;
    padding: 20px;
}

.building-title {
    color: #ffd700;
    border-bottom: 1px solid #949494;
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.recruit-controls {
    margin-top: 15px;
}

.recruit-info {
    margin: 15px 0;
}

.recruit-info div {
    margin-bottom: 5px;
    color: #e0d0b0;
}

.quantity-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 15px 0;
}

.quantity-button {
    background-color: #2a4060;
    color: #e0d0b0;
    border: 1px solid #704010;
    border-radius: 3px;
    padding: 5px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.quantity-button:hover {
    background-color: #3a5070;
}

.recruit-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.recruit-input input {
    width: 100px;
    padding: 8px;
    background-color: #1a1a1a;
    color: #e0d0b0;
    border: 1px solid #704010;
    border-radius: 4px;
}

.recruit-button {
    background-color: #6b4226;
    color: #e0d0b0;
    border: 1px solid #704010;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.recruit-button:hover {
    background-color: #7b5236;
}

.next-month {
    width: 100%;
    background-color: #6b4226;
    color: #e0d0b0;
    border: 1px solid #704010;
    border-radius: 5px;

    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    margin-top: 5px;
    transition: background-color 0.3s;
}

.next-month:hover {
    background-color: #7b5236;
}

.army-panel, .economy-panel, .equipment-panel, .buildings-panel {
    padding: 20px;
    margin: 20px 0 !important;
}

.unit-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px solid #333;
}

/* Fix overflow for army unit numbers on mobile */
.army-row-hover .col-2,
.army-row-hover .col-xl-2 {
    word-break: break-all;
    font-size: 1.1em;
    min-width: 0;
    max-width: 70px;
    overflow-wrap: anywhere;
    text-align: right;
}

.unit-type {
    font-weight: bold;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    color: #e0d0b0;
}

th, td {
    border: 1px solid #704010;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #2a4060;
    color: #ffd700;
    font-weight: bold;
}

td {
    background-color: rgba(0, 0, 0, 0.3);
}


.economy-panel {

}

.stats-panel {
    background-color: rgba(30, 30, 30, 0.8);
    border: 2px solid #704010;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.content-section {
    display: block;
}

.content-section.active {
    display: block;
}

/* Section Header Images */
.section-header-image {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: block;
    object-fit: cover;
    aspect-ratio: 3/1;
    max-height: 133px;
}

@media (max-width: 600px) {
    .section-header-image {
        border-radius: 8px;
        margin-bottom: 12px;
    }
}

.buildings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.war-faction {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.faction-image {
    max-width: 100px;
    max-height: 100px;
    border-radius: 5px;
    margin-top: 10px;
}

.faction-divider {
    border-color: #444;
    margin: 20px 0;
}

.war-faction h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.war-faction h4 {
    color: #87ceeb;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.war-faction p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.war-faction .btn-sm {
    font-size: 0.8rem;
    padding: 4px 8px;
}

#plunder {
  background-color: #1a1a1a;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 24px;
  color: #e0e0e0;
  margin-bottom: 40px;
}



#plunder .section-intro {
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.plunder-location {
  background-color: #2a2a2a;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 0 5px #000 inset;
}

.plunder-location.special {
  border-color: #bb4444;
  background-color: #3a1a1a;
}

.location-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.location-description {
  font-size: 14px;
  margin: 6px 0;
  color: #cccccc;
}

.plunder-stats {
  font-size: 12px;
  color: #999999;
}

.plunder-button {
  display: inline-block;
  background-color: #0077cc;
  color: #fff;
  padding: 6px 12px;
  margin-top: 6px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.plunder-button:hover {
  background-color: #005fa3;
}

.disabled {
  display: inline-block;
  background-color: #444;
  color: #bbb;
  padding: 6px 12px;
  margin-top: 6px;
  border-radius: 4px;
  font-style: italic;
  cursor: not-allowed;
}

.plunder-key {
  font-size: 13px;
  color: #aaa;
  margin-top: 24px;
}

.zmerchnadpis, .zmerchnadpis2, .zmerchnadpis3, .zmerchnadpis4 {
  display: block;
  margin: 4px 0;
}

.equip-items-table, .noequip-items-table {
            width: 100%;
            color: #ecf0f1;
        }

        .equip-items-table th, .noequip-items-table th {
            background: rgba(243,156,18,0.2);
            color: #f39c12;
            padding: 12px;
            text-align: center;
border: none !important;
            font-weight: bold;
        }

        .equip-items-table td, .noequip-items-table td {
            padding: 10px;
border: none !important;            text-align: center;
        }

        .equip-items-table tr:hover, .noequip-items-table tr:hover {
/*            background: rgba(243,156,18,0.1);
            transition: background 0.3s ease;
                        background: rgba(255,215,0,0.1);
            transition: background 0.3s ease;*/
        }

        .item {
            position: relative;
            display: inline-block;
        }

        .item img {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            border: 2px solid #f39c12;
            background: #2c3e50;
        }

        .item span {
            position: absolute;
            bottom: -5px;
            right: -5px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border: 2px solid #c0392b;
        }

        .no-equipment-message,
        .no-materials-message {
            color: #d4af37;
            font-style: italic;
            text-align: center;
            padding: 1.5rem 2rem;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
            border: 1px dashed rgba(212, 175, 55, 0.5);
            font-size: 1rem;
            opacity: 0.9;
        }

        .equipment-section h2 {
            color: #e67e22;
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 1.6rem;
        }

        .equipment-section h3 {
            color: #16a085;
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        .info-text {
            color: #bdc3c7;
            font-style: italic;
            text-align: center;
            margin: 1.5rem 0;
            padding: 1rem;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            border-left: 4px solid #95a5a6;
        }

        .row > .col-md-6 {
            padding: 0 10px;
        }

        @media (max-width: 768px) {
            .game-title {
                font-size: 2rem;
            }
            
            .economy-panel {
                padding: 1rem;
            }
            
            .building-title {
                font-size: 1.4rem;
            }
        }

        .section-title {
            color: #ff6b6b;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: bold;
        }

        .delimit {
            display: flex;
            align-items: center;
            margin: 2rem 0;
        }

        .d-left, .d-right {
            flex: 1;
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            border-radius: 2px;
        }

        .d-middle {
            width: 25px;
            height: 25px;
            background: radial-gradient(circle, #ffd700, #ffb700);
            border-radius: 50%;
            margin: 0 15px;
            box-shadow: 0 0 15px #ffd700;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 15px #ffd700; }
            50% { box-shadow: 0 0 25px #ffd700, 0 0 35px rgba(255,215,0,0.5); }
        }

        .opaque-frame, .battle-report {
            background: rgba(255,255,255,0.08);
            border-radius: 15px;
            padding: 1em;
            margin-bottom: 1.5rem;
            margin: 0;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .equip-items-table {
            width: 100%;
            color: #e8eaed;
            border-collapse: collapse;
        }

        .equip-items-table td {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 1.1rem;
        }

        .equip-items-table tr:hover {

        }

        .neutral {
            background-color: #616161 !important;
        }

        .elven {
            color: #069237 !important;
        }

        .t-r {
            text-align: right;
            font-weight: bold;
            color: #4ecdc4;
        }

        .t-c {
            text-align: center;
            font-weight: bold;
        }

        .rune-container {
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .rune-table {
            background: rgba(255,255,255,0.05);
            border-radius: 10px;
            padding: 1rem;
            min-width: 200px;
        }

        .rune-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        .rune-snow { background: linear-gradient(45deg, #74b9ff, #0984e3); }
        .rune-life { background: linear-gradient(45deg, #00b894, #00a085); }
        .rune-fire { background: linear-gradient(45deg, #fd79a8, #e84393); }
        .rune-sky { background: linear-gradient(45deg, #fdcb6e, #e17055); }
        .rune-night { background: linear-gradient(45deg, #6c5ce7, #a29bfe); }

        .status-ready {
            color: #2ecc71 !important;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(46,204,113,0.5);
        }

        .negative-value {
            color: #e74c3c !important;
        }

        .production-section {

        }

        .production-section h3 {
            color: #ffd700;
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 1.6rem;
        }

        .production-section p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .production-link {
            color: #4ecdc4;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .production-link:hover {
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255,215,0,0.5);
        }

        .stat-highlight {
            background: linear-gradient(45deg, rgba(255,215,0,0.1), rgba(78,205,196,0.1));
            border-radius: 8px;
            padding: 8px;
        }

        .construction-panel {
                        z-index: 0 !important;
        }
        @media (max-width: 768px) {
            .game-title {
                font-size: 2.2rem;
            }
            
            .economy-panel {
                padding: 1.5rem;
            }
            
            .rune-container {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Constructions Section Styles */
        .constructions-panel {
            padding: 20px 20px;
            backdrop-filter: blur(15px);

        }

        .delimit-full {
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            border-radius: 2px;
            margin: 2rem 0;
            position: relative;
        }

        .delimit-full::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 25px;
            height: 25px;
            background: radial-gradient(circle, #ffd700, #ffb700);
            border-radius: 50%;
            box-shadow: 0 0 15px #ffd700;
            animation: pulse 2s infinite;
        }

        .pleneni-table {
            background: rgba(255,255,255,0.08);
            border-radius: 15px;
            padding: 0;
            margin: 1rem;
            border: 2px solid rgba(255,215,0,0.4);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            overflow: hidden;
            transition: all 0.3s ease;
            max-width: 400px;
        }

        .pleneni-table:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255,215,0,0.3);
            border-color: #ffd700;
        }

        .zmerchnadpis5 {
            background: linear-gradient(135deg, #ffd700, #ffb700);
            color: #1a1a2e;
            margin: 0;
            padding: 1rem;
            font-weight: bold;
            font-size: 1.4rem;
            text-shadow: none;
            border-bottom: 2px solid rgba(255,255,255,0.2);
        }

        .zmerchspodek {
            padding: 1.5rem;
        }

        .zmerchspodek p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .zmerchspodek i {
            font-style: italic;
        }

        .construction-cost {
            background: rgba(255,215,0,0.1);
            border-radius: 8px;
            padding: 0.5rem;
            margin: 0.5rem 0;
            border-left: 4px solid #ffd700;
        }

        .construction-link {
            display: inline-block;
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(78,205,196,0.3);
        }

        .construction-link:hover {
            background: linear-gradient(135deg, #ffd700, #ffb700);
            color: #1a1a2e;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255,215,0,0.4);
        }

        .rune-requirement {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(147,112,219,0.2);
            padding: 4px 8px;
            border-radius: 15px;
            border: 1px solid #9370db;
        }

        .rune-requirement img {
            width: 24px;
            height: 24px;
            border-radius: 4px;
        }

        .constructions-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #bdc3c7;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            border: 1px solid rgba(255,215,0,0.2);
        }

        .justify-content-centern {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        @media (max-width: 768px) {
            .main-panel {
    padding: 0 10px;

}
            .game-title {
                font-size: 2.2rem;
            }
            
            .economy-panel, .constructions-panel {
                padding: 1.5rem;
            }
            
            .rune-container {
                flex-direction: column;
                align-items: center;
            }

            .pleneni-table {
                margin: 0.5rem;
                max-width: 100%;
            }

            .justify-content-centern {
                flex-direction: column;
                align-items: center;
            }
        }

        .buildings-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .building-panel {
            border-radius: 10px;
            padding: 20px;
            color: white;
        }
        
        .building-title {
            color: #ffffff;
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.25rem;
        }
        
        .recruit-info {
            margin-bottom: 15px;
        }
        
        .recruit-info div {
            margin-bottom: 5px;
        }
        
        .recruit-info span {
            color: #d4af37;
            font-weight: bold;
        }
        
        .quantity-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 15px;
        }
        
        .quantity-button {
            background: #4a6fa5;
            color: white;
            border: none;
padding: 0px 15px;            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .quantity-button:hover {
            background: #5a7fb5;
        }
        
        .recruit-input {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .form-control {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.9);
        }
        
        .recruit-button {
            background: #8b4513;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.3s;
        }
        
        .recruit-button:hover {
            background: #a0522d;
        }
        
        /* Tablet view - 2 columns */
        @media (max-width: 768px) {
            .buildings-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            
            .game-title {
                font-size: 2rem;
            }
            
            .building-title {
                font-size: 1.3rem;
            }
                        #dynamic-section, #buttons-section {
    margin: 0 !important;
}
        }
        
        /* Mobile view - 1 column */
        @media (max-width: 480px) {
            .buildings-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .content-section {
                padding: 15px;
            }
            
            .game-title {
                font-size: 1.8rem;
            }
            
            .building-title {
                font-size: 1.2rem;
            }
            
            .quantity-buttons {
                justify-content: center;
            }
            
            .recruit-input {
                flex-direction: column;
                gap: 10px;
            }
            
            .form-control, .recruit-button {
                width: 100%;
            }
            #dynamic-section, #buttons-section {
    margin: 0 !important;
}
        }

#explore-nearby, #explore-pustina, #explore-hory, #explore-baziny {
  /* přepsáno novým .exploration-btn stylem */
}

.ffloating-menu {
  margin: 0 0 5px 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  padding: 0 5px !important;
}

.ffloating-menu .tlacitka {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .ffloating-menu {
    gap: 5px;
    padding: 0 3px !important;
  }
  
  .nav-button {
    padding: 10px 5px !important;
    font-size: 1.2rem !important;
    min-width: 45px;
  }
}

@media (max-width: 400px) {
  .ffloating-menu {
    gap: 3px;
    padding: 0 2px !important;
  }
  
  .nav-button {
    padding: 8px 3px !important;
    font-size: 1.1rem !important;
    min-width: 40px;
    border-radius: 8px;
  }
}

#dynamic-section {
    border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-bottom: 120px !important;
}
        .Criothar {
            color: blue !important
        }
        .kaelra, .kaeira, .Kaelra, .Kaeira {
            color: lightblue !important
        }
        .Luminari {
            color: lightyellow !important
        }
        .Gorm, .Gorn, .gorn, .gorm {
            color: orchid !important
        }
        .Vernadar, .Vernagar {
            color: green !important
        }
        .Nekrovar {
            color: #aaaaaa !important
        }
        .Malgoth {
            color: lightgreen !important
        }
        .Pyyrios {
            color: orange !important
        }

        .btn-Criothar {
            background: blue !important
        }
        .btn-Kaeira, .btn-Kaelra {
            background: lightblue !important;
            color: #000 !important
        }
        .btn-Luminari {
            background: lightyellow !important
        }
        .btn-Gorm, .btn-Gorn, .btn-gorn, .btn-gorm {
            background: darkmagenta !important;
            color: #fff !important
        }
        .btn-Vernadar {
            background: green !important
        }
        .btn-Nekrovar {
            background: gray !important
        }
        .btn-Malgoth {
            background: lightgreen !important
        }
        .btn-Pyyrios {
            background: orange !important
        }

        /* Building Box Background Styles */
        .building-box-Criothar {
            background: rgba(0, 0, 255, 0.1) !important;
            border: 1px solid rgba(0, 0, 255, 0.3) !important;
        }

        .building-box-kaelra {
            background: rgba(173, 216, 230, 0.1) !important;
            border: 1px solid rgba(173, 216, 230, 0.3) !important;
        }

        .building-box-Luminari {
            background: rgba(255, 255, 0, 0.1) !important;
            border: 1px solid rgba(255, 255, 0, 0.3) !important;
        }

        .building-box-Gorm {
            background: rgba(139, 0, 139, 0.1) !important;
            border: 1px solid rgba(139, 0, 139, 0.3) !important;
        }

        .building-box-Vernadar {
            background: rgba(0, 128, 0, 0.1) !important;
            border: 1px solid rgba(0, 128, 0, 0.3) !important;
        }

        .building-box-Nekrovar {
            background: rgba(128, 128, 128, 0.1) !important;
            border: 1px solid rgba(128, 128, 128, 0.3) !important;
        }

        .building-box-Malgoth {
            background: rgba(144, 238, 144, 0.1) !important;
            border: 1px solid rgba(144, 238, 144, 0.3) !important;
        }

        .building-box-Pyyrios {
            background: rgba(255, 140, 0, 0.1) !important;
            border: 1px solid rgba(255, 140, 0, 0.3) !important;
        }

        /* Bonus Box Background Styles */
        .bonus-box-Criothar {
            background: rgba(0, 0, 255, 0.1) !important;
            border: 1px solid rgba(0, 0, 255, 0.3) !important;
        }

        .bonus-box-kaelra, .bonus-box-Kaelra, .bonus-box-Kaeira {
            background: rgba(173, 216, 230, 0.1) !important;
            border: 1px solid rgba(173, 216, 230, 0.3) !important;
        }

        .bonus-box-Luminari {
            background: rgba(255, 255, 0, 0.1) !important;
            border: 1px solid rgba(255, 255, 0, 0.3) !important;
        }

        .bonus-box-Gorm, .bonus-box-Gorn, .bonus-box-gorm, .bonus-box-gorn {
            background: rgba(139, 0, 139, 0.1) !important;
            border: 1px solid rgba(139, 0, 139, 0.3) !important;
        }

        .bonus-box-Vernadar, .bonus-box-Vernagar {
            background: rgba(0, 128, 0, 0.1) !important;
            border: 1px solid rgba(0, 128, 0, 0.3) !important;
        }

        .bonus-box-Nekrovar, .bonus-box-Dredd {
            background: rgba(128, 128, 128, 0.1) !important;
            border: 1px solid rgba(128, 128, 128, 0.3) !important;
        }

        .bonus-box-Malgoth {
            background: rgba(144, 238, 144, 0.1) !important;
            border: 1px solid rgba(144, 238, 144, 0.3) !important;
        }

        .bonus-box-Pyyrios {
            background: rgba(255, 140, 0, 0.1) !important;
            border: 1px solid rgba(255, 140, 0, 0.3) !important;
        }

        .bonus-box-neutral {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }


        .hover-text {
        display: inline-block;
        padding: 8px 16px;
        margin: 10px;
        background: #007bff;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        position: relative;
    }

    .hover-text:hover {
        background: #0056b3;
    }

    .hint-popup {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        z-index: 1000;
        margin-bottom: 5px;
    }

    .hint-popup::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
    }

    .hover-text:hover .hint-popup {
        opacity: 1;
        visibility: visible;
    }


.pruzkumy {
    gap: 2em;

}

.tlacitka {
    gap: 20px;

}
.marketplace-section {
    text-align: center;
}

/* ============================================================
   MODAL — sjednocený styl pro všechny modaly
   Výjimky: .br-modal (bojový výsledek), #levelUpModal (žlutý)
   ============================================================ */
.modal-content {
    background-color: #0e0c0a !important;
    color: #e0d0b0 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(212, 175, 55, 0.08) !important;
}

.modal-body {
    padding: 1rem;
}

.table {
    margin: 0;
}

h5 {

}

/* Jednoduchý a kompaktní nadpis království */
.kingdom-header {
    padding: 12px 15px;
    border-bottom: 2px solid #d4af37;
}

.kingdom-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: #d4af37;
    margin: 0;
    font-family: Georgia, serif;
}

.ruler-subtitle {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    color: #c9a961;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-top: 4px;
}

.enemy-info > h5 {
    border-bottom: 1px solid;
  padding-bottom: 5px;
  width: fit-content;
  margin: auto;
}

.list-group-item {
    border: none !important;
}

.active {
    background-color:#533468 !important;
    color: white !important;
}

.nav {
    margin: 1em 0;
    border-radius: 50px;
}

.nav-pills {
    gap: 0.5rem;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
}

.nav-link {
    border-radius: 50px !important;
    color: rgb(172, 172, 165);
    min-width: 80px;
    background-color: transparent;
    transition: all 0.3s ease;
    padding: 10px 16px !important;
    font-weight: 500;
    text-align: center;
    min-height: 44px; /* Touch-friendly */
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link:not(.active) {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.nav-link.active {
    background: linear-gradient(135deg, #2a4060 0%, #1a3050 100%) !important;
    color: #ffd700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav-link:hover {
    border-radius: 50px !important;
    color: #ffd700;
    background-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .nav-pills {
        gap: 0.35rem;
        padding: 0.2rem;
    }
    
    .nav-link {
        padding: 8px 12px !important;
        font-size: 0.9rem;
        min-width: 60px;
    }
}

#army-section > .opaque-frame,
#marketplace-slaves > .opaque-frame,
#marketplace-equipment > .opaque-frame {
    overflow-x: scroll !important;
}

/* Marketplace runes tab: only show images, hide names */
#marketplace-runes-content-buy .flex-grow-1,
#marketplace-runes-content-sell .flex-grow-1 {
    font-size: 0;
}
#marketplace-runes-content-buy img,
#marketplace-runes-content-sell img {
    font-size: 1rem;
    width: 32px !important;
    height: 32px !important;
    margin-right: 0 !important;
    vertical-align: middle;
}

/* Error box for rune selling */
#marketplace-runes-content-sell .alert-danger {
    font-size: 1rem;
    color: #ff3b30;
    background: rgba(255,59,48,0.12);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    border: 1px solid #ff3b30;
}


#economyClanAge {
    border-top-right-radius: 15px;
}

#clanAge {
    border-top-left-radius: 15px;
}

#runyDraka {
    border-bottom-left-radius: 15px;
}

#economyDragonRunes {
    border-bottom-right-radius: 15px;
}

.pleneni-2 {
    background: #5353df21;
}

.pleneni-text-2 {
    color: #5353df;
}

.btn-primary {
    background: #5353df;
    min-height: 44px;
    padding: 10px 20px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pleneni-1 {
    background: rgba(97, 255, 64, 0.08);
}

.pleneni-text-1 {
    color: rgb(96, 255, 64);
}

.btn-success {
    background: rgb(68, 153, 50);
    min-height: 44px;
    padding: 10px 20px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pleneni-3 {
    background: rgba(255, 85, 85, 0.08);
}

.pleneni-text-3 {
    color: rgb(255, 79, 79);
}

.btn-danger {
    background: rgb(153, 50, 50);
    min-height: 44px;
    padding: 10px 20px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly form controls */
.form-control[type="number"],
.form-control[type="text"],
input[type="number"],
input[type="text"] {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
    padding: 8px 12px;
}

@media (max-width: 768px) {
    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-secondary,
    .btn {
        min-height: 48px;
        padding: 12px 20px;
    }
    
    .btn-sm {
        min-height: 40px;
        padding: 8px 16px;
    }
}


.pleneni-text-3 {
    color: rgb(255, 85, 85);
}

.btn-danger {
        background: rgb(155, 37, 37);
}

.modal {
    padding-bottom: 3em;
    padding-top: 3em;
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}



    #army-content > .opaque-frame > .col-1, #army-content > .opaque-frame > .col-2, #army-content > .opaque-frame > .col-3, #army-content > .opaque-frame > .col-6 {
        margin: auto !important;
        text-align: center;
    }



    .p-12 {
        padding-right: 12rem !important;
  padding-left: 12rem !important;
    }

.floating-menu {
    position: fixed;
  width: 80vw;
  left: 0px;
  margin: auto;
    margin-left: auto;
  margin-left: 10vw;
  z-index: 10;
  bottom: 10px;

}

#dynamic-section {
    overflow-y: scroll;
  height: 70vh;
  overflow-x: hidden;
}

/* Resources row - horizontal scroll */
#dynamic-section > .container-fluid > .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#dynamic-section > .container-fluid > .row > .col {
    flex-shrink: 0;
}

#newTurnRecruit {
    bottom: 0;
    padding: 20px 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

button {
    touch-action: manipulation;
}

#select-vyhnani {
    padding: 0;
  margin: 5px 0;
  width: max-content;
  background-color: #e1e1e1;
  border: none;
  padding: 10px;
}

/* Dynamic section with rounded bottom corners */
#dynamic-section {
    border-radius: 15px 15px 15px 15px !important;
    min-height: calc(100vh - 200px);
    position: relative;
    padding-bottom: 150px !important;
}

/* Exploration Section - Floating Image Buttons */
.exploration-section {
    position: fixed;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    z-index: 100;
    background: transparent;
    pointer-events: none;
}

.exploration-section button {
    pointer-events: auto;
}

.exploration-btn {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    border: 2px solid rgba(255, 193, 7, 0.55);
    background: linear-gradient(160deg, rgba(25, 16, 6, 0.93) 0%, rgba(60, 38, 8, 0.93) 100%);
    color: #ffd700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 193, 7, 0.22);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.exploration-btn:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 193, 7, 0.45);
    border-color: rgba(255, 215, 0, 0.85);
    background: linear-gradient(160deg, rgba(40, 25, 8, 0.95) 0%, rgba(80, 52, 10, 0.95) 100%);
}

.exploration-btn:active {
        transform: scale(0.96);
}

.exploration-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    pointer-events: none;
}

.exploration-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* Stat ikony v detailu jednotky – kompaktní grid */
.unit-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 8px 0;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 0.82rem;
    line-height: 1.2;
    min-width: 0;
}

.stat-pill .stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.95;
}

.stat-pill span {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    color: #e0d0b0;
    font-weight: 500;
    min-width: 0;
}

.stat-pill-wide {
    grid-column: span 2;
}

/* Magie a schopnosti mohou mít dlouhý text – zaberou celý řádek */
.stat-pill-full {
    grid-column: span 3;
    align-items: flex-start;
}

/* Obrázek jednotky s barevným pozadím boha v herním detailu */
.unit-img-bg-game {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.unit-img-bg-game img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Mřížka ikon schopností/kouzel uvnitř stat-pill */
.ability-icon-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.ability-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 28px;
    cursor: default;
}
.ability-icon-item img {
    width: 28px;
    height: 28px;
    object-fit: fill;
    image-rendering: pixelated;
}
.ability-icon-item span {
    display: none;
}
/* Fallback – ikona nenalezena, zobraz jen text jako badge */
.ability-icon-fallback {
    width: auto;
    flex-direction: row;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 3px 6px;
}
.ability-icon-fallback span {
    font-size: 0.7rem;
    color: #c8b99a;
}

/* Stat icons v detailu jednotky */
.stat-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    opacity: 0.9;
    image-rendering: auto;
}

@media (max-width: 768px) {
    #dynamic-section {
        min-height: calc(100vh - 150px);
        padding-bottom: 1em !important;
    }

    .exploration-section {
        bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 8px;
    }

    .exploration-btn {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        padding: 0;
    }

    .exploration-img {
        border-radius: 10px;
    }

    .unit-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .stat-pill {
        padding: 4px 6px;
        font-size: 0.78rem;
    }

    .stat-pill .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-pill-wide {
        grid-column: span 2;
    }

    .stat-pill-full {
        grid-column: span 2;
    }
}













/* Odsazení spodní části logu na mobilu, aby se nepřekrývaly s tlačítky */
                @media (max-width: 600px) {
                    .log-section-mobilefix {

                    }
                }
        /* Base Styles */
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            overscroll-behavior: none; /* Prevent pull-to-refresh */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }
        
        /* PWA Safe Area Support for iPhone - Handled by main-content in standalone mode */
        
        /* Prevent text selection on iOS */
        .no-select {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        
        /* iPhone specific button styling */
        button {
            padding: 12px 24px;
            background: #007cba;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            margin: 5px;
            font-size: 16px; /* Prevent zoom on iOS */
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            touch-action: manipulation;
        }
        
        button:hover, button:active {
            background: #005a8b;
        }
        
        /* Input styling for iOS */
        input {
            width: 100%;
            padding: 12px;
            margin: 5px 0;
            box-sizing: border-box;
            font-size: 16px; /* Prevent zoom on iOS */
            border: 1px solid #ddd;
            border-radius: 8px;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        
        input:focus {
            outline: none;
            border-color: #007cba;
            box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
        }
        
        /* Login container responsive for iPhone */
        .login-container {
            max-width: 400px;
            margin: 32px auto 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        @media (max-width: 600px) {
            .login-container {
                margin-top: 24px;
            }
        }
        
        .game-container { 
            display: none; 
        }
        
        .form-group { 
            margin: 15px 0; 
        }
        
        .error { 
            color: #ff3b30; 
            margin: 10px 0; 
            padding: 8px 12px;
            background-color: rgba(255, 59, 48, 0.1);
            border-radius: 6px;
        }
        
        .success { 
            color: #34c759; 
            margin: 10px 0;
            padding: 8px 12px;
            background-color: rgba(52, 199, 89, 0.1);
            border-radius: 6px;
        }
        
        /* PWA Install prompt styling */
        .install-prompt {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: #007cba;
            color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            display: none;
            z-index: 10000;
        }
        
        .install-prompt.show {
            display: block;
            animation: slideUp 0.3s ease-out;
        }
        
        @keyframes slideUp {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        /* Loading spinner for PWA */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Hourglass flip animation for new turn */
        .hourglass-turn {
            display: inline-block;
            animation: hourglassFlip 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1;
        }

        @keyframes hourglassFlip {
            0%   { transform: rotate(0deg); }
            35%  { transform: rotate(180deg); }
            65%  { transform: rotate(180deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Offline indicator */
        .offline-indicator {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #ff3b30;
            color: white;
            text-align: center;
            padding: 8px;
            transform: translateY(-100%);
            transition: transform 0.3s ease;
            z-index: 10001;
        }
        
        .offline-indicator.show {
            transform: translateY(0);
        }
        
        /* Enhanced tap targets for iPhone */
        .nav-button, .btn {
            min-height: 44px; /* Apple's recommended minimum touch target */
            min-width: 44px;
        }
        
        /* Responsive improvements for smaller screens */
        @media (max-width: 390px) {
            .login-container {
                margin: 10px;
                padding: 15px;
            }
            
            button {
                padding: 14px 20px;
                width: 100%;
            }
        }
        
        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #1a1a1a;
                color: #ffffff;
            }
            
            .login-container {
                background-color: #2a2a2a;
                border-color: #444;
            }
            
            input {
                background-color: #333;
                border-color: #555;
                color: #fff;
            }
        }
        
        /* High contrast mode support */
        @media (prefers-contrast: high) {
            button {
                border: 2px solid #000;
            }
            
            input {
                border: 2px solid #000;
            }
        }
        
        /* Reduce motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        
        /* Enhanced PWA styling for iPhone standalone mode */
        @media (display-mode: standalone) {
            body {
                /* DON'T add padding-top here - causes grey chunk */
                background-color: #1a1a1a;
                overflow-y: auto;
                height: 100vh;
            }
            
            /* Hide any browser-style elements in standalone mode */
            .browser-only {
                display: none !important;
            }
            
            /* Main content gets safe area padding instead of body */
            .main-content {
                padding-top: env(safe-area-inset-top);
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
                padding-bottom: env(safe-area-inset-bottom);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                min-height: 100vh;
                box-sizing: border-box;
            }
            
            .game-container {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                height: auto;
            }
        }
        
        /* iPhone specific status bar integration */
        @supports (padding: max(0px)) {
            .ios-safe-area {
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
                padding-bottom: env(safe-area-inset-bottom);
            }
        }


        
        /* Ensure buttons are accessible in PWA mode */
        @media (display-mode: standalone) {
            .floating-menu, .ffloating-menu {
                margin-bottom: env(safe-area-inset-bottom, 20px);
                padding-bottom: 10px;
            }
            
            /* Make sure all game buttons are touchable */
            .nav-button, .btn {
                touch-action: manipulation;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
            }
            
            /* Fix modal z-index and touch issues */
            .modal {
                z-index: 10050 !important;
            }
            
            .modal-backdrop {
                z-index: 10040 !important;
            }
            
            .modal-dialog {
                z-index: 10060 !important;
            }
        }
        
        /* Universal modal fixes for PWA */
        .modal {
            touch-action: manipulation;
        }
        
        .modal-content {
            touch-action: manipulation;
            -webkit-overflow-scrolling: touch;
        }
        
        .modal-body {
            touch-action: manipulation;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Ensure modal buttons work */
        .modal button {
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        
        /* Modal header / title / footer — sjednocený styl */
        .modal-header {
            background: rgba(212, 175, 55, 0.08);
            border-bottom: 1px solid rgba(212, 175, 55, 0.35);
            padding: 12px 20px;
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
        }
        
        .modal-title {
            color: #d4af37;
            font-weight: 600;
            font-family: Georgia, serif;
            letter-spacing: 0.5px;
            margin: 0;
        }

        .modal-footer {
            border-top: 1px solid rgba(212, 175, 55, 0.35);
            background: rgba(212, 175, 55, 0.04);
            padding: 12px 20px;
            border-bottom-left-radius: 11px;
            border-bottom-right-radius: 11px;
        }
        
        .btn-close {
            opacity: 0.7;
            filter: invert(1) brightness(1.5);
            transition: opacity 0.2s;
            min-width: 44px;
            min-height: 44px;
            padding: 12px !important;
            touch-action: manipulation;
        }
        
        .btn-close:hover {
            opacity: 1;
        }

        .opaque-frame {
            border-radius: 12px;
            padding: 5px 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            justify-content: center;
        }

        #dynamic-section > h5 {
            height: fit-content;
  border-bottom: 1px solid white;
  text-align: center;
  width: auto;
  padding-bottom: 6px;
        }

/* ============================================================
   MAGIC TOWER — Správa kouzel a aktivace
   ============================================================ */
.magic-tower-content {
    max-height: 70vh;
    overflow-y: auto;
}

.spell-option {
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
}

.spell-option:hover {
    background: rgba(108,117,125,0.15) !important;
}

.spell-option .form-check-input {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}

.spell-option .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.spell-option label {
    margin-bottom: 0;
}

.school-section {
    transition: box-shadow 0.2s ease-in-out;
}

.school-section:hover {
    box-shadow: 0 0 15px rgba(255,215,0,0.2);
}

.learned-spells-list .school-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================ */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
}

@media (max-width: 768px) {
    #toast-container {
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 400px;
    }
}

.toast {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    min-height: 60px;
    color: #fff;
    font-size: 0.95rem;
    border-left: 4px solid;
}

.toast.toast-success {
    border-left-color: #28a745;
}

.toast.toast-error {
    border-left-color: #dc3545;
}

.toast.toast-warning {
    border-left-color: #ffc107;
}

.toast.toast-info {
    border-left-color: #17a2b8;
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-success .toast-icon {
    color: #28a745;
}

.toast-error .toast-icon {
    color: #dc3545;
}

.toast-warning .toast-icon {
    color: #ffc107;
}

.toast-info .toast-icon {
    color: #17a2b8;
}

.toast-content {
    flex: 1;
    line-height: 1.4;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.toast-message {
    opacity: 0.9;
    font-size: 0.9rem;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    margin: -8px -8px -8px 0;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #fff;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast.toast-removing {
    animation: toastSlideOut 0.3s ease-out forwards;
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}