/* ==========================
   Vesmírná stanice - herní rozhraní
   ========================== */

:root{
    --st-bg: #050816;
    --st-panel: #0b1124;
    --st-panel-2: #111a33;
    --st-card: #131d38;
    --st-border: #1f2b4a;
    --st-border-2: #2c3b62;
    --st-text: #e2e8f0;
    --st-muted: #8a96b3;
    --st-accent: #38bdf8;
    --st-accent-2: #0ea5e9;
    --st-good: #34d399;
    --st-warn: #fbbf24;
    --st-bad: #f87171;
    --st-radius: 12px;
    --st-panel-width: 380px;
    --st-tabs-height: 58px;
    --st-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body{
    height: 100%;
}

body.stanice{
    background: var(--st-bg);
    color: var(--st-text);
    font-family: var(--st-font);
    font-size: 14px;
    line-height: 1.45;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

button{
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

button:disabled{
    cursor: not-allowed;
}

a{
    color: var(--st-accent);
    text-decoration: none;
}

[hidden]{
    display: none !important;
}

/* ==========================
   ROZVRŽENÍ
   ========================== */
.st-app{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
}

.st-main{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--st-panel-width);
    min-height: 0;
}

.st-viewport{
    position: relative;
    overflow: hidden;
    min-width: 0;
}

#space{
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

/* nad objektem, na který jde kliknout, ruka (tažení má přednost) */
#space.is-hover{
    cursor: pointer;
}

#space.is-dragging{
    cursor: grabbing;
}

/* ==========================
   HORNÍ LIŠTA
   ========================== */
.st-top{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(8, 13, 30, 0.96);
    border-bottom: 1px solid var(--st-border);
    z-index: 5;
}

.st-back{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--st-muted);
    border: 1px solid var(--st-border);
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}

.st-back:hover{
    color: var(--st-text);
    border-color: var(--st-border-2);
}

.st-brand{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.st-brand i{
    color: var(--st-accent);
}

/* položky se nesmí zmáčknout (čísla by se ořízla), co se nevejde, zalomí se na další řádek */
.st-hud{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.st-chip{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 6px 10px;
    background: var(--st-panel-2);
    border: 1px solid var(--st-border);
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.st-chip strong{
    font-weight: 700;
}

.st-chip small{
    color: var(--st-muted);
    font-size: 0.78em;
}

.st-chip.is-full{
    border-color: rgba(251, 191, 36, 0.6);
}

/* Zaplnění skladu pod surovinou */
.st-chip--res{
    position: relative;
    padding-bottom: 8px;
}

.st-chip-fill{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.st-chip-fill span{
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--res-color);
    transition: width 0.4s ease;
}

.st-chip-fill.is-high span{
    background: var(--st-warn);
}

.st-chip-fill.is-full span{
    background: var(--st-bad);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.7);
}

.st-chip.is-full strong{
    color: var(--st-warn);
}

.st-chip--credits i{
    color: #fbbf24;
}

.st-chip--energy i{
    color: #facc15;
}

.st-chip--energy.is-negative{
    border-color: rgba(248, 113, 113, 0.6);
}

.st-chip--energy.is-negative strong{
    color: var(--st-bad);
}

.st-battery{
    position: relative;
    width: 34px;
    height: 8px;
    border-radius: 3px;
    background: #0a0f1f;
    border: 1px solid var(--st-border-2);
    overflow: hidden;
}

.st-battery span{
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.st-controls{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.st-speed{
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--st-panel-2);
    border: 1px solid var(--st-border);
    border-radius: 10px;
}

.st-speed .st-icon-btn{
    width: 30px;
    height: 28px;
    border: 0;
}

.st-save{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--st-border);
    color: var(--st-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.st-save.is-error{
    color: var(--st-bad);
    border-color: rgba(248, 113, 113, 0.5);
}

/* ==========================
   TLAČÍTKA
   ========================== */
.st-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--st-border);
    color: var(--st-muted);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.st-icon-btn:hover{
    color: var(--st-text);
    background: rgba(56, 189, 248, 0.08);
}

.st-icon-btn.active{
    color: #031018;
    background: var(--st-accent);
    border-color: var(--st-accent);
}

.st-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--st-border-2);
    background: var(--st-panel-2);
    color: var(--st-text);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s, border-color 0.2s, transform 0.1s, opacity 0.2s;
}

.st-btn:hover:not(:disabled){
    border-color: var(--st-accent);
}

.st-btn:active:not(:disabled){
    transform: translateY(1px);
}

.st-btn:disabled{
    opacity: 0.45;
}

.st-btn small{
    font-weight: 500;
    font-size: 0.75rem;
    opacity: 0.8;
}

.st-btn--primary{
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    border-color: transparent;
    color: #fff;
}

.st-btn--primary:hover:not(:disabled){
    border-color: transparent;
    filter: brightness(1.1);
}

.st-btn--warn{
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.5);
}

.st-btn--danger{
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.st-btn--danger:hover:not(:disabled){
    border-color: var(--st-bad);
}

.st-btn--danger.is-armed{
    background: #b91c1c;
    color: #fff;
}

.st-btn--ghost{
    background: transparent;
}

.st-btn--small{
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.st-chip-btn{
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--st-border-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--st-muted);
}

.st-chip-btn.active{
    color: var(--st-text);
    border-color: var(--st-accent);
    background: rgba(56, 189, 248, 0.15);
}

/* Cena */
.st-cost{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.st-cost span{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.st-cost .is-missing{
    color: var(--st-bad);
}

/* Postupový pruh */
.st-progress{
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #0a0f1f;
    overflow: hidden;
    margin: 4px 0 10px;
}

.st-progress span{
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--st-accent-2), var(--st-accent));
    transition: width 0.25s linear;
}

/* ==========================
   BOČNÍ PANEL
   ========================== */
.st-panel{
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--st-panel);
    border-left: 1px solid var(--st-border);
}

.st-tabs{
    display: flex;
    border-bottom: 1px solid var(--st-border);
    flex-shrink: 0;
}

.st-tab{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px 9px;
    color: var(--st-muted);
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.st-tab i{
    font-size: 1rem;
}

.st-tab:hover{
    color: var(--st-text);
}

.st-tab.active{
    color: var(--st-accent);
    border-bottom-color: var(--st-accent);
}

.st-tab-content{
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--st-border-2) transparent;
}

.st-panel-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.st-panel-head h2{
    font-size: 1.05rem;
    font-weight: 800;
}

.st-panel-head p{
    color: var(--st-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

.st-panel-close{
    display: none;
}

/* úvodní popis záložky sbalený pod ikonu (po prvním přečtení) */
.st-intro-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    vertical-align: 1px;
    border-radius: 50%;
    color: var(--st-muted);
    font-size: 0.8rem;
    transition: color 0.2s, background 0.2s;
}

.st-intro-btn:hover,
.st-intro-btn.active{
    color: var(--st-accent);
    background: rgba(56, 189, 248, 0.12);
}

.st-subhead{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.st-subhead i{
    color: var(--st-accent);
}

/* poznámka s ikonou: text s tučným číslem patří do jednoho <span>, jinak ho flex rozláme na kusy */
.st-note{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--st-muted);
    font-size: 0.8rem;
    margin-top: 8px;
}

.st-note strong{
    color: var(--st-text);
}

.st-muted{
    color: var(--st-muted);
}

.st-empty{
    text-align: center;
    padding: 36px 16px;
    border: 1px dashed var(--st-border-2);
    border-radius: var(--st-radius);
    color: var(--st-muted);
}

.st-empty i{
    font-size: 2rem;
    color: var(--st-accent);
    margin-bottom: 10px;
}

.st-empty strong{
    display: block;
    color: var(--st-text);
    margin-bottom: 4px;
}

/* Stavba */
.st-build-grid{
    display: grid;
    gap: 8px;
}

.st-build-card{
    --mod-color: var(--st-accent);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    transition: border-color 0.2s, background 0.2s;
}

.st-build-card:hover:not(:disabled){
    border-color: var(--mod-color);
}

.st-build-card.active{
    border-color: var(--mod-color);
    background: color-mix(in srgb, var(--mod-color) 12%, var(--st-card));
    box-shadow: 0 0 0 1px var(--mod-color) inset;
}

.st-build-card.is-unavailable .st-build-icon{
    opacity: 0.5;
}

.st-build-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mod-color) 14%, #0a0f1f);
    border: 1px solid color-mix(in srgb, var(--mod-color) 45%, transparent);
    color: var(--mod-color);
    font-size: 1.2rem;
}

.st-build-body{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-build-body strong{
    font-size: 0.92rem;
}

.st-build-body small{
    color: var(--st-muted);
    font-size: 0.76rem;
}

/* Posádka */
.st-crew-summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.st-crew-summary strong{
    display: block;
    font-size: 1.2rem;
}

.st-crew-summary small{
    color: var(--st-muted);
    font-size: 0.75rem;
}

.st-list{
    display: grid;
    gap: 6px;
}

.st-list-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(251, 146, 60, 0.07);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
}

.st-list-row i{
    color: #fb923c;
    margin-right: 4px;
}

.st-avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.12);
    color: var(--st-accent);
    flex-shrink: 0;
}

.st-level{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 3px;
    font-size: 0.62rem;
    color: #fbbf24;
}

.st-level .is-off,
.st-slot .is-off{
    color: #334155;
}

.st-xp{
    flex: 1;
    max-width: 90px;
    height: 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: #0a0f1f;
    overflow: hidden;
}

.st-xp span{
    display: block;
    height: 100%;
    background: #fbbf24;
}

/* Obchod */
.st-trade-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    font-size: 0.82rem;
}

.st-trade-bar i{
    color: var(--st-accent);
}

.st-qty{
    display: flex;
    gap: 4px;
}

.st-badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0a0f1f;
    color: var(--st-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Úkoly */
.st-goals{
    display: grid;
    gap: 8px;
}

.st-goal{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    color: var(--st-muted);
}

.st-goal > i{
    font-size: 1.1rem;
    margin-top: 2px;
}

.st-goal > div{
    flex: 1;
    min-width: 0;
}

.st-goal strong{
    display: block;
    color: var(--st-text);
}

.st-goal small{
    display: block;
    font-size: 0.78rem;
}

.st-goal.is-done > i{
    color: var(--st-good);
}

.st-goal.is-current{
    border-color: var(--st-accent);
    background: color-mix(in srgb, var(--st-accent) 8%, var(--st-card));
}

.st-goal.is-current > i{
    color: var(--st-accent);
}

.st-reward{
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
    white-space: nowrap;
}

/* Deník */
.st-log{
    list-style: none;
    display: grid;
    gap: 4px;
}

.st-log li{
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-left: 3px solid var(--st-border-2);
    background: var(--st-card);
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
}

.st-log time{
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.st-log .is-good{
    border-left-color: var(--st-good);
}

.st-log .is-warn{
    border-left-color: var(--st-warn);
}

.st-log .is-bad{
    border-left-color: var(--st-bad);
}

/* ==========================
   PŘEKRYVY NAD MAPOU
   ========================== */
.st-toasts{
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(520px, calc(100% - 24px));
    pointer-events: none;
    z-index: 4;
}

.st-toast{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(11, 17, 36, 0.94);
    border: 1px solid var(--st-border-2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 0.85rem;
    animation: stToastIn 0.25s ease-out;
    transition: opacity 0.4s, transform 0.4s;
}

.st-toast.is-leaving{
    opacity: 0;
    transform: translateY(-6px);
}

.st-toast i{
    color: var(--st-accent);
}

.st-toast.is-good i{
    color: var(--st-good);
}

.st-toast.is-warn{
    border-color: rgba(251, 191, 36, 0.5);
}

.st-toast.is-warn i{
    color: var(--st-warn);
}

.st-toast.is-bad{
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(60, 12, 18, 0.95);
}

.st-toast.is-bad i{
    color: var(--st-bad);
}

/* upozornění s cílem jde kliknout: kamera ukáže objekt, nebo se otevře záložka */
.st-toast.is-link{
    pointer-events: auto;
    cursor: pointer;
}

.st-toast.is-link:hover{
    border-color: var(--st-accent);
    background: rgba(19, 29, 56, 0.97);
}

.st-toast.is-bad.is-link:hover{
    border-color: var(--st-bad);
    background: rgba(80, 16, 24, 0.97);
}

.st-toast i.st-toast-go{
    margin-left: auto;
    padding-left: 4px;
    color: var(--st-muted);
    font-size: 0.78rem;
    transition: color 0.2s, transform 0.2s;
}

.st-toast.is-link:hover i.st-toast-go{
    color: var(--st-text);
    transform: translateX(2px);
}

@keyframes stToastIn{
    from{
        opacity: 0;
        transform: translateY(-8px);
    }
}

.st-objective{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    max-width: 270px;
}

.st-objective-card{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px 4px;
    text-align: left;
    background: rgba(11, 17, 36, 0.88);
    border: 1px solid var(--st-border-2);
    border-radius: var(--st-radius);
    backdrop-filter: blur(6px);
}

.st-objective-card > i{
    color: var(--st-accent);
    margin-top: 3px;
}

.st-objective-card span{
    flex: 1;
    min-width: 0;
}

.st-objective-card strong{
    display: block;
    font-size: 0.85rem;
}

.st-objective-card small{
    display: block;
    color: var(--st-muted);
    font-size: 0.75rem;
}

.st-zoom{
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.st-zoom .st-icon-btn{
    background: rgba(11, 17, 36, 0.88);
}

/* Body vlevo dole nad mapou (karta výběru ho překryje) */
.st-score{
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    pointer-events: auto;
}

.st-score-box{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    padding: 8px 12px;
    background: rgba(11, 17, 36, 0.88);
    border: 1px solid color-mix(in srgb, #a78bfa 35%, var(--st-border));
    border-radius: 12px;
    backdrop-filter: blur(6px);
}

.st-score-box > i{
    color: #a78bfa;
    font-size: 1.1rem;
}

.st-score-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.st-score-body strong{
    font-size: 0.95rem;
}

.st-score-body strong small,
.st-score-body > small{
    color: var(--st-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.st-score-meter{
    display: block;
    height: 3px;
    margin-top: 2px;
    background: var(--st-border);
    border-radius: 2px;
    overflow: hidden;
}

.st-score-meter span{
    display: block;
    height: 100%;
    background: #a78bfa;
}

/* Karta vybraného objektu: v panelu místo obsahu záložky, mapu nezakrývá (na mobilu vysune spodní panel) */
.st-selection{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--st-border-2) transparent;
    animation: stCardIn 0.18s ease-out;
}

@keyframes stCardIn{
    from{
        opacity: 0;
        transform: translateY(6px);
    }
}

.st-panel.has-selection .st-tab-content{
    display: none;
}

/* záložka pod kartou výběru: zvýraznění ztlumené, klik na ni kartu zavře */
.st-panel.has-selection .st-tab.active{
    color: var(--st-muted);
    border-bottom-color: var(--st-border-2);
}

/* úchyt spodního panelu je jen na mobilu */
.st-sheet-handle{
    display: none;
}

.st-card-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.st-card-head > div{
    flex: 1;
    min-width: 0;
}

.st-card-head strong{
    display: block;
    font-size: 1rem;
}

.st-card-icon{
    --mod-color: var(--st-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mod-color) 15%, #0a0f1f);
    border: 1px solid color-mix(in srgb, var(--mod-color) 50%, transparent);
    color: var(--mod-color);
    font-size: 1.15rem;
}

.st-lvl{
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--st-muted);
    margin-left: 4px;
}

.st-status{
    font-size: 0.76rem;
    font-weight: 600;
}

.st-status::before{
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    vertical-align: 1px;
}

.st-status.is-ok{
    color: var(--st-good);
}

.st-status.is-building,
.st-status.is-upgrade,
.st-status.is-repair{
    color: var(--st-accent);
}

.st-status.is-lowcrew,
.st-status.is-lowpower,
.st-status.is-nocrew,
.st-status.is-nopower{
    color: var(--st-warn);
}

.st-status.is-critical,
.st-status.is-damaged{
    color: var(--st-bad);
}

.st-status.is-off{
    color: var(--st-muted);
}

/* jaderný reaktor: v záloze (energie stačí), bez uranu a s vodou na rezervě pro posádku */
.st-status.is-idle{
    color: #bef264;
}

.st-status.is-nofuel,
.st-status.is-nowater{
    color: var(--st-bad);
}

.st-card-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    margin-top: 6px;
}

.st-card-label{
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--st-muted);
}

.st-card-value{
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.st-card-text{
    color: var(--st-muted);
    font-size: 0.8rem;
    margin: 4px 0 8px;
}

.st-card-note{
    color: var(--st-muted);
    font-size: 0.76rem;
    margin-top: 6px;
}

.st-card-box{
    margin-top: 10px;
    padding: 4px 10px 10px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: rgba(19, 29, 56, 0.6);
}

.st-stats{
    list-style: none;
    display: grid;
    gap: 3px;
    font-size: 0.78rem;
}

.st-stats i{
    width: 18px;
    color: var(--st-accent);
    text-align: center;
    margin-right: 4px;
}

.st-slots{
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.st-slot{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px dashed rgba(251, 146, 60, 0.6);
    background: rgba(251, 146, 60, 0.06);
    font-size: 0.8rem;
}

.st-slot > i{
    color: #fb923c;
}

.st-slot span{
    flex: 1;
}

.st-slot small{
    font-size: 0.6rem;
    color: #fbbf24;
}

.st-slot.is-filled{
    border-style: solid;
    border-color: var(--st-border-2);
    background: var(--st-card);
}

.st-slot.is-filled > i{
    color: var(--st-accent);
}

.st-slot .st-icon-btn{
    width: 28px;
    height: 28px;
}

.st-segment{
    display: flex;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--st-border);
    background: #0a0f1f;
}

.st-segment button{
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--st-muted);
}

.st-segment button.active{
    background: var(--st-accent);
    color: #031018;
}

.st-card-actions{
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.st-card-actions--split{
    grid-template-columns: 1fr 1fr;
}

.st-card-actions--split .st-btn{
    flex-direction: column;
    gap: 2px;
}

.st-card-secondary{
    display: flex;
    gap: 6px;
}

.st-card-secondary .st-btn{
    flex: 1;
}

.st-alert{
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #fecaca;
    font-size: 0.8rem;
}

.st-alert i{
    margin-top: 2px;
}

.st-alert--info{
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.45);
    color: #bae6fd;
}

.st-composition{
    list-style: none;
    display: grid;
    gap: 3px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.st-composition li{
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-composition strong{
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ==========================
   STANICE, SEKCE, MISE
   ========================== */
.st-tab{
    position: relative;
}

.st-tab-dot{
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-accent);
    box-shadow: 0 0 8px var(--st-accent);
}

.st-tab-dot.is-bad{
    background: var(--st-bad);
    box-shadow: 0 0 8px var(--st-bad);
}

button.st-chip{
    cursor: pointer;
}

.st-chip.is-negative{
    border-color: rgba(248, 113, 113, 0.6);
}

.st-chip--hull > i{
    color: #f87171;
}

.st-meter{
    position: relative;
    width: 38px;
    height: 7px;
    border-radius: 3px;
    background: #0a0f1f;
    border: 1px solid var(--st-border-2);
    overflow: hidden;
}

.st-meter span{
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.st-meter--shield span{
    background: linear-gradient(90deg, #6366f1, #a5b4fc);
}

/* trup a pod ním štít v horní liště jako dva tenké pruhy nad sebou */
.st-meters{
    display: grid;
    gap: 2px;
}

.st-meters .st-meter{
    height: 4px;
    border: 0;
    border-radius: 2px;
}

/* surovina a pod ní zásoba rudy malým písmem (ikona v barvě rudy) */
.st-chip-val{
    display: grid;
    line-height: 1.1;
}

.st-chip .st-chip-ore{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.74em;
}

.st-chip-ore i{
    font-size: 0.85em;
    color: var(--ore-color, var(--st-muted));
}

/* posádka: počet lidí a kolik je volných */
.st-chip--crew small{
    color: var(--st-muted);
}

.st-chip--crew.is-negative small{
    color: var(--st-bad);
}

.st-progress--hull span{
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.st-progress--shield span{
    background: linear-gradient(90deg, #6366f1, #a5b4fc);
}

.st-progress--water span{
    background: linear-gradient(90deg, #0284c7, #7dd3fc);
}

.st-progress--time span{
    background: linear-gradient(90deg, #d97706, #fcd34d);
}

.st-progress--urgent span{
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.st-box{
    padding: 10px 12px 4px;
    margin-bottom: 10px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.st-box .st-btn--block{
    margin: 4px 0 10px;
}

.st-box--row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 12px;
}

.st-box--row small{
    display: block;
    color: var(--st-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.st-box--row strong{
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.st-btn--block{
    width: 100%;
}

.st-note--top{
    margin: -2px 0 10px;
}

.st-note--pad{
    padding: 0 12px 12px;
    margin: 0;
}

.st-card-note--warn{
    color: var(--st-warn);
}

.st-list-row--plain{
    background: var(--st-card);
    border-color: var(--st-border);
}

.st-list-row--plain i{
    color: var(--st-accent);
}

/* úroveň technologie jako pět teček */
.st-pips{
    --pip-color: var(--st-accent);
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
    margin-left: 4px;
}

.st-pips span{
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #1e293b;
    border: 1px solid #334155;
}

.st-pips span.is-on{
    background: var(--pip-color);
    border-color: var(--pip-color);
    box-shadow: 0 0 5px var(--pip-color);
}

.st-tech-list{
    display: grid;
    gap: 6px;
}

.st-tech{
    --mod-color: var(--st-accent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--mod-color);
    border-radius: 10px;
}

.st-tech-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mod-color) 15%, #0a0f1f);
    color: var(--mod-color);
}

.st-tech-body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.st-tech-body strong{
    font-size: 0.85rem;
}

.st-tech-body strong small{
    color: var(--st-muted);
    font-weight: 500;
    margin-left: 4px;
}

.st-tech-body > small{
    color: var(--st-muted);
    font-size: 0.72rem;
}

.st-tech-toggle{
    flex-basis: 100%;
    margin-top: 0;
    margin-left: 42px;
}

.st-tech-levels{
    flex-basis: 100%;
    display: grid;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--st-border);
}

.st-tech-level{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--st-muted);
    font-size: 0.74rem;
}

.st-tech-level.is-done{
    opacity: 0.6;
}

.st-tech-level.is-current{
    background: color-mix(in srgb, var(--mod-color) 14%, transparent);
    color: var(--st-text);
}

.st-tech-level-num{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--mod-color);
    color: var(--mod-color);
    font-size: 0.66rem;
    font-weight: 700;
}

.st-tech-level.is-current .st-tech-level-num,
.st-tech-level.is-done .st-tech-level-num{
    background: var(--mod-color);
    color: #0a0f1f;
}

.st-tech-level-tag{
    margin-left: auto;
    flex-shrink: 0;
    color: var(--mod-color);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.st-slot-count{
    color: var(--st-good) !important;
}

.st-slot-count.is-full{
    color: var(--st-warn) !important;
}

.st-section-card{
    padding: 12px;
    margin-bottom: 8px;
    background: var(--st-card);
    border: 1px dashed var(--st-border-2);
    border-radius: var(--st-radius);
}

.st-section-card > small{
    display: block;
    color: var(--st-muted);
    font-size: 0.78rem;
    margin: 4px 0 8px;
}

.st-section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.st-section-slots{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.st-mount-badge{
    --mount-color: var(--st-accent);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mount-color) 55%, transparent);
    background: color-mix(in srgb, var(--mount-color) 12%, transparent);
    font-size: 0.7rem;
    color: var(--st-text);
}

.st-section-slots{
    flex-wrap: wrap;
    gap: 6px !important;
}

.st-section-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* proč prstenec zatím postavit nejde (co chybí) */
.st-section-card > small.st-problem{
    margin: 8px 0 0;
    color: var(--st-warn);
}

/* legenda druhů plošin v přehledu stanice */
.st-legend{
    display: grid;
    gap: 6px;
}

.st-legend-row{
    --mount-color: var(--st-accent);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: 10px;
}

.st-legend-swatch{
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 5px;
    border: 1.5px dashed var(--mount-color);
    background: color-mix(in srgb, var(--mount-color) 12%, transparent);
}

.st-legend-row > span:last-child{
    display: grid;
    gap: 2px;
    min-width: 0;
}

.st-legend-row strong{
    font-size: 0.82rem;
}

.st-legend-row small{
    color: var(--st-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.st-mission{
    --station-color: var(--st-accent);
    margin: 0 12px 12px;
    padding: 10px 12px;
    background: rgba(10, 15, 31, 0.6);
    border: 1px solid var(--st-border-2);
    border-radius: 10px;
}

.st-mission.is-active,
.st-mission.is-offer{
    margin: 0 0 10px;
    background: var(--st-card);
    border-left: 3px solid var(--station-color);
}

.st-mission-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.st-mission-head small{
    color: var(--st-muted);
    font-size: 0.72rem;
}

/* hlavička s miniaturou stanice, která misi zadává (obrázek z Gemini), název mise a stanice pod sebou */
.st-mission-head.has-thumb{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.st-mission-who{
    display: grid;
    gap: 2px;
    min-width: 0;
}

.st-mission p{
    color: var(--st-muted);
    font-size: 0.8rem;
    margin: 4px 0 6px;
}

.st-reward-box{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    padding: 6px 0;
    font-size: 0.78rem;
    color: var(--st-muted);
}

.st-reward-box > span > i{
    color: #fbbf24;
}

.st-reward-tech{
    --mod-color: var(--st-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mod-color) 16%, #0a0f1f);
    border: 1px solid color-mix(in srgb, var(--mod-color) 55%, transparent);
    color: var(--st-text);
}

.st-reward-tech i{
    color: var(--mod-color) !important;
}

.st-reward-tech strong{
    color: var(--st-good);
}

.st-mission-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.st-trend{
    font-size: 0.65rem;
    color: var(--st-muted);
}

.st-trend.is-up{
    color: var(--st-good);
}

.st-trend.is-down{
    color: var(--st-bad);
}


/* AI jádro */
.st-ai-programs{
    display: grid;
    gap: 6px;
}

.st-ai-program{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    transition: border-color 0.2s, background 0.2s;
}

.st-ai-program:hover{
    border-color: var(--st-border-2);
}

.st-ai-program.is-on{
    border-color: #e879f9;
    background: color-mix(in srgb, #e879f9 8%, var(--st-card));
}

.st-ai-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #0a0f1f;
    color: var(--st-muted);
}

.st-ai-program.is-on .st-ai-icon{
    color: #e879f9;
    background: color-mix(in srgb, #e879f9 15%, #0a0f1f);
}

.st-ai-body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.st-ai-body small{
    color: var(--st-muted);
    font-size: 0.75rem;
}

/* přepínač zapnuto / vypnuto */
.st-switch{
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #1e293b;
    border: 1px solid var(--st-border-2);
    transition: background 0.2s;
}

.st-switch span{
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--st-muted);
    transition: transform 0.2s, background 0.2s;
}

.st-switch.is-on{
    background: color-mix(in srgb, #e879f9 45%, #1e293b);
}

.st-switch.is-on span{
    transform: translateX(16px);
    background: #fff;
}








.st-segment--full{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.st-segment--full button{
    padding: 7px;
}








/* ==========================
   MODÁLNÍ OKNA
   ========================== */
.st-modal{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 4, 12, 0.72);
    backdrop-filter: blur(6px);
    z-index: 20;
}

.st-modal-box{
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px;
    background: var(--st-panel);
    border: 1px solid var(--st-border-2);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.st-modal-box > p{
    color: var(--st-muted);
    margin-bottom: 14px;
}

.st-modal-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.st-modal-head h2{
    font-size: 1.1rem;
    font-weight: 800;
}

.st-modal-head h2 i{
    color: var(--st-accent);
    margin-right: 6px;
}

.st-start{
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.18), transparent 60%),
        var(--st-panel);
}

.st-start-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(37, 99, 235, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #e0f2fe;
    font-size: 2rem;
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.25);
}

.st-start h1{
    font-size: 1.6rem;
    font-weight: 800;
}

.st-start-sub{
    color: var(--st-muted);
    margin: 6px 0 18px;
}

.st-start-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    text-align: left;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.st-start-card strong{
    display: block;
}

.st-start-card strong i{
    color: var(--st-accent);
    margin-right: 6px;
}

.st-start-card small{
    display: block;
    color: var(--st-muted);
    font-size: 0.78rem;
}

.st-start-card--form{
    flex-direction: column;
    align-items: stretch;
}

.st-input-row{
    display: flex;
    gap: 8px;
}

.st-input-row input{
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: #0a0f1f;
    border: 1px solid var(--st-border-2);
    border-radius: 10px;
    color: var(--st-text);
    font: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.st-input-row input:focus{
    border-color: var(--st-accent);
}

#startCode{
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

.st-start-help{
    color: var(--st-muted);
    font-size: 0.76rem;
    margin-top: 12px;
}

/* Výběr rasy: tři karty s portrétem (images/races, 268 × 268 ve Full HD), vybraná má rámeček v barvě rasy */
/* nad cookie lištou (z-index 30), na telefonu by jinak zakryla tlačítko Založit stanici, lišta se ukáže zase po výběru */
#raceModal{
    z-index: 35;
}

.st-race-box{
    width: min(880px, 100%);
}

.st-races{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.st-race{
    --race-color: var(--st-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.st-race:hover{
    border-color: var(--st-border-2);
    transform: translateY(-2px);
}

.st-race:focus-visible{
    outline: 2px solid var(--race-color);
    outline-offset: 2px;
}

.st-race.is-selected{
    border-color: var(--race-color);
    box-shadow: 0 0 0 1px var(--race-color), 0 12px 30px rgba(0, 0, 0, 0.45);
}

.st-race-img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    background: #1b2440;
}

.st-race-body{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}

.st-race-name{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--race-color);
}

.st-race-check{
    color: var(--race-color);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
}

.st-race.is-selected .st-race-check{
    opacity: 1;
    transform: scale(1);
}

.st-race-trait{
    color: var(--st-muted);
    font-size: 0.8rem;
}

.st-race-perks{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.st-race-perks span{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
}

.st-race-perks i{
    width: 16px;
    text-align: center;
    color: var(--race-color);
}

.st-race-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* telefon: karty pod sebou, portrét vlevo vedle textu */
@media (max-width: 640px){
    .st-races{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .st-race{
        flex-direction: row;
        align-items: stretch;
    }

    .st-race:hover{
        transform: none;
    }

    .st-race-img{
        width: 104px;
        flex-shrink: 0;
        aspect-ratio: auto;
        height: auto;
        min-height: 104px;
    }

    .st-race-body{
        padding: 10px 12px;
        gap: 4px;
    }

    .st-race-actions{
        position: sticky;
        bottom: -22px;
        margin: 12px -22px -22px;
        padding: 12px 22px;
        background: var(--st-panel);
        border-top: 1px solid var(--st-border);
    }

    .st-race-actions .st-btn{
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    #raceConfirm{
        flex: 1;
    }
}

.st-code-box{
    padding: 14px;
    margin-bottom: 12px;
    text-align: center;
    background: #0a0f1f;
    border: 1px dashed var(--st-accent);
    border-radius: var(--st-radius);
}

.st-code-box small{
    display: block;
    color: var(--st-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.st-code-box strong{
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #e0f2fe;
}

/* Náhodná událost */
.st-incident{
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.14), transparent 60%),
        var(--st-panel);
}

.st-incident-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--incident-color);
    background: color-mix(in srgb, var(--incident-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--incident-color) 50%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--incident-color) 30%, transparent);
}

/* Obrázek události z Gemini: přes celou šířku okna nahoře, spodek přechází do barvy okna a ikona sedí na jeho hraně */
.st-incident.has-art{
    width: min(560px, 100%);
    padding-top: 0;
    /* bez modré záře nahoře, jinak by pod obrázkem byl vidět přechod */
    background: var(--st-panel);
}

.st-incident-art{
    position: relative;
    margin: 0 -22px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    background: linear-gradient(135deg, #111c38, #060a17);
}

.st-incident-art img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s;
}

.st-incident-art img.is-loaded{
    opacity: 1;
}

.st-incident-art::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, var(--st-panel));
    pointer-events: none;
}

.st-incident.has-art .st-incident-icon{
    position: relative;
    margin-top: -29px;
    background: color-mix(in srgb, var(--incident-color) 18%, var(--st-panel));
}

/* na nízkých displejích (telefon na šířku) se obrázek nevejde, okno zůstane bez něj */
@media (max-height: 560px){
    .st-incident-art{
        display: none;
    }

    .st-incident.has-art{
        padding-top: 22px;
    }

    .st-incident.has-art .st-incident-icon{
        margin-top: 0;
    }
}

.st-incident-kicker{
    display: block;
    color: var(--st-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.st-incident h2{
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.st-incident > p{
    color: var(--st-text);
    line-height: 1.5;
}

.st-incident .st-alert{
    text-align: left;
}

.st-incident-choices{
    display: grid;
    gap: 8px;
    text-align: left;
}

.st-incident-choice{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--st-border-2);
    background: var(--st-panel-2);
    color: var(--st-text);
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
}

.st-incident-choice > i{
    width: 22px;
    text-align: center;
    font-size: 1.05rem;
    color: var(--st-accent);
}

.st-incident-choice span{
    display: grid;
    gap: 2px;
}

.st-incident-choice strong{
    font-size: 0.92rem;
}

.st-incident-choice small{
    color: var(--st-muted);
    font-size: 0.78rem;
}

.st-incident-choice small.is-missing{
    color: var(--st-bad);
}

.st-incident-choice:hover:not(:disabled){
    border-color: var(--st-accent);
}

.st-incident-choice:active:not(:disabled){
    transform: translateY(1px);
}

.st-incident-choice:disabled{
    opacity: 0.55;
}

.st-incident-choice.is-primary{
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(14, 165, 233, 0.12);
}

.st-incident-choice.is-danger{
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.1);
}

.st-incident-choice.is-danger > i{
    color: var(--st-bad);
}

.st-incident-choice.is-ghost{
    background: transparent;
}

.st-incident-choice.is-ghost > i{
    color: var(--st-muted);
}

.st-menu-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.st-help{
    list-style: none;
    display: grid;
    gap: 6px;
    color: var(--st-muted);
    font-size: 0.82rem;
}

kbd{
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid var(--st-border-2);
    background: var(--st-card);
    color: var(--st-text);
    font-family: inherit;
    font-size: 0.75rem;
}

.st-menu-footer{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--st-border);
}

/* Cookie lišta, je nad vším včetně úvodní obrazovky */
.st-cookie-bar{
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(760px, calc(100% - 24px));
    padding: 14px 16px;
    background: rgba(11, 17, 36, 0.98);
    border: 1px solid var(--st-border-2);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    z-index: 30;
    animation: stToastIn 0.3s ease-out;
}

.st-cookie-bar > i{
    color: #fbbf24;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.st-cookie-bar p{
    flex: 1;
    color: var(--st-muted);
    font-size: 0.82rem;
}

.st-cookie-bar strong{
    color: var(--st-text);
}

.st-cookie-actions{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.st-noscript{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-bg);
}

/* ==========================
   RESPONZIVITA
   ========================== */
@media(max-width: 1400px) and (min-width: 821px){
    .st-toasts{
        left: auto;
        right: 12px;
        transform: none;
        align-items: flex-end;
        width: min(440px, calc(100% - 310px));
    }
}

/* název hry v liště ustoupí surovinám, aby se lišta nemusela zalamovat */
@media(max-width: 1500px){
    .st-brand span{
        display: none;
    }
}

/* menší notebook: počet volných lidí jen v tooltipu, ať se lišta nezalomí kvůli posledním položkám */
@media(max-width: 1300px) and (min-width: 821px){
    .st-chip--crew small{
        display: none;
    }
}

@media(max-width: 1100px){
    .st-save span{
        display: none;
    }
}

@media(max-width: 820px){
    .st-top{
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .st-brand{
        display: none;
    }

    .st-controls{
        margin-left: auto;
    }

    .st-hud{
        order: 3;
        flex-basis: 100%;
    }

    /* kompaktní položky ve dvou řádcích, všechna čísla zůstanou vidět */
    .st-hud{
        gap: 5px;
    }

    .st-chip{
        gap: 5px;
        padding: 4px 8px;
        font-size: 0.78rem;
    }

    .st-chip--res{
        padding-bottom: 7px;
    }

    .st-chip-fill{
        left: 9px;
        right: 9px;
        bottom: 2px;
    }

    .st-meters .st-meter{
        width: 26px;
    }

    .st-chip--energy small{
        display: none;
    }

    .st-battery{
        width: 24px;
    }

    .st-main{
        grid-template-columns: minmax(0, 1fr);
        position: relative;
    }

    .st-viewport{
        padding-bottom: calc(var(--st-tabs-height) + env(safe-area-inset-bottom));
    }

    /* panel jako spodní vysouvací list, záložky jsou vidět pořád */
    .st-panel{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column-reverse;
        max-height: calc(var(--st-tabs-height) + env(safe-area-inset-bottom));
        border-left: 0;
        border-top: 1px solid var(--st-border);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
        transition: max-height 0.25s ease;
        z-index: 6;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* vysunutý panel: půlka mapy, úchytem na celou výšku */
    .st-panel.is-open{
        max-height: 52%;
    }

    .st-panel.is-open.is-full{
        max-height: calc(100% - 8px);
    }

    .st-panel.is-dragging{
        transition: none;
    }

    .st-panel:not(.is-open) .st-selection{
        display: none;
    }

    .st-selection{
        padding: 6px 14px 14px;
    }

    .st-panel.is-open .st-sheet-handle{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 100%;
        height: 22px;
        touch-action: none;
        cursor: grab;
    }

    .st-sheet-handle span{
        width: 42px;
        height: 5px;
        border-radius: 3px;
        background: var(--st-border-2);
        transition: background 0.2s, width 0.2s;
    }

    .st-sheet-handle:hover span,
    .st-panel.is-dragging .st-sheet-handle span{
        width: 54px;
        background: var(--st-accent);
    }

    .st-panel.is-open .st-tab-content{
        padding-top: 4px;
    }

    .st-tabs{
        border-bottom: 0;
        border-top: 1px solid var(--st-border);
        min-height: var(--st-tabs-height);
    }

    .st-tab{
        border-bottom: 0;
        border-top: 2px solid transparent;
    }

    .st-tab.active{
        border-top-color: var(--st-accent);
    }

    .st-panel.has-selection .st-tab.active{
        color: var(--st-muted);
        border-top-color: var(--st-border-2);
    }

    .st-panel:not(.is-open) .st-tab.active{
        color: var(--st-muted);
        border-top-color: transparent;
    }

    .st-panel:not(.is-open) .st-tab-content{
        display: none;
    }

    .st-panel-close{
        display: inline-flex;
    }

    .st-objective{
        top: 8px;
        left: 8px;
        max-width: 230px;
    }

    /* úkol na mobilu: text na nejvýš dva řádky, celý je v deníku */
    .st-objective-card small{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.7rem;
    }

    /* menší upozornění pod kartou úkolu, nejvýš dvě (ui.js) */
    .st-toasts{
        top: 76px;
        gap: 4px;
    }

    .st-toast{
        gap: 8px;
        padding: 7px 11px;
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .st-zoom{
        right: 8px;
        bottom: calc(var(--st-tabs-height) + env(safe-area-inset-bottom) + 8px);
    }

    .st-score{
        left: 8px;
        bottom: calc(var(--st-tabs-height) + env(safe-area-inset-bottom) + 8px);
    }

    .st-score-box{
        min-width: 0;
        padding: 6px 10px;
    }

    .st-menu-actions{
        grid-template-columns: 1fr;
    }

    .st-cookie-bar{
        flex-wrap: wrap;
        bottom: calc(var(--st-tabs-height) + env(safe-area-inset-bottom) + 8px);
    }

    .st-cookie-bar p{
        flex-basis: calc(100% - 40px);
    }

    .st-cookie-actions{
        flex-direction: row;
        width: 100%;
    }

    .st-cookie-actions .st-btn{
        flex: 1;
    }
}

@media(max-width: 420px){
    .st-save{
        display: none;
    }

    /* úzký telefon: lišta ve dvou řádcích i se čtyřmístnými čísly (volné lidi ukáže tooltip, když chybí, čip zčervená) */
    .st-chip{
        padding: 4px 7px;
    }

    .st-chip--crew small{
        display: none;
    }

    .st-meters .st-meter{
        width: 22px;
    }

    .st-battery{
        width: 20px;
    }

    .st-speed .st-icon-btn{
        width: 28px;
    }
}

/* ==========================
   TOOLTIP HORNÍ LIŠTY
   ========================== */
.st-tip{
    --tip-arrow: 50%;
    position: fixed;
    z-index: 15;
    width: max-content;
    max-width: min(280px, calc(100vw - 16px));
    padding: 10px 12px 11px;
    background: linear-gradient(180deg, rgba(19, 29, 56, 0.97), rgba(11, 17, 36, 0.97));
    border: 1px solid var(--st-border-2);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.05);
    backdrop-filter: blur(8px);
    pointer-events: none;
    animation: st-tip-in 0.14s ease-out;
}

.st-tip::before{
    content: '';
    position: absolute;
    top: -6px;
    left: var(--tip-arrow);
    width: 10px;
    height: 10px;
    background: rgb(19, 29, 56);
    border-top: 1px solid var(--st-border-2);
    border-left: 1px solid var(--st-border-2);
    transform: translateX(-50%) rotate(45deg);
}

@keyframes st-tip-in{
    from{
        opacity: 0;
        transform: translateY(-4px);
    }
    to{
        opacity: 1;
        transform: none;
    }
}

.st-tip-head{
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--st-border);
}

.st-tip-head i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.78rem;
    color: var(--tip-color);
    background: color-mix(in srgb, var(--tip-color) 16%, transparent);
}

.st-tip-head strong{
    font-size: 0.88rem;
    font-weight: 700;
}

.st-tip-body{
    display: grid;
    gap: 5px;
}

.st-tip-row{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--st-muted);
}

.st-tip-row strong{
    color: var(--st-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.st-tip-row.is-good strong{
    color: var(--st-good);
}

.st-tip-row.is-warn strong{
    color: var(--st-warn);
}

.st-tip-row.is-bad strong{
    color: var(--st-bad);
}

.st-tip-meter{
    display: block;
    height: 4px;
    margin: -1px 0 3px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.15);
    overflow: hidden;
}

.st-tip-meter span{
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.st-tip-hint{
    margin-top: 8px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--st-muted);
}

/* popisek objektu pod myší na mapě (jen desktop): u kurzoru, bez šipky */
.st-map-tip{
    position: absolute;
    z-index: 6;
    max-width: 260px;
    padding: 9px 11px 10px;
    animation: none;
}

.st-map-tip::before{
    display: none;
}

.st-map-tip .st-tip-head{
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.st-map-tip-line{
    font-size: 0.76rem;
    color: var(--st-text);
    line-height: 1.45;
}

.st-map-tip .st-tip-hint{
    margin-top: 6px;
}

.st-map-tip .st-tip-hint i{
    margin-right: 4px;
    color: var(--st-accent);
}

/* nápověda v menu: na dotykovém displeji gesta místo myši a kláves */
.st-help--touch{
    display: none;
}

@media (hover: none) and (pointer: coarse){
    .st-help--mouse{
        display: none;
    }

    .st-help--touch{
        display: grid;
    }
}

/* ==========================
   OBCHOD: suroviny s nejlepší cenou, zásilky, vztahy
   ========================== */
/* odpočet do změny cen na jednom řádku (volné lodě ukazují dlaždice doků pod ním) */
.st-trade-clock{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 7px 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    color: var(--st-muted);
    font-size: 0.78rem;
}

.st-trade-clock strong{
    color: var(--st-text);
    font-variant-numeric: tabular-nums;
}

.st-trade-clock small{
    margin-left: auto;
    font-size: 0.7rem;
}

/* Doky nákladních lodí: pevná dlaždice za loď, výška se při odletech nemění */
.st-docks{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.st-dock{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: 58px;
    padding: 8px 10px;
    background: rgba(14, 165, 233, 0.07);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.st-dock.is-buy{
    background: rgba(52, 211, 153, 0.07);
    border-color: rgba(52, 211, 153, 0.3);
}

.st-dock.is-deliver{
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.3);
}

.st-dock.is-free{
    align-items: center;
    background: transparent;
    border-style: dashed;
    border-color: var(--st-border-2);
    color: var(--st-muted);
}

.st-dock > i{
    margin-top: 2px;
    width: 14px;
    text-align: center;
    font-size: 0.8rem;
}

.st-dock-body{
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.st-dock-body strong{
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-dock-body small{
    color: var(--st-muted);
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.st-dock .st-progress{
    margin: 0;
}

/* Karta suroviny */
.st-goods{
    display: grid;
    gap: 10px;
}

.st-good{
    --res-color: var(--st-accent);
    padding: 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.st-good-head{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 10px;
}

.st-good-icon{
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--res-color);
    background: color-mix(in srgb, var(--res-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--res-color) 35%, transparent);
}

.st-good-name{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.st-good-name strong{
    font-size: 0.92rem;
}

.st-good-name small{
    color: var(--st-muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.st-good-meter{
    display: block;
    height: 4px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.st-good-meter span{
    display: block;
    height: 100%;
    background: var(--res-color);
    border-radius: 3px;
}

.st-good-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.st-deal{
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--st-border-2);
    background: var(--st-panel-2);
    color: var(--st-text);
    text-align: left;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s, background 0.2s, transform 0.1s, opacity 0.2s;
}

.st-deal-label{
    color: var(--st-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.st-deal strong{
    font-size: 1.05rem;
    font-weight: 800;
}

.st-deal small{
    color: var(--st-muted);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-deal.is-sell{
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.08);
}

.st-deal.is-sell strong,
.st-deal.is-sell .st-deal-label i{
    color: var(--st-accent);
}

.st-deal.is-buy{
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.08);
}

.st-deal.is-buy strong,
.st-deal.is-buy .st-deal-label i{
    color: var(--st-good);
}

.st-deal:hover:not(:disabled){
    filter: brightness(1.2);
}

.st-deal:active:not(:disabled){
    transform: translateY(1px);
}

.st-deal:disabled{
    border-color: var(--st-border);
    background: transparent;
    cursor: not-allowed;
}

.st-deal:disabled strong,
.st-deal:disabled .st-deal-label i{
    color: var(--st-muted);
}

.st-deal:disabled small{
    color: var(--st-bad);
    opacity: 0.85;
}

.st-good-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--st-muted);
    font-size: 0.74rem;
}

.st-good-toggle:hover{
    color: var(--st-accent);
}

.st-compare{
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--st-border);
}

.st-compare-row{
    display: grid;
    grid-template-columns: 1fr 82px 82px;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}

.st-compare-row.is-head{
    color: var(--st-muted);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.st-compare-row.is-head span:not(:first-child){
    text-align: center;
}

.st-compare-station{
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.st-compare-station::before{
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--station-color);
}

.st-compare-btn{
    padding: 5px 6px;
    border-radius: 8px;
    border: 1px solid var(--st-border-2);
    background: var(--st-panel-2);
    font-weight: 700;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.st-compare-btn.is-sell{
    color: var(--st-accent);
}

.st-compare-btn.is-buy{
    color: var(--st-good);
}

.st-compare-btn.is-best{
    border-color: currentColor;
}

.st-compare-btn:hover:not(:disabled){
    background: rgba(56, 189, 248, 0.1);
}

.st-compare-btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

.st-compare-note{
    margin-top: 2px;
    color: var(--st-muted);
    font-size: 0.68rem;
}

/* Vztahy se stanicemi */
.st-rel-list{
    display: grid;
    gap: 8px;
}

.st-rel{
    --station-color: var(--st-accent);
    padding: 10px 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--station-color);
    border-radius: 10px;
}

.st-rel-head{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
}

.st-rel-head i{
    color: var(--station-color);
    margin-right: 4px;
}

.st-rel-head span{
    color: var(--st-muted);
    font-size: 0.74rem;
}

.st-rel-bar{
    position: relative;
    display: block;
    height: 5px;
    margin: 7px 0 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.14);
}

.st-rel-bar span{
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--station-color);
}

/* ryska dalšího stupně vztahu */
.st-rel-bar i{
    position: absolute;
    top: -3px;
    width: 2px;
    height: 11px;
    border-radius: 1px;
    background: var(--st-text);
    opacity: 0.55;
}

.st-rel small{
    display: block;
    color: var(--st-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* karta s miniaturou stanice (obrázek z Gemini) vlevo */
.st-rel.has-thumb{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.st-station-thumb{
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--st-panel-2);
    border: 1px solid color-mix(in srgb, var(--station-color, var(--st-accent)) 45%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--station-color, var(--st-accent)) 22%, transparent);
}

/* rasa velitele v přehledu stanice */
.st-race-badge{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
}

.st-race-badge small{
    display: block;
    color: var(--st-muted);
    font-size: 0.72rem;
}

.st-race-badge strong{
    color: var(--station-color);
}

.st-race-badge .st-perks{
    margin-top: 5px;
}

/* vztah s piráty: pruh od nejhoršího vztahu vlevo, výplň od nuly (ryska) k současné hodnotě */
.st-rel--pirates{
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--station-color) 10%, transparent), transparent 70%),
        var(--st-card);
}

.st-rel-bar--pirates{
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.22), rgba(148, 163, 184, 0.14) 66%, rgba(52, 211, 153, 0.2));
}

.st-rel-bar--pirates span{
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
}

/* ==========================
   POSÁDKA: povahy, pracoviště, přesun a vyhození
   ========================== */
.st-trait{
    --trait-color: var(--st-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--trait-color);
    background: color-mix(in srgb, var(--trait-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--trait-color) 40%, transparent);
    font-variant-numeric: tabular-nums;
}

.st-workplaces{
    display: grid;
    gap: 6px;
}

.st-workplace{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: 10px;
}

.st-workplace.is-empty{
    border-color: rgba(251, 146, 60, 0.45);
}

.st-workplace > i{
    width: 18px;
    text-align: center;
}

.st-workplace-body{
    display: grid;
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
}

.st-workplace-body small{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--st-text);
    font-size: 0.74rem;
}

.st-workplace-power{
    color: var(--st-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

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

.st-member{
    --trait-color: var(--st-muted);
    padding: 10px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--trait-color);
    border-radius: 10px;
}

.st-member.is-moving{
    border-color: var(--st-accent);
    border-left-color: var(--trait-color);
}

.st-member-head{
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-avatar--trait{
    color: var(--trait-color);
    background: color-mix(in srgb, var(--trait-color) 14%, transparent);
}

.st-member-body{
    display: grid;
    flex: 1;
    min-width: 0;
}

.st-member-body strong{
    font-size: 0.86rem;
}

.st-member-body small{
    color: var(--st-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-member-actions{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

.st-move-list{
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--st-border);
}

.st-move-option{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--st-border-2);
    background: var(--st-panel-2);
    color: var(--st-text);
    text-align: left;
}

.st-move-option:hover{
    border-color: var(--st-accent);
    background: rgba(56, 189, 248, 0.08);
}

.st-move-option > i{
    width: 18px;
    text-align: center;
}

.st-move-option span{
    display: grid;
    font-size: 0.8rem;
}

.st-move-option small{
    color: var(--st-muted);
    font-size: 0.7rem;
}

/* ==========================
   HYPERSKOK A LOKACE
   ========================== */
.st-location{
    --loc-color: var(--st-accent);
    padding: 12px;
    margin-bottom: 8px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--loc-color);
    border-radius: var(--st-radius);
}

.st-location.is-current{
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--loc-color) 18%, transparent), transparent 70%),
        var(--st-card);
    border-color: color-mix(in srgb, var(--loc-color) 45%, transparent);
    border-left-color: var(--loc-color);
}

.st-location.is-current > p{
    margin: 8px 0 0;
    color: var(--st-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.st-location-head{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.st-location-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--loc-color);
    background: color-mix(in srgb, var(--loc-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--loc-color) 40%, transparent);
}

.st-location-name{
    display: grid;
    gap: 2px;
    min-width: 0;
}

.st-location-name strong{
    font-size: 0.9rem;
}

.st-location-name small{
    color: var(--st-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.st-perks{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.st-perk{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--st-muted);
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid var(--st-border-2);
}

.st-perk.is-good{
    color: #a7f3d0;
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.35);
}

.st-perk.is-bad{
    color: #fecaca;
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.35);
}

.st-location-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.st-location-cost{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #a3e635;
}

.st-location-cost.is-missing{
    color: var(--st-bad);
}

.st-location-problem{
    display: block;
    margin-top: 6px;
    color: var(--st-muted);
    font-size: 0.7rem;
}

.st-jump-charge{
    border-color: rgba(125, 211, 252, 0.45);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.15);
}

.st-jump-charge .st-btn{
    margin-bottom: 8px;
}

/* Prohra */
.st-gameover-stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 4px 0 14px;
}

.st-gameover-stats > div{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    font-size: 0.85rem;
}

.st-gameover-stats i{
    width: 16px;
    text-align: center;
    color: var(--st-muted);
}

.st-gameover-stats span{
    flex: 1;
    color: var(--st-muted);
}

.st-gameover-stats strong{
    font-variant-numeric: tabular-nums;
}

/* Žebříček v okně konce hry */
.st-board{
    text-align: left;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: 10px;
}

.st-board-title{
    display: block;
    margin-bottom: 6px;
    color: var(--st-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.st-board-title i{
    color: #fbbf24;
}

.st-board-list{
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-board-list li{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.st-board-list li.is-me{
    background: color-mix(in srgb, #a78bfa 18%, transparent);
    color: var(--st-text);
}

.st-board-rank{
    width: 22px;
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
}

.st-board-name{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-board-list strong{
    color: #a78bfa;
    font-variant-numeric: tabular-nums;
}

.st-board-empty,
.st-board-me{
    margin: 4px 0 0;
    color: var(--st-muted);
    font-size: 0.8rem;
}

/* Přepínač zvuku v horní liště */
#soundBtn.is-off{
    color: var(--st-muted);
    opacity: 0.7;
}

/* Přepínač hudby: vypnutá hudba má ikonu přeškrtnutou (FontAwesome Free nemá music-slash) */
.st-music-btn{
    position: relative;
}

.st-music-btn.is-off{
    color: var(--st-muted);
    opacity: 0.7;
}

.st-music-btn.is-off::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 0 0 2px var(--st-panel);
    transform: rotate(-45deg);
}

/* ==========================
   EVOLUCE MODULŮ (zlaté akcenty)
   ========================== */
:root{
    --st-evo: #fbbf24;
    --st-evo-light: #fde68a;
    --st-evo-dark: #b45309;
}

/* odznak Evoluce vedle názvu modulu (karta, nabídka stavby, přehled stanice) */
.st-evo-badge{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.6);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(180, 83, 9, 0.2));
    color: var(--st-evo-light);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.st-evo-badge i,
.st-subhead .st-evo-badge i{
    color: var(--st-evo);
}

.st-evo-badge.is-compact{
    margin-left: 4px;
    padding: 1px 5px;
}

.st-evo-mark{
    color: var(--st-evo) !important;
}

.st-card-icon.is-evolved{
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--st-evo), 0 0 14px rgba(251, 191, 36, 0.35);
}

/* box se schopností evoluce na kartě modulu */
.st-evo-box{
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.15), rgba(19, 29, 56, 0.6) 55%);
    box-shadow: inset 0 1px 0 rgba(253, 230, 138, 0.12);
}

.st-evo-head{
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-evo-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #fde68a, #d97706);
    color: #2a1a03;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.st-evo-head small{
    display: block;
    color: var(--st-evo);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.st-evo-head strong{
    display: block;
    color: var(--st-evo-light);
    font-size: 0.95rem;
}

.st-evo-box p{
    margin: 6px 0 2px;
    color: #ddd3b8;
    font-size: 0.78rem;
}

.st-evo-box .st-card-label i{
    color: var(--st-evo);
}

/* nápověda na nejvyšší úrovni: dalším krokem je evoluce */
.st-evo-hint{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.07);
    color: var(--st-muted);
    font-size: 0.76rem;
}

.st-evo-hint > i{
    margin-top: 2px;
    color: var(--st-evo);
}

.st-evo-hint strong{
    color: var(--st-evo-light);
}

/* evoluční mise: zlatý akcent, štítek a cesta Modul → Evoluce */
.st-mission.is-evolution{
    border-color: rgba(251, 191, 36, 0.55);
    border-left-color: var(--st-evo);
    background: linear-gradient(170deg, rgba(251, 191, 36, 0.13), var(--st-card) 45%);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12), 0 6px 22px rgba(180, 83, 9, 0.18);
}

.st-evo-kicker{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #1c1203;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.st-evo-mission{
    margin: 8px 0 4px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(10, 15, 31, 0.55);
}

.st-evo-route{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.st-evo-from,
.st-evo-to{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
}

.st-evo-from{
    --mod-color: var(--st-accent);
    border: 1px solid color-mix(in srgb, var(--mod-color) 50%, transparent);
    background: color-mix(in srgb, var(--mod-color) 14%, #0a0f1f);
}

.st-evo-from i{
    color: var(--mod-color);
}

.st-evo-to{
    border: 1px solid var(--st-evo);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.26), rgba(180, 83, 9, 0.26));
    color: var(--st-evo-light);
}

.st-evo-to i,
.st-evo-arrow{
    color: var(--st-evo);
}

.st-mission p.st-evo-ability{
    margin: 6px 0 0;
    color: #ddd3b8;
    font-size: 0.77rem;
}

.st-evo-ability strong{
    color: var(--st-evo-light);
}

.st-mission p.st-evo-note{
    margin: 6px 0 0;
    color: var(--st-warn);
    font-size: 0.72rem;
}

.st-reward-evo{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--st-evo);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(180, 83, 9, 0.22));
    color: var(--st-text);
}

.st-reward-evo strong{
    color: var(--st-evo-light);
}

/* přehled vylepšení: šestý krok evoluce za pěti úrovněmi */
.st-evo-pip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: -4px;
    border-radius: 4px;
    border: 1px dashed #6b5a2a;
    color: #6b5a2a;
    font-size: 0.56rem;
    vertical-align: middle;
}

.st-evo-pip.is-on{
    border: 1px solid var(--st-evo);
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #1c1203;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

.st-tech.is-evolved{
    border-left-color: var(--st-evo);
    background: linear-gradient(100deg, rgba(251, 191, 36, 0.1), var(--st-card) 50%);
}

.st-tech.is-evolved .st-tech-icon{
    box-shadow: 0 0 0 1.5px var(--st-evo);
}

.st-tech-body > small.st-evo-origin{
    color: var(--st-evo);
}

.st-tech-level--evo .st-tech-level-num{
    border-color: var(--st-evo);
    color: var(--st-evo);
    font-size: 0.56rem;
}

.st-tech-level--evo strong{
    color: var(--st-evo-light);
}

.st-tech-level--evo.is-current{
    background: rgba(251, 191, 36, 0.14);
}

.st-tech-level--evo.is-current .st-tech-level-num{
    background: var(--st-evo);
    color: #1c1203;
}

.st-tech-level--evo .st-tech-level-tag{
    color: var(--st-evo);
}

/* nabídka stavby: evolvovaný typ */
.st-build-card.is-evolved{
    border-color: rgba(251, 191, 36, 0.45);
}

.st-build-card.is-evolved .st-build-icon{
    box-shadow: 0 0 0 1.5px var(--st-evo);
}

/* teleport zboží v mřížce doků záložky Obchod */
.st-dock.is-charge{
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(251, 191, 36, 0.4);
}

.st-dock.is-charge > i{
    color: var(--st-evo);
    animation: stEvoSpin 2.4s linear infinite;
}

.st-dock.is-teleport{
    border-color: rgba(251, 191, 36, 0.45);
}

.st-dock.is-teleport > i{
    color: var(--st-evo);
}

.st-progress--evo span{
    background: linear-gradient(90deg, #d97706, #fde68a);
}

@keyframes stEvoSpin{
    to{
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce){
    .st-dock.is-charge > i{
        animation: none;
    }
}

/* upozornění na evoluci a nabídku evoluční mise */
.st-toast.is-evolve{
    border-color: rgba(251, 191, 36, 0.8);
    background: linear-gradient(135deg, rgba(66, 42, 5, 0.97), rgba(11, 17, 36, 0.96) 62%);
    box-shadow: 0 8px 28px rgba(180, 83, 9, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.25);
    font-weight: 600;
}

.st-toast.is-evolve i{
    color: var(--st-evo);
}

.st-toast.is-evolve.is-link:hover{
    border-color: var(--st-evo-light);
    background: linear-gradient(135deg, rgba(92, 58, 8, 0.98), rgba(19, 29, 56, 0.97) 62%);
}

.st-log .is-evolve{
    border-left-color: var(--st-evo);
}


/* ---------- Volba zapamatování kódu hry v menu (karty jako přepínač) ---------- */

.st-subnote{
    margin: -2px 0 10px;
    color: var(--st-muted);
    font-size: 0.82rem;
}

.st-remember{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.st-remember-card{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--st-border-2);
    border-radius: var(--st-radius);
    background: var(--st-card);
    color: var(--st-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.st-remember-card i{
    width: 20px;
    flex-shrink: 0;
    color: var(--st-muted);
    font-size: 1.05rem;
    text-align: center;
}

.st-remember-card span{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.st-remember-card strong{
    font-size: 0.9rem;
}

.st-remember-card small{
    color: var(--st-muted);
    font-size: 0.76rem;
}

.st-remember-card:hover{
    border-color: var(--st-accent);
}

.st-remember-card[aria-checked="true"]{
    border-color: var(--st-accent);
    background: color-mix(in srgb, var(--st-accent) 12%, var(--st-card));
    box-shadow: inset 0 0 0 1px var(--st-accent);
}

.st-remember-card[aria-checked="true"] i{
    color: var(--st-accent);
}

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