/* 
    Created on : 17. 11. 2025, 10:57:29
    Author     : Martin Zítka
*/
/************************************************
 * 1) GLOBAL STYLES
 ************************************************/
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #f4f1e8;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
}

.text,
p,
li {
    text-transform: none;
    font-weight: normal;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


* {
    box-sizing: border-box;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    background: #faf8f3;
    padding: 0px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 3px solid #8d6e63;
    box-shadow: inset 0 0 20px rgba(141, 110, 99, 0.2);
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* 📱 malé displeje */
@media (max-width: 600px) {
    .grid-6 {
        grid-template-columns: 1fr;
    }
}


.sticky-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: #f5efe6;
    z-index: 100;
}

/* LEVÁ ČÁST */
.hud-left {
    display: flex;
    gap: 10px;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
}

/* STŘED */
.hud-center {
    display: flex;
    gap: 14px;
    font-size: 13px;
    white-space: nowrap;
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.9;
}

/* PRAVÁ ČÁST */
.hud-right {
    display: flex;
}

.hud-menu-btn {
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

/* MENU */
.hud-menu {
    position: fixed;
    top: 48px;
    right: 10px;
    background: #fff8ed;
    border: 2px solid #8d6e63;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 200000;
}

.hud-menu.is-hidden {
    display: none;
}


.resources-grid {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-top: 15px;
}


.resource-item {
    background: #f9f7f4;
    padding: 12px 15px;
    border: 2px solid #8d6e63;
    font-weight: bold;
    color: #5d4037;
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.raw-material {
    border-color: #795548;
    color: #4e342e;
}

.manufactured-product {
    border-color: #6d4c41;
    color: #3e2723;
}

.menu-section {
    margin: 15px 0;
    text-align: center;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.gold-display {
    background: #fff8e1;
    border: 3px solid #ff8f00;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    display: inline-block;
    box-shadow: 0 0 15px rgba(255, 143, 0, 0.2);
}

@media (max-width: 900px) {
    .main-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .main-stats {
        grid-template-columns: 1fr;
    }
}

/* 🔹 sjednocení typografie chrámů s horními kartami */
.stat-card--temples {
    color: #5d4037;
}

.stat-card--temples .stat-label,
.stat-card--temples .stat-sub,
.stat-card--temples .temple-header,
.stat-card--temples .temple-effect,
.stat-card--temples .temple-count {
    color: #5d4037;
    opacity: 1;
    font-weight: bold;
}

.stat-card--temples {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / -1;
    padding-bottom: 12px;
}

.stat-card--temples .stat-label {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.8;
    margin-top: 2px;
}

.stat-card--temples .stat-sub {
    font-size: 11px;
    opacity: 0.75;
}

.temples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}


.temple-item {
    background: #f9f7f4;
    border: 1px solid #8d6e63;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
}
.temple-header {
    font-weight: bold;
    font-size: 12px;
}
.temple-effect {
    font-weight: normal;
    font-size: 11px;
    opacity: 0.9;
}

.temple-count {
    font-size: 11px;
}
.temple-zeus {
    background: #fff8e1;
    border-color: #ff8f00;
}


.stat-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-btn {
    background: #8d6e63;
    color: #fff;
    border: 2px solid #6d4c41;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    margin-top: 10px;
}

.stat-btn:disabled {
    background: #bcaaa4;
    color: #8d6e63;
    border-color: #a1887f;
    cursor: not-allowed;
}

.stat-icon {
    font-size: 24px;
    min-width: 30px;
    text-align: center;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    color: #3e2723;
}

.stat-label {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
    color: #5d4037;
}

.hud-action-btn {
    background: #fff3e0;
    border: 1px solid #c9a66b;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.hud-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}


/* 📱 Mobilní zmenšení záložek */
@media (max-width: 700px) {
    .tabs button.tab {
        padding: 8px 10px;       /* menší výška */
        font-size: 13px;         /* menší text */
    }
}

/* 📱 Extra malý mobil (iPhone SE, starší Android) */
@media (max-width: 450px) {
    .tabs button.tab {
        padding: 6px 8px;
        font-size: 11.5px;
    }
}


.tab {
    background: #f9f7f4;
    padding: 12px 24px;
    border: 3px solid #8d6e63;
    border-bottom: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #5d4037;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-right: 2px;
}

.tab.active {
    background: #faf8f3;
    color: #5d4037;
    border-bottom: 3px solid #faf8f3;
    margin-bottom: -3px;
    z-index: 10;
    position: relative;
}

.content {
    background: #faf8f3;
    min-height: 500px;
    border: 3px solid #8d6e63;
    border-top-left-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: inset 0 0 20px rgba(141, 110, 99, 0.1);
}

.section-hidden {
    display: none;
}

.buildings-grid {
    display: grid;
    gap: 20px;
}

/* pouze pokud NENÍ grid-6 */
.buildings-grid:not(.grid-6) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.building-card, .ship-card {
    background: #f9f7f4;
    padding: 12px;
    border: 2px solid #8d6e63;
    font-size: 13px;
}

.building-card h3 {
    margin: 0 0 15px 0;
    color: #3e2723;
    font-size: 20px;
    border-bottom: 2px solid #8d6e63;
    padding-bottom: 8px;
}

.building-info {
    margin: 10px 0;
    color: #5d4037;
    line-height: 1.6;
}
.production-time {
    font-size: 12px;
    opacity: 0.7;
}

.production-remaining {
    font-size: 13px;
    font-weight: 600;
    color: #ffd86b;
}

.button {
    background: #8d6e63;
    color: #fff;
    border: 2px solid #6d4c41;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.button:disabled {
    background: #bcaaa4;
    color: #8d6e63;
    border-color: #a1887f;
    cursor: not-allowed;
}
.button.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.button-danger {
    background: #8d6e63;
    border-color: #6d4c41;
}

.button-secondary {
    background: #8d6e63;
    border-color: #6d4c41;
}

.worker-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.worker-count {
    font-weight: bold;
    color: #3e2723;
    font-size: 16px;
}

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

.ship-status {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
    border: 1px solid;
    border-radius: 20px;
}
.ship-state--sailing {
    color: #1e3a8a;
}
.ship-state--idle {
    color: #166534;
}


.status-idle {
    background: #4a4a4a;
    color: #ccc;
    border-color: #666;
}

.status-sailing {
    background: #1e3a8a;
    color: #60a5fa;
    border-color: #3b82f6;
}

.status-ready {
    background: #166534;
    color: #4ade80;
    border-color: #22c55e;
}

.status-waiting {
    background: #92400e;
    color: #fbbf24;
    border-color: #f59e0b;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #f5f3f0;
    border: 2px solid #8d6e63;
    overflow: hidden;
    margin: 10px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8d6e63 0%, #6d4c41 100%);
    transition: width 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.city-demands,
.city-rewards {
    font-size: 14px;
    color: #5d4037;
}

.city-demands {
    margin-bottom: 5px;
}

.cargo-item {
    background: #f9f7f4;
    padding: 15px;
    margin: 10px 0;
    border: 2px solid #8d6e63;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5d4037;
}

.cargo-item--disabled {
    opacity: 0.4;
}


.cargo-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cargo-input {
    width: 60px;
    padding: 5px;
    border: 2px solid #8d6e63;
    background: #faf8f3;
    color: #5d4037;
    text-align: center;
    font-weight: bold;
}

.difficulty-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 500px;
    overflow-y: auto;
}

.difficulty-item {
    background: #f9f7f4;
    padding: 20px;
    border: 2px solid #8d6e63;
    cursor: pointer;
    border-radius: 8px;
}

.difficulty-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #8d6e63;
}

.difficulty-details {
    color: #5d4037;
    line-height: 1.6;
}

.difficulty-details > div {
    margin-bottom: 5px;
}

.voyage-map {
    margin-top: 15px;
    padding: 15px;
    background: #f5f3f0;
    border: 2px solid #8d6e63;
    border-radius: 8px;
}

.voyage-route {
    position: relative;
    height: 60px;
    background: #f5f3f0;
    border: 2px solid #8d6e63;
    border-radius: 8px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.voyage-route::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        #8d6e63 0px,
        #8d6e63 10px,
        transparent 10px,
        transparent 20px
        );
    transform: translateY(-50%);
}

.route-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #5d4037;
}

.ship-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    transition: all 0.1s ease;
    z-index: 10;
}

.ship-icon.returning {
    transform: translateY(-50%) scaleX(-1);
}

.stat-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-btn--danger {
    background: #d32f2f;
    border-color: #b71c1c;
}

/* ============================= */
/* UI PANELS & UTILITIES */
/* ============================= */

.panel {
    background: #faf8f3;
    padding: 20px;
    border: 2px solid #8d6e63;
    border-radius: 8px;
    margin-bottom: 20px;
}

.panel--tight {
    padding: 15px;
}

.panel--light {
    background: #f9f7f4;
}

.panel--success {
    background: #e8f5e8;
    border-color: #4caf50;
}

.panel--warning {
    background: #fff3e0;
    border-color: #ff9800;
}

.panel--danger {
    background: #ffebee;
    border-color: #f44336;
}

.panel-title {
    color: #3e2723;
    font-weight: bold;
    margin-bottom: 12px;
    border-bottom: 2px solid #8d6e63;
    padding-bottom: 8px;
}

.panel-title--small {
    font-size: 16px;
}

.panel-text {
    color: #5d4037;
    line-height: 1.6;
}

.center {
    text-align: center;
}

.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}

.grid-auto-200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.grid-auto-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.grid-auto-300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.is-hidden {
    display: none !important;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.legend-dot--fast {
    background: #4caf50;
}
.legend-dot--medium {
    background: #ff9800;
}
.legend-dot--slow {
    background: #f44336;
}

.modal-center {
    text-align: center;
}

.modal-content {
    max-height: 85vh;        /* nikdy nepřesáhne výšku viewportu */
    overflow-y: auto;        /* vnitřní scroll */
    background: white;
    padding: 10px;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #8d6e63;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f5f3f0;
}

.modal-content--center {
    text-align: center;
}


.button--full {
    width: 100%;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.flex {
    display: flex;
    gap: 10px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button--full {
    width: 100%;
}

.input {
    width: 100%;
    padding: 8px;
    border: 2px solid #8d6e63;
    background: #faf8f3;
    color: #5d4037;
    font-weight: bold;
}

/* ============================= */
/* FOOD STATES */
/* ============================= */

.food-display {
    background: #fff8e1;
    border: 3px solid #ff8f00;
}

.food-display--warning {
    background: #fff3cd;
    border-color: #ffc107;
}

.food-display--danger {
    background: #ffebee;
    border-color: #f44336;
}

.alert--danger {
    background: #ffebee;
    border-color: #f44336;
}

.panel-text--large {
    font-size: 18px;
}

.panel--danger {
    background: #ffebee;
    border-color: #f44336;
}


.manual-subtitle {
    color: #5d4037;
    margin: 0 0 10px;
    font-size: 15px;
}

.chain-card {
    background: #f9f7f4;
    padding: 15px;
    border: 2px solid #8d6e63;
    border-radius: 4px;
}

.chain-card h4 {
    color: #3e2723;
    margin: 0 0 10px;
}

.chain-card .desc {
    color: #5d4037;
    font-size: 14px;
}

.city-card {
    background: #f9f7f4;
    padding: 12px;
    border: 2px solid #8d6e63;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
}

.city-card h4 {
    color: #3e2723;
    margin: 0 0 8px;
}

.city-card .meta {
    color: #5d4037;
    font-size: 14px;
}

/* ============================= */
/* MODALS */
/* ============================= */

.modal {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-dialog {
    background: #faf8f3;
    border: 3px solid #8d6e63;
    border-radius: 10px;
    width: min(92vw, 720px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #8d6e63;
}

.modal-header h2 {
    margin: 0;
    color: #3e2723;
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #5d4037;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 2px solid #8d6e63;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =========================
   📊 INFO / LEGEND ITEMS
========================= */

.info-list {
    display: grid;
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
}

.info-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Barevné varianty */
.info--success {
    background: #e8f5e8;
}
.info--success .info-dot {
    background: #4caf50;
}

.info--warning {
    background: #fff3e0;
}
.info--warning .info-dot {
    background: #ff9800;
}

.info--danger {
    background: #ffebee;
}
.info--danger .info-dot {
    background: #f44336;
}
/* =========================
   🏆 SCORE MODAL
========================= */

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.score-item {
    text-align: center;
}

.score-value {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
}

.score-value--gold {
    color: #ff8f00;
}
.score-value--time {
    color: #4caf50;
}
.score-value--eff {
    color: #2196f3;
}

.score-label {
    font-size: 18px;
    color: #5d4037;
}

.score-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.scroll-box {
    max-height: 300px;
    overflow-y: auto;
}

.form-group {
    margin-bottom: 15px;
}

.input {
    width: 100%;
    padding: 8px;
    border: 2px solid #8d6e63;
    background: #faf8f3;
    color: #5d4037;
    font-weight: bold;
}


/* ===========================
   TRADE STATS – OBECNÉ
   =========================== */

.trade-card {
    background: #f9f7f4;
    padding: 15px;
    border: 2px solid #8d6e63;
    border-radius: 4px;
    margin-bottom: 12px;
}

.trade-card-title {
    margin: 0 0 10px;
    color: #3e2723;
    font-size: 1.05rem;
}

/* ===========================
   ŘÁDKY STATISTIK
   =========================== */

.trade-stat-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

/* ===========================
   BARVY HODNOT
   =========================== */

.stat-green {
    color: #4caf50;
}

.stat-blue {
    color: #2196f3;
}

.stat-orange {
    color: #ff9800;
}

.stat-muted {
    color: #666;
}

/* ===========================
   POZNÁMKY
   =========================== */

.trade-note {
    color: #666;
    font-style: italic;
    margin-top: 6px;
}

.stat-red {
    color: #f44336;
}

.trade-status {
    margin-top: 8px;
    font-size: 13px;
    font-weight: bold;
}

/* ===========================
   DOPORUČENÍ
   =========================== */

.trade-recommendation {
    margin-bottom: 10px;
}

.trade-recommendation-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-recommendation-icon {
    font-size: 20px;
}

.trade-recommendation-text {
    color: #5d4037;
}

/* ===========================
   TYPY DOPORUČENÍ
   =========================== */

.trade-info {
    border-color: #2196f3;
}

.trade-warning {
    border-color: #ff9800;
}

.trade-danger {
    border-color: #f44336;
}

.trade-success {
    border-color: #4caf50;
}

/* ===========================
   CITY CARD
   =========================== */

.city-card {
    background: #faf8f3;
}
.city-card--disabled {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.city-card--disabled .city-demands {
    text-decoration: line-through;
}

.city-disabled {
    opacity: 0.6;
}

/* ===========================
   HLAVIČKA MĚSTA
   =========================== */

.city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #8d6e63;
}

.city-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.city-icon {
    font-size: 26px;
}

.city-name {
    font-size: 18px;
}

.city-desc {
    font-size: 12px;
    color: #6d4c41;
}

/* =========================
   TRADE MODAL – MĚSTA
   ========================= */

/* AKTIVNÍ město = klikatelné */
.city-item {
    cursor: pointer;
    margin: 10px;
    padding: 12px 14px;

    background: #fbf7f2;                 /* světlý pergamen */
    border: 1px solid #c9a66b;            /* bronzový okraj */
    border-radius: 8px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.4),
        0 2px 4px rgba(0,0,0,0.08);

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease,
        opacity 0.15s ease;
}


.city-item:hover {
    background: #f7f1e8;
}

/* DISABLED město */
.city-item.disabled {
    opacity: 0.4;
    filter: grayscale(0.7);
    cursor: not-allowed;
    pointer-events: none; /* ⛔ skutečně zakáže klik */
}

/* volitelně – text upozornění */
.city-item .city-warning {
    margin-top: 6px;
    font-size: 12px;
    color: #b71c1c;
}


/* ===========================
   ČAS CESTY
   =========================== */

.city-time {
    text-align: right;
    font-size: 12px;
    font-weight: bold;
}

.city-time-value {
    font-size: 13px;
    font-weight: normal;
}

.time-short {
    color: #4caf50;
}

.time-medium {
    color: #ff9800;
}

.time-long {
    color: #f44336;
}

/* ===========================
   SEKCE
   =========================== */

.city-section {
    margin-bottom: 12px;
    display: block;
}

.city-section-title {
    margin: 0 0 6px;
    font-size: 15px;
}

/* ===========================
   POŽADAVKY
   =========================== */

.city-demand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin: 3px 0;
    border-radius: 4px;
}

.demand-ok {
    background: #e8f5e8;
}

.demand-missing {
    background: #ffeaa7;
}

/* ===========================
   ODMĚNY
   =========================== */

.city-rewards {
    background: #f9f7f4;
    padding: 8px;
    border: 1px solid #8d6e63;
    border-radius: 4px;
}

.temple-lock-info {
    font-size: 10px;
    line-height: 1.4;
    background: #f5f3f0;
    border: 1px dashed #8d6e63;
    padding: 6px;
    border-radius: 4px;
    color: #5d4037;
}

.temple-lock-info ul {
    padding-left: 16px;
    margin: 4px 0 0;
}

.temple-lock-info li {
    opacity: 0.6;
}

/* 🔒 zamčený Zeus */
.temple-item.is-locked {
    opacity: 0.6;
    filter: grayscale(0.4);
}

.temple-item.is-locked .stat-btn {
    cursor: not-allowed;
}

/* ✅ odemčený Zeus */
.temple-item.is-unlocked {
    opacity: 1;
    filter: none;
}

.temple-item.is-unlocked .temple-lock-info {
    display: none;
}
/* 🔒 Zamčené ukládání skóre */
.score-locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}

.score-locked input,
.score-locked button {
    cursor: not-allowed;
}

/* ✨ jemné upozornění na uložení skóre */
.score-highlight {
    animation: scorePulse 1.2s ease-in-out 2;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
}

@keyframes scorePulse {
    0%   {
        transform: scale(1);
    }
    50%  {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}
.score-nudge {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
}

.save-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;

    padding: 8px 14px;
    border-radius: 6px;

    font-size: 20px;
    font-weight: bold;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);

    transition: opacity .3s ease, transform .3s ease;
}

.save-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@view-transition {
    navigation: auto;
}

.ship-progress {
    margin-top: 6px;
}

.ship-progress-bar {
    width: 100%;
    height: 8px;
    background: #c8e6c9;
    border-radius: 4px;
    overflow: hidden;
}

.ship-progress-fill {
    height: 100%;
    background: #4caf50;
    width: 0%;
    transition: width 0.3s linear;
}

.button--small {
    padding: 6px 10px;
    font-size: 12px;
}

/* ===========================
   ⛵ MŮJ PŘÍSTAV – LODĚ
   =========================== */
.harbor-ships {
    display: grid;
    grid-template-columns: repeat(auto-fit, 280px);
    gap: 16px;
    justify-content: start; 
}

/* jednotlivá loď */
.harbor-ship {
    flex: 1 1 220px;       /* vedle sebe, min šířka */
    max-width: 280px;

    background: #f9f7f4;
    border: 1px solid #8d6e63;
    border-radius: 6px;
    padding: 10px;

    font-size: 13px;
}

/* ⚓ Přístav */
.harbor-ship--dock {
    background: #f9f7f4;
    border-color: #8d6e63;
}

/* 🌊 Na moři */
.harbor-ship--sailing {
    background: #f5f3f0;
    border-color: #6d4c41;
    opacity: 0.95;
}

/* hlavička lodi */
.harbor-ship-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* stav lodi – jemný, ne křiklavý */
.harbor-ship-status {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.85;
}

.ship-crew {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.ship-crew-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.harbor-ship--active {
    opacity: 0.9;
    background: #f5f3f0;
}

.ship-info {
    font-size: 13px;
    color: #5d4037;
    line-height: 1.5;
    margin-top: 6px;
}
/* ============================= */
/* STICKY HUD – horní přehled */
/* ============================= */

/* horní řádek – zlato + jídlo */
.hud-main {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hud-item {
    padding: 6px 10px;
    font-size: 13px;
    border-width: 2px;
}

/* spodní část – suroviny */
.hud-resources {
    margin-top: 6px;
    position: relative;
}

/* ============================= */
/* RESOURCE ITEM – MINIMAL */
/* ============================= */

.sticky-hud .resource-item {
    padding: 4px 6px;
    font-size: 11px;
    min-height: unset;

    /* 👇 KLÍČOVÉ */
    display: flex;
    align-items: center;
    gap: 4px;              /* ikona + mezera + číslo */
    justify-content: center;
}

/* jen číslo – bez textu */
.sticky-hud .resource-item span {
    font-weight: bold;
}

/* grid hustější */
.sticky-hud .resources-grid {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
}

/* ============================= */
/* 📱 MOBIL – maximální úspora */
/* ============================= */

@media (max-width: 600px) {

    .sticky-hud .resource-item {
        font-size: 10px;
        gap: 3px;
    }
}

/* Zeus – checklist bez odrážek */
.temple-lock-info ul {
    list-style: none;
    padding-left: 0;
    margin: 4px 0 0;
}

.temple-lock-info li {
    opacity: 0.65;
    display: flex;
    align-items: center;
    gap: 6px;
}

.temple-lock-info li.is-done {
    opacity: 1;
}

.temple-lock-info .req-check {
    width: 18px;            /* zarovnání sloupce */
    display: inline-block;
}
.food-flow {
    margin-left: 8px;
    font-size: 12px;
    font-weight: bold;
}

.icon{
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: -8px;

}
.icon-anchor {
    color: #000000;
    width: 16px;
}

.icon-factory {
    color: #c0a24a;
}
.icon-city {
    color: #757575;
}
.icon-worker {
    color: #000000;
}
.icon-ship {
    color: #000000;
}
.sea-ship {
    color: #000000;
    filter: none;
}


.icon-food {
    color: #8d6e63;
}

.icon-gold {
    color: #f9a825;
}

.icon-wood {
    color: #6d4c41;
}

.icon-stone {
    color: #757575;
}

.icon-iron {
    color: #424242;
}

.icon-flax {
    color: #c0a24a;
}

.icon-clay {
    color: #a1887f;
}

.icon-olives {
    color: #7a9b3a;
}

.icon-olive_paste {
    color: #5f7f2f;
}

.icon-press_cakes {
    color: #9e8b5c;
}

.icon-oil {
    color: #4f772d;
}

.icon-tools {
    color: #5d4037;
}

.icon-amphoras {
    color: #bf6b3a;
}

.icon-clothes {
    color: #8e99a8;
}

/* 📍 GRID MĚST – přehled výkupu */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* mobil */
@media (max-width: 600px) {
    .grid-6 {
        grid-template-columns: 1fr;
    }
}


.city-grid:not(.grid-6) {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.city-card {
    background: #f9f7f4;
    border: 2px solid #8d6e63;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.city-card h4 {
    margin: 0;
    font-size: 16px;
    color: #3e2723;
}

.city-meta {
    font-size: 13px;
    color: #5d4037;
}

.city-demands,
.city-rewards {
    font-size: 13px;
}

/* === HLAVIČKA – varianta jeden sloupec === */
.city-demands-header--single {
    justify-content: flex-start;
}

/* === Nabídka v jednom řádku === */
.city-rewards--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 6px;
}

.city-rewards--inline .reward-item::after {
    content: " |";
    margin-left: 4px;
}

.city-rewards--inline .reward-item:last-child::after {
    content: "";
}

/* ===========================
   BACKGROUND: běhající dělníci
   =========================== */

#production-section {
    position: relative; /* aby se background vrstva uměla absolutně umístit */
}

/* vrstva, která leží ZA obsahem sekcí */
.worker-bg-layer {
    position: absolute;
    left: 0;
    right: 0;
    /* top/height nastavuje JS podle sekcí */
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 1;
}

/* vytáhneme obsah sekcí nad background vrstvu */
.worker-bg-target {
    position: relative;
    z-index: 1;
}

.bg-worker {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0.95;
    will-change: transform;
}

/* vnitřní vrstva = kolébání */
.bg-worker-inner {
    display: inline-block;
    animation:
        worker-sway 1.6s ease-in-out infinite,
        worker-breathe 4.8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes worker-sway {
    0%   {
        transform: rotate(-6deg)
    }
    50%  {
        transform: rotate(6deg)
    }
    100% {
        transform: rotate(-6deg)
    }
}

@keyframes worker-breathe {
    0%   {
        scale: 1
    }
    50%  {
        scale: 1.04
    }
    100% {
        scale: 1
    }
}


/* pokud getItemIcon() vrací SVG, typicky to bude fungovat takhle */
.bg-worker svg {
    width: 22px;
    height: 22px;
    display: block;
    opacity: 1;
}

/* ===========================
   🌊 SEA MAP
   =========================== */
#cityModal .city-card {
    animation: zoomIn 0.25s ease-out;
}

.city-overlay {
    position: absolute;
    top: 12px;
    left: 12px;

    width: fit-content;
    max-width: 420px;

    background: rgba(255, 248, 235, 0.96);
    border: 2px solid #8d6e63;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);

    padding: 12px;
    z-index: 50;

    display: none;
}

.city-overlay.is-open {
    display: inline-block;
}

.city-card--overlay {
    width: auto;
    min-width: 260px;
}

.city-overlay-close {
    position: absolute;
    top: 6px;
    right: 6px;

    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}
.city-route-info {
    font-size: 12px;
    color: #6d4c41;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sea-ship.is-active {
    animation: shipGlow 1.8s ease-in-out infinite;

    filter:
        drop-shadow(0 0 6px rgba(120, 220, 150, 0.95))
        drop-shadow(0 0 14px rgba(120, 220, 150, 0.85))
        drop-shadow(0 0 26px rgba(120, 220, 150, 0.55));
}


.sea-city.is-active .sea-city-dot {
    box-shadow: 0 0 0 6px rgba(255,215,120,0.8);
}
@media (max-width: 768px) {
    .city-overlay {
        width: calc(100% - 24px);
        left: 12px;
        right: 12px;
    }
}


.sea-section {
    min-height: 100vh;
    display: grid;
    align-items: center;
}


.sea-map {
    position: relative;
    width: 100%;
    height: auto;
    pointer-events: none;

    /* 🔒 FIXNÍ POMĚR STRAN MAPY */
    aspect-ratio: 3 / 2;

    background-image: url("img/mapa.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    margin: 0 auto;

    /* 🟤 hnědý rámeček */
    border: 3px solid #6d4c41; /* teplá antická hnědá */
    box-sizing: border-box;
}



/* vrstva s loděmi */
.sea-ships-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* jedna loď */
.sea-ship {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
    pointer-events: none;
    opacity: 0.9;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
    transition: transform 0.15s linear;

}

/* když je ikona SVG */
.sea-ship svg {
    width: 26px;
    height: 26px;
    display: block;
}
/* ===========================
   🌍 SEA – MĚSTA NA MAPĚ
   =========================== */
/* 🏠 DOMOVSKÝ PŘÍSTAV */
.sea-port {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;

    background: #fff8e1;
    border: 2px solid #ff8f00;
    border-radius: 6px;

    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #3e2723;

    box-shadow: 0 0 10px rgba(255, 143, 0, 0.6);
    pointer-events: none; /* ať neblokuje kliky */
}

.sea-cities-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* vrstva měst (musí být klikací) */
#seaCitiesLayer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    z-index: 3; /* nad mapou i nad loděmi */
}

/* =========================
   🏙️ MĚSTO NA MAPĚ
   ========================= */
.sea-city {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: inherit;
}

/* lepší hitbox */
.sea-city::before {
    content: "";
    position: absolute;
    inset: -12px;
}

/* =========================
   • TEČKA MĚSTA
   ========================= */
.sea-city-dot {
    width: 8px;
    height: 8px;
    background: #6b4b2a;
    border: 2px solid #f3e1b8;
    border-radius: 50%;
    margin-bottom: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.45);
}

/* =========================
   🏷️ KOMPAKTNÍ ŠTÍTEK
   ========================= */
.sea-city-badge {
    display: flex;
    flex-direction: column;
    align-items: center;

    background: rgba(255, 248, 220, 0.75); /* světlé, průsvitné */
    padding: 4px 6px;
    border-radius: 8px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    backdrop-filter: blur(1px);
}

/* =========================
   🧾 IKONY POPTÁVKY
   ========================= */

.sea-city-icons .icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}



/* =========================
   🏷️ NÁZEV MĚSTA
   ========================= */
.sea-city-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #3a2a1a;
}

/* =========================
   ✨ INTERAKCE
   ========================= */
.sea-city:hover .sea-city-badge {
    background: rgba(255, 248, 220, 0.9);
}

.sea-city.is-active .sea-city-dot {
    background: #ffd27a;
    box-shadow: 0 0 8px rgba(255, 210, 122, 0.9);
}

.city-card--highlight {
    box-shadow: 0 0 0 4px rgba(255, 215, 120, 0.6);
    transition: box-shadow 0.2s ease;
}
.sea-map-wrapper {
    position: relative;
}
.city-card--overlay {
    background: #fffaf0;
    border: 2px solid #b08968;
}
#cityOverlay {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1000;
}
#shipOverlay {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1000;
}

.city-demand-icons {
    display: flex;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    margin-right: 6px;
    opacity: 0.9;
}
.pozadi-ostrov {
    padding: 25px;
    background:
        linear-gradient(
        rgba(255, 244, 214, 0.7),
        rgba(240, 225, 185, 0.85)
        ),
        url("img/pozadi_ostrov.webp");
    background-size: cover;
    background-position: center;
}
/* leaderboard buttons */
.leaderboard-btn {
    background: #8d6e63;
    border: 2px solid #6d4c41;
    color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* aktivní mód */
.leaderboard-btn--active {
    background: #ff8f00;
    border-color: #e65100;
}

/* hover efekt */
.leaderboard-btn:not(.leaderboard-btn--active):hover {
    background: #a1887f;
    border-color: #795548;
}
.leaderboard-row {
    margin-bottom: 8px;
}

.score-value--time {
    color: #2196f3;
}

.leaderboard-meta {
    justify-content: space-between;
    font-size: 0.85em;
}
.bg-cernofigura {
    background-image:
        /* zesvětlení zleva */
        linear-gradient(
        to right,
        rgba(255, 250, 235, 0.95) 0%,
        rgba(255, 245, 220, 0.85) 30%,
        rgba(255, 245, 220, 0.55) 60%,
        rgba(255, 245, 220, 0.25) 100%
        ),
        /* slunce shora */
        linear-gradient(
        to bottom,
        rgba(255, 245, 220, 0.85),
        rgba(255, 245, 220, 0.65),
        rgba(255, 245, 220, 0.45),
        rgba(255, 245, 220, 0.25)
        ),
        url("img/pozadi_cernofigura.webp");

    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;

    color: #000;
    padding: 10px;

    /* čitelnost textu */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 6px rgba(255, 255, 255, 0.35);
}

.city-demands-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    opacity: 0.7;
    margin-bottom: 4px;
    padding: 0 4px;
}

.city-demands-label {
    text-align: left;
}

.city-stock-label {
    text-align: right;
}

.hero h1,
#cityName {
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    letter-spacing: 0.08em;

    color: #2b1a12;
    text-shadow:
        0 2px 6px rgba(255, 255, 255, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.45);
}

.hero {
    position: relative;
    min-height: 100vh;
    text-align: center;
    border-radius: 5px;
    /* 🌞 SLUNCE + ATMOSFÉRA */
    background-image:
        radial-gradient(
        circle at 50% 0%,
        rgba(255, 240, 200, 0.55),
        rgba(255, 240, 200, 0.15) 35%,
        rgba(10, 20, 30, 0.25) 60%,
        rgba(10, 20, 30, 0.6)
        ),
        url("img/hero_agora.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-bottom: 2px solid rgba(255, 214, 0, 0.35);
}
.light-bg-gradient {
    position: relative;
    padding: 40px 60px 45px;
    text-align: center;
    z-index: 1;
}
.light-bg-gradient::before {
    content: "";
    position: absolute;
    inset: -20% -35% -25% -35%;
    z-index: -1;

    background:
        radial-gradient(
        ellipse at center,
        rgba(255, 245, 210, 0.75) 0%,
        rgba(255, 245, 210, 0.45) 30%,
        rgba(255, 245, 210, 0.18) 55%,
        rgba(255, 245, 210, 0.05) 70%,
        rgba(255, 245, 210, 0.0) 80%
        );

    filter: blur(2px);
}

.hero-subtitle {
    margin-top: 10px;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #3e2723;
    opacity: 0.85;
}

.ship-route,
.ship-time {
    font-size: 0.9em;
    opacity: 0.85;
    margin-top: 4px;
}
.city-item.disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.8);
}

.city-item.disabled .city-warning {
    color: #b94a48;
    font-size: 0.9em;
    margin-top: 6px;
}
.ship-cargo,
.ship-reward {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.2);
    font-size: 0.9em;
}
.ship-reward--inline {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9em;
    opacity: 0.9;
}
/* HUD ITEM */
.hud-resource {
    cursor: pointer;
    position: relative;
    user-select: none;
    z-index: 10;
}

.hud-resource:hover {
    filter: brightness(1.05);
}

/* TOOLTIP */
.hud-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0 auto;

    min-width: 220px;
    max-width: 300px;

    background: #faf8f3;
    border: 2px solid #8d6e63;
    padding: 10px;

    font-size: 12px;
    text-transform: none;
    color: #5d4037;

    box-shadow: 0 6px 15px rgba(0,0,0,0.25);

    display: none;
    z-index: 1;
}

/* otevřený stav */
.hud-resource.is-open {
    z-index: 10000;
}

.hud-resource.is-open .hud-tooltip {
    display: block;
}

/* text */
.hud-tooltip strong {
    color: #3e2723;
    display: block;
    margin-bottom: 6px;
}

.hud-tooltip ul {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 0;
}

.hud-tooltip li {
    margin-bottom: 4px;
}

/* inline */
.hud-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.hud-value {
    font-weight: bold;
}
#ui-tooltip-root{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999; /* musí být nad vším */
}

#ui-tooltip-root .ui-tooltip{
  position: fixed;
  pointer-events: auto;

  min-width: 220px;
  max-width: 320px;

  background: #faf8f3;
  border: 2px solid #8d6e63;
  padding: 10px;

  font-size: 12px;
  text-transform: none;
  color: #5d4037;

  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}