/*! Voidar · © 2026 Jürgen Garske · Alle Rechte vorbehalten. */ /* ============================================================ Schriften, selbst gehostet (SIL Open Font License 1.1) Chakra Petch ist der Standard. Exo 2 und Oxanium wählt der Spieler im Konto (accounts.font, App\Schrift); das Layout setzt dann data-schrift am . Der Browser lädt nur die Schrift, die tatsächlich benutzt wird. ============================================================ */ @font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ChakraPetch-Regular.woff2?v=2') format('woff2')} @font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ChakraPetch-Medium.woff2?v=2') format('woff2')} @font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ChakraPetch-SemiBold.woff2?v=2') format('woff2')} @font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ChakraPetch-Bold.woff2?v=2') format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Exo2-Regular.woff2?v=1') format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Exo2-Medium.woff2?v=1') format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Exo2-SemiBold.woff2?v=1') format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Exo2-Bold.woff2?v=1') format('woff2')} @font-face{font-family:'Oxanium';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Oxanium-Regular.woff2?v=1') format('woff2')} @font-face{font-family:'Oxanium';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Oxanium-Medium.woff2?v=1') format('woff2')} @font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Oxanium-SemiBold.woff2?v=1') format('woff2')} @font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Oxanium-Bold.woff2?v=1') format('woff2')} html[data-schrift="exo2"]{--font:'Exo 2',sans-serif;--font-base:'Exo 2','Segoe UI',system-ui,-apple-system,Roboto,sans-serif} html[data-schrift="oxanium"]{--font:'Oxanium',sans-serif;--font-base:'Oxanium','Segoe UI',system-ui,-apple-system,Roboto,sans-serif} /* ============================================================ Voidar – Stylesheet v2 Stil-Richtung: Weltraum-Industrial, dunkel, mit Cyan/Orange-Akzenten ============================================================ */ :root { /* Farbpalette — Orbit (neutral-dunkel, flach) */ --bg-deep: #0a0e15; /* Hintergrund ganz hinten */ --bg-base: #0e131c; /* Body */ --bg-elevated: #161d29; /* Cards / Panels */ --bg-elevated-2: #1d2634; /* Hover / Highlights auf Cards */ --border: #283447; --border-soft: #1e2733; --text-primary: #e6ecf5; --text-secondary: #9aa7bd; --text-muted: #7a8699; --text-strong: #ffffff; --text: var(--text-primary); /* Alias — Alt-CSS nutzt var(--text) */ /* Akzente — Orbit: Blau (Aktionen) + Grün (Tech/Erfolg) */ --accent: #3d8bff; /* Blau — Aktionen, "wichtig" */ --accent-hover: #5b9dff; --accent-dim: #2c6bcc; --tech: #36d399; /* Grün — Forschung/Tech */ --tech-hover: #4ee0aa; --tech-dim: #259e73; /* Ressourcen-Farben (Orbit-Dots) */ --res-voidanium: #cdd6e3; /* Voidanium — silbergrau */ --res-singularit: #3d8bff; /* Singularit — blau */ --res-aether: #a98cff; /* Äther — violett */ --res-energy: #36d399; /* Energie — grün */ /* Status */ --success: #36d399; --warn: #ffb547; --ok: #36d399; --danger: #ff6b7a; --info: #3d8bff; /* Maße */ --radius: 10px; --radius-sm: 6px; --gap: 1rem; --content-w: 1100px; /* Schrift */ --font-base: 'Chakra Petch', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; /* ---------- Flächen ---------- Orbit ist flach: Content-Karten sind SOLIDE (kein Glas, keine Schatten). Die --glass-*-Tokens bleiben als Alias auf solide Werte, damit die rund 40 Alt-Referenzen im Content automatisch flach werden. Echtes Glas gibt es nur auf der Overlay-Ebene (Topbar/Dropdowns/Modals) — über --ov-*, abschaltbar via html.vd-reduce-glass. */ --glass-bg: var(--bg-elevated); --glass-bg-strong: var(--bg-elevated); --glass-border: var(--border); --glass-highlight: transparent; --glass-blur: 0px; --glass-shadow: none; --glass-shadow-lg: none; /* Overlay-Glas (Topbar / Dropdowns / Modals) — Default an */ --ov-bg: rgba(16, 22, 33, 0.82); --ov-bg-2: rgba(20, 27, 39, 0.94); --ov-border: rgba(120, 150, 200, 0.18); --ov-blur: 14px; } /* Glas-Effekte reduzieren (User-Präferenz): Overlay-Ebene wird solide. */ html.vd-reduce-glass { --ov-bg: var(--bg-elevated); --ov-bg-2: var(--bg-elevated); --ov-blur: 0px; } /* ---------- Reset & Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-base); font-size: 15px; line-height: 1.5; min-height: 100vh; } html { background: var(--bg-deep, #070b18); } /* Anzeige-Einstellung „Kompakte Darstellung“: Die meisten Abstände und Schriften rechnen in rem; eine kleinere Grundgröße verkleinert sie gleich- mäßig um etwa ein Zehntel. Eingabefelder am Handy bleiben bei 16px (iOS zoomt sonst beim Antippen), siehe die Regel mit 16px !important. */ html.vd-compact { font-size: 14.5px; } html.vd-compact body { font-size: 14px; } body { /* Atmosphärischer Hintergrund — gibt der Glas-Topbar etwas zum Durchscheinen. Dezente Blau-/Grün-Glows (Orbit-Akzente), fixiert, sehr subtil, damit Text gut lesbar bleibt. */ background: radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 154, 60, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 85% 6%, rgba(111, 220, 140, 0.06) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 75% 100%, rgba(255, 154, 60, 0.05) 0%, transparent 60%), var(--bg-deep); background-attachment: fixed; } a { color: var(--tech); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--tech-hover); } h1, h2, h3 { color: var(--text-strong); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 1.7rem; margin: 0 0 0.5rem; } h2 { font-size: 1.15rem; margin: 0 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-soft); } h3 { font-size: 1rem; margin: 0 0 0.5rem; } .muted { color: var(--text-muted); font-size: 0.9em; } .warn { color: var(--warn); font-weight: 600; } .danger{ color: var(--danger); font-weight: 600; } .tech { color: var(--tech); } /* ============================================================ Shell — Orbit-Topbar-Layout (Topbar oben, Subbar, Main, Footer stapeln vertikal; keine Sidebar mehr) ============================================================ */ body { background-color: var(--bg-deep); } .app { display: flex; flex-direction: column; min-height: 100vh; width: 100%; } main.container { flex: 1 0 auto; width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 1.5rem 1.5rem 3rem; } /* ============================================================ Topbar (Orbit) — durchgehende, schwebende Glas-Leiste ============================================================ */ :root { --topbar-h: 55px; } /* Andockhoehe fuer die Leiste darunter */ .topbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 0.3rem; padding: 0.45rem 1.2rem; background: var(--ov-bg); backdrop-filter: blur(var(--ov-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--ov-blur)) saturate(130%); border-bottom: 1px solid var(--ov-border); } /* Brand / Logo */ .topbar .brand:not(body.auth *) { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 0.7rem; } .topbar .brand-logo-img { height: 24px; width: auto; display: block; transition: filter 0.2s ease, transform 0.2s ease; } .topbar .brand:hover .brand-logo-img { filter: drop-shadow(0 0 6px var(--accent)); transform: scale(1.02); } /* Hauptnavigation */ .topnav { display: flex; align-items: center; gap: 0.1rem; } .grp { position: relative; } /* Tab (Button oder Link) */ .tab { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; border: none; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.92rem; font-weight: 500; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .tab .ico { font-size: 1.05rem; line-height: 1; } .tab .caret { font-size: 0.6rem; color: var(--text-muted); margin-left: 0.05rem; } .tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); } /* Aktiver Bereich: helle Schrift + blauer Unterstrich */ .grp.on > .tab, .tab.tab-active { color: var(--text-primary); } .grp.on > .tab::after, .tab.tab-active::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: -0.45rem; height: 2px; background: var(--accent); border-radius: 2px; } /* Dropdown (Overlay-Glas) */ .dropdown { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 218px; display: flex; flex-direction: column; gap: 0.08rem; padding: 0.4rem; background: var(--ov-bg-2); backdrop-filter: blur(var(--ov-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--ov-blur)) saturate(130%); border: 1px solid var(--ov-border); border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 210; } .grp:hover > .dropdown, .grp:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* Rechte Gruppen klappen rechtsbündig auf */ .acct .dropdown, .pill-admin .dropdown { left: auto; right: 0; } .dropdown a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.9rem; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease; } .dropdown a .ico { font-size: 1rem; width: 1.3rem; text-align: center; flex-shrink: 0; } .dropdown a:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); } .dropdown a.cur { color: var(--accent); background: rgba(255, 154, 60,0.10); } /* Trenner "Nur auf Monden" + horizontaler Separator + Logout */ .dd-moon { padding: 0.5rem 0.7rem 0.25rem; margin-top: 0.25rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .dd-sep { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; } .dd-logout { color: var(--text-muted) !important; } .dd-logout:hover { color: var(--danger) !important; background: rgba(255,107,122,0.08) !important; } /* Zähl-Badge (z.B. Tutorial-Belohnungen offen) */ .nav-badge { margin-left: auto; min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #06101f; font-size: 0.7rem; font-weight: 700; border-radius: 999px; } /* Spacer schiebt die rechte Gruppe nach rechts */ .topbar-spacer { flex: 1 1 auto; } /* Glocke + Nachrichten */ .topbar-bell, .topbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm); color: var(--text-secondary); transition: background 0.15s ease; } .topbar-bell:hover, .topbar-icon:hover { background: rgba(255,255,255,0.05); } .bell-icon, .ti-icon { font-size: 1.2rem; line-height: 1; } .bell-count, .ti-count { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 999px; } /* Konto-Avatar */ .acct .av { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--tech)); color: #06101f; font-size: 0.72rem; font-weight: 700; } /* Admin- / Owner-Pills */ .pill-admin .tab { border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.8rem; } .pill-admin .tab { color: var(--tech); } .pill-admin .tab:hover { border-color: var(--tech); background: rgba(111, 220, 140,0.08); color: var(--tech); } /* Gast- / Lobby-Nav rechts */ .user-nav { display: flex; gap: 0.6rem; align-items: center; } .guest-nav a { font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1.1rem; border-radius: var(--radius-sm); transition: all 0.2s ease; } .guest-nav a[href*="login"] { color: var(--text-primary); border: 1px solid var(--border); } .guest-nav a[href*="login"]:hover { border-color: var(--accent); color: var(--accent); } .guest-nav a[href*="register"] { color: #06101f; background: var(--accent); border: 1px solid transparent; } .guest-nav a[href*="register"]:hover { background: var(--accent-hover); } /* ============================================================ Sub-Leiste — Planeten-Umschalter + Ressourcen-Strip ============================================================ */ .subbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.55rem 1.5rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); /* * Bleibt beim Scrollen stehen, direkt unter der Kopfzeile: Rohstoffe und * Planetenwahl sind damit immer im Blick, auch weit unten in einer langen * Bauliste. Der z-index liegt unter dem der Kopfzeile (200), damit deren * Menues darueber aufklappen. */ position: sticky; top: var(--topbar-h, 55px); z-index: 199; } .subbar .planet-switcher { grid-column: 1; justify-self: start; } /* Ressourcen-Strip (Klassen + data-Attribute bleiben für queue-sync.js) */ .res-strip { grid-column: 2; justify-self: center; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 0.9rem; } .res-strip .item { display: flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.7rem; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); } .res-strip .icon { line-height: 1; display: inline-flex; align-items: center; } .res-strip .label { color: var(--text-muted); font-size: 0.82rem; } .res-strip .value { display: inline-flex; align-items: baseline; color: var(--text-strong); font-family: 'Consolas', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 600; } .res-strip .res-sep { color: var(--text-muted); margin: 0 0.1rem; } .res-strip .res-cap { color: var(--text-muted); font-weight: 500; } .res-strip .voidanium .icon { color: var(--res-voidanium); } .res-strip .singularit .icon { color: var(--res-singularit); } .res-strip .aether .icon { color: var(--res-aether); } .res-strip .energy .icon { color: var(--res-energy); } /* Speicher voll: Wert + Cap rot (vom JS-Ticker via .res-full gesetzt) */ .res-strip .value.res-full .res-current, .res-strip .value.res-full .res-cap { color: var(--danger) !important; font-weight: 700; } /* Energie: Verfügbar / Produktion (negativ = rot) */ .res-strip .energy-pair { display: inline-flex; align-items: baseline; gap: 0.15rem; } .res-strip .energy-pair .res-sep { color: var(--text-muted); margin: 0 0.2rem; } .res-strip .energy-avail { color: var(--res-energy); } .res-strip .energy-avail.energy-negative { color: var(--danger); } .res-strip .energy-prod { color: var(--text-muted); } /* ============================================================ Layout-Banner: Speed-Event (grün/Boost) + Lösch-Hinweis (rot/Warnung) ============================================================ */ .speed-event-banner { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 1rem; margin-bottom: 1.2rem; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--tech); border-radius: var(--radius); } .speed-event-banner__icon { font-size: 1.3rem; line-height: 1.3; flex-shrink: 0; } .speed-event-banner__body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } .speed-event-banner__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .speed-event-banner__title { font-weight: 600; color: var(--tech); letter-spacing: 0.02em; } .speed-event-banner__until { color: var(--text-muted); font-size: 0.88rem; } .speed-event-banner__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .speed-event-banner__chip { padding: 0.2rem 0.6rem; background: rgba(111, 220, 140, 0.10); border: 1px solid var(--tech-dim); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--tech-hover); font-variant-numeric: tabular-nums; } .deletion-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem; padding: 0.7rem 1rem; margin-bottom: 1.2rem; background: rgba(255, 107, 122, 0.08); border: 1px solid var(--danger); border-radius: var(--radius); } .deletion-notice__text { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); font-size: 0.92rem; } .deletion-notice__icon { font-size: 1.1rem; color: var(--danger); flex-shrink: 0; } .deletion-notice__date { font-weight: 700; color: var(--danger); } .deletion-notice__form { margin: 0; flex-shrink: 0; } .deletion-notice__btn { padding: 0.35rem 0.8rem; background: transparent; border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--danger); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .deletion-notice__btn:hover { background: rgba(255, 107, 122, 0.12); } /* Runden: Ende in Sicht (letzte 7 Tage) und Runde vorbei. */ .round-notice { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; margin-bottom: 1.2rem; background: rgba(255, 181, 71, 0.08); border: 1px solid rgba(255, 181, 71, 0.45); border-radius: var(--radius); color: var(--text-primary); font-size: 0.92rem; } .round-notice__icon { font-size: 1.1rem; flex-shrink: 0; } .round-notice--beendet { border-color: var(--warn); } /* ---------- Main ---------- */ main.container { grid-area: main; padding: 1.5rem; max-width: var(--content-w); width: 100%; } /* ---------- Flash Messages ---------- */ .flash-zone { max-width: var(--content-w); margin: 0 0 1rem; } .flash { padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: var(--radius-sm); border-left: 3px solid; background: var(--bg-elevated); } .flash-success { border-color: var(--success); color: #c5f1d5; } .flash-error { border-color: var(--danger); color: #ffd2d7; } .flash-info { border-color: var(--info); color: #d4e3ff; } /* Hinweis im Formular, z. B. "dieser Angriff beendet deinen Anfaengerschutz". Wird per hidden ein- und ausgeblendet (schutz-warnung.js). */ .form-warnung { margin: 0.6rem 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); border-left: 3px solid var(--warn); background: var(--bg-elevated); color: var(--warn); } .form-warnung[hidden] { display: none; } /* ---------- Cards ---------- */ .card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; box-shadow: var(--glass-shadow); } .card.highlight { border-color: var(--tech); background: linear-gradient(180deg, rgba(108, 196, 255,0.06) 0%, var(--bg-elevated) 100%); } /* ---------- Planet Header ---------- */ .planet-header { margin-bottom: 1.5rem; } .planet-header h1 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .planet-header .coord { color: var(--accent); font-size: 1rem; font-weight: 400; font-family: 'Consolas', 'Courier New', monospace; } .planet-header .meta { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.3rem; } /* ---------- Ressourcen-Tabelle ---------- */ .res-table { width: 100%; border-collapse: collapse; } .res-table th, .res-table td { padding: 0.55rem 0.4rem; text-align: left; border-bottom: 1px solid var(--border-soft); } .res-table tr:last-child td, .res-table tr:last-child th { border-bottom: none; } .res-table th { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; } .res-table td { font-variant-numeric: tabular-nums; color: var(--text-primary); } .res-voidanium { color: var(--res-voidanium); } .res-singularit { color: var(--res-singularit); } .res-aether { color: var(--res-aether); } .res-energy { color: var(--res-energy); } .res-table .res-amount { font-weight: 600; color: var(--text-strong); } /* Bestand / Kapazität als Inline-Block */ .res-amount-cell { font-variant-numeric: tabular-nums; white-space: nowrap; } .res-amount-cell .res-sep { color: var(--text-muted); margin: 0 0.3rem; } .res-amount-cell .res-cap { color: var(--text-muted); font-size: 0.92em; } /* Voll-/Überfüll-Indikator: Bestand-Wert wird rot */ .res-amount.res-full, .res-strip .value.res-full, .res-strip .energy-cons.res-full { color: var(--danger) !important; font-weight: 700; } /* ---------- Aktiver Auftrag ---------- */ /* Progress-Bar für aktiven Auftrag */ .progress-bar { width: 100%; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; margin-top: 0.6rem; } .progress-bar .fill { height: 100%; background: linear-gradient(90deg, var(--tech-dim), var(--tech)); width: 0%; transition: width 0.5s linear; } /* ---------- Gebäude- und Forschungs-Liste ---------- */ .build-table { width: 100%; border-collapse: collapse; } .build-table th, .build-table td { padding: 0.7rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .build-table tr:last-child td { border-bottom: none; } .build-table th { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } .build-table .b-name { display: flex; align-items: center; gap: 0.6rem; color: var(--text-strong); font-weight: 500; } .build-table .b-name .ico { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-deep); border-radius: var(--radius-sm); font-size: 1rem; } .build-table .b-desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; margin-left: 2.2rem; line-height: 1.35; max-width: 32rem; } /* ---------- Queue-Liste ---------- */ .queue-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .queue-item.active { border-color: var(--tech); background: linear-gradient(180deg, rgba(108, 196, 255,0.08) 0%, var(--bg-deep) 100%); } .queue-item .qi-info { min-width: 0; } .queue-item .qi-name { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); margin-bottom: 0.2rem; } .queue-item .qi-name .ico { font-size: 1.1rem; } .queue-item .qi-status { font-size: 0.85rem; color: var(--text-secondary); } .queue-item .qi-status .job-countdown { color: var(--tech); font-variant-numeric: tabular-nums; font-weight: 600; } .queue-item .progress-bar { margin-top: 0.4rem; } /* ---------- Galaxie-Ansicht ---------- */ /* ============================================================ Galaxie-Tabelle (aufpoliert: Pillen, Badges, kompakte Slots) ============================================================ */ /* Trennlinie auf die ZEILE legen statt auf einzelne Zellen: Die Planet-Zelle ist display:flex (Icon + Name + Badges) und damit unterschiedlich hoch — ein border-bottom an der Zelle säße dann auf anderer Höhe als bei den Nachbarn (verschobener Strich). Auf der tr (bei border-collapse) sitzt er garantiert durchgehend auf der Zeilen-Unterkante. */ /* Spalten-Breiten: schmale Pos / Status / Aktionen, dehnbare Planet & Besitzer */ /* Eigene Zeile: dezenter Akzent (orange Tinte links) */ /* Besetzte (fremde) Zeile: leichter Hover-Effekt */ /* Leere Slots: deutlich kompakter und ruhiger */ /* Planet-Spalte: Icon + Name + Pillen; die Zelle selbst bleibt Tabellenzelle */ /* Tag-Gruppe (Pillen) */ .g-pill { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.6rem; border-radius: 999px; /* echte Pille */ text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: default; } .g-pill-home { background: rgba(108, 196, 255, 0.12); color: var(--tech); border: 1px solid var(--tech-dim); } /* Beziehung als Farbe, Status als Symbol; die Legende unter der Tabelle erklärt beides */ /* so breit wie ein Leerzeichen */ /* Kürzel in der Galaxie nur mit dem Leerzeichen davor, ohne Zusatzrand */ /* Unerforschte Galaxien und Schwarzes Loch im System */ .g-pill-own { background: rgba(255, 154, 60, 0.12); color: var(--accent); border: 1px solid var(--accent-dim, var(--accent)); } /* Status-Badges (Spieler-Status) */ .status-badge { display: inline-block; font-size: 0.75rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-weight: 500; text-transform: lowercase; letter-spacing: 0.02em; cursor: default; line-height: 1.4; white-space: nowrap; } .status-badge.st-active { background: rgba(121, 210, 126, 0.12); color: var(--ok, #79d27e); border: 1px solid rgba(121, 210, 126, 0.35); } .status-badge.st-inactive { background: rgba(122, 138, 154, 0.12); color: var(--text-muted); border: 1px solid rgba(122, 138, 154, 0.35); } .status-badge.st-inactive-long { background: rgba(122, 138, 154, 0.18); color: var(--text-muted); border: 1px solid rgba(122, 138, 154, 0.5); text-decoration: line-through; } .status-badge.st-vacation { background: rgba(111, 220, 140, 0.1); color: var(--tech); border: 1px solid var(--tech-dim); } .status-badge.st-banned { background: rgba(255, 100, 100, 0.12); color: var(--danger); border: 1px solid rgba(255, 100, 100, 0.4); } .status-badge.st-newbie { background: rgba(212, 242, 131, 0.1); color: var(--res-aether); border: 1px solid rgba(212, 242, 131, 0.35); } /* Aktionen-Spalte */ /* ============================================================ TABELLEN - SPALTEN-AUSRICHTUNG (zentrale Quelle der Wahrheit) Header (th) und Wert (td) einer Spalte teilen sich die Spalten- KLASSE und damit text-align. Optik (Farbe/Gewicht) steht separat nur auf dem td, damit die Header grau/muted bleiben. Gilt fuer .build-table (Gebaeude/Forschung/Allianz) UND .ship-table (Werft/Verteidigung tragen beide Klassen). Name (b-name) ........... links (Default .build-table th,td) Kosten (b-cost) ......... links Dauer (b-duration) ...... links Stufe (b-level) ......... ZENTRIERT Bestand (b-stock) ....... ZENTRIERT Min. Labor (min-lab) .... ZENTRIERT Anzahl (ship-amount-col) rechts (s. .ship-amount-col) Punkte (.num) ........... rechts (generische .num-Regel) Voraussetzung: die Header- tragen dieselbe Spalten-Klasse wie die Wert-, z.B. Stufe. Mobile-Anpassung dieser Spalten (Karten-Layout + ::before-Labels): siehe @media (max-width:900px), Stichwort '.build-table td.b-*::before'. ============================================================ */ .build-table .b-level, .build-table .b-stock { text-align: center; } /* Optik nur auf dem Wert (td): Stufe in Akzentfarbe, fett. */ .build-table td.b-level { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .build-table .b-cost { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 0.9rem; } .build-table .b-cost .can-afford { color: var(--text-primary); } .build-table .b-cost .cant-afford { color: var(--danger); } .build-table .b-duration { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 0.9rem; white-space: nowrap; } .build-table tr:hover { background: var(--bg-elevated-2); } /* ---------- Buttons ---------- */ /* ============================================================ BUTTON-SYSTEM (zentral — alle Buttons leiten sich hiervon ab) Aufbau: .btn Basis (Layout, Größe, Verhalten) — neutral + Variante Farbe = Bedeutung: .btn-primary Orange — Hauptaktion (Bauen, Senden, Bestätigen) .btn-ghost Grau — sekundär (Abbrechen, Zurück, Schließen) .btn-tech Cyan — Forschung / Tech / Kolonisieren .btn-danger Rot — gefährlich (Angriff, Löschen, Reset) + Größe (optional): (keine) normal .btn-sm klein .btn-xs mini Beispiele: class="btn btn-primary" · class="btn btn-danger btn-sm" ============================================================ */ /* --- Basis: neutrales Layout + Verhalten (Farbe kommt von der Variante) --- */ .btn, button.btn, a.btn, .btn-primary, button.btn-primary, a.btn-primary, .btn-ghost, button.btn-ghost, a.btn-ghost, .btn-tech, button.btn-tech, a.btn-tech, .btn-danger, button.btn-danger, a.btn-danger { display: inline-block; padding: 0.4rem 1rem; border: 1px solid transparent; border-radius: 6px; font-size: 0.9rem; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; } .btn:active, .btn-primary:active, .btn-ghost:active, .btn-tech:active, .btn-danger:active { transform: translateY(1px); } .btn:disabled, .btn.disabled, .btn-primary:disabled, .btn-ghost:disabled, .btn-tech:disabled, .btn-danger:disabled { background: var(--bg-elevated-2); border-color: transparent; color: var(--text-muted); cursor: not-allowed; } /* --- Variante: Primär (Orange, gefüllt) --- */ .btn-primary, button.btn-primary, a.btn-primary { background: var(--accent); color: #1a0e00; border-color: transparent; } .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover { background: var(--accent-hover); color: #1a0e00; } /* --- Variante: Ghost (transparent, grauer Rand) --- */ .btn-ghost, button.btn-ghost, a.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-secondary); } .btn-ghost:hover, button.btn-ghost:hover, a.btn-ghost:hover { background: var(--bg-elevated-2); border-color: var(--border); color: var(--text-primary); } /* --- Variante: Tech (Cyan, dezent gefüllt) — Forschung/Kolonisieren --- */ .btn-tech, button.btn-tech, a.btn-tech { background: rgba(108, 196, 255, 0.12); border-color: var(--tech-dim); color: var(--tech); } .btn-tech:hover, button.btn-tech:hover, a.btn-tech:hover { background: rgba(108, 196, 255, 0.2); border-color: var(--tech); color: var(--tech-hover); } /* --- Variante: Danger (Rot, transparent mit rotem Rand) — gefährlich --- */ .btn-danger, button.btn-danger, a.btn-danger { background: transparent; border-color: rgba(255, 107, 122, 0.4); color: var(--danger); } .btn-danger:hover, button.btn-danger:hover, a.btn-danger:hover { background: rgba(255, 107, 122, 0.12); border-color: rgba(255, 107, 122, 0.7); color: var(--danger); } /* --- Größen (auf jede Variante anwendbar) --- */ .btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; } .btn-xs { padding: 0.2rem 0.55rem; font-size: 0.72rem; } /* Button in Seiten-Headern (z.B. „Neue Nachricht") leicht absetzen. Überstimmt die cyan-Link-Regel des Seiten-Headers. */ /* Aktions-Spalte in build-table (Bauen/Forschen-Button ODER Status-Text): feste Breite + rechtsbündig, damit der Button immer an derselben Position sitzt — egal ob daneben "Forschen" oder ein langer "Labor zu klein"-Text steht. Sonst dehnt der lange Text die Spalte und die Buttons "verrutschen". */ .build-table td.row-action, .build-table td.b-action { width: 9rem; text-align: center; white-space: normal; vertical-align: middle; } /* Bauen + Abreißen: gleich breit, mittig, sauber untereinander. */ .build-table td.row-action form, .build-table td.b-action form { display: block; margin: 0; } /* Aktions-Zelle GEBAEUDE/FORSCHUNG (row-action): Bauen + Abreißen gestapelt. Das bleibt table-cell (KEIN display:flex! Ein Flex- ist keine table-cell mehr -> vertical-align:middle bricht -> Inhalt rutscht hoch). vertical-align:middle (Basis) zentriert den Button-Stapel vertikal in der Zeile. Abstand via margin-bottom mit Spezifitaet (0,3,1), die das spezifischere '.row-action form { margin:0 }' (0,2,2) schlaegt. */ .build-table td.row-action > * { display: block; } .build-table td.row-action > *:not(:last-child) { margin-bottom: 0.4rem; } .build-table td.row-action .btn-primary, .build-table td.row-action .btn-need-res, .build-table td.b-action .btn-primary { display: block; width: 100%; box-sizing: border-box; text-align: center; } .build-table td.row-action .action-disabled-wrap { display: block; width: 100%; } .build-table td.row-action .status-text, .build-table td.b-action .status-text { display: inline-block; line-height: 1.3; } .row-action .status-text { color: var(--text-muted); font-size: 0.85rem; font-style: italic; } /* ---------- Auth-Box ---------- */ .form label { display: block; margin-bottom: 1rem; } .form label span { display: block; margin-bottom: 0.3rem; color: var(--text-secondary); font-size: 0.9em; } .form input, .form textarea { width: 100%; padding: 0.55rem 0.7rem; background: var(--bg-deep); color: var(--text-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; transition: border-color 0.15s ease; box-sizing: border-box; } .form textarea { /* Vernünftige Grundhöhe; respektiert das rows-Attribut, aber nie winzig. Vertikal vergrößerbar, damit Spieler längere Texte bequem schreiben. */ min-height: 8rem; line-height: 1.5; resize: vertical; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--amber); } /* Dropdowns im dunklen Theme (greift das .form input/textarea-Styling auf; appearance:none + eigener Pfeil, sonst weisser Browser-Default). */ /* .prem-laufzeit teilt sich die Gestaltung mit .form select — dieselbe Auswahlliste, nur ausserhalb eines .form-Blocks. Werte verdoppeln waere der Anfang vom Auseinanderlaufen. */ .form select, .prem-laufzeit { width: 100%; padding: 0.55rem 2.4rem 0.55rem 0.7rem; background-color: var(--bg-deep); color: var(--text-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; cursor: pointer; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.85rem center; transition: border-color 0.15s ease; } .form select:focus { outline: none; border-color: var(--amber); } .form select option { background: var(--bg-elevated, #141c34); color: var(--text-strong); } /* ---------- Footer ---------- */ .footer { grid-area: footer; text-align: center; color: var(--text-muted); padding: 1.2rem; border-top: 1px solid var(--border-soft); font-size: 0.8rem; } /* Im Gast-Modus: solider Hintergrund (kein Glas), damit rechts neben dem reservierten Scrollbar-Streifen keine helle Kante entsteht. */ .app.app-guest .footer { background: var(--bg-deep, #070b18); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; width: 100%; box-sizing: border-box; } /* ---------- "Bald™"-Seiten (Platzhalter) ---------- */ .soon-page { max-width: 42rem; margin: 2rem auto; text-align: center; } .soon-hero { padding: 3rem 2rem 1.5rem; } .soon-icon { font-size: 4.5rem; line-height: 1; margin-bottom: 0.8rem; filter: grayscale(0.3); opacity: 0.85; } .soon-hero h1 { font-size: 2rem; margin: 0; color: var(--text-strong); display: inline-flex; align-items: center; gap: 0.7rem; } .soon-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 12px; line-height: 1; border: 1px solid currentColor; background: rgba(0, 0, 0, 0.25); } .soon-page-planet .soon-tag, .soon-page-planet .soon-icon { color: var(--accent); } .soon-page-world .soon-tag, .soon-page-world .soon-icon { color: var(--tech); } .soon-page-comms .soon-tag, .soon-page-comms .soon-icon { color: #b07ed8; } .soon-page-overview .soon-tag, .soon-page-overview .soon-icon { color: #d8c267; } .soon-body { background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.8rem 2rem; margin: 1.5rem 0; } .soon-body .lead { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.8rem; line-height: 1.55; } .soon-body .muted { color: var(--text-muted); font-size: 0.88rem; margin: 0; } .soon-footer { margin-top: 1rem; } /* ============================================================ Planet-Hero (SVG + Steckbrief) ============================================================ */ /* ============================================================ Planet-Übersicht: zweispaltig (Planet-Karte | Queue-Spalte) ============================================================ */ /* Schleier zwischen Planetenbild und Text. Ohne ihn faellt der Kontrast der gedaempften Beschriftung unter das Lesbare — mit ihm traegt die Karte auch das hellste der zehn Bilder. */ /* Der Steckbrief liegt ueber Bild und Schleier. */ /* Gerendertes Planetenbild als Hintergrund der ganzen Karte. Der Text liegt darueber auf einem Schleier — nachgerechnet, nicht geschaetzt: bei 38 % Bilddeckung und diesem Verlauf liegt weisser Text ueber ALLEN zehn Planetenbildern bei 16,7-18,3:1. Als gut gilt ab 7:1. Kein Pulsieren mehr: grossflaechig wirkt es unruhig. */ @keyframes planet-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } /* Steckbrief rechts */ .planet-zone-tag:not(.planet-hero *) { /* Kombinierter Pill: Zone · Status (einheitlich blau) */ display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.32rem 0.78rem; border-radius: 8px; background: rgba(255, 154, 60, 0.13); color: var(--accent); border: 1px solid rgba(255, 154, 60, 0.32); margin-bottom: 1.2rem; } /* Der Zonenname ist der Ausloeser fuer das Klimazonen-Modal: ein Knopf, der wie Text aussieht. NICHT .info-icon — das ist ein 1,4rem-Kreis mit eigenem Rahmen und 0,9rem Glyphe, gedacht fuer Queue-Zeilen. In einem Pill mit 0,68rem sprengt er die Zeile und sitzt als grauer Klotz zwischen Zone und Status. Kein Unterstrich: den Hinweis traegt allein das ⓘ dahinter. Ein gepunkteter Unterstrich unter Kapitaelchen mit 0,07em Laufweite wirkt wie ein Rechtschreibfehler, nicht wie ein Verweis. */ /* Mobile-Anpassung */ /* ============================================================ Queue-Grid auf Planet-Seite ============================================================ */ /* Page-Header (für Sub-Seiten wie Gebäude/Forschung) */ /* ============================================================ Auth-Hero (Login/Register-Seiten) ============================================================ */ /* Dezent atmender Cyan-Glow — Logo wirkt lebendig, ohne abzulenken */ @keyframes voidar-logo-breathe { 0%, 100% { filter: drop-shadow(0 0 10px rgba(108, 196, 255, 0.18)); } 50% { filter: drop-shadow(0 0 22px rgba(108, 196, 255, 0.45)); } } @keyframes voidar-logo-spin { /* Sehr langsamer Spin damit nur der orbitierende Punkt sich sichtbar bewegt – wirkt subtil und meditativ */ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================ Mini-Queues auf Planet-Seite (b+) ============================================================ */ /* ============================================================ Info-Icon (kleine ℹ️-Buttons in Listen und Queues) ============================================================ */ .info-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 0.9rem; width: 1.4rem; height: 1.4rem; padding: 0; margin-left: 0.3rem; border-radius: 50%; cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; vertical-align: middle; outline: none; /* Standard-Browser-Ring weg */ -webkit-tap-highlight-color: transparent; } .info-icon:hover { opacity: 1; background: rgba(108, 196, 255, 0.12); border-color: var(--tech-dim); transform: scale(1.1); } .info-icon:focus-visible { /* Eigener, sanfter Fokus-Ring (nur bei Tastatur-Fokus, nicht Maus) */ opacity: 1; background: rgba(108, 196, 255, 0.12); border-color: var(--tech); box-shadow: 0 0 0 2px rgba(108, 196, 255, 0.25); } .info-icon::-moz-focus-inner { border: 0; /* Firefox-Spezial-Rahmen weg */ } /* ============================================================ Info-Modal: Backdrop + Card ============================================================ */ .info-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 7, 18, 0.78); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 2rem; animation: modal-fade-in 0.18s ease-out; } .info-modal-backdrop[hidden] { display: none !important; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } .info-modal-host { width: 100%; max-width: 640px; max-height: calc(100vh - 4rem); overflow-y: auto; } @keyframes modal-card-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Body bekommt eine Klasse während ein Modal offen ist, falls wir Scroll auf der Hauptseite verhindern wollen. fm-open = Flottenkarte. */ body.modal-open, body.fm-open { overflow: hidden; } /* ---------- Modal Header ---------- */ /* ---------- Modal Body Sections ---------- */ .req-ok { color: var(--ok, #79d27e); } .req-missing { color: var(--warn, #e3a14d); } .info-meta-line { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 0.55rem 1rem; margin-bottom: 1rem; color: var(--text-secondary); font-size: 0.9rem; } /* ---------- Stufen und Einfluss waehlen (ueber der Stufen-Tabelle) ---------- Feste Gruppen (Stufen / Gebaeude / Forschung), Bezeichnung ueber dem Feld, Knoepfe rechts untereinander. Auf schmalen Schirmen stehen die Gruppen untereinander. */ /* Gebaeude und Forschung brauchen fuer Stufenwahl und Punkte-Spalte mehr Breite; die uebrigen Fenster (Schiffe, Profil ...) bleiben bei 640 px. */ /* ---------- Stufen-Tabelle ---------- */ /* Info-Modal-Payloads sind versteckte Daten-Container, niemals sichtbar */ /* ============================================================ Ressourcen-Icons (SVG, monochrom via currentColor) ============================================================ */ .res-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; line-height: 1; filter: drop-shadow(0 0 4px currentColor); } .res-icon-voidanium { color: var(--res-voidanium); } .res-icon-singularit { color: var(--res-singularit); } .res-icon-aether { color: var(--res-aether); } .res-icon-energy { color: var(--res-energy); } /* ============================================================ Cost-Block (einheitliche Kosten-Darstellung mit Icons + Tooltips) ============================================================ */ /* Wenn nicht leistbar: Wert rot färben (nicht das Icon, sonst wirkt's verwirrend) */ /* In Info-Modal-Tabelle dichter packen */ /* ============================================================ Voidar-Tooltip (selbstgebaut, schick im Theme-Stil) ============================================================ */ .voidar-tooltip { position: absolute; top: 0; left: 0; z-index: 2000; padding: 0.4rem 0.7rem; background: rgba(10, 16, 28, 0.96); color: var(--text-primary); border: 1px solid var(--tech-dim); border-radius: 6px; font-size: 0.8rem; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 12px rgba(108, 196, 255, 0.15); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; max-width: 260px; white-space: normal; text-align: center; } .voidar-tooltip.is-visible { opacity: 1; transform: translateY(0); } /* Kleines Pfeil-Dreieck nach unten (zeigt aufs Element) */ .voidar-tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--tech-dim); } .voidar-tooltip.flip-below::after { bottom: auto; top: -5px; border-top: none; border-bottom: 5px solid var(--tech-dim); } /* ============================================================ Energieverbrauch in Info-Modal: Icon klein vor der Zahl ============================================================ */ /* ============================================================ Tech-Tree ============================================================ */ /* Statistik-Strip oben */ /* Filter+Sort-Leiste */ /* Karten-Grid */ /* Einzel-Karte */ /* Card-Header */ /* Typ-Badges (Gebäude/Forschung/Schiff) */ /* Verteidigung und Raketen hatten keinen eigenen Ring — die Marken fielen auf die farblose Grundform zurueck. Die Farben sind nicht neu erfunden: Lila ist im ganzen Spiel die Farbe der Verteidigung (voidar-icon-defense), und Raketen tragen das Rot, das auf ihrer Seite schon am Abschuss-Knopf haengt (btn-danger). */ /* Level-Badge */ /* Beschreibung */ /* Voraussetzungs-Block */ /* Empty State */ /* Mobile / schmaler Schirm */ /* ============================================================ Audit-Log (aufpoliert: Karten statt Tabelle, Diff, Delta-Chips) ============================================================ */ .audit-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; } .audit-entry { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; transition: border-color 0.15s ease; } .audit-entry:hover { border-color: var(--tech-dim); } /* Head: Action-Badge + Zeit */ .audit-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .audit-head-left { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .audit-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1.3; } .audit-action-icon { font-size: 0.9rem; } .audit-action-edit { background: rgba(111, 220, 140, 0.12); color: var(--tech); border: 1px solid var(--tech-dim); } .audit-action-warn { background: rgba(255, 138, 61, 0.12); color: var(--accent); border: 1px solid var(--accent-dim, var(--accent)); } .audit-action-danger { background: rgba(255, 100, 100, 0.12); color: var(--danger); border: 1px solid rgba(255, 100, 100, 0.4); } .audit-action-system { background: rgba(122, 138, 154, 0.12); color: var(--text-muted); border: 1px solid rgba(122, 138, 154, 0.35); } .audit-action-owner { background: rgba(230, 192, 98, 0.12); color: #e6c062; border: 1px solid rgba(230, 192, 98, 0.45); } .audit-action-key { font-family: 'Consolas', monospace; font-size: 0.78rem; color: var(--text-muted); opacity: 0.6; cursor: help; } .audit-time { font-size: 0.85rem; color: var(--text-secondary); cursor: help; font-variant-numeric: tabular-nums; } .audit-time-ago { font-size: 0.75rem; } /* Personen-Reihe: Akteur → Ziel */ .audit-people { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .audit-person { display: flex; align-items: center; gap: 0.5rem; } .audit-person-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .audit-arrow { color: var(--text-muted); opacity: 0.5; font-size: 1.1rem; } /* Spieler-Chip */ .audit-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem 0.25rem 0.3rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; color: var(--text-primary); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .audit-chip-link { cursor: pointer; } .audit-chip-link:hover { border-color: var(--tech-dim); background: rgba(111, 220, 140, 0.06); } .audit-chip-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--tech), var(--accent)); color: var(--bg-deep); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; flex-shrink: 0; } .audit-chip-system .audit-chip-avatar { background: var(--text-muted); color: var(--bg-deep); } .audit-chip-name { font-weight: 500; } .audit-chip-id { color: var(--text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; } /* Grund / Reason */ .audit-reason { font-size: 0.88rem; color: var(--text-secondary); padding: 0.4rem 0.7rem; background: rgba(111, 220, 140, 0.04); border-left: 3px solid var(--tech-dim); border-radius: 4px; } .audit-reason-label { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.4rem; } .audit-reason-text { font-style: italic; } /* Delta-Block (prominente Anzeige der wesentlichen Änderungen) */ .audit-delta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .audit-delta-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem; } .audit-delta-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-variant-numeric: tabular-nums; border: 1px solid var(--border); background: var(--bg-deep); } .audit-delta-chip.is-positive { color: #79d27e; border-color: rgba(121, 210, 126, 0.4); background: rgba(121, 210, 126, 0.08); } .audit-delta-chip.is-negative { color: #ff7474; border-color: rgba(255, 100, 100, 0.4); background: rgba(255, 100, 100, 0.08); } .audit-delta-value { font-weight: 600; } .audit-delta-key { opacity: 0.85; font-size: 0.8rem; } /* Vollständiger Diff (collapsed) */ .audit-diff { margin-top: 0.3rem; } .audit-diff > summary { cursor: pointer; padding: 0.4rem 0.7rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); user-select: none; transition: border-color 0.15s ease; } .audit-diff > summary::-webkit-details-marker { display: none; } .audit-diff > summary::before { content: '▶'; margin-right: 0.5rem; font-size: 0.7rem; transition: transform 0.15s ease; display: inline-block; color: var(--text-muted); } .audit-diff[open] > summary::before { transform: rotate(90deg); } .audit-diff > summary:hover { border-color: var(--tech-dim); } .audit-diff-summary-label { flex: 1; } .audit-diff-summary-count { font-size: 0.78rem; color: var(--text-muted); font-style: italic; } .audit-diff-table { width: 100%; margin-top: 0.7rem; border-collapse: collapse; font-size: 0.85rem; } .audit-diff-table th, .audit-diff-table td { padding: 0.4rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border-soft); } .audit-diff-table th { color: var(--text-muted); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .audit-diff-table .audit-diff-key { font-weight: 500; color: var(--text-primary); } .audit-diff-table .audit-diff-before { color: #ff9b9b; } .audit-diff-table .audit-diff-before code { background: rgba(255, 100, 100, 0.07); border-radius: 3px; padding: 0.1rem 0.4rem; border: 1px solid rgba(255, 100, 100, 0.2); } .audit-diff-table .audit-diff-after { color: #aae0ac; } .audit-diff-table .audit-diff-after code { background: rgba(121, 210, 126, 0.07); border-radius: 3px; padding: 0.1rem 0.4rem; border: 1px solid rgba(121, 210, 126, 0.2); } /* Roh-JSON (für Tech-Notfälle) */ .audit-raw { margin-top: 0.7rem; } .audit-raw > summary { cursor: pointer; font-size: 0.78rem; color: var(--text-muted); padding: 0.3rem 0; } .audit-raw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.5rem; } .audit-raw-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; } .audit-raw pre { background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 6px; padding: 0.7rem; font-size: 0.75rem; color: var(--text-secondary); overflow-x: auto; margin: 0; line-height: 1.5; max-height: 22rem; } /* Empty State */ .empty-state { text-align: center; padding: 3rem 1rem; } .empty-state .empty-icon { font-size: 3rem; opacity: 0.4; margin-bottom: 0.8rem; } @media (max-width: 900px) { .audit-raw-grid { grid-template-columns: 1fr; } .audit-people { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .audit-arrow { display: none; } } /* ============================================================ Einstellungen-Seite ============================================================ */ /* Tab-Navigation */ .settings-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; padding-bottom: 0; flex-wrap: wrap; } .settings-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; border-radius: 4px 4px 0 0; } .settings-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.02); } .settings-tab.is-active { color: var(--tech); border-bottom-color: var(--tech); background: rgba(111, 220, 140, 0.04); } .settings-tab-icon { font-size: 1rem; } /* Inhalt */ .settings-h2 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--text-strong); } .settings-help { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 1.2rem; line-height: 1.5; } /* Hilfetext direkt unter einem Formular: sonst klebt er am Knopf. */ .form + .settings-help { margin-top: 1rem; } /* Raketenseite: Koordinaten und Countdown wie im restlichen Spiel (.planet-coord, .queue-item .job-countdown). */ .rak-stand .coord, .rak-unterwegs .coord { font-family: 'Consolas', monospace; color: var(--tech); } .rak-unterwegs .job-countdown { color: var(--tech); font-variant-numeric: tabular-nums; font-weight: 600; } /* Profil-Header mit Avatar */ /* Feld-Liste (dl) */ .settings-fields { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0; } .settings-field { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft); align-items: center; } .settings-field:last-child { border-bottom: none; } .settings-field dt { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; } .settings-field dd { margin: 0; color: var(--text-primary); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .settings-verified { color: #79d27e; font-size: 0.78rem; padding: 0.15rem 0.5rem; background: rgba(121, 210, 126, 0.1); border: 1px solid rgba(121, 210, 126, 0.35); border-radius: 999px; cursor: help; } .settings-unverified { color: var(--accent); font-size: 0.78rem; padding: 0.15rem 0.5rem; background: rgba(255, 138, 61, 0.1); border: 1px solid var(--accent-dim, var(--accent)); border-radius: 999px; cursor: help; } /* Formular */ .settings-form { max-width: 32rem; } .settings-form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .settings-form-row label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .settings-input { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.8rem; color: var(--text-primary); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s ease; } .settings-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } /* Toggle-Liste (Anzeige-Tab) */ .settings-toggle { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--border-soft); border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .settings-toggle:hover { border-color: var(--tech-dim); background: rgba(255, 255, 255, 0.02); } .settings-toggle input[type=checkbox] { /* echte Checkbox visuell verstecken, aber zugänglich lassen */ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .settings-toggle-switch { position: relative; width: 38px; height: 22px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease; margin-top: 0.1rem; } .settings-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform 0.18s ease, background 0.15s ease; } .settings-toggle input:checked + .settings-toggle-switch { background: rgba(111, 220, 140, 0.2); border-color: var(--tech); } .settings-toggle input:checked + .settings-toggle-switch::after { transform: translateX(16px); background: var(--tech); } .settings-toggle-meta { display: flex; flex-direction: column; gap: 0.2rem; } .settings-toggle-label { font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 0.5rem; } .settings-toggle-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; } /* Stats-Grid */ .settings-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.7rem; } .settings-stat { background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 8px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; } .settings-stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .settings-stat-value { font-size: 1.6rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; } /* Globaler Effekt: Animationen reduzieren */ .vd-reduce-motion *, .vd-reduce-motion *::before, .vd-reduce-motion *::after { transition: none !important; animation: none !important; } @media (max-width: 720px) { .settings-field { grid-template-columns: 1fr; gap: 0.3rem; } } /* ============================================================ Owner-Panel — separates Layout mit Gold-Akzent ============================================================ */ /* Gold-Palette nur im Owner-Modus aktivieren */ .app-owner { --owner-gold: #e6c062; --owner-gold-dim: #8b7332; --owner-bg-tint: rgba(230, 192, 98, 0.04); --owner-bg-deep: #15110a; /* Logo gold im Owner-/Platform-Kontext (V bleibt weiß, Kern dunkel) */ --logo-glow-inner: var(--owner-gold); --logo-glow-outer: var(--owner-gold); --logo-ring: var(--owner-gold); --logo-core-stroke: var(--owner-gold); --logo-dot: var(--owner-gold); } /* ============================================================ Owner-/Platform-Layout — Sidebar-Grid (bis Schritt 5 auf Orbit/Twig). Das Spiel-Layout ist auf die Topbar umgestellt; das Owner-Panel nutzt weiter das klassische Grid + Sidebar. Diese Gerüst-Styles standen früher generisch (.app/.brand-bar/.sidebar/.side-nav) und werden hier für den Owner-Kontext erhalten, damit das Panel nutzbar bleibt. ============================================================ */ .app-owner { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "brand topbar" "sidebar main" "footer footer"; min-height: 100vh; } .app-owner .topbar-owner { grid-area: topbar; position: static; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); } .app-owner main.container { grid-area: main; max-width: none; } .footer-owner { grid-area: footer; } /* Topbar im Owner-Layout */ .topbar-owner { background: linear-gradient(180deg, #1c1610 0%, #100c07 100%); border-bottom-color: var(--owner-gold-dim); justify-content: space-between; padding: 0.7rem 1.6rem; } /* Owner-Karten und Sektionen */ .owner-card { border-color: var(--owner-gold-dim); } /* Im Owner-/Platform-Modus bekommen ALLE Karten den Gold-Rahmen — auch solche ohne explizite .owner-card-Klasse (z. B. die platform-Content-Karten). So sehen Spiel-Owner-Panel und platform-Panel einheitlich aus. */ .owner-mode .card { border-color: var(--owner-gold-dim); } .owner-card .settings-h2 { color: var(--owner-gold); } /* Owner-Footer: dezenter Gold-Ton */ .footer-owner { border-top-color: var(--owner-gold-dim); color: var(--owner-gold-dim); } /* Owner-Stats — Reuse vom tt-stats-Grid, aber mit Gold-Akzent */ /* Print-Styles für Recovery-Codes-Ausdruck */ @media print { .topbar, .subbar, .footer, .flash-zone { display: none !important; } body, .app, .app-owner { background: white !important; color: black !important; } } /* ============================================================ Werft (Schiffe bauen) ============================================================ */ /* Bauliste — leichte Anpassungen für mehr Spalten */ .ship-table th, .ship-table td { vertical-align: middle; } /* .ship-table .b-level entfaellt: Stufe-Ausrichtung kommt zentral aus der build-table Spalten-Ausrichtungs-Sektion (Werft/Verteidigung haben ohnehin keine Stufe-Spalte). Eine Quelle der Wahrheit. */ /* Schiff-/Anlagen-Namen einzeilig: sonst brechen Zwei-Wort-Namen wie "Kleiner Transporter" um (Anzahl-Spalte nimmt Platz) -> ungleich hohe Zeilen. Ein-Wort-Namen ("Kolonisationsschiff") sind ohnehin breiter, die Spalte hat also genug Platz. */ .ship-table .b-name { white-space: nowrap; } .ship-amount-col { width: 11rem; text-align: right; white-space: nowrap; } .ship-amount-input { width: 6rem; padding: 0.35rem 0.5rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: right; } .ship-amount-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } /* Kosten in Werft/Verteidigung nie umbrechen: die breite Anzahl-Spalte (11rem) quetscht sonst die Kosten-Spalte, und die 3. Ressource rutscht in eine zweite Zeile -> ungleich hohe Zeilen + scheinbar "verschobene" Trennlinien. Bei Gebaeude/Forschung kein Problem (keine Anzahl-Spalte). */ .ship-table .b-cost { white-space: nowrap; } .ship-build-form { display: inline-flex; align-items: center; gap: 0.3rem; } /* Aktiver Werft-Auftrag */ .ship-queue-active { display: flex; gap: 1rem; padding: 0.8rem; align-items: flex-start; } .ship-queue-active .qi-info { flex: 1; min-width: 0; } .ship-progress-text strong { color: var(--text-strong); font-variant-numeric: tabular-nums; } .ship-progress-eta, .ship-progress-total { font-size: 0.88rem; color: var(--text-secondary); } .ship-progress-sep { margin: 0 0.3rem; } /* Info-Modal: Schiff-Stats-Grid */ /* ---------- Mini-Queue: Werft-Variante (Planet-Seite) ---------- */ /* ============================================================ Icon-System (SVG inline, CSS-färbbar) ============================================================ */ /* * Basis: Alle Voidar-Icons nehmen die Farbe vom Eltern-Element * via currentColor. Färben funktioniert dann einfach über color: ... */ .voidar-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; color: var(--text-secondary); /* Default-Farbton */ } /* Kategorie-Farben — werden in spezifischen Kontexten überschrieben */ .voidar-icon-ship { color: var(--tech); } /* Cyan für Schiffe */ .voidar-icon-building { color: var(--text-strong); } /* Heller für Gebäude */ .voidar-icon-research { color: var(--accent); } /* Orange für Forschung */ .voidar-icon-defense { color: #c878ff; } /* Lila für Verteidigung */ /* Zustandsklassen */ .voidar-icon.icon-locked { opacity: 0.3; } .voidar-icon.icon-muted { color: var(--text-muted); } .voidar-icon.icon-strong { color: var(--text-strong); } /* Hover/Active */ .b-name:hover .voidar-icon { color: var(--tech-bright, var(--tech)); transition: color 0.15s ease; } /* Größen-Klassen (optional, wenn man nicht via width/height geht) */ .voidar-icon.icon-xs { width: 16px; height: 16px; } .voidar-icon.icon-sm { width: 24px; height: 24px; } .voidar-icon.icon-md { width: 32px; height: 32px; } .voidar-icon.icon-lg { width: 48px; height: 48px; } .voidar-icon.icon-xl { width: 96px; height: 96px; } .voidar-icon.icon-hero{ width: 128px; height: 128px; } /* Fallback-Emoji-Display: gleiches Größenverhalten */ .voidar-icon-fallback { background: transparent; color: inherit; } /* Im Info-Modal: großes Hero-Icon im Header */ /* Hero-Icon im Info-Modal-Header */ /* Mini-Queue Werft: Icon inline */ /* Werft-Liste Icon-Spalte: Icon und Name aligned */ .b-name { display: flex; align-items: center; gap: 0.5rem; } .b-name .b-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; } .b-name strong { flex: 1; } /* Tech-Tree-Cards: Icon inline mit Name */ /* ---------- Owner: Update einspielen ---------- */ .deploy-form { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; } .deploy-file input[type="file"] { color: var(--text-secondary); font-size: 0.9rem; } .deploy-note { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(108, 196, 255, 0.08); border: 1px solid rgba(108, 196, 255, 0.25); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text-secondary); } .deploy-table { margin-top: 1rem; } .deploy-table .deploy-target { font-family: monospace; font-size: 0.85rem; color: var(--amber); } .deploy-table .deploy-path { font-family: monospace; font-size: 0.85rem; color: var(--text-primary); } .deploy-table .deploy-size { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.85rem; } .deploy-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .deploy-update { background: rgba(255, 181, 71, 0.15); color: var(--warn); border: 1px solid rgba(255, 181, 71, 0.3); } .deploy-new { background: rgba(93, 213, 138, 0.15); color: var(--success); border: 1px solid rgba(93, 213, 138, 0.3); } .deploy-actions { margin-top: 1.2rem; display: flex; gap: 0.8rem; align-items: center; } /* ---------- Planeten-Umschalter (Dropdown) ---------- */ .planet-switcher { position: relative; display: inline-block; margin-right: 1.2rem; } /* Zusammengeklappter Button */ .planet-switcher .ps-toggle { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 0.35rem 0.7rem; color: var(--text-primary); cursor: pointer; font-size: 0.88rem; transition: border-color 0.15s ease, background 0.15s ease; min-width: 180px; } .planet-switcher .ps-toggle:hover { border-color: rgba(108, 196, 255, 0.4); background: var(--glass-bg-strong); } .planet-switcher .ps-current { display: flex; align-items: baseline; gap: 0.4rem; flex: 1; min-width: 0; } .planet-switcher .ps-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .planet-switcher .ps-coords { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .planet-switcher .ps-caret { color: var(--text-muted); font-size: 0.7rem; transition: transform 0.18s ease; } .planet-switcher .ps-toggle[aria-expanded="true"] .ps-caret { transform: rotate(180deg); } /* ============================================================ FLOTTEN-SENDE-UI (Phase 7.1) ============================================================ */ /* Generelle kleine Hilfsklassen (waren noch nicht da) */ .small { font-size: 0.85em; } .num { font-variant-numeric: tabular-nums; text-align: right; } .form-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 1.5rem; } /* Flotten-Formular */ /* Tabellen mit Schiff-/Cargo-Auswahl */ /* Koordinaten-Eingabe */ /* Mond als Ziel ist bei Angriff und Spionage gesperrt - ausgegraut statt versteckt, damit sichtbar bleibt, dass es die Wahl grundsaetzlich gibt. */ /* Speed-Slider */ .speed-slider { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0; } .speed-slider input[type="range"] { flex: 1; max-width: 24rem; accent-color: var(--accent, #ff9a3c); } .speed-slider output { min-width: 4rem; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } /* Vorschau-Bereich */ /* ============================================================ GALAXIE-AKTIONS-DROPDOWN (Phase 7.1.3 Refinement) ============================================================ */ /* "Anzeigen" ist ein POST-Form-Button (Planetenwechsel via switch_planet, CSRF-geschuetzt) statt eines GET-Links - soll aber wie die -Eintraege im Dropdown aussehen. */ /* ============================================================ MINI-FLEETS-KARTE (Phase 7.1.4) ============================================================ */ /* Leere fleets-Wrap nimmt keinen Platz — OGame-Style "nichts wenn nichts". :has(.mini-queue) trifft nur wenn die Mini-Queue-Karte tatsächlich gerendert wurde (d.h. mind. 1 Flotte unterwegs). Andernfalls wird der Wrap visuell ausgeblendet, obwohl er als Mount-Point im DOM bleibt. */ /* ============================================================ FLOTTEN-KARTE OBEN (Phase 7.1.4 Refinement) ============================================================ Die Flotten-Karte sitzt OBERHALB des Planeten-Heroes — sofort sichtbar, später Mount-Point für Angriffs-Alarme. Volle Breite. */ /* Lieferungen und Flotten untereinander: Abstand wie unter der Radar-Warnung */ /* Ziel-Koordinaten neben dem Namen etwas dezenter */ /* ════════════════════════════════════════════════════════════ MOBILE LAYOUT — kompletter Block, Bottom-Tab-Bar wie App. Greift unter 900px. Auf Desktop ändert sich NICHTS. ════════════════════════════════════════════════════════════ */ /* Bottom-Tab-Bar Default: VERSTECKT (Desktop sieht sie nicht) */ .mobile-tabbar { display: none; } .mtb-more-panel { display: none; } /* ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* ===== Layout-Grundgerüst: Sidebar weg, voller Bildschirm ===== */ body { overflow-x: hidden; } body.mtb-no-scroll { overflow: hidden; } .layout, .app { display: block !important; /* statt grid mit Sidebar (Spiel UND Owner) */ grid-template-columns: none !important; grid-template-areas: none !important; } main.container { padding: 0.7rem 0.7rem 5.5rem !important; /* unten Platz für Tab-Bar */ max-width: 100% !important; } /* ===== TOPBAR kompakter ===== */ .topbar { padding: 0.5rem 0.7rem !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .topbar .brand:not(body.auth *) { flex-shrink: 0; } .topbar .brand-logo-img { height: 20px !important; width: auto !important; } /* Hauptnav (Dropdown-Gruppen) weg auf Mobile — die Bottom-Tabbar übernimmt */ .topnav { display: none !important; } /* Rechte Topbar-Gruppe weg auf Mobile — Konto, Admin/Owner-Pills, Glocke und Nachrichten stecken alle in der Bottom-Tabbar unter „Mehr". Oben bleibt das Logo. Betrifft nur das Spiel-Layout (Owner-Topbar nutzt diese Klassen nicht). */ .topbar-spacer, .topbar-bell, .topbar-icon, .topbar .acct, .topbar .pill-admin { display: none !important; } /* Planet-Switcher kompakter */ .planet-switcher { font-size: 0.85rem !important; } .planet-switcher .ps-current { padding: 0.3rem 0.55rem !important; } /* Ressourcen-Strip: 2x2-Grid statt Zeile, kleinere Schrift. Items werden in ihrer Spalte ZENTRIERT, damit das Gesamtbild ausgeglichen wirkt (egal ob die Zahl 1 oder 5 Stellen hat). */ .subbar { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.4rem !important; /* Die Kopfzeile ist hier niedriger als auf dem Desktop. */ --topbar-h: 44px; padding: 0.4rem 0.6rem !important; } /* * Eine Zeile statt 2x2: als Block waere die Leiste 160px hoch und naehme * ein Viertel des Schirms weg, sobald sie stehen bleibt. Passt die Zeile * nicht, laesst sie sich seitlich schieben, statt umzubrechen. */ .res-strip { display: flex !important; flex-wrap: nowrap !important; gap: 0.25rem !important; width: 100%; font-size: 0.78rem !important; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .res-strip::-webkit-scrollbar { display: none; } .res-strip .item { flex: 0 0 auto; } /* * Nur der Bestand, nicht die Lagergrenze: "3.689.111 / 1.600.000" ist doppelt * so breit wie noetig, und auf 390px Schirmbreite fielen dadurch drei der * fuenf Werte aus dem Bild. Die Grenze steht weiterhin im Tooltip und auf * der Planetenseite. */ .res-strip .res-sep, .res-strip .res-cap, .res-strip .energy-prod { display: none !important; } .res-strip .item { padding: 0.28rem 0.4rem !important; gap: 0.28rem !important; justify-content: center; } .res-strip .item .label { display: none; } /* Label weg, Icon reicht */ .res-strip .item .icon svg { width: 14px !important; height: 14px !important; } .res-strip .res-pair .res-cap { font-size: 0.85em; } /* ===== BOTTOM-TAB-BAR ===== */ .mobile-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(15, 19, 30, 0.97); border-top: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(0,0,0,0.35); } .mtb-item { position: relative; /* Traeger fuer den Hinweispunkt am Mehr-Knopf */ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.45rem 0.3rem; color: var(--text-muted, rgba(255,255,255,0.55)); text-decoration: none; font-size: 0.7rem; background: none; border: none; cursor: pointer; transition: color 0.15s; min-height: 48px; /* Touch-Target-Mindestgröße */ } .mtb-item:hover, .mtb-item:focus-visible { color: var(--accent, #ff9a3c); } /* * Hinweispunkt am Mehr-Knopf. Berichte, Nachrichten und Tutorial liegen * im Mehr-Panel; ohne diesen Punkt muesste man das Menue oeffnen, um zu * sehen, dass dort etwas wartet. Der dunkle Ring setzt ihn vom Symbol ab. */ .mtb-punkt { position: absolute; top: 6px; left: 50%; margin-left: 5px; width: 9px; height: 9px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px var(--bg, #0d1117); pointer-events: none; } .mtb-item.active { color: var(--accent, #ff9a3c); } .mtb-item.active .mtb-icon { transform: translateY(-1px); } .mtb-icon { font-size: 1.3rem; line-height: 1; } .mtb-label { font-weight: 500; letter-spacing: 0.02em; } /* ===== MEHR-PANEL (Bottom Sheet) ===== */ .mtb-more-panel { display: block; position: fixed; inset: 0; /* Über dem Chat-Widget (#voidar-chat, z-index 900): Das geöffnete Menü soll die Bubble verdecken, so wie die Verdunkelung es mit allem anderen tut. Andersherum gedacht — den Chat absenken — haengt seine Sichtbarkeit an der Hoehe der Tab-Bar, und die waechst je nach Schriftgroesse und Geraet ueber den Abstand hinaus. Dann verschwindet die Bubble ganz statt nur hier (am 20.07.2026 genau so passiert). */ z-index: 950; } .mtb-more-panel[hidden] { display: none; } .mtb-more-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.22s ease; } .mtb-more-panel.mtb-open .mtb-more-backdrop { opacity: 1; } .mtb-more-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(20, 25, 38, 0.99); border-top: 1px solid rgba(255, 154, 60, 0.18); border-radius: 14px 14px 0 0; max-height: 75vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.22s ease; padding-bottom: env(safe-area-inset-bottom); } .mtb-more-panel.mtb-open .mtb-more-sheet { transform: translateY(0); } .mtb-more-header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; background: inherit; } .mtb-more-title { font-weight: 600; font-size: 1rem; color: var(--text); } .mtb-close { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 4px; min-width: 36px; min-height: 36px; } .mtb-close:hover { background: rgba(255,255,255,0.06); color: var(--text); } .mtb-more-content { padding: 0.5rem 0; } .mtb-section { padding: 0.4rem 1rem; } .mtb-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.4rem 0 0.3rem; } .mtb-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.4rem; color: var(--text); text-decoration: none; border-radius: 6px; font-size: 0.95rem; min-height: 44px; /* Touch-Target */ } .mtb-link:hover { background: rgba(255, 154, 60, 0.08); color: var(--accent); } .mtb-link-logout { color: var(--danger, #ff6b6b); } /* ===== PLANET-ÜBERSICHT kompakt auf Mobile ===== */ /* Frueher formten diese Regeln die Kugel-Spalte. Das Bild ist jetzt die Hintergrundebene der ganzen Karte — eine Breite von 150 px wuerde sie auf eine Briefmarke in der Ecke schrumpfen. */ /* ===== FLOTTEN-KARTE oben: schon volle Breite, aber gap kleiner ===== */ /* ===== TABELLEN: horizontal scrollbar machen ===== */ .build-table { font-size: 0.85rem !important; } .build-table th, .build-table td { padding: 0.4rem 0.4rem !important; } /* Container um Tabellen scrollen lassen */ section.card:has(table) { overflow-x: auto; } /* build-table (Gebäude/Forschung/Werft/Verteidigung) auf Mobile als KARTEN statt gequetschter Tabelle: jede Zeile wird eine Karte, Werte gestapelt mit Labels, Button volle Breite unten. Sonst werden Dauer + Button abgeschnitten. */ .build-table { overflow: visible; } .build-table, .build-table tbody { display: block; width: 100%; } .build-table thead, .build-table tr:first-child:has(th) { display: none; } .build-table tr { display: block; background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 0.6rem; padding: 0.7rem 0.85rem; } .build-table td { display: flex; width: 100% !important; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.25rem 0 !important; border: none !important; text-align: left !important; } /* Label vor jeder Zelle (außer Name + Aktion) */ .build-table td.b-level::before { content: 'Stufe'; } .build-table td.b-stock::before { content: 'Bestand'; } .build-table td.b-cost::before { content: 'Kosten'; } .build-table td.b-duration::before{ content: 'Dauer'; } .build-table td.b-level::before, .build-table td.b-stock::before, .build-table td.b-cost::before, .build-table td.b-duration::before { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } /* Name oben als Karten-Titel, volle Breite, größer */ .build-table td.b-name-cell, .build-table td:first-child { border-bottom: 1px solid var(--border-soft) !important; padding-bottom: 0.5rem !important; margin-bottom: 0.3rem; } .build-table .b-name { font-size: 1rem; font-weight: 600; } /* Aktions-Spalte: Button volle Breite unten */ .build-table td.row-action, .build-table td.b-action { width: 100% !important; justify-content: stretch; padding-top: 0.5rem !important; margin-top: 0.2rem; border-top: 1px solid var(--border-soft) !important; } .build-table td.row-action .btn, .build-table td.row-action button, .build-table td.b-action .btn, .build-table td.b-action button, .build-table td.row-action .btn-primary, .build-table td.b-action .btn-primary { width: 100%; text-align: center; } /* Bau-/Forschungs-Queue auf Mobile entzerren: bei langen Gebäudenamen (z.B. "Äther-Extraktor") darf "→ Stufe X" umbrechen statt zu quetschen, und das ℹ️-Icon soll nicht mit dem ×-Abbrechen-Button kollidieren. */ .queue-item { gap: 0.5rem !important; padding: 0.6rem 0.7rem !important; } .queue-item .qi-name { flex-wrap: wrap; row-gap: 0.15rem; } .queue-item .qi-name strong { flex: 0 1 auto; min-width: 0; word-break: break-word; } .queue-item .qi-action { align-self: flex-start; } /* ===== FORMULARE: Buttons groß, Inputs lesbar ===== */ button, .btn, input[type="submit"], .btn-primary, .btn-ghost, .btn-tech, .btn-danger { min-height: 42px; /* Touch-tauglich */ } /* Link-Buttons (a) zentrieren ihren Text bei erzwungener Höhe nicht von selbst */ a.btn, a.btn-primary, a.btn-ghost, a.btn-tech, a.btn-danger { display: inline-flex; align-items: center; justify-content: center; } input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea { font-size: 16px !important; /* iOS zoom-Verhinderung — auch für Android sicher */ } /* ===== FOOTER weg auf Mobile (Tab-Bar nimmt den Platz) ===== */ .footer { display: none; } /* ===== Owner-Topbar: "Zurück zum Spiel"-Link auf Mobile verstecken (ist in der Bottom-Bar als "← Spiel" enthalten). Außerdem Topbar-Layout korrigieren, damit der Warnhinweis nicht vom Link überdeckt wird. ===== */ .topbar-owner .user-nav { display: none !important; } /* ===== GALAXIE-TABELLE → KARTEN-LAYOUT auf Mobile ===== Die Tabelle wird per CSS in Karten umgewandelt. Kein Template-Umbau nötig — Spalten werden mit data-Pseudo-Labels angereichert. */ /* Leere Slots dezenter, aber LESBAR (nicht ausgegraut, nur subtil) */ /* Position als kleines Pill oben links */ /* Bei leeren Slots: Pos-Pill noch dezenter */ /* Planet bekommt mehr Gewicht */ /* Leerer Slot: dezent, aber gut lesbar (eine Zeile mit der Pos) */ /* Besitzer mit Label davor */ /* Status auf eigene Zeile */ /* Aktiv und offline: kein Symbol, also keine leere Zeile. !important, weil die Karten-Ansicht alle Zellen mit display:block !important setzt. */ /* Aktionen: kompakter Button rechtsbündig, NICHT volle Breite */ /* Galaxie-Navigation oben (G/S-Auswahl): kompakter */ /* ===== FLOTTE-SENDEN-FORMULAR auf Mobile ===== Das 5-Schritte-Formular ist auf Mobile noch quetschig. Hier alles etwas großzügiger machen, Schritte trennen, Inputs touch-tauglich. Echte Klassen aus templates/fleet_send.php: .fleet-form — das ganze Formular .fleet-ship-table — Schiffe-Auswahl .fleet-cargo-table — Ressourcen laden .coord-input — Ziel-Koordinaten (drei Inputs) .speed-slider — Geschwindigkeits-Slider .ship-count-input — Schiff-Anzahl + "Alle"-Button .preview-grid — Vorschau-Kacheln (JS-gerendert) .preview-cell — einzelne Kachel */ /* H2-Schritt-Header etwas größer und mit Abstand */ /* Schiffe-/Cargo-Tabelle: Cells großzügiger */ /* Schiff-/Cargo-Input: Inputs touch-tauglich, "Alle"-Button daneben */ /* Ziel-Koordinaten: 3 gleichmäßige Inputs nebeneinander */ /* Quick-Pick-Buttons (eigene Planeten) — als Wrap-Reihe */ .js-prefill-target { margin: 0.2rem 0.3rem 0.2rem 0; min-height: 36px; padding: 0.4rem 0.7rem !important; } /* Geschwindigkeits-Slider Touch-tauglich */ .speed-slider input[type="range"] { height: 32px; width: 100%; } /* Vorschau-Kacheln auf Mobile: 2 Spalten statt 4 */ /* Send/Abbruch — Buttons groß und untereinander */ /* ===== Kleinere Sachen ===== Karten-Innenabstand und Überschriften am Handy regelt seit dem Redesign leitstand.css (Entwurf A); die pauschalen !important-Regeln sind entfallen. */ } /* Ende @media max-width: 900px */ /* ─────────────────────────────────────────────────────────── */ /* Sehr kleine Geräte: zusätzliche Anpassungen */ @media (max-width: 500px) { .res-strip { font-size: 0.75rem !important; } .mtb-label { font-size: 0.65rem; } .mtb-icon { font-size: 1.2rem; } /* Owner-Tab-Bar hat 6 Items (eines mehr als Spiel) — minimal kompakter damit auf 360px-Screens nichts überlappt. */ .mobile-tabbar-owner .mtb-item { padding: 0.45rem 0.2rem; } .mobile-tabbar-owner .mtb-label { font-size: 0.62rem; } } /* ════════════════════════════════════════════════════════════ ENDE MOBILE-BLOCK ════════════════════════════════════════════════════════════ */ /* ============================================================ DEPLOY: Warnung bei neuen Migrationen ============================================================ */ .deploy-mig-warn { background: rgba(255, 165, 0, 0.08); border: 1px solid rgba(255, 165, 0, 0.35); border-left: 4px solid #ffa500; border-radius: 6px; padding: 0.9rem 1.1rem; margin: 1rem 0; color: var(--text); } .deploy-mig-warn-head { font-size: 1.02rem; margin-bottom: 0.5rem; color: #ffb84d; } .deploy-mig-warn p { margin: 0.5rem 0; line-height: 1.45; } .deploy-mig-warn ul.deploy-mig-list { margin: 0.4rem 0 0.6rem 1.2rem; padding: 0; } .deploy-mig-warn ul.deploy-mig-list li { margin: 0.2rem 0; } .deploy-mig-warn code { background: rgba(255,255,255,0.06); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.92em; color: #ffd089; } .deploy-mig-warn a { color: var(--accent, #ff9a3c); font-weight: 600; } .deploy-mig-warn .btn-primary { display: inline-block; margin-top: 0.3rem; } /* Der orange Button darf NICHT die orange Link-Farbe des Warn-Blocks erben (sonst oranger Text auf orangem Button = unlesbar). Dunkle Schrift erzwingen. */ .deploy-mig-warn a.btn-primary, .deploy-mig-warn a.btn-primary:hover { color: #1a0e00; } /* ============================================================ FLOTTEN-SENDE-FORMULAR: Mission-Selektor ============================================================ */ /* Die