/* ─────────────────────────────────────────────────────────────
UI v3.1 — Stage-Scaling System
Reference: 1280×720px
───────────────────────────────────────────────────────────── */
/* NEW: Viewport-Wrapper — füllt ganzen Bildschirm */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #030508;
}
/* Fix BH1 (2026-08-18): globaler Farbschutz fuer ALLE Canvas-Elemente. Fund aus Fix BG1 —
Chromiums browserseitige automatische Farbanpassung (dark-mode-nahe Heuristik) veraendert
NUR Canvas-Pixel beim finalen Zusammensetzen des Bildes, unabhaengig vom bereits
vorhandenen , das nur DOM-/CSS-Inhalt
schuetzt. Damals nur am Ladering-Canvas als Inline-Style behoben (dort MUSS es so frueh
gesetzt sein, dass nur ein Inline-Style vor dem ersten Frame zuverlaessig wirkt — bleibt
dort zusaetzlich bestehen). Diese Regel ist der Schutz fuer JEDES ANDERE Canvas — auch
zur Laufzeit per document.createElement('canvas') erzeugte (Wuerfel-Textur, Karten-Canvas
in game-core.js) sind davon erfasst, weil die Regel schon in der CSSOM steht, bevor
irgendein Canvas-Element ueberhaupt erzeugt wird — anders als beim Ladering ist hier KEINE
fruehe Inline-Deklaration noetig. Messung (getImageData vs. Screenshot) am sichtbarsten
Kandidaten (#space-canvas, Lobby-Sternfeld) zeigte KEINEN messbaren Unterschied — dessen
Sterne sind reines Weiss (#ffffff, saettigungslos), fuer das eine farbtonbasierte
Anpassung wirkungslos bleibt. Die Regel steht trotzdem global (vorsorglich, s. Bericht):
jedes kuenftige Canvas mit gesaettigten Farben (wie der Ladering) waere sonst genauso
betroffen. Jedes neue Canvas-Feature braucht diesen Schutz nicht mehr einzeln bedenken. */
canvas {
forced-color-adjust: none;
color-scheme: light;
}
/* NEW: Stage — fester 1280×720 Canvas, transform-Scaling via JS */
#sq-stage {
position: absolute;
width: 1280px;
height: 720px;
top: 0;
left: 0;
transform-origin: 0 0;
/* transform: translate(offXpx, offYpx) scale(X) — wird per JS gesetzt */
overflow: hidden;
}
/* NEW: Layer-Grundstruktur */
#layer-bg,
#layer-field,
#layer-ui,
#layer-overlays {
position: absolute;
inset: 0;
pointer-events: none; /* Layer selbst nicht klickbar */
}
/* Layer-Reihenfolge */
#layer-bg { z-index: 0; }
#layer-field { z-index: 10; }
#layer-ui { z-index: 20; pointer-events: none; } /* Kinder erben pointer-events */
#layer-overlays { z-index: 30; }
/* NEW: Layer-UI Kinder bekommen pointer-events zurück */
#layer-ui > * { pointer-events: auto; }
#layer-overlays > * { pointer-events: auto; }
/* FIX: layer-field Kinder klickbar — Screens (Lobby, Vanguard, Overview, Combat) liegen darin (Session 1.4c) */
#layer-field { pointer-events: auto; }
/* NEW: Background-Layer — Space + Sterne */
#layer-bg {
background:
radial-gradient(ellipse at 20% 50%, rgba(10,20,60,0.6) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(5,10,40,0.5) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(20,5,40,0.4) 0%, transparent 40%),
transparent; /* FIX: durchscheinender Stage damit #game-bg sichtbar wird (Session 1.4d) */
}
/*
* Star Squadrons — game-v3.css
* Autor: TedShino | Stand: 2026-05-01
* Basis: 1920x1080px Scale-to-Fit System
* Farbschema: #070c14 Basis | #33cccc Cyan | #f0a000 Gold | #0d1018 Panel
*
* NICHT mit game-v2.css mischen.
* Laeuft ausschliesslich auf /playtest (play-v3.ejs).
*/
/* ═══════════════════════════════════════════════════
1. DESIGN TOKENS (CSS Custom Properties)
Identisch zu game-v2.css :root — alle JS-Dateien
referenzieren diese Variablen direkt.
═══════════════════════════════════════════════════ */
/* NEW: Vollstaendige Design-Tokens fuer game-v3.css (2026-05-01) */
:root {
/* FIX AU1 (2026-08-18): sichere Bereiche (Notch/Kamera-Aussparung, Gestenleiste) als
px-Custom-Properties bereitstellen — layout-engine.js liest sie per getComputedStyle()
aus (env() selbst ist in JS nicht direkt auslesbar) und schiebt die Buehne im
unskalierten translate()-Anteil davon weg (s. layout-engine.js FIX-AU1-Kommentar).
Fallback 0px auf Geraeten ohne Notch/env()-Support. */
--sq-safe-top: env(safe-area-inset-top, 0px);
--sq-safe-right: env(safe-area-inset-right, 0px);
--sq-safe-bottom: env(safe-area-inset-bottom, 0px);
--sq-safe-left: env(safe-area-inset-left, 0px);
/* Backgrounds */
--bg-void: #030508;
--bg-deep: #07090f;
--bg-panel: #0d1018;
--bg-card: #111520;
--bg-hover: #161b28;
--bg-surface: #1a2035;
/* Faction colors — VS (Voidstalker) */
--vs: #e02020;
--vs-glow: #e0202060;
--vs-dim: #7a0f0f;
/* NEW: --vb alias fuer VS (historischer Name Voidbringer, in game-combat.js + game-core.js) */
--vb: #e02020;
--vb-glow: #e0202060;
--vb-dim: #7a0f0f;
/* Faction colors — UED */
--ued: #00c050;
--ued-glow: #00c05060;
--ued-dim: #005525;
/* Accent */
--gold: #f0a000;
--gold-glow: #f0a00060;
--gold-dim: #7a5000;
/* HP layer */
--hp-shield: #4090ff;
--hp-armor: #e0a020;
--hp-hull: #e04040;
/* Text */
--text-primary: #e8eaf0;
--text-secondary: #8a90a8;
--text-dim: #50566a;
/* Borders */
--border-subtle: #1e2438;
--border-mid: #2a3050;
--border-bright: #3a4068;
/* Bevel */
--bevel-sm: 6px;
--bevel-md: 10px;
--bevel-lg: 16px;
--bevel-xl: 22px;
/* NEW: v3 Farb-Aliase */
--sq-cyan: #33cccc;
--sq-gold: #f0a000;
/* NEW: Responsive Sizing Tokens — identisch zu play.ejs playtest-overrides.
Werden von game-overview.js + game-combat.js via var(--sq-*) konsumiert. */
--sq-bar-h: clamp(50px, 7vh, 80px);
--sq-bar-pad: 0 clamp(8px, 1vw, 16px);
--sq-bar-fs: clamp(10px, 0.9vw, 14px);
--sq-av-size: clamp(20px, 2vw, 28px);
--sq-name-fs: clamp(9px, 0.85vw, 13px);
--sq-fac-fs: clamp(8px, 0.7vw, 12px);
--sq-fac-pad: 2px clamp(4px, 0.5vw, 8px);
--sq-stat-fs: clamp(9px, 0.85vw, 13px);
--sq-stat-mr: clamp(6px, 1vw, 14px);
--sq-sp-fs: clamp(11px, 1vw, 16px);
--sq-btn-size: clamp(22px, 2.2vw, 32px);
--sq-btn-fs: clamp(10px, 0.9vw, 14px);
--sq-btn-gap: clamp(4px, 0.5vw, 8px);
--sq-hud-l: clamp(4px, 0.5vw, 10px);
--sq-hud-w: clamp(160px, 18vw, 380px);
--sq-hud-hd-pad: clamp(4px, 0.6vh, 10px) clamp(6px, 0.8vw, 12px);
--sq-hud-hd-fs: clamp(8px, 0.75vw, 12px);
--sq-hud-bc-pad: clamp(3px, 0.5vh, 8px) clamp(6px, 0.8vw, 12px);
--sq-hud-bc-fs: clamp(8px, 0.75vw, 12px);
--sq-hud-log-pad: clamp(3px, 0.5vh, 8px) clamp(6px, 0.8vw, 12px);
--sq-hud-log-fs: clamp(8px, 0.75vw, 12px);
--sq-board-gap: clamp(2px, 0.4vh, 6px);
--sq-board-pad: clamp(2px, 0.3vw, 6px);
--sq-act-r: clamp(4px, 0.5vw, 10px);
--sq-act-w: clamp(110px, 14vw, 280px);
--sq-act-pad: clamp(4px, 0.5vw, 10px);
--sq-act-gap: clamp(4px, 0.5vh, 8px);
--sq-act-lbl-fs: clamp(7px, 0.6vw, 10px);
--sq-act-btn-pad: clamp(4px, 0.6vh, 10px);
--sq-act-btn-fs: clamp(8px, 0.7vw, 11px);
--sq-ti-pad: clamp(3px, 0.4vh, 6px) clamp(4px, 0.5vw, 10px);
--sq-ti-fs: clamp(8px, 0.7vw, 11px);
--sq-dr-size: clamp(70px, 7vw, 110px);
--sq-dr-mar: clamp(2px, 0.3vh, 6px);
--sq-dr-num-fs: clamp(24px, 2.5vw, 40px);
--sq-dr-lbl-fs: clamp(8px, 0.8vw, 14px);
--sq-cb-w: clamp(44px, 4.5vw, 66px);
--sq-cb-h: clamp(58px, 7vh, 88px);
--sq-cb-ml: clamp(-6px, -0.4vw, -2px);
--sq-fz-h: clamp(50px, 7vh, 80px);
--sq-fz-gap: clamp(3px, 0.4vw, 8px);
--sq-fz-lbl-fs: clamp(6px, 0.6vw, 10px);
--sq-ship-sz: clamp(32px, 3vw, 50px);
--sq-ship-h: clamp(44px, 4.2vh, 68px);
--sq-ship-fs: clamp(5px, 0.5vw, 8px);
--sq-loc-gap: clamp(3px, 0.4vw, 8px);
--sq-loc-rad: clamp(4px, 0.4vw, 8px);
--sq-loc-hd-pad: clamp(2px, 0.3vh, 6px) clamp(4px, 0.5vw, 10px);
--sq-loc-nm-fs: clamp(8px, 0.7vw, 11px);
--sq-loc-sp-fs: clamp(9px, 0.85vw, 14px);
--sq-loc-ef-fs: clamp(7px, 0.6vw, 10px);
--sq-loc-ef-pad: 1px clamp(3px, 0.4vw, 8px);
--sq-loc-st-fs: clamp(8px, 0.7vw, 12px);
--sq-loc-st-pad: clamp(1px, 0.2vh, 4px) clamp(6px, 0.8vw, 14px);
--sq-hand-gap: clamp(2px, 0.3vw, 6px);
--sq-hand-pad: 0 clamp(10px, 1.5vw, 24px);
--sq-card-w: clamp(38px, 4vw, 60px);
--sq-card-h: clamp(52px, 6vh, 82px);
--sq-card-nm-fs: clamp(6px, 0.5vw, 9px);
--sq-card-cost-fs: clamp(7px, 0.6vw, 11px);
--sq-card-lift: clamp(-16px, -1.2vh, -8px);
--sq-gy-w: clamp(24px, 2.2vw, 36px);
--sq-gy-en-top: clamp(30px, 4vh, 60px);
--sq-gy-my-bot: clamp(30px, 4vh, 60px);
--sq-gy-en-r: calc(-1 * clamp(30px, 3vw, 46px));
--sq-gy-sz: clamp(36px, 3.5vw, 56px);
--sq-gy-h: clamp(36px, 3.5vw, 56px);
--sq-gy-num-fs: clamp(14px, 1.3vw, 22px);
--sq-gy-fs: clamp(10px, 0.9vw, 16px);
/* Ship card sizes — Gross / Mittel / Klein */
--sq-card-l-w: clamp(150px, 14vw, 200px);
--sq-card-l-h: clamp(210px, 19.6vw, 280px);
--sq-card-m-w: clamp(75px, 7vw, 105px);
--sq-card-m-h: clamp(105px, 9.8vw, 147px);
--sq-card-s-w: clamp(45px, 4.5vw, 65px);
--sq-card-s-h: clamp(63px, 6.3vw, 91px);
}
/* NEW: Mobile Landscape — kompaktere Tokens */
@media (max-height: 499px) and (max-width: 1023px) and (orientation: landscape) {
:root {
--sq-bar-h: 34px;
--sq-fz-h: 34px;
--sq-hud-w: clamp(150px, 22vw, 210px);
--sq-act-w: clamp(100px, 14vw, 150px);
}
button, [data-action] { min-height: 36px !important; min-width: 36px !important; }
}
/* ═══════════════════════════════════════════════════
2. RESET + BASIS
═══════════════════════════════════════════════════ */
/* NEW: Basis-Reset (2026-05-01) */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg-void);
font-family: 'Rajdhani', sans-serif;
color: var(--text-primary);
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }
/* NEW: Typographie-Helfer (identisch game-v2.css) */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-rajdhani { font-family: 'Rajdhani', sans-serif; }
.font-mono-game { font-family: 'Share Tech Mono', monospace; }
/* ═══════════════════════════════════════════════════
3. SCALE-TO-FIT SYSTEM
JS setzt transform dynamisch via scaleGame().
═══════════════════════════════════════════════════ */
/* NEW: Scale-to-Fit Root (2026-05-01) */
#game-scale-root {
width: 1920px;
height: 1080px;
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
overflow: hidden;
/* FIX: transparent damit #game-bg (position:fixed) durchscheint (2026-05-01) */
background: transparent;
}
/* NEW: Haupt-Container — FIX: position:absolute damit Screens korrekt im Scale-Root bleiben (2026-05-01) */
#game-root {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
/* FIX: overflow:visible damit schwebender Hauptbutton nicht abgeschnitten wird (2026-05-01) */
overflow: visible;
}
/* ═══════════════════════════════════════════════════
4. HINTERGRUND (ausserhalb Scale-Root, fixed)
═══════════════════════════════════════════════════ */
/* FIX: Weltraum-Hintergrund aus game-v2.css uebernommen — bg-space.jpg + Nebula (2026-05-01) */
#game-bg {
position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
background: url('/bg-space.jpg') center/cover no-repeat,
radial-gradient(ellipse 120% 80% at 20% 30%, #0a0d1f 0%, #030508 60%, #000 100%);
}
/* Fix BC1 (2026-08-18): Ladebildschirm-Overlay — Basisplatzierung steht bereits inline in
play-v3.ejs (kein FOUC-Risiko), hier nur der Ausblend-Uebergang. Canvas selbst bleibt bis
zum Schluss GANZ normal sichtbar/klickblockierend (pointer-events erbt von #preload-overlay,
Default auto) — erst .preload-overlay-hidden (game-loading-screen.js, nach dem
Schliess-Impuls) blendet aus und gibt Klicks frei. */
#preload-overlay {
transition: opacity .45s ease;
}
#preload-overlay.preload-overlay-hidden {
opacity: 0;
pointer-events: none;
}
/* Nebula layers */
#game-bg::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 40% at 75% 20%, rgba(100,40,200,0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 10% 70%, rgba(0,60,120,0.15) 0%, transparent 55%),
radial-gradient(ellipse 40% 30% at 90% 80%, rgba(180,20,20,0.08) 0%, transparent 50%);
animation: nebulaPulse 18s ease-in-out infinite alternate;
}
#game-bg::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 35% at 50% 50%, rgba(20,30,80,0.2) 0%, transparent 70%);
animation: nebulaPulse 24s ease-in-out infinite alternate-reverse;
}
@keyframes nebulaPulse {
0% { opacity: 0.7; filter: hue-rotate(0deg); }
50% { opacity: 1; filter: hue-rotate(15deg); }
100% { opacity: 0.8; filter: hue-rotate(-10deg); }
}
#space-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Star field – layer 1 (white) */
.stars-layer {
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 10% 15%, #ffffff88, transparent),
radial-gradient(1px 1px at 25% 42%, #ffffff66, transparent),
radial-gradient(1.5px 1.5px at 38% 8%, #ffffffaa, transparent),
radial-gradient(1px 1px at 52% 67%, #ffffff55, transparent),
radial-gradient(1px 1px at 63% 31%, #ffffff77, transparent),
radial-gradient(2px 2px at 74% 55%, #ffffffcc, transparent),
radial-gradient(1px 1px at 82% 12%, #ffffff66, transparent),
radial-gradient(1px 1px at 91% 78%, #ffffff88, transparent),
radial-gradient(1px 1px at 5% 88%, #ffffff55, transparent),
radial-gradient(1.5px 1.5px at 47% 92%, #ffffff99, transparent),
radial-gradient(1px 1px at 15% 55%, #ffffff44, transparent),
radial-gradient(1px 1px at 29% 72%, #ffffff66, transparent),
radial-gradient(1px 1px at 58% 18%, #ffffff55, transparent),
radial-gradient(2px 2px at 85% 40%, #ffffffaa, transparent),
radial-gradient(1px 1px at 70% 88%, #ffffff44, transparent),
radial-gradient(1px 1px at 43% 48%, #ffffff33, transparent),
radial-gradient(1px 1px at 95% 25%, #ffffff77, transparent),
radial-gradient(1.5px 1.5px at 20% 35%, #ffffff88, transparent),
radial-gradient(1px 1px at 67% 72%, #ffffff55, transparent),
radial-gradient(1px 1px at 33% 95%, #ffffff44, transparent);
opacity: 0.9;
pointer-events: none;
}
/* Star field – layer 2 (colored tints) */
.stars-layer-2 {
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 7% 22%, #aaccff66, transparent),
radial-gradient(1px 1px at 18% 80%, #ffaaaa44, transparent),
radial-gradient(1px 1px at 35% 60%, #aaffcc33, transparent),
radial-gradient(1.5px 1.5px at 55% 35%, #ffffaa88, transparent),
radial-gradient(1px 1px at 77% 65%, #aaaaff55, transparent),
radial-gradient(1px 1px at 88% 90%, #ffccaa44, transparent),
radial-gradient(1px 1px at 42% 25%, #ccffff33, transparent),
radial-gradient(2px 2px at 62% 85%, #ffffcc66, transparent);
opacity: 0.6;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════
FIX BU1: Leerlauf-Bewegung (Etappe 2c)
Belebt das Brett zwischen den Zuegen, ohne beim Spielen abzulenken. NUR transform/
opacity (Layout-Sicherheit — Karten-FX messen getBoundingClientRect(), s. Bericht).
Gesteuert per body-Klassen aus game-idle-motion.js:
sq-idle-on Hauptschalter (aus DB-Setting idle_motion_enabled)
sq-idle-breathe-on / sq-idle-halo-on / sq-idle-ring-on / sq-idle-stars-on /
sq-idle-shimmer-on je Baustein (aus den 5 idle_motion_*_enabled-Settings)
sq-idle-suspended FX aktiv ODER Overlay/Modal offen ODER Gameover-Screen ODER
Tab im Hintergrund — ENTFERNT die Animation komplett (kein
animation-play-state:paused — das wuerde den Transform-Wert
mitten im Zyklus einfrieren, was fuer Karten-Atmen die exakt
selbe Messverfaelschung waere, die dieser Bausteinsatz
vermeiden soll; nur ein tatsaechliches Entfernen der
animation-Deklaration setzt transform sofort synchron auf
seinen Basiswert zurueck, s. Bericht Abschnitt "Layout-
Sicherheit"/onFxActiveChange() in game-anim-combat.js).
--sq-idle-strength wird per JS gesetzt (0..2, aus DB-Setting idle_motion_strength/100).
═══════════════════════════════════════════════════ */
:root { --sq-idle-strength: 1; }
/* ── Phasen-Bucket je Karte, aus dem LETZTEN Zeichen der instanceId (Base36) —
bewusst NICHT :nth-child() (haengt von zufaelligen Nicht-Karten-Geschwistern im
jeweiligen Container ab, je nach Render-Pfad unterschiedlich, s. Bericht), sondern ein
Attribut-Selektor auf der ohnehin stabilen data-instance-id — unabhaengig von DOM-
Struktur/Geschwistern. 4 Gruppen aus je 9 Zeichen des 36er-Alphabets. */
.ship-card-v3:not(.ship-tok-combat) { --sq-idle-phase: 0; }
.ship-card-v3:not(.ship-tok-combat):is(
[data-instance-id$="0"],[data-instance-id$="1"],[data-instance-id$="2"],
[data-instance-id$="3"],[data-instance-id$="4"],[data-instance-id$="5"],
[data-instance-id$="6"],[data-instance-id$="7"],[data-instance-id$="8"]
) { --sq-idle-phase: 0; }
.ship-card-v3:not(.ship-tok-combat):is(
[data-instance-id$="9"],[data-instance-id$="a"],[data-instance-id$="b"],
[data-instance-id$="c"],[data-instance-id$="d"],[data-instance-id$="e"],
[data-instance-id$="f"],[data-instance-id$="g"],[data-instance-id$="h"]
) { --sq-idle-phase: 1; }
.ship-card-v3:not(.ship-tok-combat):is(
[data-instance-id$="i"],[data-instance-id$="j"],[data-instance-id$="k"],
[data-instance-id$="l"],[data-instance-id$="m"],[data-instance-id$="n"],
[data-instance-id$="o"],[data-instance-id$="p"],[data-instance-id$="q"]
) { --sq-idle-phase: 2; }
.ship-card-v3:not(.ship-tok-combat):is(
[data-instance-id$="r"],[data-instance-id$="s"],[data-instance-id$="t"],
[data-instance-id$="u"],[data-instance-id$="v"],[data-instance-id$="w"],
[data-instance-id$="x"],[data-instance-id$="y"],[data-instance-id$="z"]
) { --sq-idle-phase: 3; }
/* ── Baustein 1: Karten atmen — NUR ausserhalb der Kampfansicht (:not(.ship-tok-combat)).
getCombatAnchor()/playDestructionEffect() u.a. messen genau die Kampf-Token-Rects fuer
FX-Anker/Klon-Startpositionen — ein zeitgleicher Skalierungs-Transform waere dort
riskant. Auf Uebersicht-Brett/Hand/Fleetzone besteht dieses Risiko nicht (dort misst
keine FX die Karten-Rects). */
@keyframes sq-idle-breathe-kf {
0%, 100% { transform: scale(1); }
50% { transform: scale(calc(1 + var(--sq-fx-idle-breathe-scale-mult) * var(--sq-idle-strength))); }
}
body.sq-idle-on.sq-idle-breathe-on:not(.sq-idle-suspended) .ship-card-v3:not(.ship-tok-combat) {
animation: sq-idle-breathe-kf var(--sq-fx-idle-breathe-ms) ease-in-out infinite;
animation-delay: calc(var(--sq-fx-idle-breathe-ms) * -1 * (0.08 + var(--sq-idle-phase) * 0.22));
}
/* ── Baustein 2: Fraktions-Halo — weicher Schein HINTER der Karte (::before, z-index -1,
braucht position:relative auf der Karte — bereits inline gesetzt). Rot(VS)/Blau(UED),
ANDERER Takt als das Atmen (5300ms statt 7200ms — kein gemeinsamer Teiler in der Naehe,
sonst liefen beide irgendwann synchron und wirkten wieder mechanisch). */
.ship-card-v3:not(.ship-tok-combat)::before {
content: '';
position: absolute;
inset: -10px;
z-index: -1;
border-radius: 8px;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle, var(--sq-idle-halo-color, rgba(160,170,190,0.5)) 0%, transparent 72%);
}
.ship-card-v3[data-faction="VS"]::before { --sq-idle-halo-color: rgba(224,32,32,0.65); }
.ship-card-v3[data-faction="UED"]::before { --sq-idle-halo-color: rgba(40,110,240,0.65); }
@keyframes sq-idle-halo-kf {
0%, 100% { opacity: 0; }
50% { opacity: calc(var(--sq-fx-idle-halo-opacity-mult) * var(--sq-idle-strength)); }
}
body.sq-idle-on.sq-idle-halo-on:not(.sq-idle-suspended) .ship-card-v3:not(.ship-tok-combat)::before {
animation: sq-idle-halo-kf var(--sq-fx-idle-halo-ms) ease-in-out infinite;
animation-delay: calc(var(--sq-fx-idle-halo-ms) * -1 * (0.08 + var(--sq-idle-phase) * 0.22));
}
/* ── Baustein 5: Lichtschimmer — seltener, schraeger Lichtstreifen (::after, ueber der
Karte). Zyklus 17s, davon nur ein kurzes Fenster (0–7%) sichtbar (feste Prozent-
Haltepunkte — Begruendung s. FX_DURATIONS-Kommentar in game-anim-combat.js), Rest des
Zyklus unsichtbar/bewegungslos — "gelegentlich, selten". Grosser Delay-Streubereich
(fast der ganze Zyklus) sorgt zusaetzlich dafuer, dass Karten nie gleichzeitig
schimmern. Bewusst dieselbe :not(.ship-tok-combat)-Ausnahme wie Atmen/Halo — kein
Layout-Risiko (nur ::after-Transform/-Opacity, ruehrt die Karte selbst nicht an),
aber konzeptionell bleibt "Leerlauf" auf Nicht-Kampf-Ansichten beschraenkt. */
.ship-card-v3:not(.ship-tok-combat)::after {
content: '';
position: absolute;
top: 0; left: -30%;
width: 160%; height: 100%;
pointer-events: none;
z-index: 5;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.9) 50%, transparent 58%);
opacity: 0;
transform: translateX(-70%);
}
@keyframes sq-idle-shimmer-kf {
0% { transform: translateX(-70%); opacity: 0; }
2% { opacity: calc(var(--sq-fx-idle-shimmer-opacity-mult) * var(--sq-idle-strength)); }
7% { transform: translateX(70%); opacity: 0; }
100% { transform: translateX(70%); opacity: 0; }
}
body.sq-idle-on.sq-idle-shimmer-on:not(.sq-idle-suspended) .ship-card-v3:not(.ship-tok-combat)::after {
animation: sq-idle-shimmer-kf var(--sq-fx-idle-shimmer-cycle-ms) linear infinite;
animation-delay: calc(var(--sq-fx-idle-shimmer-cycle-ms) * -1 * (0.05 + var(--sq-idle-phase) * 0.23));
}
/* ── Baustein 4: Sterne driften — nutzt die BESTEHENDEN zwei Ebenen (.stars-layer/
.stars-layer-2, s.o.), animiert NUR transform:translate (nicht background-position).
#game-bg ist position:fixed;inset:0 (views/play-v3.ejs) — kein sichtbarer Rand bei der
kleinen Auslenkung hier. Unterschiedliches Tempo je Ebene = Parallax-Tiefe. */
@keyframes sq-idle-stars-drift-kf {
0% { transform: translate(0, 0); }
50% { transform: translate(calc(var(--sq-fx-idle-stars-drift-px) * var(--sq-idle-strength)), calc(var(--sq-fx-idle-stars-drift-px) * var(--sq-idle-strength) * -0.6)); }
100% { transform: translate(0, 0); }
}
@keyframes sq-idle-stars-drift2-kf {
0% { transform: translate(0, 0); }
50% { transform: translate(calc(var(--sq-fx-idle-stars-drift2-px) * var(--sq-idle-strength) * -1), calc(var(--sq-fx-idle-stars-drift2-px) * var(--sq-idle-strength) * 0.5)); }
100% { transform: translate(0, 0); }
}
body.sq-idle-on.sq-idle-stars-on:not(.sq-idle-suspended) .stars-layer {
animation: sq-idle-stars-drift-kf var(--sq-fx-idle-stars-drift-ms) ease-in-out infinite;
}
body.sq-idle-on.sq-idle-stars-on:not(.sq-idle-suspended) .stars-layer-2 {
animation: sq-idle-stars-drift2-kf var(--sq-fx-idle-stars-drift2-ms) ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════
5. SCREENS (Basis)
game-overview.js + game-combat.js ueberschreiben
display + position via screen.style.cssText.
═══════════════════════════════════════════════════ */
/* NEW: Screen Basis (2026-05-01) */
/* FIX: Screens sind absolute im #game-root — display:none/flex steuert Sichtbarkeit (2026-05-01) */
.screen {
display: none;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.screen.active {
display: flex;
flex-direction: column;
}
/* NEW: Overview + Combat füllen #game-root vollständig — JS überschreibt display via cssText */
#screen-overview,
#screen-combat {
width: 100%;
height: 100%;
}
/* ═══════════════════════════════════════════════════
6. TURN TIMER (fixed, ausserhalb Scale-Root)
═══════════════════════════════════════════════════ */
/* NEW: Turn Timer (2026-05-01) */
#turn-timer-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 1000;
background: rgba(51, 204, 204, 0.08);
align-items: stretch;
}
#turn-timer-bar {
height: 100%;
background: #33cccc;
transition: width 1s linear;
box-shadow: 0 0 8px #33cccc;
}
#turn-timer-label {
position: fixed;
top: 6px;
left: 8px;
font-size: 10px;
color: rgba(51, 204, 204, 0.55);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 1px;
z-index: 1001;
}
#turn-timer-seconds {
position: fixed;
top: 6px;
right: 8px;
font-size: 11px;
color: rgba(51, 204, 204, 0.7);
font-family: 'Share Tech Mono', monospace;
z-index: 1001;
}
/* ═══════════════════════════════════════════════════
7. LOBBY SCREEN
═══════════════════════════════════════════════════ */
/* NEW: Lobby-Layout (2026-05-01) */
#screen-lobby {
align-items: center;
justify-content: center;
position: relative;
background: transparent;
z-index: 2;
}
#lobby-ship-container {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.lobby-main {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.lobby-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 28px;
}
.lobby-logo { width: 140px; height: auto; }
.lobby-title {
font-family: 'Orbitron', sans-serif;
font-size: 24px;
font-weight: 900;
color: var(--gold); /* FIX: Gold statt Cyan — Marcel-Korrektur Session 1.4b */
letter-spacing: 4px;
text-align: center;
line-height: 1.3;
}
.version-tag {
font-size: 10px;
color: rgba(51, 204, 204, 0.28);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 2px;
margin-top: 20px;
}
/* Sprach-Schalter */
.lang-switch-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.lang-label {
font-size: 11px;
color: rgba(51, 204, 204, 0.4);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 2px;
}
.lang-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
cursor: pointer;
}
.lang-switch input { opacity: 0; width: 0; height: 0; }
.lang-slider {
position: absolute;
inset: 0;
background: rgba(51, 204, 204, 0.1);
border: 1px solid rgba(51, 204, 204, 0.25);
border-radius: 10px;
transition: background 0.2s;
}
.lang-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #33cccc;
transition: transform 0.2s;
}
.lang-switch input:checked + .lang-slider::before { transform: translateX(16px); }
/* Menü-Navigation */
.menu-container {
display: flex;
flex-direction: column;
align-items: center;
min-width: 300px;
}
/* FIX I1: .menu-level/.menu-btn/.menu-btn-primary/.menu-btn-sm/.back-btn/.menu-arrow
waren HIER dupliziert (identische Selektoren nochmal weiter unten im Sci-Fi-Lobby-
Block, der wegen späterer Cascade-Reihenfolge ohnehin gewann) — restlos entfernt,
einzige verbleibende Definition + neuer Sci-Fi-Button-Stil (Eckklammer/Energie-Kante/
Tick) steht jetzt dort. .menu-btn-quit war NICHT dupliziert, dorthin verschoben. */
.menu-row {
display: flex;
gap: 7px;
align-items: center;
width: 270px;
}
.menu-field {
width: 270px;
display: flex;
flex-direction: column;
gap: 4px;
}
.menu-label {
font-size: 9px;
color: rgba(51, 204, 204, 0.38);
letter-spacing: 2px;
font-family: 'Share Tech Mono', monospace;
}
.menu-value {
font-size: 13px;
color: #33cccc;
font-family: 'Share Tech Mono', monospace;
}
.menu-input {
background: rgba(51, 204, 204, 0.04);
border: 1px solid rgba(51, 204, 204, 0.18);
border-radius: 4px;
padding: 8px 12px;
font-size: 13px;
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
letter-spacing: 1px;
outline: none;
transition: border-color 0.15s;
}
.menu-input:focus { border-color: rgba(51, 204, 204, 0.5); }
.menu-input-sm {
padding: 7px 9px;
font-size: 12px;
text-align: center;
letter-spacing: 3px;
}
.menu-select {
background: rgba(51, 204, 204, 0.04);
border: 1px solid rgba(51, 204, 204, 0.18);
border-radius: 4px;
padding: 7px 9px;
font-size: 12px;
color: var(--text-secondary);
font-family: 'Rajdhani', sans-serif;
outline: none;
cursor: pointer;
}
.menu-status {
width: 270px;
text-align: center;
font-size: 11px;
color: rgba(51, 204, 204, 0.45);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 1px;
}
.menu-status-info {
font-size: 10px;
color: rgba(51, 204, 204, 0.3);
margin: 3px 0;
}
.menu-link {
background: none;
border: none;
font-size: 10px;
color: rgba(51, 204, 204, 0.3);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
transition: color 0.15s;
}
.menu-link:hover { color: rgba(51, 204, 204, 0.65); }
.lobby-pulse-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lobby-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(51, 204, 204, 0.65);
animation: pulse 1.4s ease infinite;
}
/* Einstellungen */
.setting-row {
display: flex;
align-items: center;
gap: 9px;
width: 270px;
}
.setting-label {
font-size: 10px;
color: rgba(51, 204, 204, 0.4);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 1px;
flex: 0 0 72px;
}
.menu-slider {
flex: 1;
height: 4px;
accent-color: #33cccc;
cursor: pointer;
}
/* Tutorial */
.tutorial-check { width: 14px; height: 14px; flex-shrink: 0; }
/* Uber */
.about-block {
text-align: center;
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 14px;
}
.about-title {
font-family: 'Orbitron', sans-serif;
font-size: 16px;
color: #33cccc;
letter-spacing: 3px;
}
.about-ver {
font-size: 11px;
color: rgba(51, 204, 204, 0.32);
font-family: 'Share Tech Mono', monospace;
letter-spacing: 2px;
}
.about-credit {
font-size: 10px;
color: rgba(200, 210, 230, 0.3);
letter-spacing: 1px;
}
.about-links {
display: flex;
gap: 14px;
justify-content: center;
margin-bottom: 6px;
}
.room-code {
font-size: 20px;
color: var(--gold);
letter-spacing: 5px;
font-family: 'Share Tech Mono', monospace;
font-weight: 600;
}
/* Faction Badge + Dot (game-core.js, game-lobby.js) */
.faction-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 3px;
font-size: 9px;
letter-spacing: 1px;
font-family: 'Share Tech Mono', monospace;
}
.faction-badge.VS { background: #2a0808; color: var(--vs); border: 1px solid var(--vs-dim); }
.faction-badge.UED { background: #003015; color: var(--ued); border: 1px solid var(--ued-dim); }
.faction-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.faction-dot.VS { background: var(--vs); box-shadow: 0 0 4px var(--vs); }
.faction-dot.UED { background: var(--ued); box-shadow: 0 0 4px var(--ued); }
/* NEW (Fix Lobby-Promo/Discord, 2026-07-17): Promo-Banner links + Discord-Button
rechts neben der Menüspalte. Position/Größe kommen vom UI-v3.1-Layout-Engine
(public/js/layout/layout-engine.js + layout-config.js, screens.lobby — dem
bestehenden Muster folgend, NICHT eigenes Flex-Layout: #lobby-main wird von
genau diesem Mechanismus bereits absolut positioniert+breitenbegrenzt, siehe
#lobby-main-Regel weiter unten). Hier nur visuelles Styling — position/left/top/
width/height setzt LayoutAnchors.applyToElement() per Inline-Style zur Laufzeit.
Beide Elemente sind standardmäßig ausgeblendet und werden NUR sichtbar, solange
#menu-main (Level 0, das Hauptmenü) aktiv ist — :has() auf #screen-lobby (gemeinsamer
Vorfahre von #lobby-main und diesen beiden Geschwister-Elementen) bindet die
Sichtbarkeit direkt an die bestehende .menu-level.active-Klasse aus game-lobby.js,
ohne dessen Navigations-Code anzufassen. Electron 43 (Steam-Shell) und alle
Chromium-basierten Browser unterstützen :has() vollständig. */
.lobby-promo-banner,
.lobby-discord-btn,
.lobby-steam-btn {
display: none;
}
#screen-lobby:has(#menu-main.active) .lobby-promo-banner {
display: block;
}
#screen-lobby:has(#menu-main.active) .lobby-discord-btn,
#screen-lobby:has(#menu-main.active) .lobby-steam-btn {
display: flex;
}
.lobby-promo-banner {
border-radius: 8px;
overflow: hidden;
cursor: pointer;
/* NEW (Fix Positionen/Transparenz, 2026-07-18): Ruhezustand so transluzent wie der
Discord-Button — der hat kein eigenes opacity:, sondern mehrere rgba()-Alphas
(Hintergrund 0.08, Rahmen 0.4, Text 0.85). 0.85 (Textfarbe, die praesenteste
Flaeche des Buttons) liegt exakt in der vom Prompt vermuteten Spanne (~0.7-0.85)
und wird hier als EIN einheitlicher opacity-Wert auf den ganzen Banner uebernommen. */
opacity: 0.85;
transition: opacity 0.2s ease, filter 0.15s ease, transform 0.15s ease;
}
.lobby-promo-banner img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
.lobby-promo-banner:hover {
opacity: 1;
filter: brightness(1.12);
transform: scale(1.02);
}
.lobby-discord-btn {
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
border: 1px solid rgba(88, 101, 242, 0.4); /* Discord-Blurple */
border-radius: 8px;
background: rgba(88, 101, 242, 0.08);
color: rgba(210, 214, 255, 0.85);
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.lobby-discord-btn:hover {
background: rgba(88, 101, 242, 0.18);
border-color: rgba(88, 101, 242, 0.8);
color: #ffffff;
box-shadow: 0 0 16px rgba(88, 101, 242, 0.5);
}
.lobby-discord-icon { flex-shrink: 0; }
/* NEW (Fix BE1, Steam-Verlinkung Lobby, 2026-08-20): 1:1 nach dem Discord-Knopf-Muster
oben, eigene Farbe (Steam-Blau statt Discord-Blurple), sonst identische Struktur. */
.lobby-steam-btn {
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
border: 1px solid rgba(102, 192, 244, 0.4); /* Steam-Blau */
border-radius: 8px;
background: rgba(102, 192, 244, 0.08);
color: rgba(200, 231, 250, 0.85);
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.lobby-steam-btn:hover {
background: rgba(102, 192, 244, 0.18);
border-color: rgba(102, 192, 244, 0.8);
color: #ffffff;
box-shadow: 0 0 16px rgba(102, 192, 244, 0.5);
}
.lobby-steam-icon { flex-shrink: 0; }
/* NEW: Portrait-Breakpoint (Layout Engine schaltet #lobby-main dort auf "stretch-both",
volle Bildschirmbreite, siehe layout-config.js screens.lobby.portrait) — kein Platz
neben der Menüspalte, deshalb hart ausgeblendet statt mit einer evtl. veralteten
Anchor-Position aus dem vorherigen Breakpoint stehen zu bleiben (die Layout Engine
setzt bei fehlendem Config-Eintrag für den aktuellen Breakpoint keine neue Position). */
@media (max-aspect-ratio: 1/1) {
.lobby-promo-banner,
.lobby-discord-btn,
.lobby-steam-btn {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════
8b. BACKBONE-HUB SCREEN (Fix CG1, Spieler-Zentrale)
═══════════════════════════════════════════════════ */
/* Umzug von Fix CD1 (Kopfband)/CC1 (Warteschlangen-Ansicht) aus der 270px-Lobby-
Menuespalte auf einen eigenen Bildschirm — Konzept B (mockups/warteschlange-hub-
konzepte.html). #bb-hub-panel wird per LayoutEngine (layout-config.js,
screens['backbone-hub']) gesetzt — dieselbe Technik wie #vanguard-panel/
#gameover-panel, aber seit CJ1 mit echten Raendern (margins) statt 0/0/0/0.
── Fix CJ1 (2026-08-20, reine Gestaltungsrunde) ─────────────────────────────────
Bis CI1 waren alle Bestandteile da, sahen dem Entwurf aber nicht aehnlich. Vom
Betreiber am laufenden /playtest beobachtet und per Bildschirmfoto bestaetigt
(berichte/fix-cj1-zentrale-gestaltung.md):
1. Flaechen ohne eigenen Hintergrund — die fast durchsichtige Fuellung
(rgba(10,14,24,.5)) liess die Schrift direkt auf dem Hintergrundbild stehen.
2. Volle Buehnenbreite statt Spalten — LayoutAnchors.applyToElement() schreibt
`width` INLINE auf #bb-hub-panel und ueberstimmt damit jedes `width` aus dem
CSS (das alte `width:min(980px,100%)` war deshalb wirkungslos). Die Rangliste
lief bis an den Buehnenrand, die Punktespalte klebte am Rand.
3. Keine Oben/Unten-Aufteilung — Rangliste/Letzte Partien lagen als gestapelte
rechte Spalte NEBEN dem Kopfband, die Fraktionswahl schwamm im Rest.
Konsequenz fuer diese Runde: Aussenmasse gehoeren in layout-config.js (margins),
die INNERE Aufteilung hierher. Kein `width`/`left`/`top` mehr auf #bb-hub-panel im
CSS — das waere ein Sonderweg an der Layout-Engine vorbei (Drift-Quelle).
Aufteilung nach Konzept B, Verhaeltnisse aus dem 980px-Entwurf auf die Buehne
umgerechnet (Entwurf: Inhaltsbreite 944 = 238 / 388 / 290 bei 14px Abstand;
hier: 1120 = 272 / 480 / 336 bei 16px Abstand — 25/44/31 % gegen 25/41/31 %).
Bandhoehe: Entwurf 186 von 564 nutzbarer Hoehe (33 %) -> hier 214 von 642 (33 %). */
#screen-backbone-hub {
/* Farbwerte aus dem Entwurf (--panel:#0a1120, --line:#16203a). Der Rahmen ist
gegenueber dem Entwurf aufgehellt und die Fuellung minimal durchscheinend: die
echte Buehne traegt ein fotografisches Hintergrundbild (heller Planet), der
Entwurf nur ein fast schwarzes Sternenfeld — #16203a waere darauf unsichtbar.
Einzige bewusste Farbabweichung, s. Bericht. */
--bb-panel-bg: linear-gradient(168deg, rgba(12, 19, 35, 0.96), rgba(5, 9, 18, 0.975));
--bb-panel-line: rgba(46, 64, 104, 0.95);
--bb-row-line: rgba(24, 34, 58, 0.95);
--bb-content-w: 1120px;
--bb-col-id: 272px;
--bb-col-recent: 336px;
--bb-band-h: 214px;
align-items: center;
justify-content: center;
/* Nur Rueckfallposition, falls applyLayout('backbone-hub') nicht laeuft — die
wirksamen Raender stehen in layout-config.js (screens['backbone-hub'].margins). */
padding: 18px 80px 22px;
overflow: hidden;
}
.bb-hub-panel {
/* KEIN width hier: LayoutAnchors setzt Breite/Hoehe inline (s. Kommentar oben).
align-items:center + feste Breite auf den Kindern haelt den Inhalt mittig und
verhindert, dass er sich auf sehr breiten Buehnen (bis 1920, MAX_STAGE_W)
auseinanderzieht — "feste Spaltenbreiten, kein Ausdehnen ueber die ganze
Buehne" (Rundenprompt Abschnitt 1). */
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
overflow-x: hidden;
overflow-y: auto;
}
/* Die Zeilen des Bildschirms teilen sich EINE Inhaltsbreite — dadurch fluchten Band und
Handlungszone an derselben linken/rechten Kante. Fix CL1: .bb-hub-back steht nicht mehr
in dieser Reihe — er sitzt seit dieser Runde INNERHALB der Handlungszone, unter dem
GEGNER-SUCHEN-Knopf (Betreiber-Vorgabe). */
.bb-hub-top,
.bb-hub-content {
width: min(var(--bb-content-w), 100%);
}
.bb-hub-back {
background: none;
border: none;
color: #6a7090;
font-family: 'Orbitron', monospace;
font-size: 11px;
letter-spacing: 0.08em;
cursor: pointer;
padding: 4px 2px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
flex-shrink: 0;
}
.bb-hub-back:hover { color: #f0a500; text-shadow: 0 0 10px rgba(240, 165, 0, 0.3); }
.bb-hub-back .menu-arrow { color: #4dd0e1; font-size: 11px; }
.bb-hub-back:hover .menu-arrow { color: #f0a500; }
/* ── Oberes Band: drei Flaechen NEBENEINANDER (Konzept B) ───────────────────────
.bb-hub-right-col (CI1: Rangliste ueber Letzte Partien in einer rechten Spalte)
loest im Querformat ihre eigene Box per display:contents auf — dadurch werden
Rangliste und Letzte Partien direkte Flex-Kinder des Bandes und stehen nebeneinander,
ohne dass das Markup umgebaut werden muss (Rundenprompt: keine Funktionsaenderung).
Im Hochformat dient dasselbe display:contents dazu, alle drei Flaechen per `order`
umsortieren zu koennen (s. Hochformat-Block unten). */
.bb-hub-top {
display: flex;
align-items: stretch;
gap: 16px;
height: var(--bb-band-h);
flex: 0 0 auto;
}
.bb-hub-right-col { display: contents; }
/* Gemeinsamer Flaechen-Look — das ist der Kern des CJ1-Befundes: jede Flaeche traegt
ihren eigenen, gedeckten Hintergrund mit Rahmen, damit die Schrift unabhaengig vom
Hintergrundbild lesbar bleibt.
Fix CL1 (2026-08-20): dazu die Science-Fiction-Formensprache, die das Spiel bereits hat,
statt schlichter Rechtecke (Betreiber-Befund) — und zwar mit den VORHANDENEN Mitteln,
nicht mit einer zweiten Gestaltungswelt (Rundenprompt Abschnitt 4):
* abgeschraegte Ecken per clip-path in genau der Form, die .faction-tile/.menu-btn
schon benutzen (polygon(Npx 0, 100% 0, ...) — oben links/unten rechts angeschnitten),
* eine goldene Kopfkante wie am Kommando-Kreis/HUD-Rand,
* eine goldene Eckmarke unten rechts an der Schnittkante.
Die Fuellung wurde gleichzeitig DEUTLICHER gedeckt (0.93/0.95 -> 0.96/0.97) und die
Schriftfarben angehoben: "Lesbarkeit hat Vorrang vor Dekoration" (Abschnitt 4). */
.bb-hub-header,
.bb-hub-leaderboard,
.bb-hub-recent {
--bb-chamfer: 12px;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
padding: 11px 13px 12px;
border: 1px solid var(--bb-panel-line);
background: var(--bb-panel-bg);
overflow: hidden;
clip-path: polygon(var(--bb-chamfer) 0, 100% 0, 100% calc(100% - var(--bb-chamfer)),
calc(100% - var(--bb-chamfer)) 100%, 0 100%, 0 var(--bb-chamfer));
}
/* Kopfkante: kraeftig links (wo die Ueberschrift steht), nach rechts auslaufend — dasselbe
Prinzip wie die Energie-Kante der .menu-btn, nur waagerecht. */
.bb-hub-header::before,
.bb-hub-leaderboard::before,
.bb-hub-recent::before {
content: '';
position: absolute;
top: 0;
left: var(--bb-chamfer);
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(240, 165, 0, 0.85), rgba(240, 165, 0, 0.12) 62%, transparent);
pointer-events: none;
}
/* Eckmarke an der unteren Schnittkante — reine Dekoration, nie ueber Text (die Flaechen
haben unten Innenabstand, s. padding oben). */
.bb-hub-header::after,
.bb-hub-leaderboard::after,
.bb-hub-recent::after {
content: '';
position: absolute;
right: -1px;
bottom: -1px;
width: calc(var(--bb-chamfer) + 5px);
height: calc(var(--bb-chamfer) + 5px);
background: linear-gradient(135deg, transparent 48%, rgba(240, 165, 0, 0.5) 50%, transparent 52%);
pointer-events: none;
}
.bb-hub-header {
flex: 0 0 var(--bb-col-id);
justify-content: center; /* Entwurf: Identitaet sitzt vertikal mittig in ihrer Flaeche */
gap: 8px;
}
.bb-hub-leaderboard { flex: 1 1 0; }
.bb-hub-recent { flex: 0 0 var(--bb-col-recent); }
.bb-hub-id {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.bb-hub-header .bb-hub-stats,
.bb-hub-header .bb-hub-empty {
margin-top: 0;
}
/* Flaechen-Ueberschrift — im Entwurf gold (.panel h4), nicht grau. Der rechte
Zusatz des Entwurfs ("SAISON 1" / "5") fehlt bewusst: beides waere erfundener
Inhalt (die Saison ist nirgends abrufbar), Rundenprompt Abschnitt 4. */
.bb-ladder-title {
font-family: 'Orbitron', monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #f0a500;
text-transform: uppercase;
margin-bottom: 8px;
flex-shrink: 0;
/* Fix CL1: Ueberschrift bekommt eine eigene Grundlinie (Entwurf: die Panels trennen
Kopf und Inhalt), plus ein leichtes Leuchten wie andere Goldschriften im Spiel. */
padding-bottom: 6px;
border-bottom: 1px solid rgba(240, 165, 0, 0.22);
text-shadow: 0 0 12px rgba(240, 165, 0, 0.28);
}
/* Listen fuellen den Rest ihrer Flaeche. overflow-y:auto statt hidden: eine ungewoehnlich
lange Liste (oder ein umgebrochener langer Name) scrollt INNERHALB der Flaeche, statt
ueber den Buehnenrand zu laufen oder abgeschnitten zu werden. min-height:0 ist noetig,
sonst wuerde das Flex-Item nie unter seine Inhaltshoehe schrumpfen. */
.bb-ladder-list,
.bb-recent-list {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
}
/* Eine Zeile — .bb-ladder-row wird per JS (backbone-lobby.js#_bbRenderLeaderboard) aus
drei Kindspans zusammengesetzt (Rang/Name/Score), Name per textContent (nie innerHTML —
Anzeigenamen sind fremdbestimmt). min-width:0 auf Zeile UND Name-Span, sonst erzwingt
ein langer, leerzeichenloser Name die MIN-CONTENT-Breite des Flex-Items (derselbe
Flexbox-Effekt wie beim Kopfband-Namen, s. "Fix CD1: Spieler-Zentrale-Kopfband"-Block
weiter unten) — "lange Namen duerfen nicht abgeschnitten werden".
Trennlinie je Zeile nach dem Entwurf (dort `td { border-bottom:1px solid #121a2c }`). */
.bb-ladder-row {
display: flex;
align-items: baseline;
gap: 8px;
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
padding: 3px 2px;
min-width: 0;
border-bottom: 1px solid var(--bb-row-line);
}
.bb-ladder-row:last-child { border-bottom: none; }
.bb-ladder-rank {
color: #6a7090;
width: 22px;
flex-shrink: 0;
text-align: right;
/* Zahlen fluchten (Rundenprompt Abschnitt 3): feste Laufweite, damit 1 und 12
dieselbe Breite belegen. */
font-variant-numeric: tabular-nums;
}
/* Die ersten drei Plaetze tragen ihre Wertigkeit auch ohne die Zahl zu lesen. */
.bb-ladder-row:nth-child(1) .bb-ladder-rank { color: #f0c040; }
.bb-ladder-row:nth-child(2) .bb-ladder-rank { color: #c9d2e4; }
.bb-ladder-row:nth-child(3) .bb-ladder-rank { color: #c98a4b; }
.bb-ladder-name {
color: #d2d7e6;
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.bb-ladder-score {
color: #f0a500;
flex-shrink: 0;
width: 48px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Eigene Zeile hervorgehoben — sichtbar unabhaengig davon, ob sie inline in der Spitze
steckt oder (bb-ladder-row-gap) als Anhang weit ausserhalb liegt.
Fix CL1: deutlicher als bisher (Betreiber-Befund "die eigene Zeile faellt nicht auf") —
kraeftigere Fuellung PLUS eine goldene Kante links, die auch bei schwachem Kontrast
traegt. */
.bb-ladder-row-me {
background: linear-gradient(90deg, rgba(240, 165, 0, .20), rgba(240, 165, 0, .06));
border-left: 2px solid #f0a500;
padding-left: 4px;
box-shadow: inset 0 0 18px rgba(240, 165, 0, .07);
}
.bb-ladder-row-me .bb-ladder-name { color: #ffc94d; font-weight: 600; }
.bb-ladder-row-me .bb-ladder-rank { color: #f0a500; }
.bb-ladder-row-me .bb-ladder-score { color: #ffd873; }
.bb-ladder-row-gap {
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed rgba(139, 147, 168, 0.25);
}
/* ── Leerzustaende (Rundenprompt Abschnitt 5) ─────────────────────────────────────
Bei einer frischen Saison sind sie der NORMALFALL, nicht die Ausnahme — vorher stand
eine einzelne graue Zeile oben links in einer ansonsten leeren Flaeche, was wie ein
Fehler aussah (Bildschirmfoto "vorher" im Bericht). Jetzt fuellen sie ihre Flaeche
mittig aus und tragen dieselbe Formensprache (goldene Zierlinie ueber dem Text,
gestrichelter Rahmen = "hier kommt noch etwas hin", kein Warnzeichen).
KEINE erfundenen Zusatztexte — die Saetze sind unveraendert die aus CH1/CI1. */
.bb-ladder-empty,
.bb-ladder-no-own,
.bb-ladder-error,
.bb-hub-empty {
font-size: 11px;
color: #8b93a8;
font-family: 'Rajdhani', sans-serif;
letter-spacing: 0.04em;
flex-shrink: 0;
}
/* Nur die "die Flaeche ist leer"-Zustaende fuellen die Flaeche — .bb-ladder-no-own und
.bb-recent-partial stehen NEBEN einer weiterhin sichtbaren Liste (CH1/CI1) und duerfen
sie deshalb nicht verdraengen. */
.bb-hub-leaderboard > .bb-ladder-empty,
.bb-hub-leaderboard > .bb-ladder-error,
.bb-hub-recent > .bb-ladder-empty,
.bb-hub-recent > .bb-ladder-error {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
text-align: center;
padding: 4px 10px;
border: 1px dashed rgba(240, 165, 0, 0.16);
background: rgba(240, 165, 0, 0.02);
}
/* (.hidden traegt global display:none !important — kein eigener Ausschluss noetig.) */
.bb-hub-leaderboard > .bb-ladder-empty::before,
.bb-hub-leaderboard > .bb-ladder-error::before,
.bb-hub-recent > .bb-ladder-empty::before,
.bb-hub-recent > .bb-ladder-error::before {
content: '';
width: 46px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(240, 165, 0, 0.55), transparent);
}
.bb-ladder-no-own { margin-top: 8px; color: #7d879e; }
.bb-ladder-error { color: rgba(230, 110, 100, 0.9); }
.bb-hub-leaderboard > .bb-ladder-error,
.bb-hub-recent > .bb-ladder-error {
border-color: rgba(224, 32, 32, 0.28);
background: rgba(224, 32, 32, 0.04);
}
.bb-hub-leaderboard > .bb-ladder-error::before,
.bb-hub-recent > .bb-ladder-error::before {
background: linear-gradient(90deg, transparent, rgba(224, 60, 60, 0.6), transparent);
}
/* Letzte Partien (Fix CI1) — eine Zeile: Ausgang | Gegner (flex, min-width:0 gegen
Ueberlauf, dieselbe Fehlerklasse wie .bb-ladder-name) | Punktveraenderung | Zeitpunkt.
BEWUSST KEINE Fraktions-Spalte — die Rohdaten liefern keine (s. backbone-client.js#
getRecentGames-Kommentar). Feste Spaltenbreiten rechts (Entwurf: .rt mit width), damit
Punktveraenderung und Zeitpunkt untereinander fluchten statt zu zappeln. */
.bb-recent-row {
display: flex;
align-items: baseline;
gap: 8px;
font-family: 'Share Tech Mono', monospace;
font-size: 11.5px;
padding: 3px 2px;
min-width: 0;
border-bottom: 1px solid var(--bb-row-line);
}
.bb-recent-row:last-child { border-bottom: none; }
/* Fix CL1: Sieg und Niederlage sind unterscheidbar, OHNE das Wort lesen zu muessen
(Rundenprompt Abschnitt 3) — farbige Marke vor dem Ausgang plus kraeftigere Farbe.
Die Marke ist rein dekorativ (::before am Ausgangs-Feld), sie ersetzt keinen Text. */
.bb-recent-result {
flex-shrink: 0;
width: 74px;
color: #c0c4d4;
font-weight: 600;
display: flex;
align-items: baseline;
gap: 6px;
}
.bb-recent-result::before {
content: '';
width: 3px;
height: 9px;
flex-shrink: 0;
background: currentColor;
opacity: 0.85;
transform: translateY(1px);
}
.bb-recent-win { color: #5ce08a; text-shadow: 0 0 10px rgba(92, 224, 138, 0.25); }
.bb-recent-loss { color: #ff7b5c; text-shadow: 0 0 10px rgba(255, 123, 92, 0.22); }
.bb-recent-opponent {
flex: 1;
min-width: 0;
color: #97a0b6;
overflow-wrap: anywhere;
word-break: break-word;
}
.bb-recent-delta {
flex-shrink: 0;
width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.bb-recent-delta-pos { color: #5ce08a; }
.bb-recent-delta-neg { color: #ff7b5c; }
.bb-recent-time {
flex-shrink: 0;
width: 72px;
text-align: right;
color: #5b667f;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
/* ── Handlungszone: "was tue ich jetzt" (Konzept B, unterer Bereich) ────────────
Deutlich abgesetzt vom Band (Trennlinie wie im Entwurf: `border-top:1px solid
#131c2e`), nimmt den gesamten Rest der Hoehe ein und zentriert darin Fraktionswahl
bzw. Suchzustand. Der Wechsel Uebersicht <-> Warteschlange selbst wird NICHT
angefasst (Rundenprompt Abschnitt 4) — er passiert weiterhin ueber die
.menu-level.active-Umschaltung in backbone-lobby.js. */
.bb-hub-content {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column; /* Fix CL1: ZURÜCK ZUR LOBBY steht UNTER der Handlung */
align-items: center;
justify-content: center;
gap: 14px;
padding-top: 14px;
border-top: 1px solid rgba(40, 56, 92, 0.55);
}
.bb-hub-content .menu-level {
width: 100%;
max-width: 460px;
}
.bb-hub-content #menu-backbone-searching { max-width: 560px; }
/* ── Fix CL1: Peilring im Wartezustand ────────────────────────────────────────────
Aufbau nach Konzept B ("only-q"): Ring links, Angaben rechts. Der Ring ist ein