/* ==========================================================================
   Orbitum – Spieloberfläche
   Enthält NUR Layout und Komponenten. Alle Farben, Schriften und Größen kommen
   aus dem Theme (wwwroot/themes/*.css). Zum Anpassen bitte dort ändern.
   ========================================================================== */

html { font-size: var(--og-font-size); }

body {
    background: radial-gradient(75rem 37rem at 70% -10%, var(--og-glow) 0%, transparent 60%), var(--og-bg);
    color: var(--og-text);
    font-family: var(--og-font);
    line-height: var(--og-line-height);
    min-height: 100vh;
}

h1, h2, h3, .og-h1 { font-family: var(--og-font-heading); }

/* Grundgerüst ------------------------------------------------------------- */

.og-app {
    display: grid;
    grid-template-columns: var(--og-side) minmax(0, 1fr);
    grid-template-rows: var(--og-top) 1fr;
    grid-template-areas: "top top" "side main";
    min-height: 100vh;
}

/* Links in Akzentfarbe – aber nie Buttons, die als Link gebaut sind (sonst Akzent-Schrift auf Akzent-Fläche) */
.og-app a { text-decoration: none; }
.og-app a:not(.btn):not(.og-btn) { color: var(--og-accent); }
.og-app a:not(.btn):not(.og-btn):hover { color: var(--og-accent-hover); }

.og-top {
    grid-area: top;
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--og-space-4);
    padding: 0 var(--og-space-4);
    background: var(--og-topbar-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--og-border);
}

.og-logo {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-heavy); letter-spacing: var(--og-letter-caps); text-transform: uppercase;
    font-size: var(--og-fs-logo);
    background: linear-gradient(90deg, var(--og-accent), var(--og-accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
    white-space: nowrap;
}

.og-user { margin-left: auto; display: flex; align-items: center; gap: var(--og-space-3); font-size: var(--og-fs-sm); color: var(--og-muted); white-space: nowrap; }
.og-user form { margin: 0; }
.og-linkbtn { background: none; border: 0; color: var(--og-muted); padding: 0; cursor: pointer; font: inherit; }
.og-linkbtn:hover { color: var(--og-text); }
.og-lang a { color: var(--og-muted); padding: 2px var(--og-space-2); border-radius: var(--og-radius-sm); }
.og-lang a.active { color: var(--og-text); background: var(--og-panel-2); }

.og-side {
    grid-area: side;
    position: sticky; top: var(--og-top); align-self: start;
    height: calc(100vh - var(--og-top)); overflow-y: auto;
    padding: var(--og-space-4) var(--og-space-3);
    border-right: 1px solid var(--og-border);
    background: var(--og-side-bg);
}

.og-main { grid-area: main; padding: var(--og-space-5) var(--og-space-6) calc(var(--og-bottom-nav) + var(--og-space-6)); min-width: 0; }

.og-section-title { font-size: var(--og-fs-xs); text-transform: uppercase; letter-spacing: var(--og-letter-caps); color: var(--og-muted); margin: var(--og-space-5) var(--og-space-2) var(--og-space-2); }
.og-section-title:first-child { margin-top: 0; }

/* Listen-Knopf (z. B. Chat-Kanäle); in der linken Leiste gilt das Paar-Aussehen weiter unten */
.og-planet {
    display: flex; align-items: center; gap: var(--og-space-3);
    width: 100%; padding: var(--og-space-2) var(--og-space-3); border-radius: var(--og-radius-sm);
    color: var(--og-text); background: none; border: 0; text-align: left; font: inherit; cursor: pointer;
}
.og-planet:hover { background: var(--og-panel); }
.og-planet.active { background: var(--og-panel-2); box-shadow: inset 3px 0 0 var(--og-accent); }
.og-planet small { display: block; color: var(--og-muted); font-size: var(--og-fs-xs); }

.og-count {
    margin-left: auto; min-width: 1.4rem; padding: 0 var(--og-space-1); border-radius: var(--og-radius-pill);
    background: var(--og-accent); color: var(--og-on-accent); font-size: var(--og-fs-xs); text-align: center; font-weight: var(--og-fw-bold);
}
.og-count.danger { background: var(--og-danger); }

/* Galaxie, Flotte, Berichte */
.og-galaxy-nav { display: flex; gap: var(--og-space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--og-space-4); }
.og-galaxy-nav .og-input { width: 5.5rem; text-align: center; }
.og-table tr.mine td { background: var(--og-panel-2); }
.og-table tr.empty td { color: var(--og-muted); }
.og-actions { display: flex; gap: var(--og-space-1); flex-wrap: wrap; justify-content: flex-end; }
.og-shipgrid { display: grid; gap: var(--og-space-2); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.og-shiprow { display: flex; align-items: center; gap: var(--og-space-2); padding: var(--og-space-2); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); background: var(--og-bg-2); }
.og-shiprow .og-flex1 { min-width: 0; }
.og-coords-input { display: flex; gap: var(--og-space-1); align-items: center; }
.og-coords-input .og-input { width: 4.5rem; text-align: center; }
.og-fleet { padding: var(--og-space-3); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); background: var(--og-bg-2); margin-bottom: var(--og-space-2); }
.og-fleet.hostile { border-color: var(--og-danger-line); background: var(--og-danger-bg); }
.og-fleet.returning { opacity: .8; }
.og-report { border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); margin-bottom: var(--og-space-2); background: var(--og-panel); }
.og-report summary { cursor: pointer; padding: var(--og-space-3); display: flex; gap: var(--og-space-3); align-items: baseline; }
.og-report summary::-webkit-details-marker { display: none; }
.og-report.unread summary { font-weight: var(--og-fw-bold); box-shadow: inset 3px 0 0 var(--og-accent); }
.og-report .og-report-body { padding: 0 var(--og-space-4) var(--og-space-4); display: grid; gap: var(--og-space-3); }
.og-chat { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--og-space-4); align-items: start; }
.og-chat-channels .og-planet small { display: inline; margin-left: var(--og-space-1); }
.og-chat-log { display: grid; gap: var(--og-space-2); max-height: 60vh; overflow-y: auto; padding-right: var(--og-space-1); }
.og-chat-msg { padding: var(--og-space-2) var(--og-space-3); border-radius: var(--og-radius-sm); background: var(--og-bg-2); border: 1px solid var(--og-border); max-width: 85%; }
.og-chat-msg.mine { margin-left: auto; background: var(--og-panel-2); }
.og-chat-head { display: flex; gap: var(--og-space-2); align-items: center; font-size: var(--og-fs-sm); }
.og-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--og-space-1); }
.og-chat-attach { margin-top: var(--og-space-1); padding: var(--og-space-2); border-left: 3px solid var(--og-accent); background: var(--og-panel); font-size: var(--og-fs-sm); }
.og-chat-reactions { display: flex; gap: var(--og-space-1); margin-top: var(--og-space-1); }
.og-react { background: none; border: 1px solid transparent; border-radius: var(--og-radius-pill); padding: 0 var(--og-space-2); font-size: var(--og-fs-sm); color: var(--og-muted); cursor: pointer; opacity: .55; }
.og-react:hover, .og-react.on { opacity: 1; border-color: var(--og-border); color: var(--og-text); }
.og-react.on { background: var(--og-panel); }
@media (max-width: 900px) { .og-chat { grid-template-columns: minmax(0, 1fr); } }
.og-bell { font-size: var(--og-fs-md); filter: grayscale(1); opacity: .6; }
.og-bell.on { filter: none; opacity: 1; }
.og-toasts { position: fixed; right: var(--og-space-4); top: calc(var(--og-top) + var(--og-space-3)); z-index: 50; display: grid; gap: var(--og-space-2); max-width: min(24rem, calc(100vw - 2rem)); }
.og-toast {
    padding: var(--og-space-3) var(--og-space-4); border-radius: var(--og-radius-sm); cursor: pointer;
    background: var(--og-panel); border: 1px solid var(--og-border); color: var(--og-text);
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, black 40%, transparent); font-size: var(--og-fs-sm);
    animation: og-toast-in .25s ease-out;
}
.og-toast.ok { border-left: 3px solid var(--og-ok); }
.og-toast.err { border-left: 3px solid var(--og-danger); }
@keyframes og-toast-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
.og-map { padding: var(--og-space-2); }
.og-map svg { display: block; width: 100%; max-height: 75vh; aspect-ratio: 1; background: radial-gradient(circle, var(--og-glow), transparent 70%); border-radius: var(--og-radius-sm); }
.og-map-void { fill: color-mix(in srgb, var(--og-muted) 45%, transparent); }
.og-map-sys { cursor: pointer; }
.og-map-sys circle { fill: var(--og-muted); transition: r .2s; }
.og-map-sys.own circle { fill: var(--og-ok); }
.og-map-sys.ally circle { fill: var(--og-accent); }
.og-map-sys.debris circle { fill: var(--og-warn); }
.og-map-sys:hover circle { stroke: var(--og-text); stroke-width: 1.5; }
.og-map-ring { fill: none !important; stroke: var(--og-warn); stroke-dasharray: 3 3; }
.og-map-fleet line { stroke: var(--og-accent); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .6; }
.og-map-fleet circle { fill: var(--og-accent); transition: cx 1s linear, cy 1s linear; }
.og-map-fleet.hostile line { stroke: var(--og-danger); }
.og-map-fleet.hostile circle { fill: var(--og-danger); }
.og-map-legend { display: flex; flex-wrap: wrap; gap: var(--og-space-4); margin-top: var(--og-space-2); font-size: var(--og-fs-sm); color: var(--og-muted); }
.og-map-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: var(--og-space-1); vertical-align: middle; background: var(--og-muted); }
.og-map-legend i.own { background: var(--og-ok); }
.og-map-legend i.ally { background: var(--og-accent); }
.og-map-legend i.debris { background: var(--og-warn); }
.og-map-legend i.fleet { background: var(--og-accent); border-radius: 2px; }
.og-replay { padding: var(--og-space-3); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); background: var(--og-bg-2); }
.og-replay-row { display: flex; gap: var(--og-space-2); font-size: var(--og-fs-sm); margin-top: var(--og-space-2); }
.og-replay-bar { height: 6px; }
.og-replay-bar > i { background: linear-gradient(90deg, var(--og-danger), var(--og-warn), var(--og-ok)); transition: width .9s ease; }
.og-units { display: flex; flex-wrap: wrap; gap: var(--og-space-1) var(--og-space-3); font-size: var(--og-fs-sm); }
.og-units span b { font-family: var(--og-mono); font-weight: var(--og-fw-normal); }
.og-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--og-muted); flex: none; }
.og-dot.busy { background: var(--og-ok); box-shadow: 0 0 .5rem var(--og-ok); }

/* Ressourcenleiste ---------------------------------------------------------- */

.og-resbar { display: flex; gap: var(--og-space-3); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.og-res {
    flex: 1 1 0; min-width: 8.5rem; max-width: 15rem;
    padding: var(--og-space-1) var(--og-space-3); border-radius: var(--og-radius-sm);
    background: var(--og-panel); border: 1px solid var(--og-border);
    font-size: var(--og-fs-sm); line-height: 1.25;
}
.og-res .og-res-head { display: flex; justify-content: space-between; color: var(--og-muted); }
.og-res .og-res-val { font-family: var(--og-mono); font-size: var(--og-fs-md); color: var(--og-text); }
.og-res .og-res-rate { color: var(--og-muted); }
.og-res.full .og-res-val { color: var(--og-danger); }
.og-meter { height: 3px; border-radius: 2px; background: var(--og-bg-2); margin-top: var(--og-space-1); overflow: hidden; }
.og-meter > i { display: block; height: 100%; background: var(--res-color, var(--og-accent)); transition: width .8s linear; }
.og-res.metal { --res-color: var(--og-metal); }
.og-res.crystal { --res-color: var(--og-crystal); }
.og-res.deut { --res-color: var(--og-deut); }
.og-res.energy { --res-color: var(--og-energy); }
.og-res.energy.neg .og-res-val { color: var(--og-danger); }

/* Karten, Panels, Knöpfe ----------------------------------------------------- */

.og-h1 { font-size: var(--og-fs-xl); font-weight: var(--og-fw-bold); margin: 0 0 var(--og-space-1); }
.og-sub { color: var(--og-muted); margin: 0 0 var(--og-space-5); }

.og-card {
    background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius);
    padding: var(--og-space-4);
}
.og-card h2 { font-size: var(--og-fs-xs); text-transform: uppercase; letter-spacing: var(--og-letter-caps); color: var(--og-muted); margin: 0 0 var(--og-space-3); }

.og-grid2 { display: grid; gap: var(--og-space-4); grid-template-columns: repeat(auto-fit, minmax(min(var(--og-grid-min), 100%), 1fr)); }

.og-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--og-space-1);
    padding: var(--og-space-2) var(--og-space-4); border-radius: var(--og-radius-sm); border: 1px solid transparent;
    background: linear-gradient(135deg, var(--og-accent), var(--og-accent-2)); color: var(--og-on-accent);
    cursor: pointer; font: inherit; font-weight: var(--og-fw-bold);
}
.og-btn:hover { filter: brightness(1.1); }
.og-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.og-btn.ghost { background: transparent; border-color: var(--og-border); color: var(--og-text); }
.og-btn.danger { background: transparent; border-color: var(--og-danger-line); color: var(--og-danger); }
.og-btn.sm { padding: var(--og-space-1) var(--og-space-3); font-size: var(--og-fs-sm); }

.og-input {
    background: var(--og-bg-2); border: 1px solid var(--og-border); color: var(--og-text);
    border-radius: var(--og-radius-sm); padding: var(--og-space-2) var(--og-space-3); font: inherit; min-width: 0;
}
.og-input:focus { outline: 2px solid var(--og-accent); outline-offset: 1px; }

.og-alert { padding: var(--og-space-3) var(--og-space-4); border-radius: var(--og-radius-sm); margin-bottom: var(--og-space-3); border: 1px solid; }
.og-alert.err { border-color: var(--og-danger-line); background: var(--og-danger-bg); color: var(--og-danger-text); }
.og-alert.warn { border-color: var(--og-warn-line); background: var(--og-warn-bg); color: var(--og-warn-text); }
.og-alert.ok { border-color: var(--og-ok-line); background: var(--og-ok-bg); color: var(--og-ok-text); }

.og-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--og-space-1) var(--og-space-4); font-size: var(--og-fs-md); }
.og-kv dt { color: var(--og-muted); font-weight: var(--og-fw-normal); }
.og-kv dd { margin: 0; text-align: right; font-family: var(--og-mono); }

/* Hilfsklassen (statt fester Inline-Werte) */
.og-row { display: flex; gap: var(--og-space-2); align-items: center; flex-wrap: wrap; }
.og-form { display: grid; gap: var(--og-space-2); grid-template-columns: auto 1fr; align-items: center; }
.og-narrow { max-width: var(--og-narrow-width); }
.og-flex1 { flex: 1; }
.og-mb { margin-bottom: var(--og-space-4); }
.og-mt { margin-top: var(--og-space-2); }
.og-hint { color: var(--og-muted); font-size: var(--og-fs-sm); margin: var(--og-space-2) 0; }
.og-label { color: var(--og-muted); font-size: var(--og-fs-xs); margin-bottom: var(--og-space-1); }
.og-sub.tight { margin-bottom: var(--og-space-1); }
.og-coords { font-size: var(--og-fs-base); }
.og-input.num { width: 7rem; }
.og-input.compact { width: 5.5rem; padding: 2px var(--og-space-2); }
.og-table td.fit { width: 1%; white-space: nowrap; }
.og-hero { padding: var(--og-space-6) 0; max-width: var(--og-hero-width); }
.og-hero .og-logo { font-size: var(--og-fs-hero); }
.og-hero p { font-size: var(--og-fs-lg); }

.og-mono { font-family: var(--og-mono); }
.og-muted { color: var(--og-muted); }
.og-pos { color: var(--og-ok); }
.og-neg { color: var(--og-danger); }

/* Warteschlangen --------------------------------------------------------------- */

.og-queue { display: grid; gap: var(--og-space-3); }
.og-qslot { padding: var(--og-space-3); border-radius: var(--og-radius-sm); background: var(--og-bg-2); border: 1px solid var(--og-border); }
.og-qslot .og-qhead { display: flex; justify-content: space-between; gap: var(--og-space-2); font-size: var(--og-fs-sm); }
.og-qslot .og-qlabel { color: var(--og-muted); text-transform: uppercase; letter-spacing: var(--og-letter-caps); font-size: var(--og-fs-xs); }
.og-qslot.idle { opacity: .6; }
.og-waitlist { list-style: none; margin: var(--og-space-2) 0 0; padding: 0; display: grid; gap: var(--og-space-1); }
.og-waitlist li {
    display: flex; align-items: center; gap: var(--og-space-2);
    padding: var(--og-space-1) var(--og-space-2); border-radius: var(--og-radius-sm);
    border: 1px dashed var(--og-border); background: var(--og-panel); font-size: var(--og-fs-sm); cursor: grab;
}
.og-waitlist li.over { border-color: var(--og-accent); background: var(--og-panel-2); }
.og-grip { color: var(--og-muted); letter-spacing: -.2em; }
.og-progress { height: 6px; border-radius: 3px; background: var(--og-panel-2); overflow: hidden; margin-top: var(--og-space-2); }
.og-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--og-accent), var(--og-ok)); transition: width 1s linear; }

/* Technik-Karten ------------------------------------------------------------- */

.og-techgrid { display: grid; gap: var(--og-space-3); grid-template-columns: repeat(auto-fill, minmax(var(--og-card-min), 1fr)); }
.og-tech {
    position: relative; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
    background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius);
    color: var(--og-text); font: inherit; transition: transform .12s, border-color .12s;
}
.og-tech:hover { transform: translateY(-2px); border-color: var(--og-accent); }
.og-tech.selected { border-color: var(--og-accent); box-shadow: 0 0 0 1px var(--og-accent); }
.og-tech.locked { opacity: .5; }
.og-tech .og-tech-body { padding: var(--og-space-3); }
.og-tech .og-tech-name { font-weight: var(--og-fw-bold); font-size: var(--og-fs-md); }
.og-tech .og-badge {
    position: absolute; top: var(--og-space-2); right: var(--og-space-2); padding: 2px var(--og-space-2); border-radius: var(--og-radius-pill);
    background: var(--og-overlay); font-family: var(--og-mono); font-size: var(--og-fs-sm);
}
.og-tech .og-busy {
    position: absolute; top: var(--og-space-2); left: var(--og-space-2); padding: 2px var(--og-space-2); border-radius: var(--og-radius-pill);
    background: var(--og-ok-bg); border: 1px solid var(--og-ok-line); color: var(--og-ok); font-size: var(--og-fs-xs);
}

/* Bildplatz: eigene Grafik unter wwwroot/img/tech/{Tech}.webp; ohne Grafik zeigt der Verlauf + Kürzel */
.og-art {
    --art-colors: var(--og-art-building);
    aspect-ratio: var(--og-art-ratio); display: grid; place-items: center;
    background-image: var(--art, none), linear-gradient(135deg, var(--art-colors));
    background-size: cover; background-position: center;
    font-weight: var(--og-fw-heavy); font-size: var(--og-fs-art); letter-spacing: .08em; color: var(--og-art-text);
}
.og-art.k-Research { --art-colors: var(--og-art-research); }
.og-art.k-Ship { --art-colors: var(--og-art-ship); }
.og-art.k-Defense { --art-colors: var(--og-art-defense); }

.og-cost { display: flex; gap: var(--og-space-3); flex-wrap: wrap; font-family: var(--og-mono); font-size: var(--og-fs-sm); }
.og-cost .m { color: var(--og-metal); }
.og-cost .c { color: var(--og-crystal); }
.og-cost .d { color: var(--og-deut); }
.og-cost .e { color: var(--og-energy); }
.og-cost .short { color: var(--og-danger); }

/* Seitenpanel ------------------------------------------------------------------ */

.og-layout-panel { display: grid; grid-template-columns: minmax(0, 1fr) var(--og-panel-width); gap: var(--og-space-5); align-items: start; }
.og-panel {
    position: sticky; top: calc(var(--og-top) + var(--og-space-5));
    background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius);
    overflow: hidden;
}
.og-panel .og-art { aspect-ratio: 16 / 7; font-size: calc(var(--og-fs-art) * 1.4); }
.og-panel-body { padding: var(--og-space-4); display: grid; gap: var(--og-space-3); }
.og-panel-head { display: flex; justify-content: space-between; align-items: start; gap: var(--og-space-3); }
.og-panel-head h3 { margin: 0; font-size: var(--og-fs-lg); }
.og-req { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--og-space-1); font-size: var(--og-fs-md); }
.og-req li::before { content: "✕ "; color: var(--og-danger); }
.og-req li.met::before { content: "✓ "; color: var(--og-ok); }
.og-close { background: none; border: 0; color: var(--og-muted); font-size: var(--og-fs-lg); line-height: 1; cursor: pointer; }

/* Tabellen (Admin) -------------------------------------------------------------- */

.og-table { width: 100%; border-collapse: collapse; font-size: var(--og-fs-md); }
.og-table th, .og-table td { padding: var(--og-space-2) var(--og-space-3); border-bottom: 1px solid var(--og-border); text-align: left; }
.og-table th { color: var(--og-muted); font-weight: var(--og-fw-normal); font-size: var(--og-fs-xs); text-transform: uppercase; letter-spacing: var(--og-letter-caps); }
.og-table td.num, .og-table th.num { text-align: right; font-family: var(--og-mono); }

/* Seiten außerhalb des Spiels (Start, Login, Konto) ------------------------------ */

.og-shell { min-height: 100vh; display: flex; flex-direction: column; }
.og-shell .og-top { height: var(--og-top); }
.og-shell a.og-logo, .og-shell .og-user a { text-decoration: none; }
.og-shell .og-user a { color: var(--og-muted); }
.og-shell .og-user a:hover { color: var(--og-text); }
.og-page { width: 100%; max-width: var(--og-page-width); margin: 0 auto; padding: var(--og-space-6) var(--og-space-4); }
.og-page a:not(.btn):not(.og-btn) { color: var(--og-accent); }

/* Bootstrap-Elemente der Konto-Seiten an das Theme anbinden
   (überschreibt auch die Vorlagen-Farben aus app.css) */
.og-page h1, .og-page h2, .og-page h3 { font-family: var(--og-font-heading); font-weight: var(--og-fw-bold); }
.og-page h1 { font-size: var(--og-fs-xl); }
.og-page h2 { font-size: var(--og-fs-lg); color: var(--og-muted); }
.og-page hr { border-color: var(--og-border); opacity: 1; }
h1:focus, h1:focus-visible { outline: none; }

.btn { border-radius: var(--og-radius-sm); font-weight: var(--og-fw-bold); }
.btn-primary {
    --bs-btn-color: var(--og-on-accent); --bs-btn-bg: var(--og-accent); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--og-on-accent); --bs-btn-hover-bg: var(--og-accent-hover); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--og-on-accent); --bs-btn-active-bg: var(--og-accent); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--og-accent); --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(135deg, var(--og-accent), var(--og-accent-2));
}
.btn-outline-secondary, .btn-secondary {
    --bs-btn-color: var(--og-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--og-border);
    --bs-btn-hover-color: var(--og-text); --bs-btn-hover-bg: var(--og-panel-2); --bs-btn-hover-border-color: var(--og-border);
    --bs-btn-active-bg: var(--og-panel-2);
}
.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--og-danger); --bs-btn-bg: transparent; --bs-btn-border-color: var(--og-danger-line);
    --bs-btn-hover-color: var(--og-text); --bs-btn-hover-bg: var(--og-danger-bg); --bs-btn-hover-border-color: var(--og-danger);
}
.btn-link { color: var(--og-accent); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--og-bg), 0 0 0 4px var(--og-accent);
}

.form-control, .form-select {
    background-color: var(--og-bg-2); border-color: var(--og-border); color: var(--og-text);
    border-radius: var(--og-radius-sm);
}
.form-control:focus, .form-select:focus { background-color: var(--og-bg-2); border-color: var(--og-accent); color: var(--og-text); }
.form-control::placeholder { color: var(--og-muted); }
.form-control:disabled, .form-control[readonly] { background-color: var(--og-panel); color: var(--og-muted); }
.form-floating > label { color: var(--og-muted); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--og-muted); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; }
.form-check-input { background-color: var(--og-bg-2); border-color: var(--og-border); }
.form-check-input:checked { background-color: var(--og-accent); border-color: var(--og-accent); }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--og-ok); }
.invalid { outline: 1px solid var(--og-danger); }
.validation-message, .text-danger { color: var(--og-danger) !important; }
.text-muted, .text-body-secondary { color: var(--og-muted) !important; }

.nav-pills .nav-link { color: var(--og-muted); border-radius: var(--og-radius-sm); }
.nav-pills .nav-link:hover { color: var(--og-text); background: var(--og-panel); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--og-text); background: var(--og-panel-2); box-shadow: inset 3px 0 0 var(--og-accent);
}

.alert { border-radius: var(--og-radius-sm); }
.alert-success { background: var(--og-ok-bg); border-color: var(--og-ok-line); color: var(--og-ok-text); }
.alert-danger { background: var(--og-danger-bg); border-color: var(--og-danger-line); color: var(--og-danger-text); }
.alert-warning, .alert-info { background: var(--og-warn-bg); border-color: var(--og-warn-line); color: var(--og-warn-text); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--og-text); --bs-table-border-color: var(--og-border); }

.blazor-error-boundary { background: var(--og-danger-bg); color: var(--og-danger-text); border: 1px solid var(--og-danger-line); padding: var(--og-space-4); border-radius: var(--og-radius-sm); }
.blazor-error-boundary::after { content: ""; }

/* Mobil --------------------------------------------------------------------------- */

.og-bottom { display: none; }

@media (max-width: 900px) {
    .og-app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "top" "main";
        overflow-x: hidden;
    }
    .og-side { display: none; }
    .og-top { flex-wrap: wrap; height: auto; padding: var(--og-space-2) var(--og-space-3); gap: var(--og-space-2); }
    .og-resbar { order: 3; flex-basis: 100%; }
    .og-res { min-width: 7rem; }
    .og-main { padding: var(--og-space-4) var(--og-space-4) calc(var(--og-bottom-nav) + var(--og-space-6)); }
    .og-techgrid { grid-template-columns: repeat(auto-fill, minmax(var(--og-card-min-mobile), 1fr)); }
    .og-layout-panel { grid-template-columns: minmax(0, 1fr); }
    .og-panel {
        position: fixed; left: 0; right: 0; bottom: var(--og-bottom-nav); top: auto; z-index: 30;
        max-height: 70vh; overflow-y: auto; border-radius: var(--og-radius) var(--og-radius) 0 0;
    }
    .og-bottom {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--og-bottom-nav);
        background: var(--og-topbar-bg); border-top: 1px solid var(--og-border);
    }
    .og-bottom { overflow-x: auto; scrollbar-width: none; }
    .og-bottom a { flex: 1 0 auto; min-width: 5.5rem; display: grid; place-items: center; font-size: var(--og-fs-xs); color: var(--og-muted); padding: 0 var(--og-space-2); }
    .og-bottom a.active { color: var(--og-text); box-shadow: inset 0 2px 0 var(--og-accent); }
}

/* ---------- Handelsbörse ---------- */
.og-tabs { display: flex; gap: var(--og-space-1); flex-wrap: wrap; margin-bottom: var(--og-space-2); }
.og-tabs .active { border-color: var(--og-accent); color: var(--og-text); background: color-mix(in srgb, var(--og-accent) 18%, transparent); }
.og-between { justify-content: space-between; align-items: center; }
.og-amt { font-family: var(--og-mono); }
.og-amt.m { color: var(--og-metal); }
.og-amt.c { color: var(--og-crystal); }
.og-amt.d { color: var(--og-deut); }
.og-good { color: var(--og-ok); }
.og-bad { color: var(--og-warn); }
.og-tag { display: inline-block; margin-left: var(--og-space-1); padding: 0 var(--og-space-1); border-radius: var(--og-radius); font-size: var(--og-fs-sm); }
.og-tag.ok { background: color-mix(in srgb, var(--og-ok) 20%, transparent); color: var(--og-ok); }
.og-tag.err { background: color-mix(in srgb, var(--og-danger) 20%, transparent); color: var(--og-danger); }
tr.og-mine td { background: color-mix(in srgb, var(--og-accent) 8%, transparent); }
.og-chart { width: 100%; height: 180px; display: block; }
.og-chart polyline { fill: none; stroke: var(--og-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.og-chart circle { fill: var(--og-accent); }
.og-chart line.ref { stroke: var(--og-muted); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.og-chart text { fill: var(--og-muted); font-size: 11px; font-family: var(--og-mono); }

/* ---------- Kommandoraum ---------- */
.og-room { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--og-space-3); }
.og-room-side { display: flex; flex-direction: column; gap: var(--og-space-3); }
@media (max-width: 900px) { .og-room { grid-template-columns: 1fr; } }
.og-room-plan circle { fill: none; stroke: var(--og-danger); stroke-width: 2.5; }
.og-room-plan line { stroke: var(--og-danger); stroke-width: 2; }
.og-room-marker path { stroke: var(--og-bg); stroke-width: 1.5; cursor: pointer; }
.og-room-marker.target path, .og-room-dot.target, .og-map-legend i.mk.target { fill: var(--og-danger); background: var(--og-danger); }
.og-room-marker.danger path, .og-room-dot.danger, .og-map-legend i.mk.danger { fill: var(--og-warn); background: var(--og-warn); }
.og-room-marker.info path, .og-room-dot.info, .og-map-legend i.mk.info { fill: var(--og-crystal); background: var(--og-crystal); }
.og-room-marker.rally path, .og-room-dot.rally, .og-map-legend i.mk.rally { fill: color-mix(in srgb, var(--og-accent) 55%, var(--og-danger)); background: color-mix(in srgb, var(--og-accent) 55%, var(--og-danger)); }
.og-map-legend i.plan { background: transparent; border: 2px solid var(--og-danger); }
.og-room-row { display: flex; align-items: center; gap: var(--og-space-2); padding: var(--og-space-1) 0; border-bottom: 1px solid var(--og-border); }
.og-room-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.og-room-plancard { margin-bottom: var(--og-space-3); }
.og-timeline { width: 100%; height: 70px; display: block; margin-top: var(--og-space-2); }
.og-timeline .axis { stroke: var(--og-border); stroke-width: 2; vector-effect: non-scaling-stroke; }
.og-timeline .impact { stroke: var(--og-danger); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.og-timeline text { fill: var(--og-muted); font-size: 11px; font-family: var(--og-mono); }
.og-timeline .fleet circle { fill: var(--og-warn); }
.og-timeline .fleet.sync circle { fill: var(--og-ok); }
.og-room-fleets { display: flex; flex-wrap: wrap; gap: var(--og-space-1) var(--og-space-3); font-size: var(--og-fs-sm); }
.og-warn-text { color: var(--og-warn); }

/* ---------- Verband, Halten, Kennzeichnungen ---------- */
.og-fleet.friendly { border-color: color-mix(in srgb, var(--og-ok) 40%, var(--og-border)); }
.og-mark { margin-left: 2px; font-size: var(--og-fs-xs); font-family: var(--og-mono); cursor: help; }
.og-mark.inactive { color: var(--og-muted); }
.og-mark.longinactive { color: color-mix(in srgb, var(--og-muted) 60%, transparent); }
.og-mark.vacation { color: var(--og-crystal); }
.og-mark.newbie { color: var(--og-ok); }
.og-mark.strong { color: var(--og-danger); }
.og-mark.outlaw { color: color-mix(in srgb, var(--og-accent) 55%, var(--og-danger)); }

/* ---------- Simulator ---------- */
.og-plan-chart polyline { stroke-width: 2.5; }
.og-plan-chart polyline.prod { stroke: var(--og-ok); stroke-dasharray: 5 4; }
.og-plan-chart line.grid { stroke: var(--og-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.og-plan-chart .prodlabel { fill: var(--og-ok); }
.og-map-legend i.pts { background: var(--og-accent); }
.og-map-legend i.prod { background: var(--og-ok); }
.og-simbar { display: flex; height: 14px; border-radius: var(--og-radius); overflow: hidden; background: var(--og-panel); margin: var(--og-space-2) 0; }
.og-simbar i { display: block; height: 100%; transition: width .4s ease; }
.og-simbar .win { background: var(--og-ok); }
.og-simbar .draw { background: var(--og-warn); }
.og-simbar .loss { background: var(--og-danger); }

/* Simulator: Häkchen neben dem Text, kompakte Gewichtung, großes Diagramm */
.og-check { display: flex; gap: var(--og-space-2); align-items: flex-start; margin-top: var(--og-space-1); cursor: pointer; }
.og-check input { margin-top: .25em; flex: none; }
.og-weights { display: grid; grid-template-columns: repeat(3, minmax(5rem, 6.2rem)); gap: var(--og-space-1); }
.og-weights .og-input.compact { width: 100%; }
.og-presets .og-btn { padding-inline: var(--og-space-2); }
.og-chart.og-plan-chart { height: auto; aspect-ratio: 640 / 200; max-height: 320px; }
.og-weights input::-webkit-inner-spin-button { display: none; } .og-weights input { -moz-appearance: textfield; }

/* Ressourcen-Symbole: überall, wo Metall, Kristall, Deuterium oder Energie mit Wert steht.
   .og-cost .m/.c/.d/.e bekommen das Symbol automatisch; sonst <i class="og-ri m"></i> vor den Text setzen. */
.og-ri.m, .og-cost .m, .og-amt.m { --ri: url(img/res/metal.svg); }
.og-ri.c, .og-cost .c, .og-amt.c { --ri: url(img/res/crystal.svg); }
.og-ri.d, .og-cost .d, .og-amt.d { --ri: url(img/res/deuterium.svg); }
.og-ri.e, .og-cost .e { --ri: url(img/res/energy.svg); }
.og-ri, .og-cost :is(.m, .c, .d, .e)::before, .og-amt:is(.m, .c, .d)::before {
    content: ""; display: inline-block; flex: none; width: 1.1em; height: 1.1em;
    background: var(--ri) center / contain no-repeat; vertical-align: -.2em; margin-right: .3em;
}
.og-cost :is(.m, .c, .d, .e) { white-space: nowrap; }
.og-cost.inline { display: inline-flex; vertical-align: baseline; gap: var(--og-space-2); }
.og-wcell { display: flex; align-items: center; }
.og-wcell .og-ri { margin-right: .2em; }

/* Rohstoffe-Seite und Planet verwalten */
.og-table-wrap { overflow-x: auto; }
.og-restable tfoot th, .og-restable tfoot td { border-top: 1px solid var(--og-border); }
.og-restable .og-input.compact { width: 5.5rem; }
.og-manage > summary { cursor: pointer; color: var(--og-muted); }
.og-manage[open] > summary { color: var(--og-text); }

/* Imperium: Planeten als Spalten, erste Spalte bleibt beim Scrollen stehen */
.og-empire th, .og-empire td { white-space: nowrap; }
.og-empire tbody td:first-child, .og-empire thead th:first-child { position: sticky; left: 0; background: var(--og-panel); z-index: 1; }
.og-empire tr.og-group th { text-align: left; color: var(--og-muted); font-size: var(--og-fs-sm); text-transform: uppercase; letter-spacing: .06em; padding-top: var(--og-space-3); }
.og-empire .og-linkbtn { color: var(--og-text); font-weight: var(--og-fw-bold); }
.og-empire .og-linkbtn.active { color: var(--og-accent); }

/* Sperrbildschirm */
.og-banned { max-width: 40rem; margin: var(--og-space-6) auto; border-color: var(--og-danger-line); }
.og-tag.warn { background: color-mix(in srgb, var(--og-warn) 20%, transparent); color: var(--og-warn); }
.og-list { margin: var(--og-space-1) 0 0; padding-left: 1.1rem; }

/* Admin: Expeditions-Häufigkeiten */
.og-weights8 { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--og-space-2); }
.og-weights8 label { display: flex; flex-direction: column; gap: 2px; font-size: var(--og-fs-sm); color: var(--og-muted); }
.og-weights8 .og-input.compact { width: 100%; }

/* Rohstoffleiste: Kapazität klein hinter dem aktuellen Wert */
.og-res .og-res-val { white-space: nowrap; }
.og-res .og-res-cap { font-size: .72em; color: var(--og-muted); font-weight: var(--og-fw-normal); }
.og-res.full .og-res-cap { color: var(--og-danger); opacity: .8; }

/* Freunde: Online-Punkt; Notizen */
.og-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--og-border); }
.og-dot.on { background: var(--og-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-ok) 25%, transparent); }
.og-note-text { width: 100%; resize: vertical; font: inherit; }
.og-note { border-left: 3px solid var(--og-border); padding: var(--og-space-2) var(--og-space-3); margin-bottom: var(--og-space-2); background: var(--og-panel-2); border-radius: var(--og-radius); }
.og-note.prio2 { border-left-color: var(--og-danger); }
.og-note.prio1 { border-left-color: var(--og-accent); }
.og-note-body { white-space: pre-wrap; margin: var(--og-space-1) 0; }

/* Simulator: Aufträge, die beim Start schon liefen */
.og-table tr.og-running td { background: color-mix(in srgb, var(--og-warn) 8%, transparent); }

/* Punkteverlauf (Rangliste) */
.og-chart.og-history-chart { height: auto; aspect-ratio: 640 / 220; max-height: 320px; }
.og-history-chart line.grid { stroke: var(--og-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.og-history-chart polyline { stroke-width: 1.5; }
.og-history-chart polyline.total { stroke: var(--og-accent); stroke-width: 3; }
.og-history-chart polyline.b, .og-map-legend i.hist-b { stroke: var(--og-metal); background: var(--og-metal); }
.og-history-chart polyline.r, .og-map-legend i.hist-r { stroke: var(--og-crystal); background: var(--og-crystal); }
.og-history-chart polyline.f, .og-map-legend i.hist-f { stroke: var(--og-ok); background: var(--og-ok); }
.og-history-chart polyline.d, .og-map-legend i.hist-d { stroke: var(--og-warn); background: var(--og-warn); }
.og-map-legend i.hist-total { background: var(--og-accent); }

/* App-Modus (PWA) und Handys mit Aussparung: sichere Ränder beachten */
@media (max-width: 900px) {
    .og-top { padding-top: max(var(--og-space-2), env(safe-area-inset-top)); }
    .og-bottom { height: calc(var(--og-bottom-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
    .og-panel { bottom: calc(var(--og-bottom-nav) + env(safe-area-inset-bottom)); }
    .og-main { padding-bottom: calc(var(--og-bottom-nav) + env(safe-area-inset-bottom) + var(--og-space-6)); }
    /* breite Tabellen scrollen in sich statt die Seite zu verbreitern */
    .og-card > .og-table { display: block; overflow-x: auto; }
}

/* Schmale Handys: Formulare einspaltig (Beschriftung über dem Feld), Felder dürfen schrumpfen */
@media (max-width: 520px) {
    .og-form { grid-template-columns: minmax(0, 1fr); gap: var(--og-space-1); }
    .og-form > label:not(.og-row):not(.og-check):not(.og-wcell) { margin-top: var(--og-space-2); color: var(--og-muted); font-size: var(--og-fs-sm); }
    .og-form > label:empty { display: none; }
    .og-coords-input { display: flex; align-items: center; gap: var(--og-space-1); }
    .og-coords-input .og-input { min-width: 0; flex: 1 1 0; width: auto; }
    .og-weights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .og-form select.og-input, .og-form .og-input { max-width: 100%; }
}

/* Linke Leiste: Menü als Paare (breiter Knopf + kleines Partner-Symbol), Planeten als Planet-Mond-Paare ---------- */
.og-side-in { min-height: 100%; }
.og-nav, .og-planets { display: grid; gap: 3px; }
.og-mrow { display: flex; gap: 3px; min-width: 0; }
.og-mrow.sep { margin-top: var(--og-space-2); }
.og-app .og-side .og-mbtn, .og-app .og-side .og-mside, .og-app .og-side .og-planet, .og-side-toggle {
    display: flex; align-items: center; gap: var(--og-space-2); min-width: 0; position: relative;
    padding: .4rem .6rem; border-radius: var(--og-radius-sm); font: inherit; font-size: var(--og-fs-md); text-align: left;
    color: var(--og-text); cursor: pointer;
    background: linear-gradient(180deg, color-mix(in srgb, var(--og-panel-2) 70%, var(--og-panel)), var(--og-panel));
    border: 1px solid var(--og-border);
    transition: border-color .12s, background-color .12s;
}
.og-app .og-side .og-mbtn, .og-app .og-side .og-planet { flex: 1 1 auto; }
.og-app .og-side .og-mside { flex: none; width: 2.4rem; justify-content: center; padding: .4rem 0; color: var(--og-muted); }
.og-app .og-side .og-mside.empty { visibility: hidden; }
.og-app .og-side .og-mbtn:hover, .og-app .og-side .og-mside:hover, .og-app .og-side .og-planet:hover, .og-side-toggle:hover { border-color: var(--og-accent); color: var(--og-text); }
.og-app .og-side .og-mbtn.active, .og-app .og-side .og-mside.active, .og-app .og-side .og-planet.active {
    border-color: var(--og-accent); color: var(--og-text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--og-accent) 22%, var(--og-panel)), color-mix(in srgb, var(--og-accent) 8%, var(--og-panel)));
}
.og-app .og-side .og-mbtn.active, .og-app .og-side .og-planet.active { box-shadow: inset 3px 0 0 var(--og-accent); }
.og-mlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.og-mbtn .og-count { margin-left: auto; }
.og-mside .og-count { position: absolute; top: -6px; right: -6px; min-width: 1.05rem; line-height: 1.05rem; padding: 0 3px; font-size: .62rem; }
.og-planet img, .og-moon img { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; }
.og-moon img { width: 20px; height: 20px; }
.og-planet .og-mlabel { display: grid; line-height: 1.15; }
.og-planet small { color: var(--og-muted); font-size: var(--og-fs-xs); font-family: var(--og-mono); }
.og-planet .og-dot { margin-left: auto; }
.og-side-toggle { width: 100%; margin-bottom: var(--og-space-3); color: var(--og-muted); font-size: var(--og-fs-sm); background: none; }

/* Eingeklappt: nur Symbole; beim Überfahren klappt die Leiste ÜBER den Inhalt auf (nichts verschiebt sich) */
.og-app.menu-collapsed { grid-template-columns: var(--og-side-rail) minmax(0, 1fr); }
.og-side.collapsed { overflow: visible; padding: 0; z-index: 25; }
.og-side.collapsed .og-side-in {
    position: absolute; inset: 0 auto 0 0; width: var(--og-side-rail);
    overflow: hidden auto; scrollbar-width: none;
    padding: var(--og-space-3) var(--og-space-2);
    background: var(--og-bg-2); border-right: 1px solid var(--og-border);
    transition: width .18s ease, box-shadow .18s ease;
}
.og-side.collapsed:hover .og-side-in, .og-side.collapsed:has(:focus-visible) .og-side-in { width: var(--og-side); box-shadow: 12px 0 28px rgb(0 0 0 / .5); }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) :is(.og-mlabel, .og-section-title, .og-mside.empty, .og-planet .og-dot) { display: none; }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) .og-mrow { flex-direction: column; }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) :is(.og-mbtn, .og-mside, .og-planet, .og-side-toggle) { justify-content: center; width: 100%; padding-left: 0; padding-right: 0; }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) .og-mrow.sep { margin-top: var(--og-space-3); }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) .og-mbtn .og-count { position: absolute; top: -6px; right: -4px; min-width: 1.05rem; line-height: 1.05rem; padding: 0 3px; font-size: .62rem; }
.og-side.collapsed:not(:hover):not(:has(:focus-visible)) .og-planets { margin-top: var(--og-space-3); }

/* Kopfleiste: Rohstoffe als Ringe, Aufträge als Ringe, Einzelheiten als Popover ---------------------------------- */
.og-resbar { justify-content: center; gap: var(--og-space-4); overflow: visible; }
.og-rring, .og-qring-wrap { position: relative; flex: none; }
.og-rring-btn { display: flex; align-items: center; gap: var(--og-space-2); background: none; border: 0; padding: 2px; color: var(--og-text); font: inherit; cursor: pointer; border-radius: var(--og-radius-sm); }
.og-rring-btn:hover { background: var(--og-panel); }
.og-rring-ic { position: relative; width: 40px; height: 40px; flex: none; }
.og-rring-ic svg { width: 40px; height: 40px; transform: rotate(-90deg); display: block; }
.og-rring-ic circle { fill: none; stroke-width: 3.5; }
.og-rring-ic .track { stroke: var(--og-panel-2); }
.og-rring-ic .fill { stroke: var(--res-color, var(--og-accent)); stroke-linecap: round; transition: stroke-dasharray .8s linear; }
.og-rring-ic img { position: absolute; inset: 11px; width: 18px; height: 18px; }
.og-rring-txt { display: grid; text-align: left; line-height: 1.15; white-space: nowrap; }
.og-rring-txt b { font-family: var(--og-mono); font-weight: var(--og-fw-normal); font-size: var(--og-fs-md); }
.og-rring-txt > small { font-size: var(--og-fs-xs); color: var(--og-muted); }
.og-rring.metal { --res-color: var(--og-metal); }
.og-rring.crystal { --res-color: var(--og-crystal); }
.og-rring.deut { --res-color: var(--og-deut); }
.og-rring.energy { --res-color: var(--og-energy); }
.og-rring.full .og-rring-txt b, .og-rring.energy.neg .og-rring-txt b { color: var(--og-danger); }
.og-rring.full .fill { stroke: var(--og-danger); }

.og-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 15rem;
    display: grid; gap: var(--og-space-2); padding: var(--og-space-3);
    background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / .5); font-size: var(--og-fs-sm); color: var(--og-text); white-space: normal;
}
.og-pop-veil { position: fixed; inset: 0; z-index: 49; }
.og-pop-head { display: flex; align-items: center; gap: var(--og-space-2); font-weight: var(--og-fw-bold); }
.og-qrings .og-pop { left: auto; right: 0; width: 17rem; }
.og-pop .og-qhead { display: flex; justify-content: space-between; gap: var(--og-space-3); }

.og-qrings { display: flex; gap: var(--og-space-2); flex: none; }
.og-qring {
    position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: conic-gradient(var(--og-ok) var(--p, 0%), var(--og-panel-2) 0);
    transition: filter .12s;
}
.og-qring:hover { filter: brightness(1.2); }
.og-qring.idle { background: var(--og-panel-2); }
.og-qring-art { position: absolute; inset: 4px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--og-bg-2); display: grid; place-items: center; color: var(--og-muted); }
.og-qring-art.idle { opacity: .55; }
.og-qring-n { position: absolute; bottom: -4px; right: -6px; font-size: .62rem; font-family: var(--og-mono); background: var(--og-panel-2); border: 1px solid var(--og-border); border-radius: var(--og-radius-pill); padding: 0 .25rem; color: var(--og-text); }

@media (max-width: 1200px) {
    .og-rring-txt .og-res-cap { display: none; }
}
@media (max-width: 900px) {
    .og-resbar { justify-content: space-between; gap: var(--og-space-2); }
    .og-rring-ic, .og-rring-ic svg { width: 34px; height: 34px; }
    .og-rring-ic img { inset: 9px; width: 16px; height: 16px; }
    .og-rring-txt b { font-size: var(--og-fs-sm); }
    .og-qring { width: 36px; height: 36px; }
    .og-rring:nth-child(n+3) .og-pop { left: auto; right: 0; }
}

/* Seitenkopf mit Ansichts-Umschalter (je Spieler gemerkt) ------------------------------------------------- */
.og-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--og-space-3); flex-wrap: wrap; }
.og-viewswitch { display: inline-flex; border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); overflow: hidden; flex: none; }
.og-viewswitch button { background: var(--og-panel); border: 0; color: var(--og-muted); padding: var(--og-space-1) var(--og-space-3); font: inherit; font-size: var(--og-fs-sm); cursor: pointer; }
.og-viewswitch button + button { border-left: 1px solid var(--og-border); }
.og-viewswitch button.active { background: var(--og-panel-2); color: var(--og-text); box-shadow: inset 0 -2px 0 var(--og-accent); }
.og-group-title { font-size: var(--og-fs-xs); text-transform: uppercase; letter-spacing: var(--og-letter-caps); color: var(--og-muted); font-weight: var(--og-fw-bold); margin: var(--og-space-5) 0 var(--og-space-2); }

/* Detailpanel (Vorschlag A): Bildkopf mit Name/Stufe, Kosten-Kacheln, ausklappbarer Stufenvergleich ------------ */
.og-panel-hero { position: relative; }
.og-panel-hero .og-art { aspect-ratio: 16 / 8; }
.og-panel-ov {
    position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--og-space-2);
    padding: var(--og-space-5) var(--og-space-4) var(--og-space-2);
    background: linear-gradient(transparent, color-mix(in srgb, var(--og-bg) 92%, transparent));
}
.og-panel-ov h3 { margin: 0; font-size: var(--og-fs-lg); }
.og-panel-lvl { font-family: var(--og-mono); font-size: 1.6rem; font-weight: var(--og-fw-heavy); line-height: 1; text-align: right; }
.og-panel-lvl small { display: block; font-size: .62rem; font-weight: var(--og-fw-normal); letter-spacing: .1em; text-transform: uppercase; color: var(--og-muted); }
.og-panel-hero .og-close { position: absolute; top: var(--og-space-2); right: var(--og-space-2); width: 2rem; height: 2rem; border-radius: 50%; background: var(--og-overlay); color: var(--og-text); }
.og-costchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--og-space-2); }
.og-costchip { display: grid; justify-items: center; gap: 2px; padding: var(--og-space-2) var(--og-space-1); border-radius: var(--og-radius-sm); background: var(--og-bg-2); border: 1px solid var(--og-border); font-family: var(--og-mono); font-size: var(--og-fs-sm); }
.og-costchip.m span { color: var(--og-metal); }
.og-costchip.c span { color: var(--og-crystal); }
.og-costchip.d span { color: var(--og-deut); }
.og-costchip.short { border-color: var(--og-danger-line); }
.og-costchip.short span { color: var(--og-danger); }
.og-costchip.none { opacity: .45; }
.og-panel-meta { display: flex; justify-content: space-between; gap: var(--og-space-2); flex-wrap: wrap; font-size: var(--og-fs-sm); color: var(--og-muted); }
.og-panel-meta img { vertical-align: -2px; }
.og-cmp-toggle { justify-self: start; }
.og-cmp { width: 100%; border-collapse: collapse; font-family: var(--og-mono); font-size: var(--og-fs-xs); }
.og-cmp th { text-align: right; color: var(--og-muted); font-weight: var(--og-fw-bold); padding: var(--og-space-1); border-bottom: 1px solid var(--og-border); }
.og-cmp td { text-align: right; padding: var(--og-space-1); border-bottom: 1px solid color-mix(in srgb, var(--og-border) 50%, transparent); white-space: nowrap; }
.og-cmp th:first-child, .og-cmp td:first-child { text-align: left; }
.og-cmp tr.next td { background: var(--og-panel-2); }
.og-cmp tr.next td:first-child { box-shadow: inset 3px 0 0 var(--og-accent); }
.og-cmp tr.far td:not(.og-neg):not(.og-pos) { color: var(--og-muted); }

/* Bühne über den Kacheln (Vorschlag Bauseiten C): Grafik links, Einzelheiten rechts */
.og-panel.og-panel-stage { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: var(--og-space-2); }
.og-panel-stage .og-panel-hero .og-art { aspect-ratio: auto; height: 100%; min-height: 15rem; }
.og-panel.og-panel-inline { position: static; display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); margin: 0 0 var(--og-space-2); border-color: var(--og-accent); }
.og-panel-inline .og-panel-hero .og-art { aspect-ratio: auto; height: 100%; min-height: 10rem; }

/* Kacheln: alle gleich groß, Auswahl ändert nur den Rahmen */
.og-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: var(--og-space-2); }
.og-tile { position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--og-muted); background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); transition: border-color .12s; }
.og-tile:hover { border-color: var(--og-accent); }
.og-tile.selected { border-color: var(--og-accent); box-shadow: 0 0 0 1px var(--og-accent); color: var(--og-text); }
.og-tile.locked .og-art { opacity: .4; filter: grayscale(.6); }
.og-tile .og-art { aspect-ratio: 1; font-size: var(--og-fs-md); }
.og-tile-lvl { position: absolute; right: 0; bottom: 1.4rem; padding: 0 var(--og-space-2); font-family: var(--og-mono); font-size: var(--og-fs-sm); color: var(--og-text); background: var(--og-overlay); border-top-left-radius: var(--og-radius-sm); }
.og-tile-ok { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--og-ok); box-shadow: 0 0 0 2px var(--og-overlay); }
.og-tile-ok.no { background: var(--og-danger); }
.og-tile-run { position: absolute; left: 0; right: 0; bottom: 1.4rem; height: 3px; background: var(--og-bg-2); transform: translateY(100%); }
.og-tile-run i { display: block; height: 100%; background: linear-gradient(90deg, var(--og-accent), var(--og-ok)); box-shadow: 0 0 6px var(--og-ok); transition: width 1s linear; }
.og-tile-cap { display: block; height: 1.4rem; line-height: 1.4rem; padding: 0 var(--og-space-2); font-size: var(--og-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liste (Vorschlag Bauseiten D) */
.og-blist { display: grid; gap: var(--og-space-1); }
.og-brow { display: grid; grid-template-columns: 6rem minmax(9rem, 1.3fr) minmax(0, 1.5fr) 7.5rem 13rem; align-items: center; gap: var(--og-space-3); padding: var(--og-space-1) var(--og-space-3) var(--og-space-1) var(--og-space-1); background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); }
.og-brow.open { border-color: var(--og-accent); }
.og-brow > .og-art { width: 6rem; border-radius: calc(var(--og-radius-sm) - 2px); font-size: var(--og-fs-sm); }
.og-brow.locked > .og-art, .og-brow.locked .og-brow-name b { opacity: .5; }
.og-brow-name { display: grid; line-height: 1.25; font-size: var(--og-fs-md); }
.og-brow-name .og-muted { font-size: var(--og-fs-sm); }
.og-brow-time { font-size: var(--og-fs-sm); white-space: nowrap; }
.og-brow-act { display: flex; align-items: center; gap: var(--og-space-2); justify-content: flex-end; }
.og-busy-inline { justify-self: start; font-size: var(--og-fs-xs); padding: 0 var(--og-space-2); border-radius: var(--og-radius-pill); background: var(--og-ok-bg); border: 1px solid var(--og-ok-line); color: var(--og-ok); white-space: nowrap; }
.og-info { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--og-border); background: none; color: var(--og-muted); font: inherit; font-style: italic; font-weight: var(--og-fw-bold); cursor: pointer; flex: none; }
.og-info:hover, .og-info.active { border-color: var(--og-accent); color: var(--og-text); }
.og-input.num.sm { width: 4.5rem; padding: var(--og-space-1) var(--og-space-2); }

@media (max-width: 1100px) {
    .og-panel.og-panel-stage, .og-panel.og-panel-inline { grid-template-columns: minmax(0, 1fr); }
    .og-panel-stage .og-panel-hero .og-art, .og-panel-inline .og-panel-hero .og-art { aspect-ratio: 16 / 7; height: auto; min-height: 0; }
}
@media (max-width: 900px) {
    .og-brow { grid-template-columns: 4.5rem minmax(0, 1fr) auto; row-gap: var(--og-space-1); }
    .og-brow > .og-art { width: 4.5rem; grid-row: span 2; }
    .og-brow .og-cost { grid-column: 2 / -1; }
    .og-brow-time { display: none; }
    .og-brow-act { grid-column: 3; grid-row: 1; }
    .og-tiles { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
    .og-viewswitch span { display: none; }
}

/* Warteschlangen als Karten (Vorschlag A) mit sich einfärbender Grafik (Vorschlag E) ------------------------- */
.og-qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--og-space-3); }
.og-qcard { display: grid; gap: var(--og-space-2); align-content: start; padding: var(--og-space-3); border-radius: var(--og-radius-sm); background: var(--og-bg-2); border: 1px solid var(--og-border); min-width: 0; }
.og-qcard-head { display: flex; justify-content: space-between; gap: var(--og-space-2); font-size: var(--og-fs-sm); }
.og-qcard .og-qlabel { color: var(--og-muted); text-transform: uppercase; letter-spacing: var(--og-letter-caps); font-size: var(--og-fs-xs); }
.og-qcard-row { display: flex; align-items: center; gap: var(--og-space-2); font-size: var(--og-fs-sm); }
.og-qart { position: relative; display: block; border-radius: var(--og-radius-sm); overflow: hidden; aspect-ratio: 16 / 9; }
.og-qart > .og-art { filter: grayscale(1) brightness(.55); }
.og-qart-done { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); transition: clip-path 1s linear; }
.og-qart-edge { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px; background: var(--og-ok); box-shadow: 0 0 10px 2px var(--og-ok); transition: left 1s linear; }
.og-qart-free { display: grid; place-items: center; border: 1px dashed var(--og-border); color: var(--og-muted); font-size: var(--og-fs-sm); background: var(--og-panel); }
.og-qart-free:hover { border-color: var(--og-accent); color: var(--og-text); }
.og-qcard.idle .og-qart-free { aspect-ratio: 16 / 9; }
.og-waitthumb { width: 2.6rem; flex: none; border-radius: 4px; overflow: hidden; }
.og-waitthumb .og-art { font-size: .6rem; }

/* Planetenleiste (Kommandozentrale F) */
.og-pstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: var(--og-space-2); overflow-x: auto; padding-bottom: var(--og-space-1); margin-bottom: var(--og-space-4); scrollbar-width: thin; }
.og-pcard { display: grid; gap: var(--og-space-1); padding: var(--og-space-2); text-align: left; font: inherit; color: var(--og-text); cursor: pointer; background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); transition: border-color .12s; }
.og-pcard:hover { border-color: var(--og-accent); }
.og-pcard.active { border-color: var(--og-accent); background: var(--og-panel-2); box-shadow: inset 0 -2px 0 var(--og-accent); }
.og-pcard-head { display: flex; align-items: center; gap: var(--og-space-2); min-width: 0; }
.og-pcard-head img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex: none; }
.og-pcard-name { display: grid; line-height: 1.15; min-width: 0; }
.og-pcard-name b { font-size: var(--og-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-pcard-name small { font-family: var(--og-mono); font-size: var(--og-fs-xs); color: var(--og-muted); }
.og-pcard-st { display: flex; gap: var(--og-space-2); font-size: var(--og-fs-xs); color: var(--og-muted); }
.og-led { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: 3px; background: var(--og-border); vertical-align: 0; }
.og-led.ok { background: var(--og-ok); box-shadow: 0 0 5px var(--og-ok); }
.og-led.warn { background: var(--og-warn); }
.og-led.bad { background: var(--og-danger); }

/* Kommandozentrale als Kachel-Dashboard (Vorschlag B) */
.og-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--og-space-3); align-items: start; }
.og-dash > .og-card { margin: 0; min-width: 0; }
.og-dash-2 { grid-column: span 2; }
.og-dash-3 { grid-column: span 3; }
.og-dash-4 { grid-column: 1 / -1; }
.og-dash-globe { display: block; width: 62%; margin: 0 auto var(--og-space-3); aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.og-dash-res { display: grid; gap: 2px; align-self: stretch; }
.og-dash-res-head { display: flex; align-items: center; gap: var(--og-space-2); color: var(--og-muted); font-size: var(--og-fs-sm); }
.og-dash-res-head img { width: 18px; height: 18px; }
.og-dash-res b { font-family: var(--og-mono); font-size: var(--og-fs-lg); font-weight: var(--og-fw-normal); }
.og-dash-res > span { font-size: var(--og-fs-xs); color: var(--og-muted); }
.og-dash-res.metal { --res-color: var(--og-metal); }
.og-dash-res.crystal { --res-color: var(--og-crystal); }
.og-dash-res.deut { --res-color: var(--og-deut); }
.og-dash-res.energy { --res-color: var(--og-energy); }
.og-dash-res.full .og-meter > i, .og-dash-res.energy.neg .og-meter > i { background: var(--og-danger); }
.og-dash-res.energy.neg b { color: var(--og-danger); }
.og-dash-fleets { list-style: none; margin: 0 0 var(--og-space-2); padding: 0; display: grid; gap: var(--og-space-1); font-size: var(--og-fs-sm); }
.og-dash-fleets li { display: flex; justify-content: space-between; gap: var(--og-space-2); padding: var(--og-space-1) 0; border-bottom: 1px solid var(--og-border); }
.og-dash-fleets li.hostile { color: var(--og-danger); }

/* Zeitleiste der Warteschlangen (Vorschlag B) */
.og-tl { display: grid; gap: var(--og-space-1); }
.og-tl-axis, .og-tl-lane { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--og-space-2); }
.og-tl-ticks { position: relative; height: 1.1rem; font-size: var(--og-fs-xs); color: var(--og-muted); font-family: var(--og-mono); }
.og-tl-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.og-tl-ticks span:first-child { transform: none; color: var(--og-energy); }
.og-tl-ticks span:last-child { transform: translateX(-100%); }
.og-tl-label { font-size: var(--og-fs-xs); text-transform: uppercase; letter-spacing: var(--og-letter-caps); color: var(--og-muted); }
.og-tl-track {
    position: relative; height: 2rem; border-radius: var(--og-radius-sm); background: var(--og-bg-2);
    border-left: 2px solid var(--og-energy);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), color-mix(in srgb, var(--og-border) 70%, transparent) calc(100% / 6 - 1px) calc(100% / 6));
}
.og-tl-bar {
    position: absolute; top: 4px; bottom: 4px; min-width: 4px; padding: 0 var(--og-space-2); overflow: hidden;
    border: 1px solid var(--og-ok-line); border-radius: 4px; cursor: pointer; font: inherit; font-size: var(--og-fs-xs); color: var(--og-text); text-align: left;
    background: linear-gradient(90deg, color-mix(in srgb, var(--og-ok) 35%, var(--og-panel)), color-mix(in srgb, var(--og-accent) 30%, var(--og-panel)));
}
.og-tl-bar span { white-space: nowrap; }
.og-tl-bar.waiting { background: color-mix(in srgb, var(--og-accent) 12%, transparent); border-style: dashed; border-color: var(--og-accent); color: var(--og-muted); }
.og-tl-bar:hover { filter: brightness(1.2); }
.og-tl-pop { position: absolute; top: calc(100% + 4px); z-index: 5; display: grid; gap: 2px; padding: var(--og-space-2) var(--og-space-3); min-width: 14rem; font-size: var(--og-fs-xs); background: var(--og-panel); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); box-shadow: 0 8px 24px rgb(0 0 0 / .5); }

/* Aufträge je Planet (Imperium, Warteschlange F) */
.og-qtable td.free { color: var(--og-danger); }
.og-qtable tr { cursor: pointer; }
.og-qtable tr:hover td { background: var(--og-panel-2); }
.og-qtable tr.current td:first-child { box-shadow: inset 3px 0 0 var(--og-accent); }

@media (max-width: 1100px) {
    .og-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .og-dash-3, .og-dash-2 { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .og-qcards { grid-template-columns: minmax(0, 1fr); }
    .og-dash > .og-card:not(.og-dash-res) { grid-column: 1 / -1; }
    .og-tl-axis, .og-tl-lane { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* Handy: Leiste mit rundem Bau-Knopf in der Mitte (Vorschlag E), Fächer mit Bau-Seiten + „Mehr“ ------------------- */
.og-fan, .og-fan-veil, .og-fab-btn { display: none; }
@media (max-width: 900px) {
    .og-bottom { overflow: visible; }
    .og-bottom a { flex: 1 1 0; min-width: 0; position: relative; }
    .og-bottom a .og-count { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 1.05rem; line-height: 1.05rem; padding: 0 3px; font-size: .62rem; }
    .og-fab-btn {
        display: grid; place-items: end center; flex: 0 0 4.5rem; position: relative; padding: 0 0 .35rem;
        background: none; border: 0; color: var(--og-muted); font: inherit; font-size: var(--og-fs-xs); cursor: pointer;
    }
    .og-fab-btn.active, .fan-open .og-fab-btn { color: var(--og-text); }
    .og-fab {
        position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%);
        width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; color: var(--og-on-accent);
        background: linear-gradient(135deg, var(--og-accent), var(--og-accent-2)); box-shadow: 0 6px 16px rgb(0 0 0 / .5), 0 0 0 4px var(--og-bg);
        transition: transform .2s;
    }
    .og-fab > span { width: 24px !important; height: 24px !important; opacity: 1 !important; }
    .fan-open .og-fab { transform: translateX(-50%) rotate(45deg); }
    .og-fan-veil { display: block; position: fixed; inset: 0; z-index: 38; background: rgb(5 8 16 / .55); }
    .og-fan {
        display: block; position: fixed; left: 0; right: 0; z-index: 39;
        bottom: calc(var(--og-bottom-nav) + env(safe-area-inset-bottom));
        max-height: 70vh; overflow-y: auto; padding: var(--og-space-4) var(--og-space-3) var(--og-space-5);
        background: var(--og-panel); border-top: 1px solid var(--og-border); border-radius: var(--og-radius) var(--og-radius) 0 0;
        animation: og-fan-in .18s ease;
    }
    .og-fan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--og-space-2); }
    .og-app .og-fan-grid a {
        position: relative; display: grid; justify-items: center; gap: var(--og-space-1); padding: var(--og-space-3) var(--og-space-1);
        border-radius: var(--og-radius-sm); background: var(--og-panel-2); border: 1px solid var(--og-border);
        color: var(--og-text); font-size: var(--og-fs-xs); text-align: center; line-height: 1.15;
    }
    .og-app .og-fan-grid a.active { border-color: var(--og-accent); }
    .og-fan-grid a > span:first-child { width: 24px !important; height: 24px !important; }
    .og-fan-grid.more a { padding: var(--og-space-2) var(--og-space-1); background: none; }
    .og-fan-grid a .og-count { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 1.05rem; line-height: 1.05rem; padding: 0 3px; font-size: .62rem; }
}
@keyframes og-fan-in { from { transform: translateY(16px); opacity: 0; } }

/* Schmale Handys: Rohstoff-Ringe kompakt (nur Wert), damit alle vier in eine Zeile passen */
@media (max-width: 520px) {
    .og-resbar { gap: var(--og-space-1); }
    .og-rring-btn { gap: 3px; padding: 0; }
    .og-rring-ic, .og-rring-ic svg { width: 28px; height: 28px; }
    .og-rring-ic img { inset: 7px; width: 14px; height: 14px; }
    .og-rring-txt > small { display: none; }
    .og-rring-txt b { font-size: var(--og-fs-xs); }
}

/* Einstellungsseite */
.og-settings { display: grid; gap: var(--og-space-4); max-width: 46rem; }
.og-setting { display: flex; justify-content: space-between; align-items: center; gap: var(--og-space-4); flex-wrap: wrap; padding-bottom: var(--og-space-3); border-bottom: 1px solid var(--og-border); }
.og-setting:last-child { border-bottom: 0; padding-bottom: 0; }
.og-setting .og-hint { margin: var(--og-space-1) 0 0; }
@media (max-width: 900px) { .og-hide-sm { display: none; } }

/* Handy: freie Warteschlange als schmale Zeile statt leerem Bildplatz */
@media (max-width: 700px) {
    .og-qcard.idle .og-qart-free { aspect-ratio: auto; padding: var(--og-space-3); }
}