/* ============================================================
   Nebula Turns — Spieloberflaeche (ergaenzt nebula.css)
   ============================================================ */

.game-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
}
.game-nav a {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.game-nav a:hover, .game-nav a.active { border-color: var(--accent-warm); color: var(--accent-warm); }

.notice { padding: 0.7rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.95rem; }
.notice-ok { border: 1px solid #2f8f4e; background: rgba(47,143,78,0.15); }
.notice-error { border: 1px solid var(--accent-warm); background: rgba(200,75,26,0.15); }
.notice-warn { border: 1px solid #b08a1a; background: rgba(176,138,26,0.15); }

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
    background: rgba(10,10,26,0.75);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.2rem;
}
:root { --label: #c9b3f0; }
.card h2, .card h3 { color: var(--accent-warm); font-size: 1rem; margin-bottom: 0.7rem; }
.card h3 { font-size: 0.9rem; color: var(--label); }

.card-collapsible summary {
    color: var(--accent-warm); font-size: 1rem; cursor: pointer;
    list-style: revert; font-family: 'Orbitron', sans-serif;
}
.card-collapsible summary::marker { color: var(--muted); }
.card-collapsible[open] summary { margin-bottom: 0.9rem; }
.card-collapsible table { margin-top: 0.2rem; }

.stat-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border-bottom: 1px solid rgba(42,42,74,0.6); font-size: 0.95rem; }
.stat-row span:first-child { color: var(--label); }
.stat-row span:last-child { font-variant-numeric: tabular-nums; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th { text-align: left; color: var(--label); font-weight: 600; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
table.data tr.group td { color: var(--accent-warm); font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.9rem; border-bottom: 1px solid var(--border); }
table.settings td:first-child { width: 16rem; color: var(--label); }
table.settings td:last-child { color: var(--metallic); font-size: 0.85rem; }
table.settings .form-input { width: 9rem; padding: 0.35rem 0.5rem; }
table.data td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(42,42,74,0.6); vertical-align: top; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: rgba(123,47,160,0.08); }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.inline-form .form-input, .inline-form select { width: auto; min-width: 5rem; padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.inline-form label { font-size: 0.85rem; color: var(--label); }
select.form-input { background: #0f0f24; color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.btn-small { padding: 0.35rem 0.8rem; font-size: 0.8rem; width: auto; display: inline-block; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: transparent; border: 1px solid var(--metallic); color: var(--text); border-radius: 4px; padding: 0.35rem 0.8rem; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; cursor: pointer; }
.btn-secondary:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.btn-danger { border-color: var(--accent-warm); }

.tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.75rem; border: 1px solid var(--border); }
.tag-own { border-color: #2f8f4e; color: #6fd08c; }
.tag-enemy { border-color: var(--accent-warm); color: var(--accent-warm); }
.tag-neutral { color: var(--metallic); }
.muted { color: var(--muted); }

.map-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #05050f; }
.map-app canvas { display: block; cursor: crosshair; width: 100%; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } }
.map-side .card { min-height: 8rem; }
.map-toolbar { margin-bottom: .6rem; }

.hero-images { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.hero-images img { max-width: 420px; width: 100%; border-radius: 6px; border: 1px solid var(--border); }
.ship-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); vertical-align: middle; margin-right: .5rem; }
.planet-image { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); margin-bottom: .8rem; }
.map-svg { display: block; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; margin: 0.6rem 0; }
.map-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; border-radius: 50%; vertical-align: middle; }
.lg-star::before { background: #ffe08a; }
.lg-planet::before { background: #4fa3ff; }
.lg-moon::before { background: #b9c4d6; }
.lg-asteroid::before { background: #a07a4a; }
.lg-own::before { background: #6fd08c; }
.lg-enemy::before { background: #ff5a3c; }
.lg-known::before { background: #3a3a5a; }

.event-list { list-style: none; }
.event-list li { padding: 0.35rem 0; border-bottom: 1px solid rgba(42,42,74,0.6); font-size: 0.9rem; }
.event-list .ev-type { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--label); margin-right: 0.6rem; letter-spacing: 0.05em; }

.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.race-card { border: 1px solid var(--border); border-radius: 6px; padding: 1rem; background: rgba(10,10,26,0.75); }
.race-card h3 { color: var(--accent-warm); font-size: 0.95rem; margin-bottom: 0.4rem; }
.race-card.taken { opacity: 0.45; }

.checkbox-list label { display: inline-block; margin: 0.2rem 0.8rem 0.2rem 0; font-size: 0.9rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.form-row .form-group { margin-bottom: 1.4rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.label-with-info { display: flex; align-items: center; gap: 0.4rem; }
.info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 1px solid var(--muted); color: var(--muted);
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    background: transparent; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0;
}
.info-btn:hover, .info-btn:focus { border-color: var(--accent-warm); color: var(--accent-warm); }
.info-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.4rem; }

.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--text); }
.checkbox-row input[type="checkbox"] { margin-top: 0.2rem; width: auto; }
.checkbox-row a { color: var(--accent-warm); }