/* =============================================================================
   GAZILLIONAIRE: STER DER HANDEL - Stylesheet
   Dark Space Theme
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Exo+2:wght@300;400;600&display=swap');

:root {
    --bg-diep:        #04060d;
    --bg-paneel:      #07111f;
    --bg-paneel-licht:#0d1829;
    --rand:           #152840;
    --rand-actief:    #1e3f61;
    --accent:         #00d4ff;
    --accent-dim:     #006688;
    --goud:           #ffd700;
    --groen:          #39ff14;
    --oranje:         #ff8c42;
    --rood:           #ff3855;
    --paars:          #a855f7;
    --tekst:          #dde8f4;
    --tekst-dim:      #4a6a8a;

    --font-titel:  'Orbitron', monospace;
    --font-data:   'Share Tech Mono', monospace;
    --font-tekst:  'Exo 2', sans-serif;
}

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

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg-diep);
    color: var(--tekst);
    font-family: var(--font-tekst);
    font-size: 15px;
    line-height: 1.5;
}

/* ===== STERREN ACHTERGROND ===== */
#sterren {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
}
.ster {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: knipperen var(--duration, 3s) ease-in-out infinite alternate;
}
@keyframes knipperen {
    from { opacity: var(--opacity, 0.4); }
    to   { opacity: calc(var(--opacity, 0.4) * 0.15); }
}

/* ===== SCHERMEN ===== */
.scherm { position: fixed; inset: 0; z-index: 10; display: none; flex-direction: column; }
.scherm.actief { display: flex; }

/* ===== KLEUR-HELPERS ===== */
.kleur-groen  { color: var(--groen) !important; }
.kleur-rood   { color: var(--rood) !important; }
.kleur-oranje { color: var(--oranje) !important; }
.kleur-goud   { color: var(--goud) !important; }
.kleur-accent { color: var(--accent) !important; }
.kleur-dimmed { color: var(--tekst-dim) !important; }

/* ===== INTRO SCHERM ===== */
#intro-scherm {
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 60%, rgba(0,40,80,0.6) 0%, rgba(4,6,13,0.98) 70%);
}
.intro-inhoud {
    text-align: center;
    max-width: min(90vw, 700px);
    padding: 40px 30px;
}
.game-titel {
    font-family: var(--font-titel);
    font-size: clamp(2rem, 7vw, 4.2rem);
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, #ffd700 0%, #00d4ff 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titel-gloed 4s ease-in-out infinite;
    margin-bottom: 0.1em;
}
@keyframes titel-gloed {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(0,212,255,0.3)); }
    50%       { filter: brightness(1.3) drop-shadow(0 0 40px rgba(0,212,255,0.6)); }
}
.game-ondertitel {
    font-family: var(--font-titel);
    font-size: 1.1em;
    color: var(--accent);
    letter-spacing: 0.35em;
    margin-bottom: 2em;
    opacity: 0.8;
}
.save-kaart {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.save-kaart-info {
    color: var(--tekst-dim);
    font-family: var(--font-data);
    font-size: 0.9em;
}
.save-kaart-info strong { color: var(--goud); }
.of-scheiding {
    color: var(--tekst-dim);
    font-size: 0.82em;
    margin: 18px 0 22px;
    opacity: 0.5;
    letter-spacing: 0.1em;
}
.versie-label {
    position: absolute;
    bottom: 14px;
    right: 18px;
    font-family: var(--font-data);
    font-size: 0.72em;
    color: var(--tekst-dim);
    opacity: 0.35;
    pointer-events: none;
}
.intro-tekst {
    color: var(--tekst);
    font-size: 1.05em;
    line-height: 1.9;
    margin-bottom: 2.5em;
    opacity: 0.85;
}
.naam-invoer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2em;
}
.naam-invoer label {
    font-family: var(--font-data);
    color: var(--accent);
    font-size: 0.95em;
}
.naam-invoer input {
    background: var(--bg-paneel-licht);
    border: 1px solid var(--rand-actief);
    color: var(--tekst);
    padding: 10px 16px;
    font-family: var(--font-data);
    font-size: 1em;
    border-radius: 5px;
    outline: none;
    width: 210px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.naam-invoer input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0,212,255,0.25);
}

/* ===== KNOPPEN ===== */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 18px;
    font-family: var(--font-data);
    font-size: 0.88em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    white-space: nowrap;
    user-select: none;
}
.knop:hover:not(:disabled) {
    background: rgba(0,212,255,0.12);
    box-shadow: 0 0 12px rgba(0,212,255,0.25);
}
.knop:active:not(:disabled) { transform: scale(0.97); }
.knop:disabled { opacity: 0.28; cursor: not-allowed; }

.knop.primair  { background: rgba(0,212,255,0.08); }
.knop.succes   { border-color: var(--groen); color: var(--groen); }
.knop.succes:hover:not(:disabled) { background: rgba(57,255,20,0.1); }
.knop.gevaar   { border-color: var(--rood); color: var(--rood); }
.knop.gevaar:hover:not(:disabled) { background: rgba(255,56,85,0.1); }
.knop.dimmed   { border-color: var(--tekst-dim); color: var(--tekst-dim); font-size: 0.78em; }
.knop.dimmed:hover:not(:disabled) { background: rgba(74,106,138,0.15); color: var(--tekst); }
.knop.groot    { padding: 14px 32px; font-size: 1.05em; letter-spacing: 0.15em; }
.knop.klein    { padding: 4px 10px; font-size: 0.78em; }

/* ===== SCHIP SELECTIE ===== */
#schip-selectie-scherm {
    align-items: center;
    justify-content: center;
    background: rgba(4,6,13,0.97);
}
.selectie-inhoud {
    width: 90%;
    max-width: 960px;
    text-align: center;
}
.selectie-inhoud h2 {
    font-family: var(--font-titel);
    color: var(--accent);
    font-size: 1.9em;
    margin-bottom: 0.4em;
}
.selectie-inhoud > p {
    color: var(--tekst-dim);
    margin-bottom: 1.8em;
    font-size: 1.05em;
}
.schip-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 1em;
}
.schip-kaart {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 22px 20px;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.schip-kaart-intro { flex: 1; }
.schip-kies-knop {
    width: 100%;
    margin-top: 14px;
}
.schip-kaart:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,212,255,0.15);
}
.schip-icoon { font-size: 2.8em; margin-bottom: 10px; display: block; }
.schip-kaart h3 { font-family: var(--font-titel); color: var(--accent); font-size: 1em; margin-bottom: 6px; }
.schip-kaart .prijs { color: var(--goud); font-family: var(--font-data); font-size: 1.25em; margin-bottom: 8px; }
.schip-kaart p { color: var(--tekst-dim); font-size: 0.88em; margin-bottom: 12px; line-height: 1.5; }
.schip-stat {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--rand);
    font-family: var(--font-data);
    font-size: 0.82em;
    color: var(--tekst-dim);
}
.schip-stat .waarde { color: var(--tekst); }

/* ===== HOOFD SPEL SCHERM ===== */
#spel-scherm { background: transparent; }

/* Top balk */
#top-balk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: rgba(7,17,31,0.95);
    border-bottom: 1px solid var(--rand);
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    backdrop-filter: blur(8px);
}
#beurt-display { margin-left: auto; }
#krediet-display, #beurt-display {
    font-family: var(--font-data);
    font-size: 0.85em;
    white-space: nowrap;
}
#krediet-display { color: var(--goud); cursor: default; border-radius: 4px; padding: 2px 4px; transition: background 0.15s; }
#krediet-display:hover { background: rgba(255,255,255,0.07); }
#beurt-display { color: var(--tekst-dim); }

/* Top balk tooltips */
.top-tooltip { text-align: center; }
.top-tooltip {
    position: fixed;
    z-index: 500;
    background: rgba(4, 8, 18, 0.96);
    border: 1px solid var(--rand-actief);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--font-data);
    font-size: 0.82em;
    min-width: 180px;
    max-width: 280px;
    pointer-events: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.top-tooltip.verborgen { display: none !important; }
.tt-label {
    font-family: var(--font-titel);
    font-size: 0.68em;
    color: var(--tekst-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--rand);
}
.tt-beschr {
    color: var(--tekst-dim);
    font-size: 0.92em;
    line-height: 1.45;
    margin-bottom: 8px;
}
.tt-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 3px 0;
    color: var(--tekst);
}
.tt-ster { color: var(--goud); letter-spacing: 1px; }
.tt-scheidslijn { border-top: 1px solid var(--rand); margin: 6px 0 2px; }
.tt-prijs { color: var(--goud); }
.tt-leeg { color: var(--tekst-dim); font-style: italic; }
.tt-schade { color: var(--rood); margin-top: 6px; font-size: 0.9em; }

/* Topbalk items hoverbaar maken */
#schip-naam-display, #cargo-display, #passagiers-display, #brandstof-display {
    cursor: default;
    border-radius: 4px;
    padding: 2px 4px;
    transition: background 0.15s;
}
#schip-naam-display:hover, #cargo-display:hover, #passagiers-display:hover, #brandstof-display:hover {
    background: rgba(255,255,255,0.07);
}

.game-logo {
    font-family: var(--font-titel);
    font-weight: 900;
    font-size: 1.05em;
    color: var(--goud);
    letter-spacing: 0.1em;
}
#kapitein-display, #schip-naam-display, #cargo-display, #passagiers-display, #brandstof-display {
    font-family: var(--font-data);
    font-size: 0.85em;
    color: var(--tekst);
    white-space: nowrap;
}
#kapitein-display { color: var(--tekst-dim); }
#schip-naam-display { color: var(--accent); }
.scheidslijn { color: var(--rand-actief); }

/* Hoofd inhoud */
#hoofd-inhoud {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Links paneel */
#hoofd-paneel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Tabbladen */
#tabbladen {
    display: flex;
    background: rgba(7,17,31,0.95);
    border-bottom: 1px solid var(--rand);
    flex-shrink: 0;
}
.tab {
    position: relative;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--planet-accent) 7%, transparent) 0%,
        transparent 65%
    );
    border: none;
    border-right: 1px solid var(--rand);
    color: var(--tekst-dim);
    padding: 12px 22px;
    font-family: var(--font-data);
    font-size: 0.82em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, background 0.3s;
}
.tab:hover {
    color: var(--tekst);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--planet-accent) 15%, var(--bg-paneel)) 0%,
        color-mix(in srgb, var(--planet-accent) 4%, transparent) 100%
    );
}
.tab.actief {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--planet-accent) 22%, var(--bg-paneel)) 0%,
        color-mix(in srgb, var(--planet-accent) 7%, transparent) 100%
    );
}
.tab.actief::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 2.5%;
    right: 2.5%;
    height: 2px;
    background: var(--planet-accent);
    box-shadow:
        0 0 4px 1px color-mix(in srgb, var(--planet-accent) 70%, transparent),
        0 0 12px 3px color-mix(in srgb, var(--planet-accent) 35%, transparent);
    border-radius: 1px;
    pointer-events: none;
}

/* Tab inhoud */
#tab-inhoud { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; }
.tab-paneel { display: none; }
.tab-paneel.actief { display: block; }

/* ===== HANDELSTABEL ===== */
.handel-tabel {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 0.83em;
}
.handel-tabel th {
    padding: 7px 10px;
    text-align: left;
    color: var(--tekst-dim);
    border-bottom: 1px solid var(--rand);
    font-size: 0.82em;
    font-weight: normal;
    white-space: nowrap;
    background: var(--bg-diep);
    z-index: 5;
}
.handel-tabel td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(21,40,64,0.6);
    vertical-align: middle;
}
.handel-tabel tbody tr:hover td { background: rgba(255,255,255,0.02); }
.handel-blok-vol { grid-column: 1 / -1; width: 100%; }
.handel-tabel-wrap { overflow-x: auto; }
.handel-banner-zwart {
    padding: 8px 14px;
    font-size: 0.82em;
    color: var(--rood);
    border-bottom: 1px solid var(--rand);
}
.handel-col-sec { /* shown by default, hidden on mobile */ }
.goed-icoon { margin-right: 4px; }

.actie-rij { display: flex; gap: 5px; align-items: center; }
.aantal-invoer {
    background: var(--bg-paneel-licht);
    border: 1px solid var(--rand-actief);
    color: var(--tekst);
    padding: 4px 7px;
    width: 58px;
    font-family: var(--font-data);
    font-size: 0.83em;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.15s;
}
.aantal-invoer:focus { border-color: var(--accent); }

/* ===== RECHTS PANEEL ===== */
#zij-paneel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--rand);
    background: rgba(7,17,31,0.6);
    overflow: hidden;
}

/* Planeet info kaart */
#planeet-info-container {
    flex-shrink: 0;
    border-bottom: 1px solid var(--rand);
    overflow: hidden;
}
.planeet-info-kaart {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-diep);
    overflow: hidden;
}
.planeet-info-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.planeet-info-tekst {
    padding: 10px 14px 8px;
}

/* "Ga naar planeet" knop in zijbalk */
#planeet-ga-naar-knop {
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--planeet-knop-kleur, var(--accent)) 22%, var(--bg-paneel-licht)) 0%,
        color-mix(in srgb, var(--planeet-knop-kleur, var(--accent)) 10%, var(--bg-paneel)) 100%
    );
    color: var(--planeet-knop-kleur, var(--accent));
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--planeet-knop-kleur, var(--accent)) 30%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--planeet-knop-kleur, var(--accent)) 55%, transparent);
    border-radius: 0;
    font-family: var(--font-titel);
    font-size: 0.72em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: filter 0.15s;
    flex-shrink: 0;
}
#planeet-ga-naar-knop:hover {
    filter: brightness(1.2);
}
#planeet-ga-naar-knop.actief {
    filter: brightness(1.15);
    border-bottom-color: var(--planeet-knop-kleur, var(--accent));
    box-shadow: 0 3px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.planeet-info-naam {
    font-family: var(--font-titel);
    font-size: 0.95em;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.planeet-info-beschr {
    font-size: 0.84em;
    color: var(--tekst);
    line-height: 1.4;
    margin-bottom: 6px;
}
.planeet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.planeet-tag {
    font-size: 0.68em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--tekst-dim);
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

/* Kaart: nu binnen bestemming-paneel */
#kaart-container {
    padding: 6px 0 4px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#schip-info h3 {
    font-family: var(--font-titel);
    font-size: 0.68em;
    color: var(--tekst-dim);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
#galaxy-kaart {
    width: 100%;
    height: 200px;
    background: rgba(4,6,13,0.85);
    border: 1px solid var(--rand);
    border-radius: 6px;
}
.planeet-naam-label {
    fill: #7aa4c0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10.5px;
    pointer-events: none;
}
.planeet-naam-label.huidig { fill: #e8f4ff; }
.reis-lijn {
    stroke: rgba(0,212,255,0.5);
    stroke-width: 1;
    stroke-dasharray: 5 3;
    animation: dash-anim 1.2s linear infinite;
}
@keyframes dash-anim { to { stroke-dashoffset: -16; } }

/* Schip info */
#schip-info { flex: 1; padding: 12px; overflow-y: auto; min-height: 0; }
.stat-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(21,40,64,0.5);
    font-family: var(--font-data);
    font-size: 0.8em;
}
.stat-naam { color: var(--tekst-dim); }
.stat-waarde { color: var(--tekst); }
.stat-waarde.accent { color: var(--accent); }
.ster-rating { color: var(--goud); letter-spacing: 1px; }
.lading-balk-container {
    background: var(--bg-paneel-licht);
    border-radius: 3px;
    height: 5px;
    margin: 3px 0 6px;
    overflow: hidden;
}
.lading-balk { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.lading-balk.animeer { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.lading-balk.vol { background: var(--rood); }
.lading-item {
    display: flex;
    gap: 6px;
    padding: 3px 0;
    font-family: var(--font-data);
    font-size: 0.78em;
    border-bottom: 1px dotted rgba(21,40,64,0.4);
}
.lading-item .naam { flex: 1; color: var(--tekst-dim); }
.lading-item .aantal { color: var(--tekst); }

/* ===== BERICHTEN BALK ===== */
#berichten-balk {
    background: rgba(4,6,13,0.92);
    border-top: 1px solid var(--rand);
    height: 72px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 7px 16px;
}
.bericht {
    font-family: var(--font-data);
    font-size: 0.76em;
    padding: 2px 0;
    color: var(--tekst-dim);
    border-bottom: 1px solid rgba(21,40,64,0.2);
}
.bericht.info      { color: var(--accent); }
.bericht.succes    { color: var(--groen); }
.bericht.waarschuwing { color: var(--oranje); }
.bericht.gevaar    { color: var(--rood); }
.bericht.goud      { color: var(--goud); }

/* ===== SECTIE HEADERS ===== */
.sectie-header {
    font-family: var(--font-titel);
    font-size: 0.72em;
    color: var(--tekst-dim);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 10px 0 5px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 10px;
}
.info-balk {
    background: rgba(0,212,255,0.04);
    border: 1px solid var(--rand-actief);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.83em;
    color: var(--tekst-dim);
    margin: 8px 0;
    line-height: 1.5;
}

/* ===== PLANEET INFO PANEEL ===== */
.planeet-info-paneel {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.planeet-info-paneel h3 { font-family: var(--font-titel); color: var(--accent); font-size: 0.95em; margin-bottom: 6px; }
.planeet-info-paneel p { color: var(--tekst-dim); font-size: 0.85em; line-height: 1.5; }

/* ===== HAVEN TAB ===== */
.haven-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    align-content: start;
}
.haven-blok {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.haven-blok-vol-breed { grid-column: 1 / -1; }
.haven-blok-passagiers {
    background:
        linear-gradient(to bottom, #07111f 50%, rgba(7,17,31,0) 100%),
        url('assets/passengers-boarding.png') no-repeat bottom / 100% auto;
}
.haven-blok-passagiers .haven-blok-inhoud {
    padding-bottom: 70px;
}
.haven-blok-brandstof {
    background:
        linear-gradient(to bottom, #07111f 50%, rgba(7,17,31,0) 100%),
        url('assets/refueling.png') no-repeat bottom / 100% auto;
}
.haven-blok-brandstof .haven-blok-inhoud {
    padding-bottom: 70px;
}
.haven-blok-verzekering {
    background:
        linear-gradient(to bottom, #07111f 50%, rgba(7,17,31,0) 100%),
        url('assets/insurance.png') no-repeat bottom / 100% auto;
}
.haven-blok-verzekering .haven-blok-inhoud {
    padding-bottom: 70px;
}
.haven-blok-reparatie {
    background:
        linear-gradient(to bottom, #07111f 50%, rgba(7,17,31,0) 100%),
        url('assets/repair-shop.png') no-repeat bottom / 100% auto;
}
.haven-blok-reparatie .haven-blok-inhoud {
    padding-bottom: 70px;
}
.haven-blok-header {
    font-family: var(--font-titel);
    font-size: 0.7em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 9px 14px;
    border-bottom: 1px solid var(--rand);
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--planet-accent) 3%, transparent)  0px,
        color-mix(in srgb, var(--planet-accent) 3%, transparent) 14px,
        color-mix(in srgb, var(--planet-accent) 8%, transparent) 14px,
        color-mix(in srgb, var(--planet-accent) 8%, transparent) 28px
    );
    flex-shrink: 0;
}
.haven-blok-inhoud {
    padding: 12px 14px;
    flex: 1;
}
.sectie-sub-header {
    font-size: 0.72em;
    color: var(--tekst-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 8px 0 4px;
}
.planeet-reislijst { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.planeet-rij {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 80px;
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.planeet-rij:hover { border-color: var(--rand-actief); background: rgba(13,24,41,0.8); }
.planeet-rij.geselecteerd { border-color: var(--accent); background: rgba(0,212,255,0.05); }
.planeet-rij-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.planeet-rij-info strong { font-family: var(--font-data); font-size: 0.9em; color: var(--tekst); }
.planeet-rij-info span { font-size: 0.78em; color: var(--tekst-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planeet-rij-stats { display: flex; align-items: center; gap: 10px; font-family: var(--font-data); font-size: 0.78em; flex-shrink: 0; }
/* Fallback voor oude selector — nu overschreven door nieuwe structuur */

/* Upgrade raster */
.upgrade-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 6px;
}
.upgrade-kaart {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 14px 12px;
    transition: border-color 0.2s;
}
.upgrade-kaart:not(.al-geinstalleerd):hover { border-color: var(--rand-actief); }
.upgrade-kaart.al-geinstalleerd { opacity: 0.55; border-color: var(--groen); }
.upgrade-kaart h4 { font-family: var(--font-data); color: var(--accent); font-size: 0.88em; margin-bottom: 5px; }
.upgrade-kaart p { color: var(--tekst-dim); font-size: 0.78em; margin-bottom: 8px; line-height: 1.4; }
.upgrade-prijs { color: var(--goud); font-family: var(--font-data); font-size: 0.88em; margin-bottom: 7px; }
.upgrade-categorie-header {
    font-family: var(--font-titel);
    font-size: 0.7em;
    color: var(--accent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,212,255,0.18);
}
.upgrade-vereist {
    font-size: 0.73em;
    color: var(--oranje);
    margin-bottom: 6px;
    font-style: italic;
}

/* Aandelen knoppen */
.aandeel-knoppen-koop, .aandeel-knoppen-verkoop {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.aandeel-bedrijf-beschrijving {
    font-size: 0.75em;
    color: var(--tekst-dim);
    margin-top: 2px;
}

/* Lening sectie */
.lening-sectie {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 14px 14px;
    margin-top: 8px;
}
.lening-sectie h4 { font-family: var(--font-titel); color: var(--goud); font-size: 0.82em; margin-bottom: 10px; }

/* ===== BEURS ===== */
.aandeel-rij td { padding: 10px 10px; vertical-align: middle; }

/* ===== REISSCHERM ===== */
#reis-scherm {
    align-items: center;
    justify-content: center;
    background: rgba(4,6,13,0.96);
}
.reis-inhoud {
    text-align: center;
    width: min(560px, 92vw);
    padding: 20px;
}
.reis-inhoud h2 {
    font-family: var(--font-titel);
    color: var(--accent);
    font-size: 1.8em;
    margin-bottom: 20px;
}
#reis-visual {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 12px;
}
.reis-planeet-blok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.reis-planeet-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--rand-actief);
    background: var(--bg-diep);
}
.reis-planeet-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reis-planeet-kleur {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.reis-planeet-naam {
    font-family: var(--font-data);
    font-size: 0.72em;
    color: var(--tekst-dim);
}
#reis-route-wrap {
    flex: 1;
    position: relative;
    height: 60px;
    overflow: hidden;
}
#reis-route-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed rgba(0,212,255,0.2);
    transform: translateY(-50%);
}
#reis-animatie {
    position: absolute;
    font-size: 1.9em;
    top: 50%;
    left: -48px;
    transform: translateY(-50%);
    transition: left 1.5s linear;
    filter: drop-shadow(0 0 8px rgba(0,212,255,0.5));
}
#reis-voortgang-container {
    background: var(--bg-paneel-licht);
    border: 1px solid var(--rand);
    border-radius: 8px;
    height: 8px;
    margin: 6px 0 16px;
    overflow: hidden;
}
#reis-voortgang-balk {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    border-radius: 8px;
    transition: width 0.4s ease;
    width: 0%;
}
#reis-tekst {
    color: var(--tekst-dim);
    font-family: var(--font-data);
    font-size: 0.9em;
    margin-bottom: 14px;
}
#reis-bestemming { color: var(--accent); }

/* ===== EVENT POPUP ===== */
#event-popup {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
#event-popup.verborgen { display: none; }
#aankomst-popup {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
#aankomst-popup.verborgen { display: none; }
#marketing-summary-popup {
    position: fixed; inset: 0;
    z-index: 101;
    background: rgba(0,0,0,0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
#marketing-summary-popup.verborgen { display: none; }
.aankomst-popup-inhoud { border-color: var(--goud); box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 24px rgba(255,215,0,0.1); }
.popup-inhoud {
    background: var(--bg-paneel);
    border: 1px solid var(--rand-actief);
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 20px rgba(0,212,255,0.08);
    animation: popup-in 0.2s ease-out;
}
@keyframes popup-in {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.event-icoon { font-size: 3.8em; margin-bottom: 14px; display: block; }
.popup-inhoud h3 { font-family: var(--font-titel); color: var(--accent); font-size: 1.35em; margin-bottom: 10px; }
.popup-inhoud p { color: var(--tekst); line-height: 1.7; margin-bottom: 14px; font-size: 0.95em; }
.event-gevolg {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--rand);
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-family: var(--font-data);
    font-size: 0.88em;
    color: var(--oranje);
    min-height: 36px;
    line-height: 1.5;
}
#event-knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.event-marketing-melding {
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--oranje);
}
.event-verzekering {
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.88em;
    line-height: 1.5;
}
.ev-gedekt { color: var(--groen); font-weight: 600; }
.ev-niet-gedekt { color: var(--tekst-dim); }
.ev-payout { color: var(--tekst); margin-top: 4px; }

/* Verzekering statistieken overlay */
#verzekering-stats-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1200; }
#verzekering-stats-overlay.verborgen { display: none !important; }
.vstat-rij { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.vstat-saldo-rij { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 16px; font-weight: 600; }
.vstat-label { color: var(--tekst-dim); font-size: 0.9em; }
.vstat-waarde { font-family: 'Share Tech Mono', monospace; font-size: 0.95em; }

/* ===== EINDESCHERM ===== */
#einde-scherm {
    align-items: center;
    justify-content: center;
    background: rgba(4,6,13,0.97);
}
.einde-inhoud { text-align: center; max-width: 580px; padding: 40px 30px; }
.einde-inhoud h2 { font-family: var(--font-titel); font-size: 2.2em; color: var(--goud); margin-bottom: 0.5em; }
.einde-inhoud > p { color: var(--tekst); line-height: 1.85; margin-bottom: 1.8em; font-size: 1.05em; }
#einde-statistieken {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 2em;
    text-align: left;
}
.stat-einde {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--rand);
    font-family: var(--font-data);
    font-size: 0.88em;
}
.stat-einde .naam { color: var(--tekst-dim); }
.stat-einde .waarde { color: var(--accent); }

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-paneel); }
::-webkit-scrollbar-thumb { background: var(--rand-actief); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ===== GALACTISCHE MARKT ===== */
.galact-wrap {
    overflow-x: auto;
    margin-bottom: 10px;
}
.galact-tabel {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 0.77em;
    white-space: nowrap;
}
.galact-tabel th {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid var(--rand);
    font-size: 0.82em;
    font-weight: normal;
    text-decoration: none;
}
.galact-tabel th.galact-huidig-th {
    border-bottom: 2px solid var(--accent);
    background: rgba(0, 212, 255, 0.07);
    color: #fff !important;
    text-decoration: none;
}
.galact-goed-col {
    text-align: left !important;
    color: var(--tekst);
    padding: 7px 14px 7px 10px !important;
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--bg-diep);
    z-index: 2;
}
.galact-cel {
    text-align: center;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(21,40,64,0.4);
    color: var(--tekst-dim);
}
.galact-cel.galact-huidig {
    background: rgba(0, 212, 255, 0.07);
    box-shadow: inset 1px 0 0 rgba(0,212,255,0.35), inset -1px 0 0 rgba(0,212,255,0.35);
    color: var(--tekst);
}
.galact-cel.galact-goedkoop {
    background: rgba(57,255,20,0.18);
    color: #7fff5a;
    font-weight: bold;
}
.galact-cel.galact-duur {
    background: rgba(255,56,85,0.18);
    color: #ff7090;
    font-weight: bold;
}
.galact-tabel tbody tr:hover td { background-color: rgba(255,255,255,0.04); }
.galact-tabel tbody tr:hover .galact-cel.galact-goedkoop { background: rgba(57,255,20,0.25); }
.galact-tabel tbody tr:hover .galact-cel.galact-duur      { background: rgba(255,56,85,0.25); }
.galact-tabel th.galact-bestemming-th {
    border-bottom: 2px solid var(--goud);
    background: rgba(255,215,0,0.07);
    color: var(--goud) !important;
    cursor: default;
}
.galact-cel.galact-bestemming {
    background: rgba(255,215,0,0.07);
    box-shadow: inset 1px 0 0 rgba(255,215,0,0.3), inset -1px 0 0 rgba(255,215,0,0.3);
    color: var(--tekst);
}
/* Goedkoop/duur kleuren altijd zichtbaar, ook op cyaan/gele achtergrond */
.galact-cel.galact-huidig.galact-goedkoop,
.galact-cel.galact-bestemming.galact-goedkoop { color: #7fff5a; background: rgba(57,255,20,0.18); }
.galact-cel.galact-huidig.galact-duur,
.galact-cel.galact-bestemming.galact-duur     { color: #ff7090; background: rgba(255,56,85,0.18); }
/* Planeetheaders met tooltip: pointer cursor */
.galact-tabel th[data-galact-tip] { cursor: pointer; }
/* Prijsrange kolom in galactische markt */
.galact-prijsrange {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
}

/* Badges */
.badge-groen { color: #39ff14; font-size: 0.85em; }
.badge-rood  { color: #ff7090; font-size: 0.85em; }

/* ===== HAVEN / REISPLANNER ===== */
.planeet-bol {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.planeet-rij-foto {
    flex-shrink: 0;
    align-self: stretch;
    background: var(--bg-diep) radial-gradient(circle at 40% 40%, var(--planeet-kleur, #00d4ff)55, transparent 65%);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.planeet-rij-foto img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}
.planeet-rij-inhoud {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.planeet-rij-hoofdlijn {
    display: flex;
    align-items: center;
    gap: 10px;
}
.planeet-rij-naam {
    flex: 1;
    font-family: var(--font-data);
    font-size: 0.9em;
    color: var(--tekst);
}
.planeet-rij-reistijd {
    font-family: var(--font-data);
    font-size: 0.8em;
    color: var(--tekst-dim);
    white-space: nowrap;
}
.planeet-rij-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== REIS STATUS ===== */
.reis-status {
    font-family: var(--font-data);
    font-size: 0.92em;
    color: var(--tekst-dim);
    margin-top: 8px;
    min-height: 24px;
    transition: color 0.3s;
}

/* ===== RESPONSIVE ===== */

/* --- 900px: smal desktop / tablet landscape --- */
@media (max-width: 900px) {
    #zij-paneel { width: 240px; }
    .schip-raster { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 1em; }
}

/* --- 768px: tablet portrait / grote telefoon landscape --- */
@media (max-width: 768px) {
    /* Spel- en schipselectie scherm mogen scrollen */
    #spel-scherm, #schip-selectie-scherm { overflow-y: auto; }

    /* Top balk: kleiner, scheidslijn weg */
    #top-balk { flex-wrap: wrap; gap: 5px; padding: 6px 12px; }
    .scheidslijn { display: none; }
    #kapitein-display { display: none; }
    .game-logo { font-size: 0.88em; }
    #kapitein-display, #schip-naam-display, #cargo-display,
    #passagiers-display, #brandstof-display { font-size: 0.78em; }
    #krediet-display { margin-left: 0; font-size: 0.78em; }
    #beurt-display { font-size: 0.78em; }

    /* Hoofd inhoud: stapelen */
    #hoofd-inhoud { flex-direction: column; overflow: visible; }
    #hoofd-paneel { overflow: visible; min-height: 0; }
    #tab-inhoud { overflow: visible; }
    #berichten-balk { height: 60px; }

    /* Zij-paneel: volle breedte, horizontaal naast elkaar */
    #zij-paneel {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid var(--rand);
        height: auto;
        flex-shrink: 0;
    }
    #planeet-info-container {
        flex: 0 0 180px;
        border-bottom: none;
        border-right: 1px solid var(--rand);
    }
    .planeet-info-kaart { height: 110px; }
    #kaart-container { flex: 1; min-width: 140px; padding: 8px; }
    #kaart-container h3 { font-size: 0.8em; margin-bottom: 4px; }
    #bestemming-paneel-container { flex: 0 0 100%; border-top: 1px solid var(--rand); }

    /* Handel tabel: minder kolommen */
    .handel-col-sec { display: none; }

    /* Haven grid: 1 of 2 kolommen */
    .haven-raster { grid-template-columns: repeat(2, 1fr); }
    .planeet-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* --- 480px: telefoon portrait --- */
@media (max-width: 480px) {
    /* Top balk: mini */
    #top-balk { padding: 5px 8px; gap: 4px; }
    .game-logo { font-size: 0.75em; letter-spacing: 0.05em; }
    #schip-naam-display, #cargo-display, #passagiers-display,
    #brandstof-display, #krediet-display, #beurt-display { font-size: 0.72em; }
    .top-instellingen-knop { font-size: 0.85em; padding: 4px 7px; }

    /* Tabs: horizontaal scrollbaar */
    #tabbladen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    #tabbladen::-webkit-scrollbar { display: none; }
    .tab { flex-shrink: 0; padding: 8px 10px; font-size: 0.72em; }

    /* Zij-paneel: gestapeld */
    #zij-paneel { flex-direction: column; }
    #planeet-info-container { flex: none; border-right: none; border-bottom: 1px solid var(--rand); }
    .planeet-info-kaart { height: 90px; }
    #kaart-container { padding: 6px 8px; }
    #bestemming-paneel-container { border-top: none; }

    /* Haven grid: 1 kolom */
    .haven-raster { grid-template-columns: 1fr; }
    .planeet-raster { grid-template-columns: 1fr; }

    /* Instellingen modal */
    .instellingen-modal { max-width: 95vw; }
    .tutorial-modal { max-width: 95vw; }
}

/* =============================================================================
   TUTORIAL SYSTEEM
   ============================================================================= */

#tutorial-overlay {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
#tutorial-overlay.verborgen { display: none; }

.tutorial-modal {
    background: var(--bg-paneel);
    border: 1px solid var(--goud);
    border-radius: 14px;
    padding: 36px 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 60px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.12);
    animation: popup-in 0.25s ease-out;
}
.tutorial-icoon {
    font-size: 3em;
    margin-bottom: 10px;
    display: block;
}
.tutorial-unlocked-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 6px;
}
.tutorial-modal h3 {
    font-family: var(--font-titel);
    color: var(--goud);
    font-size: 1.3em;
    margin-bottom: 12px;
}
.tutorial-modal p {
    color: var(--tekst);
    line-height: 1.7;
    margin-bottom: 22px;
    font-size: 0.95em;
    text-align: left;
}

/* Tutorial skip checkbox op intro-scherm */
.tutorial-skip-rij {
    margin: 14px 0 4px;
}
.tutorial-skip-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tekst-dim);
    font-size: 0.85em;
    cursor: pointer;
}
.tutorial-skip-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px; height: 15px;
    cursor: pointer;
}

/* ===== TOAST SYSTEEM ===== */
#toast-container {
    position: fixed;
    top: calc(var(--top-balk-h, 50px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    pointer-events: none;
    width: 400px;
    max-width: 90vw;
}
.toast {
    background: var(--bg-paneel);
    border: 1px solid var(--rand-actief);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 28px rgba(0,0,0,0.5);
}
.toast.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}
.toast.verdwijnt {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.toast-goud { border-color: var(--goud); box-shadow: 0 0 28px rgba(255,215,0,0.15); }
.toast-groen { border-color: var(--groen); }
.toast-rood  { border-color: var(--rood); }
.toast-icoon { font-size: 2em; flex-shrink: 0; }
.toast-naam  { font-family: var(--font-titel); font-size: 0.82em; margin-bottom: 3px; }
.toast-beschr { color: var(--tekst-dim); font-size: 0.78em; }

/* ACHIEVEMENTS TAB */
.achievements-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.achievement-kaart {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: border-color 0.2s;
}
.achievement-kaart.unlocked {
    border-color: var(--goud);
    background: rgba(255,215,0,0.04);
}
.achievement-kaart.locked { opacity: 0.45; }
.ach-icoon { font-size: 2.2em; margin-bottom: 6px; }
.ach-naam { font-family: var(--font-data); color: var(--goud); font-size: 0.85em; margin-bottom: 4px; }
.ach-beschr { color: var(--tekst-dim); font-size: 0.78em; line-height: 1.4; }
.ach-beloning { font-family: var(--font-data); font-size: 0.78em; margin-top: 6px; }

/* STOCK KAARTEN & SPARKLINES */
.aandeel-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.aandeel-kaart {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aandeel-kaart-top { display: flex; align-items: center; gap: 8px; }
.aandeel-kaart-naam { font-family: var(--font-data); font-size: 0.82em; color: var(--tekst); flex: 1; }
.aandeel-koers-groot { font-family: var(--font-data); font-size: 1.2em; color: var(--goud); }
.aandeel-delta { font-family: var(--font-data); font-size: 0.78em; margin-bottom: 4px; }
.sparkline-leeg { height: 50px; display: flex; align-items: center; color: var(--tekst-dim); font-size: 0.75em; }

/* PORTFOLIO LAYOUT (grafiek + tabel) */
.portfolio-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.portfolio-grafiek-wrap {
    flex: 0 0 360px;
    min-width: 240px;
}
.portfolio-tabel-wrap {
    flex: 1;
    min-width: 260px;
}
.portfolio-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}
.portfolio-tabel th {
    color: var(--tekst-dim);
    font-weight: 400;
    padding: 3px 6px;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}
.portfolio-tabel td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
    font-family: var(--font-data);
    font-size: 0.95em;
}
.portfolio-tabel td:first-child { font-family: var(--font-ui); }
.pt-r { text-align: right; }
.portfolio-totalen {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--rand);
}

/* WINST/VERLIES in handelstabel */
.winst-positief { color: var(--groen); font-size: 0.8em; }
.winst-negatief { color: var(--rood); font-size: 0.8em; }
.aankoopprijs-info { color: var(--tekst-dim); font-size: 0.78em; font-family: var(--font-data); }

/* GOED TOOLTIP */
.goed-tip-wrap {
    position: relative;
    cursor: help;
    display: inline-block;
}
.goed-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: -6px;
    background: #0d1b2e;
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 8px 11px;
    font-size: 0.8em;
    font-family: var(--font-ui);
    line-height: 1.5;
    color: var(--tekst);
    width: 210px;
    z-index: 300;
    pointer-events: none;
    white-space: normal;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.goed-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12px;
    border: 5px solid transparent;
    border-top-color: var(--accent);
}
.goed-tip-prijs { color: var(--goud); font-family: var(--font-data); font-size: 0.93em; margin-top: 4px; }
.goed-tip-wrap:hover .goed-tip { display: block; }

/* MARKT LABELS — specialiteit / vraag */
.markt-label {
    display: inline-block;
    font-size: 0.68em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    font-family: var(--font-tekst);
    white-space: nowrap;
    opacity: 0.85;
}
.label-specialiteit {
    background: rgba(57,255,20,0.12);
    color: var(--groen);
    border: 1px solid rgba(57,255,20,0.25);
}
.label-vraag {
    background: rgba(255,140,66,0.12);
    color: var(--oranje);
    border: 1px solid rgba(255,140,66,0.25);
}

/* PLANEET-TAB: verwerkingsfaciliteit & diensten */
.planeet-dienst-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-titel);
    font-size: 0.9em;
    color: var(--goud);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
/* ===== PLANEET RASTER (tegels in planeet-tab) ===== */
.planeet-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    align-content: start;
}
.planeet-blok-vol-breed { grid-column: 1 / -1; }

.planeet-dienst-blok {
    background: var(--bg-paneel-licht);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 0;
}
.planeet-dienst-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.87em;
    border-bottom: 1px solid rgba(21,40,64,0.5);
    gap: 10px;
}
.planeet-dienst-rij:last-of-type { border-bottom: none; }
.planeet-dienst-rij .label { color: var(--tekst-dim); }
.planeet-dienst-rij .waarde { font-family: var(--font-data); color: var(--tekst); }
.planeet-dienst-batch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
}
.planeet-dienst-batch label { font-size: 0.85em; color: var(--tekst-dim); }
.planeet-geen-dienst {
    color: var(--tekst-dim);
    font-size: 0.88em;
    text-align: center;
    padding: 32px 0;
}

/* VEILING */
.veiling-resultaat-banner {
    text-align: center;
    font-family: var(--font-titel);
    font-size: 0.95em;
    letter-spacing: 0.08em;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 10px 0 6px;
}
.veiling-gewonnen {
    background: rgba(57,255,20,0.1);
    color: var(--groen);
    border: 1px solid rgba(57,255,20,0.3);
}
.veiling-verloren {
    background: rgba(255,56,85,0.1);
    color: var(--rood);
    border: 1px solid rgba(255,56,85,0.3);
}
.veiling-boden-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-top: 10px;
}
.veiling-boden-tabel th {
    padding: 6px 10px;
    text-align: left;
    color: var(--tekst-dim);
    border-bottom: 1px solid var(--rand);
    font-weight: normal;
    font-family: var(--font-data);
    font-size: 0.9em;
}
.veiling-boden-tabel td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(21,40,64,0.5);
}
.veiling-winnaar-rij td {
    color: var(--goud);
    font-weight: 600;
}

/* KREDIET NEGATIEF */
.krediet-negatief { color: var(--rood) !important; }

/* ===== EVENT GEVOLG: verberg leeg kader ===== */
#event-gevolg:empty { display: none; }

/* FLOATING TRADE TOAST */
.floating-toast {
    position: fixed;
    transform: translateX(-50%);
    z-index: 9999;
    font-family: var(--font-data);
    font-size: 0.88em;
    font-weight: bold;
    pointer-events: none;
    opacity: 1;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    line-height: 1.3;
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.floating-toast.actief {
    transform: translateX(-50%) translateY(-40px);
    opacity: 0;
}
.floating-toast-koop    { color: #ff6070; }
.floating-toast-winst   { color: #39ff14; }
.floating-toast-verlies { color: #ff6070; }

/* ===== RANGLIJST ===== */
.ranglijst-lijst { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ranglijst-rij {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    font-size: 0.88em;
    border: 1px solid transparent;
}
.ranglijst-rij.ranglijst-speler {
    background: rgba(0,212,255,0.07);
    border-color: rgba(0,212,255,0.25);
}
.ranglijst-pos { font-size: 1.1em; text-align: center; }
.ranglijst-naam { font-weight: 500; }
.ranglijst-type { color: var(--tekst-dim); font-size: 0.78em; font-weight: normal; margin-left: 5px; }
.ranglijst-waarde { font-family: var(--font-data); color: var(--goud); text-align: right; white-space: nowrap; }

/* ===== VERMOGENSGRAFIEK ===== */
.grafiek-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    font-size: 0.8em;
}
.grafiek-legenda-item { display: flex; align-items: center; gap: 5px; }
.grafiek-kleur-balk {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ===== PLANEET THEMA'S ===== */
:root { --planet-accent: var(--accent); }
body[data-planeet="nexoria"] { --planet-accent: #4a9eff; }
body[data-planeet="ferrum"]  { --planet-accent: #c8753a; }
body[data-planeet="agria"]   { --planet-accent: #39a85a; }
body[data-planeet="techton"] { --planet-accent: #9b59ff; }
body[data-planeet="aqueron"] { --planet-accent: #00aadd; }
body[data-planeet="pyroflux"]{ --planet-accent: #e03a3a; }
body[data-planeet="luxoria"] { --planet-accent: #d4ac0d; }
body[data-planeet="mortex"]  { --planet-accent: #8b0000; }

#top-balk { border-bottom-color: var(--planet-accent) !important; transition: border-color 0.6s; }
.tab.actief {
    color: var(--planet-accent) !important;
    border-bottom-color: var(--planet-accent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--planet-accent) 22%, var(--bg-paneel)) 0%,
        color-mix(in srgb, var(--planet-accent) 7%, transparent) 100%
    ) !important;
}
#schip-naam-display { color: var(--planet-accent) !important; transition: color 0.6s; }

/* ===== ACHIEVEMENT CATEGORIEËN ===== */
.ach-categorie-header {
    font-family: var(--font-titel);
    font-size: 0.72em;
    color: var(--goud);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,215,0,0.2);
}

/* ===== PASSAGIERS ===== */
.pax-sectie-label { font-family: var(--font-titel); font-size: 0.65em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-dim); margin-bottom: 6px; margin-top: 4px; }
.pax-info-raster { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-data); font-size: 0.88em; }
.pax-info-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.ticket-niveau-knoppen { display: flex; gap: 6px; }
.ticket-niveau-knop { flex: 1; padding: 6px 8px; line-height: 1.4; font-size: 0.8em; border-color: var(--rand); color: var(--tekst-dim); background: transparent; }
.ticket-niveau-hint { font-size: 0.82em; color: var(--tekst-dim); display: block; }
.knop-niveau-laag  { border-color: var(--groen)  !important; color: var(--groen)  !important; background: rgba(57,255,20,0.08)  !important; }
.knop-niveau-midden{ border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(0,212,255,0.08)  !important; }
.knop-niveau-hoog  { border-color: var(--oranje) !important; color: var(--oranje) !important; background: rgba(255,140,66,0.08) !important; }
.knop-niveau-laag .ticket-niveau-hint, .knop-niveau-midden .ticket-niveau-hint, .knop-niveau-hoog .ticket-niveau-hint { color: inherit; opacity: 0.75; }

/* ===== VERKOOP PREVIEW in handelstabel ===== */
.verkoop-preview {
    font-family: var(--font-data);
    font-size: 0.75em;
    margin-top: 3px;
    white-space: nowrap;
    line-height: 1.4;
}

/* ===== GESELECTEERDE BESTEMMING PANEEL ===== */
#bestemming-paneel-container {
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--planet-accent, var(--accent));
}
.bestemming-paneel {
    background: var(--bg-paneel);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

/* Destination info blok — verschijnt met fade+slide animatie */
.dest-info-blok {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.dest-info-blok.geen-animatie {
    transition: none !important;
}
.dest-info-blok.zichtbaar {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}
.dest-info-naam {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-data);
    font-size: 1em;
    margin-bottom: 3px;
}
.dest-info-beschr {
    font-size: 0.8em;
    color: var(--tekst-dim);
    line-height: 1.35;
    margin-bottom: 6px;
}
.dest-info-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-data);
    font-size: 0.83em;
    padding: 4px 7px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    margin-bottom: 3px;
}
.dest-info-tekort {
    background: rgba(255,56,85,0.10);
    border: 1px solid rgba(255,56,85,0.25);
}

.bestemming-paneel-naam {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-family: var(--font-data);
    font-size: 1.05em;
}
.bestemming-services {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}
.bestemming-meta-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-data);
    font-size: 0.85em;
    padding: 5px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
}

/* ===== BRANDSTOF SECTIE ===== */
.brandstof-sectie {
    background: var(--bg-paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 12px 14px;
}
.brandstof-info-rij {
    display: flex;
    justify-content: space-between;
    font-size: 0.88em;
    margin-bottom: 4px;
}
.brandstof-acties {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.brandstof-vereist {
    font-size: 0.85em;
    padding: 5px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.brandstof-tekort {
    background: rgba(255,56,85,0.12);
    border: 1px solid rgba(255,56,85,0.3);
}

/* ===== PRE-FLIGHT CHECKLIST ===== */
.preflight-checklist {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.preflight-titel {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tekst-dim);
    margin-bottom: 4px;
}
.preflight-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82em;
    padding: 2px 0;
}
.preflight-dot {
    font-size: 0.75em;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== BEURS: portfolio info per kaart ===== */
.aandeel-portfolio-info {
    border-top: 1px solid var(--rand);
    padding-top: 6px;
    margin-top: 6px;
}
.aandeel-bezit-rij {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-data);
    font-size: 0.78em;
    padding: 2px 0;
}
.aandeel-actie-rij {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rand);
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ===== INSTELLINGEN KNOP (top balk) ===== */
.top-instellingen-knop {
    background: none;
    border: 1px solid var(--rand-actief);
    border-radius: 6px;
    color: var(--tekst-dim);
    font-size: 1.1em;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
    padding: 0;
    line-height: 1;
}
.top-instellingen-knop:hover { color: var(--accent); border-color: var(--accent); }

/* ===== TOP NAV KNOPPEN (logboek/ranglijst/achievements) ===== */
.top-nav-knop {
    background: none;
    border: 1px solid var(--rand-actief);
    border-radius: 6px;
    color: var(--tekst-dim);
    font-size: 1.05em;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
    line-height: 1;
}
.top-nav-knop:hover { color: var(--accent); border-color: var(--accent); }
.top-nav-knop.actief { color: var(--accent); border-color: var(--accent); background: rgba(0,212,255,0.1); }

/* ===== INSTELLINGEN MODAL ===== */
#instellingen-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(4,6,13,0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#instellingen-overlay.verborgen { display: none !important; }
.instellingen-modal {
    background: var(--bg-paneel);
    border: 1px solid var(--rand-actief);
    border-radius: 14px;
    width: min(92vw, 420px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
}
.instellingen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rand);
    background: var(--bg-paneel-licht);
}
.instellingen-titel {
    font-family: var(--font-titel);
    font-size: 0.95em;
    color: var(--accent);
    letter-spacing: 0.08em;
}
.instellingen-sluit {
    background: none;
    border: none;
    color: var(--tekst-dim);
    font-size: 1.1em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s;
}
.instellingen-sluit:hover { color: var(--tekst); }
.instellingen-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.instellingen-sectie {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.instellingen-sectie-titel {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tekst-dim);
    font-family: var(--font-data);
    margin-bottom: 2px;
}
.instellingen-knop {
    width: 100%;
    text-align: left;
    padding: 10px 14px !important;
    font-size: 0.9em;
    justify-content: flex-start;
}
.instellingen-upload-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 0.9em;
    font-family: var(--font-tekst);
}
.instellingen-gevaar-sectie { border-top: 1px solid rgba(255,56,85,0.2); padding-top: 18px; }

.bestemming-dropdown {
    width: 100%;
    background: var(--bg-diep);
    border: 1px solid var(--rand-actief);
    border-radius: 6px;
    color: var(--tekst);
    font-family: var(--font-data);
    font-size: 0.88em;
    padding: 8px 10px;
    cursor: pointer;
    outline: none;
}
.bestemming-dropdown:focus { border-color: var(--accent); }
.bestemming-dropdown option { background: var(--bg-diep); }

/* Planeet-tag tooltip cursor */
.planeet-tag[data-tip] { cursor: help; }
.planeet-tag[data-tip]:hover { opacity: 0.85; }

/* ===== BEURS TAB hints ===== */
.beurs-nexoria-hint {
    background: rgba(0,212,255,0.07);
    border-color: rgba(0,212,255,0.3);
    color: var(--tekst-dim);
    font-size: 0.86em;
}
.beurs-readonly-hint {
    background: rgba(255,140,66,0.07);
    border-color: rgba(255,140,66,0.3);
    color: var(--tekst-dim);
    font-size: 0.86em;
}
.beurs-handel-info {
    font-size: 0.88em;
    color: var(--tekst-dim);
    margin: 6px 0 14px;
    padding: 8px 12px;
    background: var(--bg-paneel-licht);
    border-radius: 6px;
    border: 1px solid var(--rand);
}

/* ===== ZWARTE MARKT (Mortex) ===== */
.zwarte-markt-header { color: var(--rood) !important; }
.zwarte-markt-banner {
    background: rgba(255,56,85,0.08);
    border: 1px solid rgba(255,56,85,0.3);
    color: var(--tekst-dim);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.84em;
    margin-bottom: 10px;
}
.verdacht-icoon { font-size: 0.85em; cursor: help; }

/* ===== CASINO STELLARIS (Luxoria) ===== */
.casino-beurten {
    font-size: 0.85em;
    color: var(--tekst-dim);
    margin-bottom: 14px;
}
.casino-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 10px 0 16px;
}
.casino-kaart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.casino-kaart {
    width: 72px;
    height: 104px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 900;
    font-family: var(--font-data);
    border: 2px solid var(--rand);
    background: var(--bg-paneel-licht);
    color: var(--tekst-dim);
}
.casino-kaart-wacht { letter-spacing: 0; color: var(--tekst-dim); }
.casino-kaart-winnaar {
    background: rgba(57,255,20,0.12);
    border-color: var(--groen);
    color: var(--groen);
}
.casino-kaart-verliezer {
    background: rgba(255,56,85,0.10);
    border-color: var(--rood);
    color: var(--rood);
}
.casino-label { font-size: 0.78em; color: var(--tekst-dim); }
.casino-vs {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--tekst-dim);
    font-family: var(--font-hoofd);
}
.casino-resultaat {
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 14px;
}
.casino-resultaat-gewonnen {
    background: rgba(57,255,20,0.1);
    color: var(--groen);
    border: 1px solid rgba(57,255,20,0.3);
}
.casino-resultaat-verloren {
    background: rgba(255,56,85,0.1);
    color: var(--rood);
    border: 1px solid rgba(255,56,85,0.3);
}
.casino-inzet-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@keyframes kaartOnthullen {
    from { transform: rotateY(-90deg); opacity: 0; }
    to   { transform: rotateY(0deg);   opacity: 1; }
}
.casino-kaart.animeer {
    animation: kaartOnthullen 0.45s ease both;
}
.casino-kaart.animeer-vertraagd {
    animation-delay: 0.3s;
}

/* ===== BRANDSTOF ICOON ===== */
.icoon-brandstof {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-right: 1px;
}

/* ===== RESOURCE ICONEN (PNG) ===== */
.res-icoon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}
.res-emoji {
    vertical-align: middle;
}

/* ===== MARKTMODIFIER INDICATOR ===== */
.markt-mod {
    font-size: 0.72em;
    margin-left: 3px;
    vertical-align: middle;
}
.markt-mod-op   { color: var(--rood); }
.markt-mod-neer { color: var(--groen); }

/* ===== MISSIES TAB ===== */
.missie-sectie-titel {
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 8px;
}
/* ===== MISSIES KOLOMMEN ===== */
.missies-kolommen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.missies-kolom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.missie-cat-badge {
    display: inline-block;
    font-size: 0.72em;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}
.missie-cat-spoed    { background: rgba(255,56,85,0.2); color: var(--rood); }
.missie-cat-levering { background: rgba(0,212,255,0.15); color: var(--accent); }
.missie-cat-transport{ background: rgba(57,255,20,0.15); color: var(--groen); }
.missie-cat-onderzoek{ background: rgba(168,85,247,0.2); color: var(--paars); }
.missie-beschr { line-height: 1.4; }

.missie-kaart {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-paneel-licht);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.missie-kaart.missie-actief {
    border-color: var(--accent-dim);
    background: rgba(0, 100, 136, 0.12);
}
.missie-type-icoon {
    font-size: 1.4em;
    flex-shrink: 0;
}
.missie-info {
    flex: 1;
    min-width: 0;
}
.missie-titel {
    font-size: 0.9em;
    color: var(--tekst);
    margin-bottom: 2px;
}
.missie-samenvatting {
    font-size: 0.88em;
    font-family: var(--font-data);
    color: var(--accent);
    margin-bottom: 3px;
    font-weight: 500;
}
.missie-meta {
    font-size: 0.78em;
}
.missie-beloning {
    font-family: var(--font-data);
    font-size: 0.88em;
    color: var(--goud);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.missie-knop {
    flex-shrink: 0;
    margin-left: 6px;
}