/* ---------- Alapok ---------- */

:root {
    color-scheme: dark;
    --bg: #070b14;
    --panel: #0d1424;
    --panel-2: #142039;
    --border: #1d2c4a;
    --neon-line: rgba(56, 232, 255, .22);
    --text: #e6f1ff;
    --muted: #8aa0c2;
    --accent: #22d3ee;
    --accent-2: #e879f9;
    --danger: #ff5d8f;
    --ok: #4ade80;
    --warn: #fbbf24;
    --glow: 0 0 14px rgba(34, 211, 238, .35);
    --radius: 12px;
    --gutter: 16px;
    --nav-h: 64px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}

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

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body {
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(232, 121, 249, .13), transparent 60%),
        radial-gradient(900px 480px at -5% 105%, rgba(34, 211, 238, .11), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

body {
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
}

h1 {
    font-size: 1.4rem;
    margin: 0 0 14px;
    letter-spacing: .03em;
    text-shadow: 0 0 18px rgba(34, 211, 238, .45);
}

h2 {
    font-size: 1.05rem;
    margin: 0 0 10px;
}

h3 {
    font-size: 1rem;
    margin: 0;
}

a {
    color: var(--accent-2);
}

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

.footnote {
    font-size: .8rem;
    text-align: center;
    margin-top: 24px;
}

/* ---------- Váz: mobilon alsó navigáció, asztalon oldalsáv ---------- */

.content {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

.topbar {
    flex: none;
    position: relative;
    z-index: 10;
    background: rgba(7, 11, 20, .86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--neon-line);
    box-shadow: 0 1px 18px rgba(34, 211, 238, .08);
    padding: calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;
}

.brand {
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 10px rgba(34, 211, 238, .7), 0 0 26px rgba(232, 121, 249, .35);
}

.brand-mobile {
    font-size: .95rem;
    margin-bottom: 6px;
}

.main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--gutter);
}

.nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    background: rgba(9, 14, 26, .94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--neon-line);
    padding-bottom: env(safe-area-inset-bottom);
}

    .nav .brand {
        display: none;
    }

.nav-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    height: var(--nav-h);
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    color: var(--muted);
    text-decoration: none;
    font-size: .7rem;
}

    .nav-link .nav-icon {
        font-size: 1.25rem;
    }

    .nav-link.active {
        color: var(--accent);
        text-shadow: 0 0 10px rgba(34, 211, 238, .8);
    }

@media (min-width: 900px) {
    .shell {
        display: grid;
        grid-template-columns: 220px 1fr;
    }

    .content {
        padding-bottom: 0;
        min-width: 0;
    }

    .brand-mobile {
        display: none;
    }

    .nav {
        position: sticky;
        top: 0;
        height: 100dvh;
        border-top: 0;
        border-right: 1px solid var(--neon-line);
        padding: 20px 12px;
    }

        .nav .brand {
            display: block;
            font-size: 1.2rem;
            margin: 0 8px 20px;
        }

    .nav-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: auto;
    }

    .nav-link {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: .95rem;
    }

        .nav-link:hover {
            background: var(--panel-2);
        }

        .nav-link.active {
            background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(232, 121, 249, .06));
            box-shadow: inset 3px 0 0 var(--accent);
        }
}

/* ---------- Nyersanyagsáv ---------- */

/* Két sor egyforma csempe (--cols oszlop); ha nem fér el, oldalra görgethető. */
.resource-bar {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), minmax(72px, 1fr));
    grid-auto-rows: 30px;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .resource-bar::-webkit-scrollbar {
        display: none;
    }

/* Fix magasságú csempe: balra az ikon, mellette a készlet, alatta (ha mozog) a ráta; az alján a raktár telítettsége (--fill). */
.resource {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 3px;
    overflow: hidden;
    background:
        linear-gradient(90deg, var(--bar, var(--accent)) var(--fill, 0%), transparent var(--fill, 0%)) bottom / 100% 2px no-repeat,
        linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--neon-line);
    border-radius: 8px;
    padding: 0 5px;
    min-width: 0;
    height: 30px;
    white-space: nowrap;
}

.resource.empty {
    opacity: .4;
}

.resource-icon {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: .95rem;
    line-height: 1;
}

.resource-amount {
    font-size: .8rem;
    line-height: 1.15;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

    .resource-amount small {
        color: var(--muted);
        font-weight: 400;
    }

.resource-rate {
    grid-column: 2;
    font-size: .64rem;
    line-height: 1.1;
    color: var(--ok);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.resource.storage .resource-amount {
    color: var(--muted);
}

.resource.full {
    --bar: var(--danger);
}

    .resource.full .resource-amount {
        color: var(--danger);
    }

.resource-rate.negative,
.resource.power.short .resource-amount {
    color: var(--danger);
}

/* ---------- Panelek, kártyák ---------- */

.panel {
    background: linear-gradient(180deg, rgba(20, 32, 57, .92), rgba(13, 20, 36, .92));
    border: 1px solid var(--neon-line);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel {
    margin-bottom: 16px;
}

.prologue {
    border-color: rgba(232, 121, 249, .45);
    background: linear-gradient(150deg, rgba(76, 29, 110, .55), rgba(13, 20, 36, .95) 60%);
    box-shadow: 0 0 24px rgba(232, 121, 249, .15);
}

    .prologue p {
        margin: 0 0 10px;
    }

.building-icon {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--panel-2);
    border-radius: 10px;
    flex: none;
}

.level {
    font-size: .85rem;
    color: var(--muted);
}

.planned {
    color: var(--accent-2);
}

.desc {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
}

.requirements {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    color: var(--danger);
}

.cost {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.cost-item.short {
    color: var(--danger);
}

.hint {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
}

.coming-soon p:first-child {
    margin-top: 0;
}

/* ---------- Gombok ---------- */

.btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #22d3ee, #a78bfa);
    color: #050a16;
    box-shadow: 0 0 18px rgba(34, 211, 238, .35);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .btn:hover:not(:disabled) {
        filter: brightness(1.08);
    }

    .btn:disabled {
        background: var(--panel-2);
        box-shadow: none;
        border-color: var(--border);
        color: var(--muted);
        cursor: not-allowed;
    }

.btn-inline {
    width: auto;
}

/* ---------- Építési sor ---------- */

.queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.queue-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 10px;
}

.queue-icon {
    font-size: 1.3rem;
}

.queue-name small {
    color: var(--muted);
}

.queue-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent-2);
}

.queue-item:not(.active) .queue-timer {
    color: var(--muted);
    font-weight: 400;
    font-size: .85rem;
}

.progress {
    grid-column: 1 / -1;
    height: 6px;
    background: var(--panel-2);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 1s linear;
}

/* ---------- Értesítés ---------- */

.toast {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(60, 12, 36, .96);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

@media (min-width: 900px) {
    .toast {
        left: auto;
        right: 24px;
        bottom: 24px;
        max-width: 380px;
    }
}

.toast-close {
    background: none;
    border: 0;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

/* ---------- Blazor betöltés és hiba ---------- */

#blazor-error-ui {
    background: #3c0c24;
    color: var(--text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Hiba történt.";
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--panel-2);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--muted);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Betöltés");
    }

/* ---------- Beállítások ---------- */

.settings h2 {
    margin-top: 0;
}

.speed-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

.speed-option {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .speed-option.active {
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent), var(--glow);
    }

    .speed-option:disabled {
        cursor: progress;
    }

.confirm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Bontás és feladás: a panel alján, a többi művelettől elválasztva. */
.demolish,
.abandon {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--neon-line);
}

    .abandon h3 {
        margin: 0 0 6px;
    }

.btn-danger {
    background: linear-gradient(90deg, #ff5d8f, #f97316);
    box-shadow: 0 0 18px rgba(255, 93, 143, .35);
}

.btn-secondary {
    border: 1px solid rgba(34, 211, 238, .55);
    background: rgba(34, 211, 238, .06);
    color: var(--accent);
    box-shadow: none;
}

/* ---------- Kolónia: fejléc, terraformáltság ---------- */

.colony-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.colony-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px 16px;
}

    .colony-head h1 {
        margin: 0;
    }

.terraform {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    flex: 1 1 auto;
    max-width: 420px;
    margin-left: auto;
}

.power-chip {
    flex: none;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #ffd36a;
    border: 1px solid rgba(255, 211, 106, .45);
    border-radius: 999px;
    padding: 2px 10px;
    box-shadow: 0 0 10px rgba(255, 211, 106, .2);
}

    .power-chip small {
        color: var(--muted);
        font-weight: 400;
    }

    .power-chip.short {
        color: var(--danger);
        border-color: rgba(255, 93, 143, .6);
        box-shadow: 0 0 12px rgba(255, 93, 143, .35);
    }

.speed-chip {
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent-2);
    border: 1px solid rgba(232, 121, 249, .45);
    border-radius: 999px;
    padding: 2px 10px;
    box-shadow: 0 0 10px rgba(232, 121, 249, .25);
}

@media (max-width: 600px) {
    /* Mobilon a cím az alsó menüben már látszik; a helyét a terraformáltság és az energia kapja. */
    .colony-head h1 {
        display: none;
    }

    .colony-head {
        gap: 6px 8px;
        flex-wrap: wrap;
    }

    .terraform {
        margin-left: 0;
    }

    .terraform-label,
    .queue-strip-name,
    .queue-strip .queue-name {
        display: none;
    }

    .queue-strip .queue-item {
        grid-template-columns: auto 1fr;
    }
}

.terraform-track {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: #18223a;
    box-shadow: inset 0 0 0 1px var(--neon-line);
    overflow: hidden;
}

.terraform-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b3d, #4ade80, #22d3ee);
    box-shadow: 0 0 12px rgba(74, 222, 128, .6);
    background-size: 420px 100%;
}

/* ---------- Kolónia: térkép + részletpanel ---------- */

.colony-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 1100px) {
    /* A térkép kapja a hely nagyobb részét (1440 px-en kb. 15%-kal több, mint a régi 360 px-es / 40%-os oldalsávval). */
    .colony-layout {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 20%, 360px);
    }

        .colony-layout.wide-side {
            grid-template-columns: minmax(0, 1fr) minmax(300px, 31%);
        }

        .colony-layout .building-panel {
            max-height: 100%;
            overflow-y: auto;
            align-self: start;
        }
}

.colony-map {
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0b1020;
    border-color: var(--neon-line);
    box-shadow: 0 0 28px rgba(34, 211, 238, .12);
}

    .colony-map svg {
        display: block;
        width: 100%;
        height: 100%;
        user-select: none;
    }

.sprite-shadow {
    fill: rgba(0, 0, 0, .28);
}

.road {
    fill: none;
    stroke: rgba(196, 160, 112, .35);
    stroke-width: 12;
    stroke-linecap: round;
}

.road-center {
    fill: none;
    stroke: rgba(230, 205, 160, .25);
    stroke-width: 2;
    stroke-dasharray: 10 12;
}

.power-line {
    fill: none;
    stroke: #ffd36a;
    stroke-width: 1.5;
    stroke-dasharray: 2 7;
    opacity: .55;
}

.belt-bed {
    fill: none;
    stroke: #1a1420;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .4;
}

.belt {
    fill: none;
    stroke-width: 2.5;
    stroke-dasharray: 6 10;
    stroke-linecap: round;
    opacity: .2;
}

    .belt.flowing {
        opacity: .6;
        animation: belt 1s linear infinite;
    }

@keyframes belt {
    to {
        stroke-dashoffset: -16;
    }
}

/* Telek: kattintható terület, kijelölés, állapotok */
.plot {
    cursor: pointer;
    outline: none;
}

    .plot .hit {
        fill: transparent;
    }

    .plot:hover .hit,
    .plot:focus-visible .hit {
        fill: rgba(255, 220, 160, .12);
        stroke: rgba(255, 220, 160, .5);
        stroke-width: 1.5;
    }

.selection {
    fill: rgba(34, 211, 238, .14);
    stroke: var(--accent);
    filter: url(#neon);
    stroke-width: 2.5;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        stroke-opacity: .35;
    }
}

.fleet-chip {
    display: inline-flex;
    gap: 8px;
}

.plot.paused .sprite {
    filter: grayscale(.85) brightness(.75);
}

/* A térkép egy fülén a többi csoport épülete halvány, címke nélkül, és nem kattintható. */
.plot.dimmed {
    opacity: .22;
    pointer-events: none;
}

    .plot.dimmed .label {
        display: none;
    }

.map-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

    .map-tabs button {
        padding: 2px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: .8rem;
        cursor: pointer;
    }

        .map-tabs button.active {
            color: var(--text);
            border-color: var(--accent);
            background: rgba(34, 211, 238, .12);
        }

.building-table {
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 1099px) {
    .colony-layout.grouped .colony-map {
        display: none;
    }
}

.building-table h2 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.building-table ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.building-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 44px 78px 40px;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    border-radius: 6px;
    background: var(--panel-2);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

    .building-row:hover {
        background: rgba(34, 211, 238, .1);
    }

.building-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-row-level,
.building-row-eff {
    text-align: right;
    color: var(--muted);
}

.building-row-out {
    text-align: right;
    color: var(--ok);
    white-space: nowrap;
}

.building-row.warn .building-row-eff {
    color: var(--warn);
}

.building-row.paused {
    opacity: .6;
}

.plot.locked {
    opacity: .55;
}

.site-outline {
    fill: rgba(0, 0, 0, .12);
    stroke: #38e8ff;
    stroke-width: 2;
    stroke-dasharray: 7 6;
}

.plot.locked .site-outline {
    stroke: #5a6b8c;
}

.site-stake {
    stroke: #38e8ff;
    stroke-width: 3;
}

.site-sign {
    fill: #38e8ff;
}

.plot.locked .site-stake {
    stroke: #5a6b8c;
}

.label-bg {
    fill: rgba(5, 9, 18, .82);
    stroke: rgba(56, 232, 255, .45);
}

.label {
    fill: var(--text);
    font-weight: 700;
    letter-spacing: .02em;
    text-anchor: middle;
    pointer-events: none;
}

.plot.locked .label {
    fill: var(--muted);
}

.build-track {
    fill: rgba(0, 0, 0, .55);
}

.build-fill {
    fill: var(--accent);
}

.scaffold line {
    stroke: #c9a46a;
    stroke-width: 2.5;
}

    .scaffold line.crane {
        stroke: #e0b030;
        stroke-width: 4;
    }

/* Animációk: füst, gőz, pára, ív, villogás, csepp */
.smoke circle,
.steam circle,
.vapor circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: rise 3.9s ease-out infinite;
}

.smoke circle {
    fill: #6e6660;
}

.steam circle {
    fill: #f2f4f7;
    animation-duration: 4.8s;
}

.vapor circle {
    fill: #e8f6ff;
    animation-name: rise-big;
    animation-duration: 6s;
}

@keyframes rise {
    from {
        transform: translate(0, 0) scale(.5);
        opacity: .8;
    }

    to {
        transform: translate(14px, -60px) scale(1.8);
        opacity: 0;
    }
}

@keyframes rise-big {
    from {
        transform: translate(0, 0) scale(.6);
        opacity: .7;
    }

    to {
        transform: translate(-30px, -70px) scale(2.6);
        opacity: 0;
    }
}

.blink {
    animation: blink 1.4s steps(2, jump-none) infinite;
}

@keyframes blink {
    50% {
        opacity: .15;
    }
}

.glow {
    animation: glow 1.8s ease-in-out infinite;
}

@keyframes glow {
    50% {
        opacity: .65;
    }
}

.arc {
    animation: arc .45s steps(3) infinite;
}

@keyframes arc {
    50% {
        opacity: .2;
    }
}

.drip {
    animation: drip 1.2s ease-in infinite;
}

@keyframes drip {
    from {
        transform: translateY(-6px);
        opacity: 1;
    }

    to {
        transform: translateY(10px);
        opacity: 0;
    }
}

.clouds {
    animation: drift 60s linear infinite alternate;
}

@keyframes drift {
    to {
        transform: translateX(80px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .colony-map * {
        animation: none !important;
    }
}

/* ---------- Épület részletpanel ---------- */

.building-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

    .building-panel h2 {
        margin: 0;
        font-size: 1.1rem;
    }

.panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    flex: none;
}

.hint-panel p {
    margin: 0;
}

.status {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .9rem;
    background: var(--panel-2);
}

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

    .status.warn {
        color: var(--warn);
    }

    .status.paused {
        color: var(--muted);
    }

.flows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: .9rem;
}

    .flows dt {
        color: var(--muted);
    }

    .flows dd {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        font-variant-numeric: tabular-nums;
    }

.cost-title {
    margin: 4px 0 0;
    font-size: .95rem;
}

/* Mobilon a részletpanel alsó lapként úszik a navigáció fölött. */
@media (max-width: 1099px) {
    .colony-layout.has-selection .building-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);
        z-index: 20;
        max-height: 62dvh;
        overflow-y: auto;
        background: var(--panel);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .55);
        border-color: rgba(56, 232, 255, .45);
    }

    .hint-panel {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .colony-layout.has-selection .building-panel {
        left: auto;
        width: 380px;
        bottom: 16px;
    }
}

/* ---------- Építési sor csík a térkép alatt ---------- */

/* Fix magasság: üresen és tele is ugyanannyi helyet foglal, így a térkép nem ugrál. */
.queue-strip {
    flex: none;
    height: 76px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(20, 32, 57, .92), rgba(13, 20, 36, .92));
    border: 1px solid var(--neon-line);
    border-radius: var(--radius);
}

.queue-strip-title {
    flex: none;
    font-weight: 700;
    font-size: .9rem;
}

.queue-strip .queue {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
}

.queue-strip .queue-item {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
}

.queue-strip .queue-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-empty {
    margin: 0;
    font-size: .85rem;
}

/* ---------- Felugró ablak (prológus) ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(3, 6, 14, .72);
    backdrop-filter: blur(4px);
}

    .modal-backdrop .prologue {
        width: min(560px, 100%);
        max-height: 90dvh;
        overflow-y: auto;
        margin: 0;
    }

.language-options {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.hint.afford {
    color: var(--accent);
}

/* ---------- Kutatás és specialisták ---------- */

.page-intro {
    margin: -6px 0 14px;
    max-width: 900px;
}

.branch-title {
    margin: 22px 0 10px;
    font-size: 1.05rem;
    letter-spacing: .03em;
    color: var(--accent);
    text-shadow: 0 0 12px rgba(34, 211, 238, .4);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
}

    .card-grid .panel {
        margin: 0;
    }

.tech-card,
.specialist-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .tech-card.locked,
    .specialist-card.locked {
        opacity: .62;
    }

    .tech-card.running {
        border-color: rgba(232, 121, 249, .6);
        box-shadow: 0 0 22px rgba(232, 121, 249, .2);
    }

    .tech-card .btn,
    .specialist-card .btn {
        margin-top: auto;
    }

.tech-head,
.specialist-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .tech-head h3,
    .specialist-head h3 {
        margin: 0;
    }

.research-icon {
    font-size: 1.6rem;
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(34, 211, 238, .08);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35), 0 0 14px rgba(34, 211, 238, .15);
}

.level-text {
    font-size: .85rem;
}

.pips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pip {
    width: 14px;
    height: 6px;
    border-radius: 3px;
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px var(--border);
}

    .pip.on {
        background: linear-gradient(90deg, var(--accent), #a78bfa);
        box-shadow: 0 0 6px rgba(34, 211, 238, .6);
    }

    .pip.pending {
        background: var(--accent-2);
        animation: glow 1.2s ease-in-out infinite;
    }

.effects {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0;
    font-size: .88rem;
}

    .effects dt {
        color: var(--muted);
    }

    .effects dd {
        margin: 0;
        color: var(--ok);
    }

        .effects dd.next {
            color: var(--accent);
        }

.research-active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .research-active p {
        margin: 0;
    }

.research-active-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .research-active-row > div {
        flex: 1;
        min-width: 0;
    }

.precursor p {
    margin: 0;
}

/* Specialisták: saját neon színnel */
.specialist-card {
    --hue: var(--accent);
}

    .specialist-card[data-specialist="Mira"] {
        --hue: #38e8ff;
    }

    .specialist-card[data-specialist="Borka"] {
        --hue: #ff9f43;
    }

    .specialist-card[data-specialist="Teodor"] {
        --hue: #f5c26b;
    }

    .specialist-card[data-specialist="Lin"] {
        --hue: #4ade80;
    }

    .specialist-card[data-specialist="Kalman"] {
        --hue: #b69cff;
    }

    .specialist-card.joined {
        border-color: color-mix(in srgb, var(--hue) 55%, transparent);
        box-shadow: 0 0 22px color-mix(in srgb, var(--hue) 18%, transparent);
    }

.avatar {
    font-size: 2rem;
    width: 64px;
    height: 64px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hue) 35%, transparent), rgba(5, 9, 18, .9) 70%);
    box-shadow: 0 0 0 2px var(--hue), 0 0 18px color-mix(in srgb, var(--hue) 55%, transparent);
}

.specialist-card.locked .avatar {
    filter: grayscale(1) brightness(.6);
    box-shadow: 0 0 0 2px var(--border);
}

.role {
    display: block;
    font-size: .85rem;
    color: var(--hue);
    margin-bottom: 4px;
}

.quote {
    margin: 0;
    padding: 8px 12px;
    border-left: 3px solid var(--hue);
    background: color-mix(in srgb, var(--hue) 8%, transparent);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: .92rem;
}

.specialist-card .pip.on {
    background: var(--hue);
    box-shadow: 0 0 6px var(--hue);
}

/* Címke-pötty: fejleszthetőség */
.dot {
    stroke: rgba(5, 9, 18, .9);
    stroke-width: 1;
}

    .dot.ready {
        fill: #4ade80;
        filter: drop-shadow(0 0 3px #4ade80);
    }

    .dot.soon {
        fill: #fbbf24;
    }

    .dot.later {
        fill: #ff5d8f;
    }

.dots-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: .85rem;
}

    .dots-legend .swatch {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: -1px;
    }

/* Terraformálás kész */
.terraform.complete .terraform-fill {
    animation: glow 2.4s ease-in-out infinite;
}

.terraform-done {
    font-weight: 800;
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, .7);
    white-space: nowrap;
}

.finale {
    border-color: rgba(74, 222, 128, .55);
    background: linear-gradient(150deg, rgba(20, 90, 70, .55), rgba(13, 20, 36, .95) 60%);
    box-shadow: 0 0 30px rgba(74, 222, 128, .2);
}

    .finale p {
        margin: 0 0 10px;
    }

/* ---------- Kompakt kutatás: csempék + részletpanel ---------- */

.research-head {
    flex-wrap: nowrap;
}

.research-now {
    flex: 1 1 auto;
    max-width: 520px;
    margin-left: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2px 10px;
    padding: 6px 12px;
    border: 1px solid rgba(232, 121, 249, .45);
    border-radius: 10px;
    background: rgba(232, 121, 249, .06);
    font-size: .9rem;
}

    .research-now .progress {
        grid-column: 1 / -1;
        height: 4px;
    }

.research-now-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-idle {
    margin-left: auto;
    font-size: .9rem;
}

.branch-name {
    color: var(--accent);
}

@media (max-width: 600px) {
    .research-head h1 {
        display: none;
    }

    .research-now,
    .research-idle {
        margin-left: 0;
        max-width: none;
    }
}

/* ---------- Mélység: keresztmetszet + rétegpanel ---------- */

.depth-chip {
    color: var(--accent);
    border-color: var(--neon-line);
    box-shadow: none;
}

.depth-away {
    font-size: .85rem;
    color: var(--accent-2);
    white-space: nowrap;
}

.shaft {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--neon-line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #2a1a24 0%, #160d1f 40%, #07040d 100%);
    position: relative;
    overflow-y: auto;
}

    .shaft::before {
        content: "";
        position: absolute;
        left: 34px;
        top: 34px;
        bottom: 12px;
        width: 3px;
        background: linear-gradient(180deg, #9aa1aa, #b06dff);
        box-shadow: 0 0 10px #b06dff;
        opacity: .6;
    }

.shaft-surface {
    flex: none;
    padding: 4px 10px 4px 52px;
    font-size: .8rem;
    color: #a9e2ff;
    border-bottom: 2px solid #4f8a45;
}

.layer {
    --hue: calc(260 + var(--d) * 8);
    position: relative;
    flex: 1 1 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 30px auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid hsla(var(--hue), 80%, 65%, .25);
    background: linear-gradient(90deg, hsla(var(--hue), 60%, calc(22% - var(--d) * 2%), .9), hsla(var(--hue), 50%, 8%, .9));
    overflow: hidden;
}

    .layer:hover,
    .layer.selected {
        border-color: hsla(var(--hue), 90%, 70%, .8);
        box-shadow: 0 0 18px hsla(var(--hue), 90%, 60%, .3);
    }

    .layer.locked {
        opacity: .5;
    }

    .layer.cleared .layer-status {
        color: var(--ok);
    }

    .layer.open .layer-status {
        color: var(--accent);
    }

    .layer.away {
        border-color: var(--accent-2);
        box-shadow: 0 0 18px rgba(232, 121, 249, .4);
    }

.layer-depth {
    z-index: 1;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: .8rem;
    background: #0b1020;
    box-shadow: 0 0 0 2px hsla(var(--hue), 90%, 65%, .7);
}

.layer-icon {
    font-size: 1.3rem;
}

.layer-name {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-status {
    font-size: .8rem;
    white-space: nowrap;
}

.layer .tile-progress > span {
    background: var(--accent-2);
}

.chapter {
    --hue: #b06dff;
    font-size: .88rem;
}

.chance.high {
    color: var(--ok);
}

.chance.mid {
    color: var(--warn);
}

.chance.low {
    color: var(--danger);
}

.team {
    display: grid;
    gap: 6px;
}

.member {
    --hue: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    opacity: .7;
}

    .member[data-specialist="Mira"] {
        --hue: #38e8ff;
    }

    .member[data-specialist="Borka"] {
        --hue: #ff9f43;
    }

    .member[data-specialist="Teodor"] {
        --hue: #f5c26b;
    }

    .member[data-specialist="Lin"] {
        --hue: #4ade80;
    }

    .member[data-specialist="Kalman"] {
        --hue: #b69cff;
    }

    .member.on {
        opacity: 1;
        border-color: var(--hue);
        box-shadow: inset 3px 0 0 var(--hue);
    }

    .member.resting {
        opacity: .45;
        cursor: not-allowed;
    }

    .member:disabled.on {
        cursor: default;
    }

.member-icon {
    font-size: 1.3rem;
}

.member-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .85rem;
}

    .member-text small {
        color: var(--muted);
    }

    .member-text .rest {
        color: var(--warn);
    }

.ending-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(176, 109, 255, .4);
    background: rgba(176, 109, 255, .06);
}

    .ending-option.picked {
        border-color: var(--accent-2);
    }

.effects-line {
    font-size: .85rem;
    color: var(--ok);
}

/* ---------- Krónika ---------- */

.chronicle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 900px;
}

.chronicle-entry {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .chronicle-entry header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 12px;
    }

    .chronicle-entry p {
        margin: 0;
    }

    .chronicle-entry.failure {
        border-color: rgba(255, 93, 143, .4);
    }

    .chronicle-entry.ending {
        border-color: rgba(74, 222, 128, .5);
    }

@media (max-width: 600px) {
    .layer {
        grid-template-columns: 26px auto 1fr;
        gap: 8px;
        padding: 4px 8px;
    }

    .layer-status {
        display: none;
    }

    .shaft::before {
        left: 30px;
    }

    .depth-away {
        white-space: normal;
    }
}

/* ---------- Kutatás: ágak szerinti oszlopok ---------- */

.research-now {
    font: inherit;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.branch-tabs {
    display: none;
}

.tech-board {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.board-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.branch {
    --branch: var(--accent);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--neon-line);
    border-top: 3px solid var(--branch);
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--branch) 7%, rgba(20, 32, 57, .92)), rgba(13, 20, 36, .92));
}

    .branch[data-branch="Extraction"] {
        --branch: #22d3ee;
    }

    .branch[data-branch="Industry"] {
        --branch: #f5c26b;
    }

    .branch[data-branch="Biology"] {
        --branch: #4ade80;
    }

    .branch[data-branch="Precursor"] {
        --branch: #b06dff;
    }

    .branch[data-branch="Colonization"] {
        --branch: #60a5fa;
    }

    .branch[data-branch="Advanced"] {
        --branch: #fb7185;
    }

.branch-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 8px;
}

    .branch-head h2 {
        margin: 0;
        font-size: .95rem;
        color: var(--branch);
        text-shadow: 0 0 10px color-mix(in srgb, var(--branch) 45%, transparent);
    }

.branch-total {
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.branch-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--panel-2);
    overflow: hidden;
}

    .branch-bar > span {
        display: block;
        height: 100%;
        background: var(--branch);
        box-shadow: 0 0 6px var(--branch);
    }

.tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-row {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    padding: 4px 8px 7px;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

    .tech-row:hover,
    .tech-row.selected {
        border-color: var(--branch);
        background: color-mix(in srgb, var(--branch) 10%, transparent);
    }

    .tech-row.locked {
        opacity: .55;
    }

    .tech-row.running {
        border-color: var(--accent-2);
        box-shadow: 0 0 12px rgba(232, 121, 249, .25);
    }

.row-icon {
    font-size: 1.25rem;
}

.row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.row-name {
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-sub {
    font-size: .74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-row:not(.locked) .row-sub {
    color: color-mix(in srgb, var(--ok) 75%, var(--muted));
}

.row-level {
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.row-status {
    font-size: .7rem;
    margin-right: 2px;
}

/* A szintsáv a sor alján fut, nem foglal külön sort. */
.row-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--panel-2);
    overflow: hidden;
}

    .row-bar > span:first-child {
        display: block;
        height: 100%;
        background: var(--branch);
    }

.row-bar-next {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent-2);
}

/* Nagyon széles képernyőn a hat ág egymás mellett, a megszokott sorrendben */
@media (min-width: 2000px) {
    .tech-board {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .board-col {
        display: contents;
    }

    .branch {
        align-self: start;
        max-height: 100%;
        overflow-y: auto;
    }

        .branch[data-branch="Extraction"] {
            order: 1;
        }

        .branch[data-branch="Industry"] {
            order: 2;
        }

        .branch[data-branch="Biology"] {
            order: 3;
        }

        .branch[data-branch="Colonization"] {
            order: 4;
        }

        .branch[data-branch="Advanced"] {
            order: 5;
        }

        .branch[data-branch="Precursor"] {
            order: 6;
        }
}

/* Telefonon fülek: egyszerre egy ág látszik */
@media (max-width: 700px) {
    .branch-tabs {
        display: flex;
        gap: 6px;
        flex: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .branch-tab {
        --branch: var(--accent);
        flex: 1 1 auto;
        padding: 6px 6px;
        font: inherit;
        font-size: .76rem;
        white-space: nowrap;
        color: var(--muted);
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--panel-2);
    }

        .branch-tab[data-branch="Industry"] {
            --branch: #f5c26b;
        }

        .branch-tab[data-branch="Biology"] {
            --branch: #4ade80;
        }

        .branch-tab[data-branch="Precursor"] {
            --branch: #b06dff;
        }

        .branch-tab[data-branch="Colonization"] {
            --branch: #60a5fa;
        }

        .branch-tab[data-branch="Advanced"] {
            --branch: #fb7185;
        }

        .branch-tab.active {
            color: var(--branch);
            border-color: var(--branch);
            box-shadow: 0 0 10px color-mix(in srgb, var(--branch) 35%, transparent);
        }

    .tech-board {
        grid-template-columns: 1fr;
    }

    .board-col {
        display: contents;
    }

    .branch {
        display: none;
        min-height: 0;
        overflow-y: auto;
    }

        .branch.active {
            display: flex;
        }

    .tech-row {
        padding: 8px 10px 9px;
    }
}

.unlocks {
    margin: 0;
    font-size: .88rem;
    color: var(--accent);
}

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

/* Saját SVG-ikon (pl. nyák), szövegmagasságban */
.glyph {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

/* Nyersanyag-választó (a natív legördülő helyett, hogy a saját SVG-ikonok is látsszanak). */
.res-picker {
    position: relative;
    min-width: 0;
}

.res-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .res-picker-btn .res-picker-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .res-picker-btn .caret {
        color: var(--muted);
    }

.res-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
}

.res-picker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: max(100%, 200px);
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--neon-line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), var(--glow);
}

    .res-picker-list button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: 0;
        color: var(--text);
        font: inherit;
        font-size: .9rem;
        padding: 5px 8px;
        border-radius: 6px;
        cursor: pointer;
        text-align: left;
    }

        .res-picker-list button:hover,
        .res-picker-list button.active {
            background: rgba(56, 232, 255, .12);
        }

.load-item + .load-item {
    margin-left: .35em;
}

.unlock + .unlock::before {
    content: " · ";
    color: var(--muted);
}

/* ---------- Fejléc: kolóniaváltó, postaláda ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .topbar .resource-bar {
        flex: 1 1 0;
        min-width: 0;
    }

    .topbar .brand-mobile {
        margin-bottom: 0;
    }

.colony-switcher {
    position: relative;
    flex: none;
}

.switcher-current {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--neon-line);
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--glow);
}

    .switcher-current .caret {
        color: var(--accent);
    }

.switcher-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switcher-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 260px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--neon-line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), var(--glow);
}

    .switcher-list button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: 0;
        color: var(--text);
        font: inherit;
        padding: 8px;
        border-radius: 8px;
        cursor: pointer;
        text-align: left;
    }

        .switcher-list button:hover,
        .switcher-list button.active {
            background: rgba(34, 211, 238, .1);
        }

        .switcher-list button .switcher-name {
            flex: 1;
        }

    .switcher-list .warn {
        color: var(--danger);
    }

.switcher-world {
    border-top: 1px solid var(--border) !important;
    color: var(--accent) !important;
}

.inbox-badge {
    flex: none;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    cursor: pointer;
}

    .inbox-badge.has {
        border-color: rgba(251, 191, 36, .7);
        box-shadow: 0 0 12px rgba(251, 191, 36, .45);
        animation: inbox-pulse 2.4s ease-in-out infinite;
    }

    .inbox-badge strong {
        color: var(--warn);
        margin-left: 2px;
    }

@keyframes inbox-pulse {
    50% {
        box-shadow: 0 0 20px rgba(251, 191, 36, .75);
    }
}

/* ---------- Modális ablakok: jelentés, döntések ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(3, 6, 14, .72);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: var(--gutter);
}

.modal {
    width: min(620px, 100%);
    max-height: calc(100dvh - 2 * var(--gutter));
    overflow-y: auto;
}

    .modal h2 {
        margin-top: 0;
    }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .modal-head h2 {
        margin: 0;
    }

.away-facts,
.away-highlights {
    padding-left: 18px;
}

    .away-highlights li {
        margin-bottom: 6px;
    }

.cost-item.gain {
    color: var(--ok);
}

.decision-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-top: 12px;
    background: var(--panel-2);
}

    .decision-card header {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .decision-card h3 {
        margin: 0;
    }

.decision-icon {
    font-size: 1.8rem;
}

.decision-options {
    display: grid;
    gap: 8px;
}

.decision-option {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    text-align: left;
    background: rgba(34, 211, 238, .06);
    border: 1px solid rgba(34, 211, 238, .45);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    cursor: pointer;
}

    .decision-option:hover:not(:disabled) {
        box-shadow: var(--glow);
    }

    .decision-option:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .decision-option strong {
        flex: 1 0 100%;
    }

.effect {
    color: var(--accent-2);
}

/* ---------- Kolónia: biom, események, előőrs-telkek ---------- */

.biome-chip {
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 10px;
    border: 1px solid var(--biome, #888);
    color: var(--text);
    background: color-mix(in srgb, var(--biome, #888) 30%, transparent);
}

.event-chip {
    color: var(--warn);
    border-color: rgba(251, 191, 36, .5);
}

.plot.slot .site-outline {
    stroke: #38e8ff;
    stroke-dasharray: 8 6;
}

.plot.slot:hover .site-outline,
.plot.slot.selected .site-outline {
    filter: drop-shadow(0 0 6px #38e8ff);
}

.build-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.build-option {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 6px;
}

    .build-option header {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .build-option.blocked {
        opacity: .55;
    }

.build-icon {
    font-size: 1.3rem;
}

.deposits-line {
    font-size: .85rem;
}

/* ---------- Világtérkép ---------- */

.world-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.world-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 16px;
}

@media (min-width: 1100px) {
    .world-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .world-panel {
        max-height: 100%;
        overflow-y: auto;
    }
}

.hexmap-wrap {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: radial-gradient(circle at 50% 50%, #0d1730, #050811 75%);
    overflow: hidden;
}

.hexmap {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
}

@media (max-width: 1099px) {
    /* Keskeny képernyőn a térkép fent, a panel alatta: itt az oldal görgethető. */
    .world-page {
        height: auto;
    }

    .world-layout {
        flex: none;
    }

    .hexmap-wrap {
        aspect-ratio: 1.3;
        max-height: 70vh;
    }
}

.hex {
    cursor: pointer;
}

    .hex polygon {
        stroke: rgba(5, 9, 18, .85);
        stroke-width: 1.5;
        transition: filter .15s;
    }

    .hex.fog polygon {
        stroke: rgba(56, 232, 255, .12);
    }

    .hex.explored polygon {
        opacity: .82;
    }

    .hex:hover polygon {
        filter: brightness(1.35);
    }

    .hex.selected polygon {
        stroke: var(--accent);
        stroke-width: 3;
        filter: drop-shadow(0 0 6px var(--accent));
        opacity: 1;
    }

    .hex.settleable polygon {
        stroke: rgba(74, 222, 128, .5);
    }

.hex-fog {
    fill: rgba(138, 160, 194, .35);
    font-weight: 700;
}

.hex-deposits,
.hex-icon {
    pointer-events: none;
}

.unit-icon {
    filter: drop-shadow(0 0 4px #38e8ff);
}

.route {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .75;
    stroke-dasharray: 2 7;
}

    .route.tier-2 {
        stroke-width: 5;
    }

    .route.tier-3 {
        stroke-width: 4;
        stroke-dasharray: 12 8;
    }

    .route.flowing {
        animation: route-flow 1.2s linear infinite;
        opacity: 1;
        filter: drop-shadow(0 0 3px currentColor);
    }

@keyframes route-flow {
    to {
        stroke-dashoffset: -18;
    }
}

.world-event circle {
    fill: rgba(251, 191, 36, .06);
    stroke: rgba(251, 191, 36, .6);
    stroke-width: 2;
    stroke-dasharray: 6 6;
}

.world-event.active circle {
    fill: rgba(251, 191, 36, .14);
    stroke-dasharray: none;
}

.colony-marker circle {
    fill: rgba(7, 11, 20, .75);
    stroke: var(--accent);
    stroke-width: 2;
}

.colony-marker.current circle {
    stroke: var(--accent-2);
    stroke-width: 3;
    filter: drop-shadow(0 0 6px var(--accent-2));
}

.mission-line {
    stroke: rgba(56, 232, 255, .45);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tab {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .tab.active {
        color: var(--accent);
        border-color: var(--accent);
        box-shadow: var(--glow);
    }

    .tab .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ok);
    }

.region-title {
    margin: 0 0 6px;
}

.deposits {
    list-style: none;
    padding: 0;
    margin: 6px 0;
    display: grid;
    gap: 4px;
}

    .deposits .rich {
        color: var(--warn);
    }

    .deposits .poor {
        color: var(--muted);
    }

.region-colony {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.unit-action {
    display: block;
    margin: 6px 0;
}

.unit-list,
.route-list,
.offers,
.event-list,
.legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.unit-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.unit-icon-big {
    font-size: 1.6rem;
}

.unit-type {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    display: grid;
    gap: 6px;
}

    .unit-type header {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .unit-type .desc {
        margin: 0;
        font-size: .85rem;
    }

.route-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    display: grid;
    gap: 4px;
}

    .route-row.paused {
        opacity: .6;
    }

.route-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.route-upgrade-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 6px;
}

    .route-upgrade-info .cost {
        font-size: .8rem;
    }

.route-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .route-form label {
        display: grid;
        gap: 4px;
        font-size: .8rem;
        color: var(--muted);
    }

select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    font: inherit;
    max-width: 100%;
}

.offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
}

    .offer.rare,
    .offer.blueprint {
        border-color: rgba(232, 121, 249, .6);
        box-shadow: 0 0 10px rgba(232, 121, 249, .25);
    }

    .offer .btn {
        margin-left: auto;
    }

.event-row.active {
    border-left: 3px solid var(--warn);
    padding-left: 8px;
}

.event-row p {
    margin: 2px 0;
}

.convoy-chip {
    cursor: pointer;
    color: var(--ok);
    border-color: rgba(74, 222, 128, .6);
}

/* ---------- Specialisták: állomás, küldetés ---------- */

.station {
    display: grid;
    gap: 4px;
    margin: 8px 0;
}

    .station label {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

.quest {
    border: 1px dashed rgba(232, 121, 249, .55);
    border-radius: 10px;
    padding: 10px;
    margin: 8px 0;
    display: grid;
    gap: 6px;
}

    .quest.ready {
        border-style: solid;
        box-shadow: 0 0 14px rgba(74, 222, 128, .35);
        border-color: var(--ok);
    }

    .quest header {
        display: flex;
        justify-content: space-between;
    }

.quest-story {
    margin: 0;
    font-style: italic;
    color: var(--muted);
}

.quest-goal {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.quest-reward {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
}

/* ---------- Krónika: rang, napi célok ---------- */

.rank-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 900px) {
    .rank-panel {
        grid-template-columns: 280px 1fr;
    }
}

.rank {
    display: flex;
    gap: 12px;
    align-items: center;
}

    .rank > div {
        display: grid;
        gap: 4px;
        flex: 1;
    }

.rank-medal {
    font-size: 2.4rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, .6));
}

.goals h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.goals ul {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    display: grid;
    gap: 6px;
}

.goal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

    .goal > span:first-child {
        flex: 1 1 200px;
    }

    .goal.done > span:first-child {
        color: var(--ok);
    }

    .goal.claimed {
        opacity: .6;
    }

@media (max-width: 600px) {
    .nav-link {
        font-size: .6rem;
    }

    .route-form {
        grid-template-columns: 1fr;
    }

    .switcher-name {
        max-width: 110px;
    }
}

@media (max-width: 899px) {
    /* Mobilon: első sor a márka, a kolóniaváltó és a postaláda; alatta a teljes szélességű nyersanyagsáv. */
    .topbar .resource-bar {
        flex: 1 1 100%;
        order: 3;
    }

    .topbar .inbox-badge {
        margin-left: auto;
    }
}

.station select {
    width: 100%;
}

/* ---------- 3D bolygótérkép ---------- */

.hexmap-wrap {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 40%, #12224a 0%, #070c1c 55%, #03050c 100%);
}

.planet-map {
    width: 100%;
    height: 100%;
}

.planet-map.mode-ping .hex3d,
.planet-map.mode-drone .hex3d {
    cursor: crosshair;
}

.hex3d {
    cursor: pointer;
}

    .hex3d polygon {
        stroke: rgba(3, 6, 14, .55);
        stroke-width: 1;
        stroke-linejoin: round;
    }

    .hex3d .top {
        stroke: rgba(255, 255, 255, .16);
        transition: filter .15s;
    }

    .hex3d.fog .top {
        stroke: rgba(56, 232, 255, .14);
    }

    /* A köd pereme: ide mehet felderítő buggy */
    .hex3d.fog-edge .top {
        fill: #1d2e4f;
        stroke: rgba(56, 232, 255, .55);
        stroke-dasharray: 4 3;
    }

    .hex3d:hover .top {
        filter: brightness(1.3);
    }

    .hex3d.selected .top {
        stroke: var(--accent);
        stroke-width: 2.5;
        filter: drop-shadow(0 0 6px var(--accent)) brightness(1.15);
    }

    .hex3d.settleable .top {
        stroke: rgba(74, 222, 128, .55);
    }

.mist {
    fill: #9fb3c8;
    opacity: .12;
    pointer-events: none;
    animation: mist 9s ease-in-out infinite;
}

@keyframes mist {
    50% {
        opacity: .26;
        transform: translateX(4px);
    }
}

.lava {
    animation: lava 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ff7a3a);
}

@keyframes lava {
    50% {
        fill: #ffd27a;
    }
}

.smoke {
    opacity: .5;
    animation: smoke 4s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes smoke {
    0% {
        opacity: .55;
        transform: translateY(0) scale(.6);
    }

    100% {
        opacity: 0;
        transform: translateY(-14px) scale(1.6);
    }
}

.crystal {
    filter: drop-shadow(0 0 3px #38e8ff);
}

.colony3d .beam {
    opacity: .7;
    animation: beam 3s ease-in-out infinite;
}

.colony3d.current .beam {
    fill: url(#beam);
    opacity: 1;
}

@keyframes beam {
    50% {
        opacity: .25;
    }
}

.ping-text {
    font-weight: 800;
    paint-order: stroke;
    stroke: #050914;
    stroke-width: 3px;
    pointer-events: none;
}

.signal-lost {
    opacity: .8;
}

.map-controls {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .map-controls .icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(13, 20, 36, .85);
        border: 1px solid var(--neon-line);
        color: var(--accent);
        font-size: 1.05rem;
        cursor: pointer;
        box-shadow: var(--glow);
    }

        .map-controls .icon-btn:disabled {
            opacity: .35;
            cursor: default;
        }

.mode-banner {
    position: absolute;
    left: 10px;
    right: 56px;
    top: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: rgba(13, 20, 36, .92);
    border: 1px solid rgba(251, 191, 36, .6);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: .85rem;
    box-shadow: 0 0 14px rgba(251, 191, 36, .3);
}

.signal-chip {
    cursor: pointer;
    color: var(--warn);
    border-color: rgba(251, 191, 36, .6);
    animation: inbox-pulse 2.4s ease-in-out infinite;
}

.signal-action {
    display: block;
    margin: 8px 0;
}

.ping-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.ping-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 6px currentColor;
}

/* ---------- Képességek ---------- */

.ability-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ability-btn {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

    .ability-btn svg {
        position: absolute;
        inset: 0;
        transform: rotate(-90deg);
    }

    .ability-btn .ring-bg {
        fill: var(--panel-2);
        stroke: var(--border);
        stroke-width: 3;
    }

    .ability-btn .ring {
        fill: none;
        stroke: var(--accent-2);
        stroke-width: 3;
        stroke-linecap: round;
    }

    .ability-btn.ready .ring {
        stroke: var(--ok);
        filter: drop-shadow(0 0 4px var(--ok));
    }

    .ability-btn:disabled {
        cursor: default;
        opacity: .75;
    }

    .ability-btn.ready:hover .ring-bg {
        fill: rgba(74, 222, 128, .15);
    }

.ability-icon {
    position: relative;
    font-size: 1.05rem;
}

.ability {
    border: 1px dashed rgba(56, 232, 255, .45);
    border-radius: 10px;
    padding: 10px;
    margin: 8px 0;
    display: grid;
    gap: 6px;
}

    .ability.ready {
        border-style: solid;
        box-shadow: 0 0 12px rgba(56, 232, 255, .3);
    }

    .ability p {
        margin: 0;
    }

.mission-line {
    fill: none;
}

.world-event ellipse {
    fill: rgba(251, 191, 36, .06);
    stroke: rgba(251, 191, 36, .6);
    stroke-width: 2;
    stroke-dasharray: 6 6;
}

.world-event.active ellipse {
    fill: rgba(251, 191, 36, .14);
    stroke-dasharray: none;
    animation: event-pulse 3s ease-in-out infinite;
}

@keyframes event-pulse {
    50% {
        stroke-opacity: .35;
    }
}

/* ---------- Eszközök összekapcsolása ---------- */

.device-columns {
    display: grid;
    gap: 16px;
}

@media (min-width: 700px) {
    .device-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.device-columns h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.link-code {
    margin: 4px 0;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    text-shadow: 0 0 14px rgba(34, 211, 238, .6);
}

.code-input {
    display: block;
    width: 100%;
    max-width: 220px;
    margin-bottom: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 1.4rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--neon-line);
    border-radius: 10px;
}

.small {
    font-size: .8rem;
}

.colony-head h1 {
    white-space: nowrap;
}

/* ---------- Jutalomtároló, helyreállító kulcs ---------- */

.vault {
    position: relative;
    flex: none;
}

.vault-badge {
    border-color: rgba(74, 222, 128, .7) !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, .45) !important;
}

    .vault-badge strong {
        color: var(--ok);
    }

.vault-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: min(320px, 90vw);
    display: grid;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), var(--glow);
}

    .vault-panel h3,
    .vault-panel p {
        margin: 0;
    }

.vault-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
}

.vault-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px auto;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

    .vault-row input {
        width: 100%;
        min-width: 0;
    }

    .vault-row.over input {
        border-color: var(--danger);
        color: var(--danger);
    }

.vault-res {
    white-space: nowrap;
    color: var(--ok);
}

.recovery {
    margin-top: 12px;
}

    .recovery summary {
        cursor: pointer;
        color: var(--accent);
    }

.recovery-key {
    display: block;
    margin: 6px 0;
    padding: 6px 10px;
    font-size: .85rem;
    word-break: break-all;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.colony-head {
    flex-wrap: wrap;
}

    .colony-head .ability-bar {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

@media (max-width: 1299px) {
    /* Közepes szélességen is külön sorba kerül a nyersanyagsáv, hogy ne nyomja össze a fejléc gombjai. */
    .topbar .resource-bar {
        flex: 1 1 100%;
        order: 3;
    }

    .topbar .vault {
        margin-left: auto;
    }
}

.topbar .vault + .inbox-badge {
    margin-left: 0;
}

@media (max-width: 1299px) {
    .topbar .inbox-badge {
        margin-left: auto;
    }
}

/* ---------- Kolónia: jobb oszlop (panel + MIRA tájékoztató) ---------- */

.side-column {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .side-column > .building-panel {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        align-self: stretch;
    }

.briefing {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

    .side-column > .briefing:only-child {
        flex: 1 1 auto;
        align-content: start;
    }

    .briefing h2 {
        margin: 0;
        font-size: 1.05rem;
    }

    .briefing h3 {
        margin: 6px 0 0;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--muted);
    }

    .briefing p {
        margin: 0;
    }

.briefing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.breakdown {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: .85rem;
}

    .breakdown summary {
        cursor: pointer;
        color: var(--muted);
    }

    .breakdown h4 {
        margin: 8px 0 4px;
        font-size: .85rem;
    }

.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

    .breakdown-table td {
        padding: 2px 0;
        vertical-align: top;
    }

        .breakdown-table td:last-child {
            text-align: right;
            white-space: nowrap;
            padding-left: 8px;
            font-variant-numeric: tabular-nums;
        }

    .breakdown-table tr.part td {
        padding-left: 12px;
        color: var(--muted);
        font-size: .8rem;
    }

        .breakdown-table tr.part td.neg {
            color: #ff5d8f;
        }

    .breakdown-table tr.sum td,
    .breakdown-table tr.total td {
        border-top: 1px solid var(--border);
        padding-top: 4px;
    }

    .breakdown-table tr.total td {
        font-weight: 600;
        color: var(--text);
    }

.profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: .85rem;
}

    .profile-list li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
    }

.profile-buildings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

    .profile-chip.built {
        border-style: solid;
        color: var(--text);
        background: rgba(34, 211, 238, .08);
    }

.briefing-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: rgba(34, 211, 238, .05);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 10px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    .briefing-item:hover:not(:disabled) {
        border-color: var(--accent);
        box-shadow: var(--glow);
    }

.briefing-icon {
    font-size: 1.2rem;
}

.briefing-text {
    display: grid;
    min-width: 0;
}

    .briefing-text strong,
    .briefing-text small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.briefing-go {
    color: var(--accent);
    font-size: 1.2rem;
}

.briefing .swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.swatch.dot-ready {
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}

.swatch.dot-soon {
    background: #fbbf24;
}

.swatch.dot-later {
    background: #ff5d8f;
}

.briefing.compact h2 {
    font-size: .95rem;
}

@media (max-width: 1099px) {
    /* Keskenyebb képernyőn nincs jobb oszlop: a panel alsó lapként úszik, a tájékoztató elrejtve. */
    .side-column {
        display: contents;
    }

    .briefing {
        display: none;
    }
}

/* ---------- Kolónia: alsó sáv, három fix oszloppal ---------- */

.colony-strip {
    flex: none;
    height: 76px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(20, 32, 57, .92), rgba(13, 20, 36, .92));
    border: 1px solid var(--neon-line);
    border-radius: var(--radius);
}

.strip-cell {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: .8rem;
}

    .strip-cell + .strip-cell {
        border-left: 1px solid var(--border);
    }

    .strip-cell.clickable {
        cursor: pointer;
    }

        .strip-cell.clickable:hover {
            background: rgba(34, 211, 238, .06);
        }

.strip-title {
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    white-space: nowrap;
}

.strip-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.strip-icon {
    font-size: 1rem;
}

.strip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.strip-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--accent-2);
}

.strip-cell .progress {
    display: block;
    height: 4px;
}

.strip-none {
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--muted);
}

.strip-sub {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .72rem;
}

.strip-chip {
    flex: none;
    color: var(--muted);
}

@media (max-width: 600px) {
    .strip-name,
    .strip-label {
        display: none;
    }

    .strip-row {
        grid-template-columns: auto 1fr;
    }

    .strip-cell {
        padding: 2px 4px;
    }
}

.strip-cell .progress-fill {
    display: block;
}

@media (min-width: 1100px) {
    .side-column {
        height: 100%;
        overflow: hidden;
    }

        .side-column > .building-panel {
            flex: 1 1 auto;
        }

        .side-column > .briefing.compact {
            flex: 0 1 auto;
            max-height: 48%;
        }
}

@media (max-width: 420px) {
    .brand-mobile .brand-text {
        display: none;
    }
}

/* ---------- Oldalmenü: kolóniák a „Kolónia” alatt ---------- */

.colony-subnav {
    display: none;
}

@media (min-width: 900px) {
    .colony-subnav {
        display: block;
    }

    /* Asztalon az oldalmenüből váltunk; a fejléc-váltó csak mobilon kell. */
    .topbar .colony-switcher {
        display: none;
    }
}

.colony-nav {
    list-style: none;
    margin: 0 0 4px 22px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--neon-line);
    display: grid;
    gap: 2px;
}

.colony-nav-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}

    .colony-nav-item:hover {
        background: var(--panel-2);
        color: var(--text);
    }

    .colony-nav-item.current {
        color: var(--text);
    }

    .colony-nav-item.active {
        color: var(--accent);
        background: rgba(34, 211, 238, .1);
        box-shadow: inset 2px 0 0 var(--accent);
    }

.colony-nav-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-nav-status {
    display: flex;
    gap: 4px;
    font-size: .72rem;
}

    .colony-nav-status .warn {
        filter: drop-shadow(0 0 4px var(--danger));
    }

    .colony-nav-status .idle {
        opacity: .55;
    }

    .colony-nav-status .queue-count {
        color: var(--accent-2);
        font-variant-numeric: tabular-nums;
    }

/* ---------- Logisztika ---------- */

.route-cards {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.route-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(34, 211, 238, .03);
}

    .route-card.open {
        border-color: var(--neon-line);
        box-shadow: var(--glow);
    }

    .route-card.paused {
        opacity: .7;
    }

.route-card-head {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.route-card-title {
    font-weight: 700;
}

.route-card-body {
    padding: 0 10px 10px;
    display: grid;
    gap: 8px;
}

    .route-card-body h4 {
        margin: 6px 0 0;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
    }

.fleet-list,
.order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.fleet-row,
.order-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--panel-2);
}

.fleet-text,
.order-text {
    display: grid;
    min-width: 0;
}

    .order-text > span {
        font-size: .85rem;
    }

.order-row.done {
    opacity: .6;
}

.order-row.paused .order-text > span {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
}

.order-row:has(.order-editor) {
    grid-template-columns: 1fr;
}

.order-icon {
    font-size: 1.2rem;
}

.order-buttons {
    display: flex;
    gap: 2px;
}

    .order-buttons .icon-btn,
    .fleet-row .icon-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: none;
        color: var(--text);
        cursor: pointer;
    }

        .order-buttons .icon-btn:disabled {
            opacity: .3;
        }

.buy-freighters summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
}

.buy-row {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.buy-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.order-editor {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(232, 121, 249, .45);
    border-radius: 10px;
    background: rgba(232, 121, 249, .05);
}

.order-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chip {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 3px 9px;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

    .chip.active {
        color: var(--accent-2);
        border-color: var(--accent-2);
        box-shadow: 0 0 8px rgba(232, 121, 249, .35);
    }

.order-sentence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.order-field {
    display: grid;
    gap: 3px;
    font-size: .75rem;
    color: var(--muted);
}

    .order-field input {
        background: var(--panel-2);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px;
        font: inherit;
        min-width: 0;
    }

.order-percent {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

    .order-percent input {
        width: 5.5em;
    }

    .order-percent small {
        color: var(--muted);
    }

.order-preview {
    margin: 0;
    font-size: .9rem;
    color: var(--text);
}

/* Kinyíláskor a látótérbe gördül; a ragadós panelfejléc és mentősor ne takarja. */
.order-editor {
    scroll-margin: 72px 0 64px;
}

/* A mentés a görgethető panel aljához tapad, amíg a szerkesztő bármely része látszik. */
.order-confirm {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    margin: 0 -10px -10px;
    padding: 8px 10px 10px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgba(30, 27, 58, .92), rgba(24, 22, 48, .98));
    border-top: 1px solid rgba(232, 121, 249, .25);
}

/* A megbízások fejléce: cím balra, „Új megbízás” jobbra – nem kell a lista aljára görgetni érte. */
.orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .orders-head h4 {
        margin: 0;
    }

.route-settings summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
}

.route-settings[open] {
    display: grid;
    gap: 6px;
}

.quick-ship {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    .quick-ship input {
        background: var(--panel-2);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px;
        font: inherit;
        min-width: 0;
    }

/* Megbízások táblázatosan: soronként egy sor, rögzített oszlopszélességekkel; koppintásra kinyílik a leírás és a gombok. */
.order-list {
    gap: 2px;
}

.order-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border-radius: 6px;
}

.order-line {
    display: grid;
    grid-template-columns: 22px 14px 22px minmax(0, 1fr) 46px 22px;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

    .order-line .order-icon {
        font-size: 1rem;
    }

.order-dir {
    font-weight: 700;
}

    .order-dir.out {
        color: #4ade80;
    }

    .order-dir.in {
        color: #60a5fa;
    }

.order-rule {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.order-res {
    font-weight: 600;
}

.order-delivered {
    text-align: right;
    color: var(--muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

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

.order-row.paused .order-rule {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
}

.order-detail {
    display: grid;
    gap: 4px;
    padding: 2px 8px 6px;
    border-top: 1px solid var(--border);
}

.order-buttons {
    justify-content: flex-end;
}

@media (min-width: 1400px) {
    .world-layout {
        grid-template-columns: minmax(0, 1fr) 440px;
    }
}

.fleet-doing {
    color: var(--text);
}

.origin-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    color: var(--warn);
    border: 1px solid rgba(251, 191, 36, .45);
}

.freight-log summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
}

.log-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: .8rem;
}

.log-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 8px;
    padding: 4px 6px;
    border-left: 2px solid var(--accent);
    background: var(--panel-2);
    border-radius: 0 6px 6px 0;
}

    .log-row.reposition {
        border-left-color: var(--muted);
    }

    .log-row.return {
        border-left-color: var(--warn);
    }

    .log-row time {
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    .log-row small {
        grid-column: 2;
    }

/* ---------- Szállítmány-űrlap ---------- */

.shipment-form {
    display: grid;
    gap: 6px;
}

.shipment-path {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shipment-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.shipment-item {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px;
}

    .shipment-item input {
        background: var(--panel-2);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 5px;
        font: inherit;
        min-width: 0;
    }

    .shipment-item .icon-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: none;
        color: var(--text);
        cursor: pointer;
    }

    .shipment-item small {
        grid-column: 1 / -1;
    }

.warn-text {
    color: var(--warn);
}

.shipment-estimate {
    margin: 2px 0 0;
    font-size: .85rem;
}

.shipment-details summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
}

/* ---------- Előőrs-korszak: szakosodás, ellátási vonalak, köd ---------- */

.spec-badge {
    flex: none;
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 9px;
    color: var(--muted);
    border: 1px dashed var(--border);
}

    .spec-badge.pure {
        color: var(--ok, #4ade80);
        border: 1px solid rgba(74, 222, 128, .5);
        box-shadow: 0 0 8px rgba(74, 222, 128, .2);
    }

.route-card-title .spec-badge {
    margin-left: 6px;
}

.trade-chip {
    cursor: pointer;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
}

    .trade-chip.active {
        background: rgba(232, 121, 249, .15);
    }

.trade-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    cursor: default;
}

    .trade-row > small {
        grid-column: 1;
    }

    .trade-row > .btn {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

.dir-badge {
    display: inline-block;
    padding: 0 6px;
    margin-right: 2px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}

    .dir-badge.out {
        color: #4ade80;
        border: 1px solid rgba(74, 222, 128, .45);
    }

    .dir-badge.in {
        color: #60a5fa;
        border: 1px solid rgba(96, 165, 250, .45);
    }

.trade-panel .route-cards {
    margin-top: 8px;
}

/* ---------- Fiók, közösség, élő kapcsolat ---------- */

.settings-gear {
    display: none;
    flex: none;
    font-size: 1.2rem;
    text-decoration: none;
}

@media (max-width: 899px) {
    /* Mobilon az alsó menüben a Közösség kapja a helyet, a Beállítások a fejlécbe költözik. */
    .nav-list .nav-settings {
        display: none;
    }

    .settings-gear {
        display: inline-block;
    }
}

.online-count {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    background: rgba(74, 222, 128, .2);
    color: var(--ok);
}

.live-dot {
    font-size: .8rem;
    color: var(--muted);
    vertical-align: middle;
}

    .live-dot.on {
        color: var(--ok);
        text-shadow: 0 0 8px var(--ok);
    }

.community-layout {
    display: grid;
    gap: 16px;
}

@media (min-width: 1100px) {
    .community-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.player-list,
.feed-list,
.world-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.player-row,
.world-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

    .player-row.me,
    .world-row.current {
        border-color: var(--neon-line);
        box-shadow: var(--glow);
    }

.world-row {
    grid-template-columns: 1fr auto;
}

.player-text,
.world-text,
.feed-text {
    display: grid;
    min-width: 0;
}

.world-text .icon-btn {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
}

.world-current {
    color: var(--ok);
    font-size: .85rem;
}

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

    .presence.on {
        color: var(--ok);
        text-shadow: 0 0 6px var(--ok);
    }

.gift-form {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    padding-top: 6px;
}

.feed-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 6px 8px;
    border-left: 2px solid var(--accent);
    background: var(--panel-2);
    border-radius: 0 8px 8px 0;
}

.feed-icon {
    font-size: 1.2rem;
}

.auth-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.small-input {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    max-width: none;
}

.new-world {
    margin: 10px 0;
    display: grid;
    gap: 6px;
}

    .new-world summary {
        cursor: pointer;
        color: var(--accent);
    }

/* ---------- Statisztika-táblázat (kolóniák oszlopokban) ---------- */
.resource-overview-wrap {
    overflow-x: auto;
    padding: 0;
}

.resource-overview {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .resource-overview th,
    .resource-overview td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        text-align: right;
        white-space: nowrap;
        vertical-align: top;
    }

    .resource-overview thead th {
        font-size: .8rem;
        color: var(--muted);
        font-weight: 600;
    }

        .resource-overview thead th.active .ro-colony {
            color: var(--accent);
        }

    .resource-overview .ro-name {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--panel);
        text-align: left;
        font-weight: 500;
    }

    .resource-overview .ro-total {
        background: var(--panel-2);
        font-weight: 600;
    }

    .resource-overview tr.ro-power td,
    .resource-overview tr.ro-power th {
        border-bottom-color: var(--neon-line);
    }

    .resource-overview tbody tr:last-child td,
    .resource-overview tbody tr:last-child th {
        border-bottom: 0;
    }

.ro-colony {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .ro-colony:hover {
        color: var(--accent);
    }

.ro-net {
    display: block;
}

    .ro-net.positive {
        color: var(--ok);
    }

    .ro-net.negative {
        color: var(--danger);
    }

.ro-split {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    color: var(--muted);
    font-size: .72rem;
}

@media (max-width: 640px) {
    .resource-overview th,
    .resource-overview td {
        padding: 6px 8px;
    }
}

/* ---------- Statisztika ---------- */
.stats-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ro-net.warn,
.ro-split.warn {
    color: var(--warn);
}

.ro-split.negative {
    color: var(--danger);
}

.stock-bar {
    display: block;
    height: 3px;
    margin: 3px 0 2px auto;
    width: 64px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}

    .stock-bar > span {
        display: block;
        height: 100%;
        background: var(--accent);
    }

    .stock-bar.full > span {
        background: var(--warn);
    }

.resource-overview tr.ro-group th {
    padding-top: 12px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
}

.resource-overview .ro-empty {
    text-align: left;
}

/* ---------- Lap: az oldalsó panelek rögzített fejléccel, fülekkel és saját görgetéssel ---------- */

/* A fejléc (és vele a ✕) görgetéskor is a panel tetején marad. */
.building-panel > .panel-head:first-child,
.sheet-top {
    position: sticky;
    top: -14px;
    z-index: 3;
    margin: -14px -14px 0;
    padding: 14px 14px 10px;
    background: linear-gradient(180deg, rgba(20, 32, 57, .985), rgba(15, 24, 43, .985));
    border-bottom: 1px solid rgba(56, 232, 255, .14);
    border-radius: var(--radius) var(--radius) 0 0;
    backdrop-filter: blur(6px);
}

.sheet-top {
    display: grid;
    gap: 8px;
}

.sheet-close {
    flex: none;
}

.sheet-quick {
    flex: none;
    padding: 6px 10px;
    font-size: .85rem;
    white-space: nowrap;
}

.sheet-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sheet-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(138, 160, 194, .25);
    background: rgba(255, 255, 255, .04);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .sheet-stat small {
        opacity: .7;
    }

    .sheet-stat.ok {
        border-color: rgba(34, 197, 94, .45);
        color: #86efac;
    }

    .sheet-stat.warn {
        border-color: rgba(251, 191, 36, .5);
        color: #fde68a;
    }

    .sheet-stat.paused {
        border-color: rgba(138, 160, 194, .45);
        color: #a7b4cc;
    }

.sheet-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: -10px;
}

    .sheet-tabs button {
        position: relative;
        flex: 1;
        padding: 7px 8px 9px;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: .88rem;
        cursor: pointer;
        transition: color .2s ease;
    }

        .sheet-tabs button::after {
            content: "";
            position: absolute;
            left: 18%;
            right: 18%;
            bottom: 0;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, #38e8ff, #e879f9);
            transform: scaleX(0);
            transition: transform .25s ease;
        }

        .sheet-tabs button:hover {
            color: var(--text);
        }

        .sheet-tabs button.active {
            color: var(--text);
            font-weight: 600;
        }

            .sheet-tabs button.active::after {
                transform: scaleX(1);
            }

.tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, .8);
    vertical-align: middle;
}

.sheet-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    animation: sheet-in .22s ease-out;
}

@keyframes sheet-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* A húzófül csak alsó lapként (keskeny képernyőn) látszik: koppintásra teljes magasságra nyílik. */
.sheet-grip {
    display: none;
}

@media (max-width: 1099px) {
    .sheet-grip {
        display: block;
        justify-self: center;
        width: 64px;
        height: 16px;
        margin: -8px 0 -4px;
        border: 0;
        background: none;
        cursor: pointer;
    }

        .sheet-grip::before {
            content: "";
            display: block;
            width: 44px;
            height: 5px;
            margin: 0 auto;
            border-radius: 3px;
            background: rgba(138, 160, 194, .55);
        }

    .colony-layout.has-selection .building-panel.sheet {
        transition: max-height .3s ease;
    }

        .colony-layout.has-selection .building-panel.sheet.expanded {
            max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom) - 24px);
        }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-body {
        animation: none;
    }
}

/* A Világ oldal füleinek sora is a panel tetején marad görgetéskor. */
.world-panel > .tabs {
    position: sticky;
    top: -14px;
    z-index: 3;
    margin: -14px -14px 10px;
    padding: 10px 14px 0;
    background: linear-gradient(180deg, rgba(20, 32, 57, .985), rgba(15, 24, 43, .985));
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Nyitott panelnél szélesebb a jobb oszlop, hogy a fejléc (fülek, gyors gomb, ✕) mindig kiférjen. */
@media (min-width: 1100px) {
    .colony-layout.has-selection,
    .colony-layout.has-selection.wide-side {
        grid-template-columns: minmax(0, 1fr) clamp(330px, 30%, 440px);
    }
}

.sheet-top .panel-head h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-tabs {
    overflow-x: auto;
    scrollbar-width: none;
}

    .sheet-tabs button {
        white-space: nowrap;
    }


/* ---------- Áramprioritás (Dávid diszpécsere) ---------- */

.priority-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.priority-label {
    font-size: .88rem;
    color: var(--muted);
}

.segmented {
    display: inline-flex;
    border: 1px solid rgba(138, 160, 194, .3);
    border-radius: 999px;
    overflow: hidden;
}

    .segmented button {
        padding: 4px 11px;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: .82rem;
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
    }

        .segmented button + button {
            border-left: 1px solid rgba(138, 160, 194, .2);
        }

        .segmented button.active {
            color: #0b1120;
            font-weight: 600;
        }

            .segmented button.active.prio-critical,
            .sheet-stat.prio-critical {
                background: #f87171;
                color: #1a0b0b;
            }

            .segmented button.active.prio-normal,
            .sheet-stat.prio-normal {
                background: #38e8ff;
                color: #04202a;
            }

            .segmented button.active.prio-low,
            .sheet-stat.prio-low {
                background: #a7b4cc;
                color: #10182a;
            }

.power-chip .line-loss {
    color: #fbbf24;
}