/* Shared command-console palette for native controls and illustrated views.
   Category, resource and warning colours keep their existing semantic tokens. */
:root {
  --gfx-void:#080d1b;
  --gfx-panel:#101b2d;
  --gfx-panel-raised:#19223a;
  --gfx-line:#343a57;
  --gfx-line-strong:#637295;
  --gfx-text:#eef0ff;
  --gfx-muted:#b8bfd4;
  --gfx-focus:#7fcbff;
  --elev-1:var(--gfx-panel);
  --elev-2:var(--gfx-panel-raised);
  --line-1:var(--gfx-line);
  --line-2:var(--gfx-line-strong);
  --ink-dim:var(--gfx-muted);
}

/* Illustrated command views. Existing cards remain the authority for all actions. */
@media(min-width:1400px) {
  :root { --spielbreite:min(1320px, calc(100vw - 275px)); --gfx-game-left:max(20px, calc((100vw - 255px - var(--spielbreite)) / 2)); }
  #game-root { width:min(100vw, var(--spielbreite)); margin-left:var(--gfx-game-left); margin-right:240px; }
  #kanzelrahmen { left:var(--gfx-game-left); transform:none; }
  /* Keep the existing grouped header wrap while illustrated views use the wider column. */
  .hero-stats { max-width:min(1300px, calc(100vw - 470px)); box-sizing:border-box; }
}
.gfx-view { --cut:var(--cut-md); margin:0 0 18px; border:var(--bw-1) solid var(--gfx-line); background:#0c1020; overflow:clip; border-radius:0; }
.gfx-picker { display:block; color:var(--gfx-muted); font-size:12px; line-height:1.5; margin-bottom:18px; }
.gfx-picker select { display:block; width:100%; min-width:0; min-height:44px; margin-top:6px; background:var(--gfx-panel-raised); color:#f2f3ff; border:var(--bw-1) solid #647397; padding:8px; font-size:12px; }
.gfx-picker select:focus-visible { outline:3px solid var(--gfx-focus); outline-offset:2px; }
.gfx-native-ship { position:absolute; inset:0; display:grid; place-items:center; }
.gfx-native-ship canvas { max-width:94%; height:auto!important; aspect-ratio:4/3; }
/* Both hero surfaces occupy the original cell. Only a successfully painted
   detail bank may replace its canonical fallback; loading never changes layout. */
.gfx-native-ship > canvas { grid-area:1 / 1; pointer-events:none; }
.gfx-native-ship > .gfx-ship-detail { opacity:0; }
.gfx-native-ship[data-ship-detail-ready="true"] > canvas:not([data-ship-detail]) { opacity:0; }
.gfx-native-ship[data-ship-detail-ready="true"] > .gfx-ship-detail { opacity:1; }
.gfx-defense-model { display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0; background:#0c1224; border:var(--bw-1) solid var(--gfx-line); padding:12px; }
.gfx-defense .gfx-landscape { object-position:center; }
.gfx-tech-preview { position:absolute; bottom:20px; left:20px; right:20px; display:flex; gap:16px; align-items:center; padding:15px; background:rgba(8,12,25,.92); border:var(--bw-1) solid #69769c; font-size:16px; color:var(--gfx-text); }
.gfx-tech-preview svg, .gfx-tech-preview canvas { flex-shrink:0; width:64px!important; height:64px!important; }
.gfx-tech-path { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; background:var(--gfx-panel); border-top:var(--bw-1) solid var(--gfx-line); }
.gfx-tech-path h3 { margin:0 0 12px; font-size:14px; color:#e8ecff; }
.gfx-tech-path p { font-size:12px; color:var(--gfx-muted); line-height:1.5; }
.gfx-tech-link { display:block; width:100%; text-align:left; padding:10px 12px; margin:7px 0; min-height:44px; font-size:12px; background:#1b2138; border:var(--bw-1) solid var(--gfx-line-strong); color:#e8ecff; }
.gfx-tech-link small { display:block; font-size:11px; color:#bec5dc; margin-top:4px; }
.gfx-tech-ready { border-color:#6db4a3; background:#173033; }
[data-gfx-action="researchqueue"] .gfx-action-cost { display:none; }
[data-gfx-action="researchqueue"] .buy { margin:8px 0 14px; background:#202d45; }
.gfx-banner .gfx-scene { min-height:300px; }
.gfx-banner .gfx-scene-label { max-width:min(420px,calc(100% - 62px)); line-height:1.6; }
.gfx-expedition-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gfx-expedition-type { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0; padding:0; overflow:hidden; text-align:left; background:#121c30; border:var(--bw-1) solid #566383; }
.gfx-expedition-type img { width:100%; height:110px; object-fit:cover; display:block; background:#060e1b; }
.gfx-expedition-type[data-expedition-type="mining"] img { object-fit:contain; }
.gfx-expedition-type span { display:block; margin:10px 12px 7px; color:#ecf0ff; font-size:13px; line-height:1.4; }
.gfx-expedition-type small { display:block; margin:0 12px 12px; color:#bdc7dc; font-size:11.5px; line-height:1.55; font-weight:400; }
.gfx-expedition-type[aria-pressed="true"] { border-color:#78dac8; background:#18383c; box-shadow:inset 0 0 0 2px #78dac8; }
.gfx-expedition-type:focus-visible, .gfx-tech-link:focus-visible { outline:3px solid var(--gfx-focus); outline-offset:2px; }
.gfx-journey { position:relative; height:42px; background:url('kepler-gfx-nebula.png') center/cover; background-image:image-set(url('kepler-gfx-nebula.webp') type('image/webp'),url('kepler-gfx-nebula.png') type('image/png')); margin:8px 0 2px; border:var(--bw-1) solid #3d4e71; overflow:hidden; color:#c1e9f7; }
.gfx-journey:before { content:''; position:absolute; top:50%; left:8%; right:8%; border-top:1px dashed #a8bed1; }
.gfx-journey-origin, .gfx-journey-destination, .gfx-journey-ship { position:absolute; top:50%; transform:translate(-50%,-50%); font-size:20px; background:#13213b; padding:4px; }
.gfx-journey-origin { left:8%; }.gfx-journey-destination { left:92%; }
.gfx-journey-ship { color:#9df6e4; transition:left 1s linear; }
#officerBox { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#officerBox > .card-row { min-width:0; padding:16px; background:#10172a; }
#officerBox .bname { line-height:1.7; }
#officerBox .bmeta { font-size:12px; line-height:1.6; }
#officerBox .gfx-officer-portrait + .bicon { display:none; }
.gfx-officer-portrait { width:128px; height:96px; flex-shrink:0; background-image:url('kepler-gfx-officer-atlas.png'); background-image:image-set(url('kepler-gfx-officer-atlas.webp') type('image/webp'),url('kepler-gfx-officer-atlas.png') type('image/png')); background-size:200% 400%; background-position:var(--portrait-x) var(--portrait-y); border:var(--bw-1) solid var(--portrait-color); }
.gfx-ship-list { max-height:550px; overflow:auto; }
@media(prefers-reduced-motion:reduce) { .gfx-journey-ship { transition:none; } }
@media(max-width:1000px) { #officerBox { grid-template-columns:1fr; } }
@media(max-width:760px) {
  .gfx-tech-path { grid-template-columns:1fr; gap:12px; padding:16px; }
  .gfx-banner .gfx-scene { min-height:260px; }
  .gfx-defense .gfx-scene { min-height:360px; }
  .gfx-defense .gfx-hotspot { max-width:132px; font-size:10px; }
  .gfx-defense [data-gfx-defense="turm"] { left:24%!important; top:65%!important; }
  .gfx-defense [data-gfx-defense="flak"] { left:73%!important; top:84%!important; }
  .gfx-defense [data-gfx-defense="schild"] { left:28%!important; top:29%!important; }
  .gfx-defense [data-gfx-defense="laser"] { left:72%!important; top:48%!important; }
  .gfx-expedition-types { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gfx-expedition-type img { height:90px; }
  .gfx-expedition-type span { font-size:12px; margin:9px; }
  .gfx-expedition-type small { margin:0 9px 10px; }
  .gfx-officer-portrait { width:96px; height:72px; }
  #officerBox > .card-row { padding:12px; }
  .gfx-ship-list { overflow:auto; max-height:none; }
  .gfx-ship-list .gfx-choice { flex:0 0 110px; }
}
.gfx-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 20px; background:var(--gfx-panel); border-bottom:var(--bw-1) solid var(--gfx-line); }
.gfx-heading h2 { font-size:21px; font-weight:600; letter-spacing:.2px; margin:0; line-height:1.3; }
.gfx-eyebrow { display:block; color:#abb1cd; text-transform:uppercase; letter-spacing:1.6px; font-size:10px; margin-bottom:5px; }
.gfx-heading .gfx-location { font-size:12px; color:#b8bcce; text-align:right; }
.gfx-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; min-height:430px; }
.gfx-scene { position:relative; min-width:0; min-height:430px; overflow:hidden; background:var(--gfx-void); }
.gfx-landscape { position:absolute; width:100%; height:100%; object-fit:cover; object-position:43% center; inset:0; }
.gfx-scene-label { --cut:var(--cut-sm); position:absolute; left:18px; top:18px; max-width:calc(100% - 36px); padding:10px 13px; color:#e9ecf5; background:rgba(8,12,25,.89); border:var(--bw-1) solid #555677; border-radius:0; font-size:12px; }
.gfx-scene-label strong { display:block; font-size:15px; margin-bottom:4px; }
.gfx-inspector { padding:22px 20px; border-left:var(--bw-1) solid var(--gfx-line); background:#101527; min-width:0; }
.gfx-inspector h3 { font-size:20px; line-height:1.35; margin:0 0 10px; font-weight:550; }
.gfx-inspector p { font-size:12px; color:#b7bfd3; line-height:1.6; margin:10px 0 18px; }
.gfx-inspector .bcost { line-height:1.9; font-size:12px; margin:16px 0; }
.gfx-inspector .buy { width:100%; min-height:42px; padding:10px 8px; }
.gfx-inspector .bmeta { line-height:1.7; }
.gfx-inspector .ship-stats { grid-template-columns:1fr; gap:10px; margin:20px 0; }
.gfx-inspector .sstat .k { width:60px; font-size:10px; }
.gfx-inspector .sstat .v { font-size:12px; }
.gfx-inspector .bcost { display:flex; flex-wrap:wrap; gap:5px 10px; }
.gfx-unknown { display:grid; place-items:center; min-height:135px; font-size:44px; color:var(--gfx-muted); }
.gfx-level { --cut:var(--cut-xs); font-size:12px; color:#a4e6d6; padding:6px 10px; border:var(--bw-1) solid #406858; background:#18302e; display:inline-block; border-radius:0; }
.gfx-metrics { display:flex; flex-wrap:wrap; gap:12px; border-top:var(--bw-1) solid var(--gfx-line); padding:12px 18px; background:var(--gfx-panel); font-size:11px; color:var(--gfx-muted); }
.gfx-metrics b { color:#f2f3f9; font-weight:550; }
.gfx-hotspot { position:absolute; transform:translate(-50%,-50%); font-size:11px; padding:7px 10px; border:var(--bw-1) solid #7c82a5; background:rgba(9,15,32,.94); color:#f2f3ff; box-shadow:0 3px 15px #030615; min-height:34px; }
.gfx-hotspot[aria-pressed="true"] { border-color:#78dac8; background:#183d42; }
.gfx-hotspot i { margin-right:5px; color:#b6acff; }
.gfx-hotspot:focus-visible, .gfx-choice:focus-visible { outline:3px solid var(--gfx-focus); outline-offset:3px; box-shadow:inset 0 0 0 3px var(--gfx-focus); }
.gfx-ship-layout { grid-template-columns:130px minmax(0,1fr) 310px; }
.gfx-ship-list { background:var(--gfx-panel); border-right:var(--bw-1) solid var(--gfx-line); padding:12px 9px; display:flex; flex-direction:column; gap:10px; }
.gfx-choice { width:100%; padding:9px; text-align:left; background:#161e34; border:var(--bw-1) solid #38425f; border-radius:0; font-size:12px; color:#e9ecf5; }
.gfx-choice[aria-pressed="true"] { border-color:#b0a0f4; background:#2a294e; }
.gfx-choice img { width:100%; height:65px; object-fit:contain; display:block; }
.gfx-choice small { display:block; color:#b0bad3; font-size:10px; margin-top:4px; }
.gfx-ship-model { position:absolute; width:100%; height:100%; inset:0; object-fit:contain; padding:12px; box-sizing:border-box; }
.gfx-ship-caption { position:absolute; left:16px; bottom:15px; background:rgba(8,12,25,.92); border:var(--bw-1) solid #535876; padding:8px 12px; font-size:12px; }
.gfx-map-inspector { --cut:var(--cut-md); display:grid; grid-template-columns:135px minmax(0,1fr) 220px; gap:20px; padding:18px 22px; align-items:center; background:#111629; border:var(--bw-1) solid var(--gfx-line); border-radius:0; margin:0 0 16px; }
.gfx-map-inspector img { width:135px; height:135px; object-fit:contain; }
.gfx-map-inspector h3 { margin:0 0 7px; font-size:21px; font-weight:550; }
.gfx-map-inspector p { margin:6px 0; font-size:12px; line-height:1.6; color:var(--gfx-muted); }
.gfx-map-actions { display:flex; flex-direction:column; gap:8px; }
.gfx-map-actions button { min-height:40px; font-size:12px; }
.gfx-map-facts { color:#a4e6d6; font-size:12px; }
#tab-karte .map-wrap { background-image:url('kepler-gfx-nebula.png'); background-image:image-set(url('kepler-gfx-nebula.webp') type('image/webp'),url('kepler-gfx-nebula.png') type('image/png')); background-size:cover; background-position:center; }
/* Keep enough map width for the existing asteroid targets; narrower desktops stack the inspector. */
@media(min-width:1480px) and (min-height:850px) {
  #tab-karte .map-wrap { height:480px!important; min-height:0; }
  .gfx-system-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:480px auto; gap:12px; align-items:stretch; }
  .gfx-system-layout .map-wrap { margin-bottom:0!important; }
  .gfx-system-layout #galaxyGrowthLine { grid-column:1; margin:0!important; }
  .gfx-system-layout #mapPlanetVisual { grid-column:2; grid-row:1/3; }
  .gfx-system-layout .gfx-map-inspector { display:flex; flex-direction:column; height:100%; box-sizing:border-box; gap:15px; align-items:stretch; margin:0; padding:18px; }
  .gfx-system-layout .gfx-map-inspector img { width:100%; height:auto; aspect-ratio:1; }
  .gfx-system-layout .gfx-map-actions { margin-top:auto; }
}
@media(min-width:1000px) { .gfx-colony .gfx-layout { min-height:480px; } .gfx-colony .gfx-scene { min-height:480px; } }
@media(max-width:760px) {
  .gfx-layout, .gfx-ship-layout { grid-template-columns:minmax(0,1fr); min-height:0; }
  .gfx-scene, .gfx-colony .gfx-scene { min-height:320px; }
  .gfx-inspector { border-left:0; border-top:var(--bw-1) solid var(--gfx-line); padding:18px; }
  .gfx-inspector h3 { font-size:18px; }
  .gfx-heading { padding:14px; }
  .gfx-heading h2 { font-size:18px; }
  .gfx-heading .gfx-location { max-width:45%; }
  .gfx-ship-list { flex-direction:row; border-right:0; border-bottom:var(--bw-1) solid var(--gfx-line); gap:6px; padding:8px; }
  .gfx-choice { flex:1; min-width:0; padding:7px; font-size:11px; }
  .gfx-choice img { height:48px; }
  .gfx-hotspot { font-size:10px; padding:6px; min-height:44px; }
  .gfx-hotspot[data-gfx-building="mine"] { left:22%!important; top:43%!important; }
  .gfx-hotspot[data-gfx-building="solar"] { left:70%!important; top:35%!important; }
  .gfx-hotspot[data-gfx-building="habitat"] { top:61%!important; }
  .gfx-hotspot[data-gfx-building="raffinerie"] { top:81%!important; }
  .gfx-map-inspector { grid-template-columns:92px minmax(0,1fr); padding:14px; gap:12px; }
  .gfx-map-inspector img { width:92px; height:92px; }
  .gfx-map-inspector h3 { font-size:18px; }
  .gfx-map-actions { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
  .gfx-map-actions button { flex:1; min-height:44px; }
}

/* Native foundations use the same materials without changing their measured
   geometry, compact-header layout, domain colours or action states. */
#game-root { color:var(--gfx-text); }
.section-title { color:var(--gfx-text); }
.gfx-heading h2, .gfx-inspector h3, .gfx-map-inspector h3,
.gfx-tech-path h3, .gfx-scene-label strong { font-family:var(--font-mono); }
.bmeta, .bcost { color:var(--gfx-muted); }
.rescard .rate:not(.warn), .rescard .rate .pct,
.log, .profile-hero-stat span, #game-root .lb-note { color:var(--gfx-muted); }
/* The near-full warning has more specificity and remains amber. */
.rescard.t2-near .rate .pct { color:var(--c-warning); }

.tab-icon-badge {
  background:var(--gfx-panel-raised);
  box-shadow:inset 0 0 0 1px rgba(184,191,212,.16);
}
.tab-btn.active .tab-icon-badge {
  box-shadow:inset 0 0 0 1px var(--tab-dom,var(--c-primary));
}
.gfx-view, .gfx-defense-model, #officerBox > .card-row {
  background:var(--gfx-panel);
}
#officerBox > .card-row:hover { background:var(--gfx-panel-raised); }
.gfx-inspector, .gfx-heading, .gfx-metrics, .gfx-tech-path,
.gfx-ship-list, .gfx-map-inspector { background:var(--gfx-panel); }
.fleet-position-panel, .login-overlay:not(.login-landing) > .login-card,
.profile-hero-card, .toast { background:var(--gfx-panel); }

/* Cut corners clip outer outlines. An inset keyboard ring stays visible on the
   actual controls; the dedicated battle replay UI keeps its own focus rules. */
:is(#game-root, .fwahl-overlay) :where(button, select, input:not([type]), input[type=text], input[type=email],
  input[type=password], input[type=number], input[type=search], textarea, a[href], .card-row[role="button"]):focus-visible:not(#osWrap *) {
  outline:none;
  /* Warning pulses and the selected theme's inline shadow also write this
     property. Keyboard focus must remain the visible, highest-priority ring. */
  box-shadow:inset 0 0 0 2px var(--gfx-focus)!important;
  /* Keyboard feedback must appear immediately, including animated subtabs. */
  transition:none;
}
/* Affordable orders animate box-shadow. Keep the keyboard ring stable while
   focused, including desktop sessions with all decorative effects enabled. */
#game-root .buy.affordable:focus-visible:not(#osWrap *) { animation:none; }
/* Additional native panels. Integrate after the shared graphics tokens.
   Surface and text changes only: native dimensions, scrolling, collapsible
   sections, banner choices, semantic status colors and battle replay stay native. */

:is(#tab-flotte, #tab-galaxie, #tab-allianz, #tab-punkte, #tab-fortschritt,
    #tab-sammlung, #tab-berichte, #tab-hilfe, #tab-einstellungen)
    :is(.profile-card, .rank-row) {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-text, #eef0ff);
}

:is(#tab-flotte, #tab-galaxie, #tab-allianz, #tab-punkte, #tab-fortschritt,
    #tab-sammlung, #tab-berichte, #tab-hilfe, #tab-einstellungen)
    :is(.bmeta, .lb-note) {
  color:var(--gfx-muted, #b8bfd4);
}

:is(#tab-flotte, #tab-galaxie, #tab-allianz, #tab-punkte, #tab-fortschritt,
    #tab-sammlung, #tab-berichte, #tab-hilfe, #tab-einstellungen) .bname {
  color:var(--gfx-text, #eef0ff);
}

/* Status numbers and inline danger/reward colors retain their own source. */
#fleetStickyBar {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-muted, #b8bfd4);
}

:is(#fleetSubtabs, #officerSubtabs, .abgrund-reiter) .fleet-subtab {
  background-color:var(--gfx-panel-raised, #19223a);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-muted, #b8bfd4);
}

:is(#fleetSubtabs, #officerSubtabs, .abgrund-reiter) .fleet-subtab small {
  color:var(--gfx-muted, #b8bfd4);
}

:is(#fleetSubtabs, #officerSubtabs, .abgrund-reiter) .fleet-subtab.on {
  color:var(--gfx-text, #eef0ff);
  border-color:var(--c-primary);
  background-color:var(--gfx-panel-raised, #19223a);
}

:is(#fleetSubtabs, #officerSubtabs, .abgrund-reiter) .fleet-subtab.on small {
  color:var(--gfx-text, #eef0ff);
}

:is(#galaxySubtabBar, #allianceSubtabBar) .planet-pill:not(.active) {
  background-color:var(--gfx-panel-raised, #19223a);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-muted, #b8bfd4);
}

/* Only the body is recolored. The selectable Allianz banner and station wash
   above it are deliberately outside this rule. */
#tab-allianz .alliance-hero-card {
  border-color:var(--gfx-line, #343a57);
}

#tab-allianz .alliance-hero-body {
  background-color:var(--gfx-panel, #101529);
  color:var(--gfx-text, #eef0ff);
}

#tab-allianz .ab-hero {
  border-color:var(--gfx-line, #343a57);
}

#tab-allianz .ab-hero-caption {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-muted, #b8bfd4);
}

#tab-allianz .ab-sys-badge {
  background-color:var(--gfx-panel-raised, #19223a);
  border-color:var(--gfx-line, #343a57);
}

#tab-allianz .ab-sys-badge-name {
  color:var(--gfx-text, #eef0ff);
}

:is(#tab-galaxie, #tab-allianz) .rank-row.me {
  background-color:var(--gfx-panel-raised, #19223a);
  background-image:linear-gradient(rgba(var(--primary-rgb), .16), rgba(var(--primary-rgb), .16));
  border-color:var(--c-primary);
}

#tab-allianz .chronicle-entry {
  color:var(--gfx-text, #eef0ff);
}

/* Existing accordion headers keep their native rails and layout. */
:is(#tab-punkte, #tab-fortschritt, #tab-einstellungen) .prog-sec-header {
  background-color:var(--gfx-panel-raised, #19223a);
  color:var(--gfx-text, #eef0ff);
}

:is(#tab-punkte, #tab-fortschritt, #tab-einstellungen) .prog-chevron {
  color:var(--gfx-muted, #b8bfd4);
}

:where(#tab-punkte, #tab-fortschritt, #tab-einstellungen) .jumpnav {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
}

:where(#tab-punkte, #tab-fortschritt, #tab-einstellungen) .jumpnav a {
  background-color:var(--gfx-panel-raised, #19223a);
  color:var(--gfx-muted, #b8bfd4);
}

/* The native collection uses inline opacity solely for unowned catalogue rows.
   Keep the native "noch nicht" badge as the possession signal, while removing
   the second and third text dimming. Actual disabled controls are excluded. */
#sammlungBox > .card-row[style*="opacity:0.55"]:not([aria-disabled="true"]):not(.disabled):not(:has(:disabled)) {
  opacity:1!important;
}

#sammlungBox > .card-row[style*="opacity:0.55"]:not([aria-disabled="true"]):not(.disabled):not(:has(:disabled))
    .bmeta[style*="opacity:"] {
  opacity:1!important;
}

#sammlungBox > .card-row[style*="opacity:0.55"]:not([aria-disabled="true"]):not(.disabled):not(:has(:disabled))
    .lvl-pill[style*="opacity:0.45"] {
  opacity:1!important;
  background-color:var(--gfx-panel-raised, #19223a);
  color:var(--gfx-muted, #b8bfd4);
}

/* Help accordions retain their native open/closed display and click handlers. */
#helpBox .help-category {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
}

#helpBox .help-category-header {
  background-color:var(--gfx-panel-raised, #19223a);
  color:var(--gfx-text, #eef0ff);
}

#helpBox .help-category-header:active {
  background-color:var(--gfx-panel, #101529);
}

#helpBox :is(.chevron, .help-entry-body) {
  color:var(--gfx-muted, #b8bfd4);
}

#helpBox .help-entry-title {
  color:var(--gfx-text, #eef0ff);
}

/* Dialog shell changes do not touch the landing page or the battle replay. */
.login-overlay:not(.login-landing) > .login-card,
.fwahl-karte {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-text, #eef0ff);
}
.fwahl-karte { font-family:system-ui, sans-serif; }

.login-overlay:not(.login-landing) :is(.login-title, .fwahl-titel),
.fwahl-karte .fwahl-titel {
  color:var(--gfx-text, #eef0ff);
  font-family:var(--font-mono);
}

.login-overlay:not(.login-landing) :is(.login-sub, .login-note),
.fwahl-karte :where(.fwahl-art, .fwahl-zu) {
  color:var(--gfx-muted, #b8bfd4);
}

.fwahl-karte :is(.fwahl-kopf, .fwahl-reiter, .fwahl-fuss) {
  border-color:var(--gfx-line, #343a57);
}

#chatPanel {
  background-color:var(--gfx-panel, #101529);
  border-color:var(--gfx-line, #343a57);
  color:var(--gfx-text, #eef0ff);
}

#chatPanel :is(.chat-panel-tabs, .chat-panel-inputrow) {
  border-color:var(--gfx-line, #343a57);
}

#chatPanel .chat-panel-tabs button {
  color:var(--gfx-muted, #b8bfd4);
}

#chatPanel .chat-panel-tabs button.active {
  color:var(--gfx-text, #eef0ff);
  border-bottom-color:var(--c-primary);
}

#chatPanel .bmeta {
  color:var(--gfx-muted, #b8bfd4);
}

/* Every native building remains visible without opening a picker or disclosure. */
.gfx-catalogue { padding:18px 20px; border-top:var(--bw-1) solid var(--gfx-line); background:var(--gfx-panel); }
.gfx-catalogue h3 { margin:0 0 14px; font:500 14px var(--font-mono); color:var(--gfx-text); }
.gfx-catalogue h3 > span { color:var(--gfx-muted); margin-left:8px; font-size:12px; }
.gfx-facility-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)); gap:10px; }
.gfx-facility { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; min-width:0; min-height:156px; padding:10px 8px; background:var(--gfx-panel-raised); border:var(--bw-1) solid var(--gfx-line-strong); color:var(--gfx-text); text-align:center; }
.gfx-facility:hover { background:#25324d; border-color:var(--gfx-focus); }
.gfx-facility[aria-pressed="true"] { border-color:#78dac8; background:#18383c; box-shadow:inset 0 0 0 1px #78dac8; }
.gfx-facility-model { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; }
.gfx-facility-model :is(canvas,svg) { width:64px!important; height:64px!important; }
.gfx-facility-name { max-width:100%; white-space:normal; font-size:13px; line-height:1.5; hyphens:auto; overflow-wrap:break-word; }
.gfx-facility-level { margin-top:auto; color:#a4e6d6; font-size:11px; line-height:1.4; }
.gfx-facility-status { max-width:100%; white-space:normal; overflow-wrap:break-word; color:var(--gfx-muted); font-size:10px; line-height:1.4; }
.gfx-inspector .gfx-facility-notice { color:#f5cf7a; }
.gfx-colony .gfx-inspector, .gfx-defense .gfx-inspector { scroll-margin-top:var(--sprung-abstand,170px); }
@media(max-width:760px) {
  .gfx-catalogue { padding:14px; }
  .gfx-facility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}

/* Graphics audit: keep the native state and actions while giving labels room. */
.gfx-facility-group + .gfx-facility-group { margin-top:22px; }
.gfx-facility-group h4 { margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--gfx-line); font:500 12px var(--font-mono); color:var(--gfx-muted); }
.gfx-facility { background:radial-gradient(ellipse at 50% 28%,#2d3c54 0,transparent 65%),var(--gfx-panel-raised); }
.gfx-facility-model { width:72px; height:72px; }
.gfx-facility-status { font-size:11px; }
.gfx-inspector :is(p,.bmeta,.bcost) { font-size:13px; }
.gfx-inspector .bcost > span { white-space:nowrap; }
.gfx-nav-hint { display:none; }
body.compact-head .hstat-label { font-size:10px; }
body.compact-head .rescard .label { display:block; font-size:10.5px; line-height:1.3; }
body.compact-head .hero > svg { height:32px; }
body.compact-head .rescard { padding:6px 7px; }
/* Compact mode also serves tablets: long native names and roles need room. */
body.compact-head .dash-colony-card { max-width:100%; }
body.compact-head .dash-colony-name-text { white-space:normal; overflow:visible; overflow-wrap:break-word; }
body.compact-head .dash-colony-level { white-space:normal; overflow-wrap:break-word; }
body.compact-head #resbar .float-gain { right:auto; left:6px; top:auto; bottom:-1px; font-size:9px; }
#dailyQuestBar .bmeta { font-size:11px; line-height:1.5; }
.gfx-collection-item .left { align-items:flex-start; gap:14px; }
.gfx-collection-item .bicon { width:48px; height:48px; min-width:48px; background:radial-gradient(circle at 35% 25%,#344663,#142036)!important; border:1px solid var(--gfx-line-strong); }
.gfx-collection-item .bicon svg { width:38px; height:38px; }
.gfx-material-icon { display:block; width:44px; height:44px; background-image:url('kepler-gfx-material-atlas.png'); background-image:image-set(url('kepler-gfx-material-atlas.webp') type('image/webp'),url('kepler-gfx-material-atlas.png') type('image/png')); background-size:300% 200%; background-position:var(--material-x) var(--material-y); }
:is(#creditShopBox,#moduleMarketBox,#rareItemsBox,#inventoryBox) .bicon { width:48px; height:48px; min-width:48px; }
:is(#creditShopBox,#moduleMarketBox,#rareItemsBox,#inventoryBox) .bicon svg { width:38px; height:38px; }
:is(#creditShopBox,#moduleMarketBox) .bmeta { font-size:12px; line-height:1.65; }
:is(#creditShopBox,#moduleMarketBox) .left { align-items:flex-start; }
.gfx-collection-item .bmeta { font-size:12px; line-height:1.65; margin-top:4px; }
.gfx-collection-item .bname { font-size:14px; }
/* Native pointer feedback canonicalizes inline style spacing; possession is semantic. */
#sammlungBox > .gfx-collection-item[data-item-owned="false"]:not([aria-disabled="true"]):not(.disabled):not(:has(:disabled)),
#sammlungBox > .gfx-collection-item[data-item-owned="false"]:not([aria-disabled="true"]):not(.disabled):not(:has(:disabled)) .bmeta { opacity:1!important; }
.gfx-collection-item[data-item-source="abgrund"] .bicon { border-color:#78dac8; }
.gfx-collection-item[data-item-source="boss"] .bicon { border-color:#e5ad68; }
.gfx-collection-item[data-item-source="unikat"] .bicon { border-color:#bd9df4; }
.gfx-enemy-portrait { width:120px; height:100px; flex-shrink:0; background-image:url('kepler-gfx-enemy-atlas.png'); background-image:image-set(url('kepler-gfx-enemy-atlas.webp') type('image/webp'),url('kepler-gfx-enemy-atlas.png') type('image/png')); background-size:600% 500%; background-position:var(--enemy-x) var(--enemy-y); border:1px solid var(--gfx-line-strong); }
#npcList .left { align-items:flex-start; gap:14px; }
#npcList .bmeta { font-size:12px; line-height:1.65; margin-top:4px; }
#npcList .bcost { margin-top:10px; padding:8px 10px; background:#172b30; border-left:2px solid #78dac8; }
#officerBox button:disabled { opacity:.8; }
.gfx-trophy-hall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0; }
.gfx-trophy-case { position:relative; min-height:190px; padding:18px 14px!important; text-align:center; background:linear-gradient(135deg,rgba(139,177,229,.09),transparent 50%),radial-gradient(ellipse at 50% 25%,#25324d,#10172b 70%); border:1px solid #566888!important; box-shadow:inset 0 1px 0 #95b7de44; }
.gfx-trophy-slot { position:absolute; top:10px; left:12px; color:var(--gfx-muted); font:11px var(--font-mono); }
.gfx-trophy-plinth { position:relative; display:grid; place-items:center; height:94px; margin:0 0 14px; color:#7c8ba8; font-size:42px; border-bottom:3px solid #47546b; }
.gfx-trophy-plinth:after { content:''; position:absolute; left:20%; right:20%; bottom:-8px; height:6px; background:#28384e; border:1px solid #61728e; }
.gfx-trophy-filled .gfx-trophy-plinth { color:#f6d699; text-shadow:0 0 24px #fac77566; background:radial-gradient(ellipse at 50% 55%,#fac77518,transparent 65%); }
.gfx-trophy-case .k7-muted { font-size:12px; line-height:1.6; }
.gfx-chart-scroll { overflow-x:auto; scrollbar-width:thin; }
.gfx-chart-scroll svg { min-width:600px; width:100%; display:block; }
.gfx-chart-times { display:flex; justify-content:space-between; gap:20px; margin:8px 0 0; color:var(--gfx-muted); font:12px var(--font-mono); }
.gfx-chart-value { display:block; margin-top:5px; color:var(--gfx-text); font-size:12px; }
.gfx-chart-meta { margin:-8px 0 18px; }
.gfx-chart-meta summary { padding:8px 0; font-size:12px; color:var(--gfx-muted); cursor:pointer; }
.gfx-chart-table { max-height:220px; overflow:auto; }
.gfx-chart-table table { width:100%; border-collapse:collapse; font-size:12px; }
.gfx-chart-table :is(th,td) { padding:7px 10px; border-bottom:1px solid var(--gfx-line); text-align:left; }
.gfx-chart-point { opacity:0; }
.gfx-chart-point:last-of-type,.gfx-chart-point:hover { opacity:1; }
.gfx-activity { display:flex; align-items:center; gap:8px; margin:12px 0; padding:10px 12px; background:#183035; color:#b3ecdf; border-left:2px solid #78dac8; font-size:12px; line-height:1.5; }
.gfx-activity i { color:#78dac8; }
@media(max-width:1380px) {
  .gfx-nav-hint { display:flex; justify-content:space-between; gap:8px; color:var(--gfx-muted); font-size:11px; margin:5px 0; }
  .gfx-nav-hint span { font-weight:400; }
  #game-root .tabs { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; padding:7px 4px 10px; scrollbar-width:thin; scroll-padding:4px; }
  #game-root .tabs .tab-gruppe { display:contents; }
  #game-root .tabs .tab-btn { flex:0 0 auto; flex-direction:row; gap:7px; min-height:44px; min-width:104px; padding:8px 10px; font-size:12px; line-height:1.3; white-space:nowrap; letter-spacing:0; }
  #game-root .tabs .tab-btn[data-tab="sammlung"] { grid-column:auto; }
  #game-root .tabs .tab-icon-badge { width:22px; height:22px; }
}
@media(max-width:760px) {
  .gfx-collection-item { flex-wrap:wrap; gap:10px; }
  .gfx-collection-item > :last-child { margin-left:62px; flex-wrap:wrap; }
  .gfx-collection-item .bmeta { font-size:12px; }
  .gfx-enemy-portrait { width:80px; height:80px; }
  #npcList > .card-row { flex-wrap:wrap; gap:12px; }
  #npcList .left { gap:10px; min-width:0; }
  #npcList .left > :last-child { min-width:0; }
  #npcList .attack { margin-left:auto; min-height:44px; }
  .gfx-trophy-hall { grid-template-columns:1fr; }
  .gfx-trophy-case { min-height:170px; }
  .gfx-inspector .bcost { gap:8px 12px; }
}
/* Remaining native systems: shared artwork, readable catalogues and touch targets. */
.gfx-atlas-tile { display:block; aspect-ratio:1; background-position:var(--tile-x) var(--tile-y); background-repeat:no-repeat; flex-shrink:0; }
.gfx-orbital-art { background-image:url('kepler-gfx-orbital-atlas.png'); background-image:image-set(url('kepler-gfx-orbital-atlas.webp') type('image/webp'),url('kepler-gfx-orbital-atlas.png') type('image/png')); background-size:200% 200%; width:100%; }
.gfx-world-art { background-image:url('kepler-gfx-world-atlas.png'); background-image:image-set(url('kepler-gfx-world-atlas.webp') type('image/webp'),url('kepler-gfx-world-atlas.png') type('image/png')); background-size:200% 200%; }
.gfx-expedition-art { background-image:url('kepler-gfx-expedition-atlas.png'); background-image:image-set(url('kepler-gfx-expedition-atlas.webp') type('image/webp'),url('kepler-gfx-expedition-atlas.png') type('image/png')); background-size:300% 200%; }
.gfx-flagship-art { background-image:url('kepler-gfx-flagship-atlas.png'); background-image:image-set(url('kepler-gfx-flagship-atlas.webp') type('image/webp'),url('kepler-gfx-flagship-atlas.png') type('image/png')); background-size:300% 100%; width:100%; max-width:360px; margin:auto; }
#orbitalStationBox .gfx-orbital-choices { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:visible!important; padding:0!important; }
.gfx-orbital-choice { min-width:0!important; max-width:none!important; width:100%; box-sizing:border-box; margin:0!important; padding:12px; gap:8px; }
.gfx-orbital-current > .gfx-orbital-art { max-width:280px; margin:0 auto 12px; }
:is(#orbitalStationBox,#terraformBox) .bmeta { font-size:13px!important; line-height:1.65; }
:is(#orbitalStationBox,#terraformBox) .bname { font-size:15px!important; white-space:normal; }
:is(#orbitalStationBox,#terraformBox) button { min-height:44px; font-size:13px!important; white-space:normal!important; }
.gfx-orbital-current > div[style*="display:flex"], .gfx-terraform-panel > div[style*="display:flex"] { flex-wrap:wrap; gap:8px; }
.gfx-world-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.gfx-world-comparison > div { display:flex; flex-direction:column; align-items:center; padding:12px; background:#0a1021; border:1px solid var(--gfx-line); text-align:center; min-width:0; }
.gfx-world-comparison :is(.gfx-world-art,.gfx-world-image) { width:100%; max-width:220px; aspect-ratio:1; object-fit:contain; margin:8px 0; }
.gfx-world-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.gfx-world-choice { display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px; text-align:center; background:var(--gfx-panel-raised); border-color:var(--gfx-line-strong); }
.gfx-world-choice :is(.gfx-world-art,.gfx-world-image) { width:100%; aspect-ratio:1; object-fit:contain; }
.gfx-world-choice strong { font-size:13px; white-space:normal; }
.gfx-world-choice small { color:var(--gfx-muted); font-size:12px; line-height:1.55; font-weight:400; }
.gfx-world-choice[aria-pressed=true] { border-color:#78dac8; box-shadow:inset 0 0 0 2px #78dac8; background:#18383c; }
.gfx-ship-list .gfx-choice { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.gfx-ship-list .gfx-choice canvas { max-width:100%; height:auto!important; display:block; margin:auto; }
#fleet .ship-card .ship-art { width:112px; }
#fleet .ship-card .ship-art .frame { width:110px; height:82px; position:relative; }
#fleet .ship-art [data-gfx-ship-thumb] { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* Retain the native canvas for paint changes and the existing rendering contract. */
#fleet .ship-art [data-gfx-ship-thumb] + canvas { opacity:0; }
#fleet .ship-card .bname { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.gfx-mission-banner .gfx-scene > .gfx-expedition-art { position:absolute; right:0; top:50%; width:min(70%,500px); transform:translateY(-50%); }
.gfx-mission-banner .gfx-scene-label { max-width:min(330px,calc(100% - 36px)); z-index:1; }
.gfx-expedition-type > .gfx-expedition-art { width:100%; margin:0!important; }
.gfx-expedition-type .gfx-mission-name { font-size:14px; white-space:normal; }
.gfx-expedition-type small { font-size:12px; }
.gfx-expedition-type .gfx-mission-facts { margin-top:auto; padding-top:10px; border-top:1px solid var(--gfx-line); color:#d7e4f3; }
.gfx-research-group { margin:22px 0 10px; padding:12px 14px; background:var(--gfx-panel-raised); border-left:3px solid var(--c-primary); font-size:16px; line-height:1.4; }
#research .bname { white-space:normal; line-height:1.6; }
:is(#creditShopBox,#moduleBox,#shipModuleBox) .bmeta { font-size:13px!important; line-height:1.65; }
#creditShopBox .card-row { align-items:stretch; gap:16px; padding:18px; }
#creditShopBox .card-row > .left { flex:1; min-width:0; align-items:flex-start; }
#creditShopBox .bicon { width:60px; height:60px; flex:0 0 60px; font-size:30px; }
#creditShopBox .bicon svg { width:42px; height:42px; }
#creditShopBox .bname { font-size:15px; line-height:1.6; white-space:normal; }
#creditShopBox button { min-width:44px; min-height:44px; font-size:13px!important; white-space:normal!important; }
#creditShopBox :is([data-shop-buy],[data-daily-offer],[data-buy-weekly-deal]) { align-self:flex-end; padding:12px; max-width:200px; }
:is(#moduleBox,#shipModuleBox) button { min-height:44px; min-width:44px; font-size:12px!important; white-space:normal; }
#moduleBox .card-row > div:has(> [data-equip-module]) { max-width:100%; min-width:0; }
#moduleBox .card-row > div:has(> [data-equip-module]) > div { flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
.gfx-craft-choice { display:inline-flex; align-items:center; gap:8px; text-align:left; padding:10px!important; }
.gfx-craft-choice :is(svg,canvas) { flex:0 0 32px; width:32px!important; height:32px!important; }
.gfx-craft-choice small { display:block; color:var(--gfx-muted); font-size:11px; line-height:1.5; font-weight:400; }
#flagshipBox .gfx-flagship-card { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,1fr); gap:20px; align-items:center; }
#flagshipBox .gfx-flagship-card > .left { min-width:0; }
#flagshipBox .gfx-flagship-card > button { grid-column:2; min-height:44px; }
#flagshipBox .gfx-flagship-card .bicon { display:none; }
#flagshipBox .bname { font-size:17px; white-space:normal; line-height:1.7; }
#flagshipBox .bmeta { font-size:13px; line-height:1.7; }
#flagshipBox [data-flagship-rename] { min-height:44px; min-width:44px; font-size:12px!important; }
.gfx-officer-level { margin-top:12px; color:var(--gfx-muted); font-size:12px; }
#officerBox .bname { white-space:normal; }
#officerBox .bmeta { font-size:13px; }
#themePicker { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.gfx-theme-choice { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:10px; text-align:left; font-size:13px; white-space:normal; line-height:1.5; background:var(--gfx-panel-raised); }
.gfx-theme-swatch { display:block; width:100%; height:44px; }
.gfx-theme-choice[aria-pressed=true] { border-color:#78dac8; box-shadow:inset 0 0 0 2px #78dac8; }
.gfx-theme-choice > i { position:absolute; right:16px; top:22px; background:#101529; padding:4px; color:#fff; }
#avatarPicker { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:10px; }
#avatarPicker .avatar-option { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; width:100%; height:auto; min-height:110px; border-radius:0; background:var(--gfx-panel-raised); padding:10px 6px; font-size:12px; line-height:1.4; white-space:normal; }
.gfx-avatar-symbol { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; position:relative; }
.gfx-avatar-symbol svg { width:30px; height:30px; }
.gfx-avatar-lock { position:absolute; right:-3px; bottom:-3px; background:#101529; border:1px solid var(--gfx-line-strong); padding:3px; }
.gfx-avatar-name { color:var(--gfx-text); }
#avatarPicker .avatar-option.active { border-color:#78dac8; box-shadow:inset 0 0 0 2px #78dac8; }
#avatarPicker .avatar-option > i { position:absolute; top:6px; right:6px; color:#78dac8; }
#avatarPicker .avatar-option[disabled] { opacity:.65; }
#helpBox .help-category-header { width:100%; min-height:64px; text-align:left; border:0; border-radius:0; white-space:normal; }
#helpBox .help-category-header .bname { text-align:left; }
#helpBox .help-category-body { padding:16px; }
#helpBox .help-entry { padding:16px; margin-bottom:12px; border:1px solid var(--gfx-line); background:#0c1426; }
#helpBox .help-entry-title { font-size:15px; line-height:1.6; color:var(--gfx-text); }
#helpBox .help-entry-body { max-width:70ch; font-size:14px; line-height:1.8; color:var(--gfx-muted); overflow-wrap:anywhere; }
.gfx-empty-state { display:flex; align-items:center; gap:18px; padding:28px; margin:12px 0; background:linear-gradient(100deg,#101529e8,#101529cc),url('kepler-gfx-nebula.png') center/cover; background-image:linear-gradient(100deg,#101529e8,#101529cc),image-set(url('kepler-gfx-nebula.webp') type('image/webp'),url('kepler-gfx-nebula.png') type('image/png')); border:1px solid var(--gfx-line-strong); }
.gfx-empty-state > i { font-size:42px; color:#acbfe8; }
.gfx-empty-state strong { font-size:16px; }
.gfx-empty-state p { color:var(--gfx-muted); font-size:14px; line-height:1.6; margin:8px 0 0; }
#tab-allianz .gfx-alliance-entry .alliance-hero-banner { min-height:190px; background:linear-gradient(90deg,#0c1225ee,#0c122599),url('kepler-gfx-orbital-dock.png') center/cover!important; background-image:linear-gradient(90deg,#0c1225ee,#0c122599),image-set(url('kepler-gfx-orbital-dock.webp') type('image/webp'),url('kepler-gfx-orbital-dock.png') type('image/png'))!important; }
#tab-allianz .gfx-alliance-entry .alliance-hero-meta { max-width:48ch; font-size:14px; line-height:1.6; }
#npcList .bmeta { font-size:13px; line-height:1.7; margin:7px 0; }
#npcList .gfx-combat-facts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.gfx-combat-facts > span { display:flex; flex-direction:column; padding:10px; background:#0b1325; border:1px solid var(--gfx-line); font-size:12px; color:var(--gfx-muted); }
.gfx-combat-facts b { font-size:16px; color:var(--gfx-text); margin-top:4px; }
@media(max-width:760px) {
  #orbitalStationBox .gfx-orbital-choices { grid-template-columns:minmax(0,1fr); }
  .gfx-orbital-choice > .gfx-orbital-art { max-width:260px; margin:auto; }
  .gfx-world-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gfx-world-comparison { gap:8px; }
  .gfx-world-comparison > div { padding:8px; }
  .gfx-world-comparison strong { font-size:13px; }
  .gfx-expedition-types { grid-template-columns:minmax(0,1fr); }
  .gfx-expedition-type { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:start; }
  .gfx-expedition-type > .gfx-expedition-art { grid-row:1/4; align-self:center; }
  .gfx-expedition-type .gfx-mission-name { margin:12px 10px 6px; }
  .gfx-expedition-type small { margin:0 10px 10px; }
  .gfx-expedition-type .gfx-mission-facts { grid-column:2; }
  .gfx-mission-banner .gfx-scene > .gfx-expedition-art { width:100%; }
  #creditShopBox .card-row { flex-direction:column; padding:14px; gap:12px; }
  #creditShopBox :is([data-shop-buy],[data-daily-offer],[data-buy-weekly-deal]) { align-self:stretch; max-width:none; }
  #creditShopBox .bicon { width:44px; height:44px; flex-basis:44px; font-size:24px; }
  #creditShopBox .bicon svg { width:32px; height:32px; }
  #flagshipBox .gfx-flagship-card { grid-template-columns:minmax(0,1fr); }
  #flagshipBox .gfx-flagship-card > button { grid-column:1; white-space:normal!important; }
  #fleet .ship-card .ship-art { width:82px; }
  #fleet .ship-card .ship-art .frame { width:80px; height:60px; }
  #helpBox .help-category-body { padding:10px; }
  #helpBox .help-entry { padding:12px; }
  .gfx-empty-state { padding:18px; gap:12px; }
}

/* Selected command-centre layout. Native controls, catalogues and game data stay authoritative. */
body.command-ui { --font-ui:system-ui,sans-serif; --command-rail:208px; --command-ink:#edf3ff; --command-muted:#b7c8df; --command-line:#2b405a; --command-active:#69cfce; }
body.command-ui #game-root { width:calc(100% - var(--command-rail)); max-width:none; margin:0 0 0 var(--command-rail); }
body.command-ui .shell { width:100%; max-width:none; margin:0; border:0; background:#080e1cec; overflow:visible; }
body.command-ui .shell-inner { padding:0 22px 80px; }
body.command-ui #kanzelrahmen { display:none; }
body.command-ui #bgnebel { opacity:.22; }
body.command-ui #bgstars { opacity:.4; }
.command-rail { position:fixed; inset:0 auto 0 0; width:var(--command-rail); box-sizing:border-box; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:16px 12px; background:#0a1221; border-right:1px solid var(--command-line); z-index:65; color:var(--command-ink); }
.command-brand { display:flex; align-items:center; gap:12px; padding:4px 6px 12px; border-bottom:1px solid var(--command-line); }
.command-brand img { object-fit:contain; flex:none; }
.command-brand b { font-size:24px; letter-spacing:.4px; }
.command-brand small { display:block; margin-top:5px; font-size:10px; color:var(--command-muted); letter-spacing:1px; text-transform:uppercase; }
#commandNavClose { display:none; }
.command-rail .tabs { position:static; display:flex; flex-direction:column; flex-wrap:nowrap; gap:0; width:100%; padding:0; margin:0; max-height:none; overflow:visible; border:0; background:transparent; box-shadow:none; }
/* Override the native mobile horizontal rail as well; the whole drawer owns vertical scrolling. */
body.command-ui #game-root .command-rail .tabs { overflow:visible; padding:0; gap:0; flex:0 0 auto; min-height:auto; }
body.command-ui #game-root .command-rail .tab-btn { justify-content:flex-start; }
.command-rail .tab-gruppe { display:flex!important; flex-direction:column; flex:0 0 auto!important; gap:2px; min-width:0!important; padding:8px 0 6px!important; border:0!important; border-bottom:1px solid var(--command-line)!important; background:transparent!important; }
.command-rail .tab-gruppe-titel { position:static; display:block!important; padding:0 12px 5px; margin:0; min-height:0; font:500 11px/1.4 var(--font-ui); color:var(--command-muted); letter-spacing:1px; background:transparent; text-transform:uppercase; }
.command-rail .tab-btn { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; min-height:44px; padding:8px 10px; font:400 14px/1.4 var(--font-ui); text-align:left; white-space:normal; border-width:1px; border-color:transparent; border-left:3px solid transparent; color:var(--command-muted); background:transparent; clip-path:none; border-radius:3px; box-shadow:none; }
.command-rail .tab-icon-badge { flex:0 0 24px; display:grid; place-items:center; width:24px; height:24px; padding:0; background:transparent; border:0; }
.command-rail .tab-icon-badge :is(i,svg) { font-size:22px; width:22px; height:22px; }
.command-rail .tab-btn.active { background:#142f3b; border-left-color:var(--command-active); color:#f1ffff; }
.command-rail .tab-btn:hover { background:#172b40; color:#fff; }
.command-rail .tab-btn::after { left:12px; right:12px; bottom:0; opacity:.22; height:1px; }
.command-rail .tab-badge { position:absolute; right:8px; top:7px; }
.command-account { display:flex; align-items:center; gap:12px; flex:none; width:100%; min-height:72px; margin-top:auto; padding:16px 7px 5px; border:0; border-top:1px solid var(--command-line); background:transparent; text-align:left; color:var(--command-ink); white-space:normal; }
.command-account > span:nth-child(2) { min-width:0; flex:1; }
.command-account b { display:block; font:500 14px/1.4 var(--font-ui); overflow-wrap:anywhere; }
.command-account small { display:block; margin-top:4px; font-size:12px; color:var(--command-muted); }
#commandAvatar { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; }
#commandAvatar :is(svg,i) { width:38px; height:38px; font-size:38px; }
body.command-ui .hero, body.command-ui.compact-head .hero { position:sticky; top:0; z-index:55; height:auto; min-height:64px; margin:0 -22px; padding:0 22px; overflow:visible; background:#0a1221; border-bottom:1px solid var(--command-line); }
body.command-ui .hero > svg { display:none; }
body.command-ui .hero-bottom { position:static; inset:auto; display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:64px; padding:10px 0; box-sizing:border-box; background:transparent; }
body.command-ui .hero-title { flex:1; min-width:0; }
body.command-ui .hero-title .name { font-size:0; }
body.command-ui .hero-title .name > i, body.command-ui .hero-title .sub { display:none; }
body.command-ui #seasonalBadge { max-width:100%; margin-left:0!important; padding:5px 8px!important; white-space:normal; font-size:10px!important; }
body.command-ui .hero-actions { gap:5px; flex-wrap:nowrap; }
body.command-ui .hero-actions button { min-height:44px; min-width:44px; padding:8px 10px!important; font-size:13px!important; border:0; border-radius:3px; background:transparent!important; color:var(--command-ink); }
body.command-ui .hero-actions .header-btn-label { display:inline; }
body.command-ui #headerFeedbackBtn, body.command-ui #headerKofiBtn, body.command-ui #headerLogoutBtn { width:44px; padding:8px!important; }
body.command-ui :is(#headerFeedbackBtn,#headerKofiBtn) .header-btn-label { display:none; }
body.command-ui #headerCompactBtn { display:none; }
.command-planet { display:flex; align-items:center; gap:9px; min-width:0; max-width:320px; color:#8cdbec; }
.command-planet > i { font-size:25px; }
.command-planet select { min-height:44px; width:100%; max-width:280px; min-width:140px; font:500 14px/1.4 var(--font-ui); background:#17253b; border:1px solid #526984; color:#edf4ff; padding:9px 28px 9px 12px; border-radius:3px; }
#commandMenuToggle { display:none; }
.command-stats { position:absolute; right:22px; top:calc(100% + 3px); z-index:59; }
.command-stats > summary { display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; list-style:none; min-height:36px; padding:0 9px; color:var(--command-muted); background:#101b2d; border:1px solid var(--command-line); border-radius:3px; font-size:11px; }
.command-stats > summary::-webkit-details-marker { display:none; }
.command-stats[open] { left:0; right:0; }
.command-stats[open] > summary { margin-left:auto; width:max-content; }
body.command-ui .hero-stats-wrap { position:relative; margin:0; padding:14px; background:#101b2d; border:1px solid var(--command-line); }
body.command-ui .hero-stats { margin:0; width:100%; max-width:none; padding:0 30px 0 0; flex-wrap:wrap; gap:14px; }
body.command-ui .hstat-gruppe { max-width:100%; padding:6px; }
body.command-ui .hstat { min-height:44px; }
body.command-ui #resbar { display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; margin:0 -22px; padding:19px 22px 15px; border-bottom:1px solid var(--command-line); background:#0b1424; }
body.command-ui #resbar .rescard { display:flex; flex:initial!important; min-width:0; min-height:68px; align-items:center; gap:8px; padding:0 10px; border:0; border-right:1px solid var(--command-line); background:transparent; clip-path:none; }
body.command-ui #resbar .rescard:last-child { border-right:0; }
body.command-ui #resbar .icon-badge { flex:0 0 31px; width:31px; height:38px; background:transparent!important; border:0; }
body.command-ui #resbar .icon-badge svg { width:28px; height:28px; }
body.command-ui #resbar .rescard-info { display:block; min-width:0; }
body.command-ui #resbar .label { display:block!important; font:400 12px/1.5 var(--font-ui); color:var(--command-muted); }
body.command-ui #resbar .value { font:600 19px/1.5 var(--font-ui); color:var(--command-ink); }
body.command-ui #resbar .value > span { display:none; }
body.command-ui #resbar .rate { display:block!important; font-size:11px; line-height:1.5; color:#abd8d5; }
body.command-ui #resbar .rate .pct { font-size:10px; }
body.command-ui #resbar .t2-fill { bottom:0; height:2px; opacity:.7; }
.command-utility { display:flex; align-items:flex-start; gap:14px; margin:0 -22px 18px; padding:8px 22px; border-bottom:1px solid var(--command-line); background:#0c1525; }
body.command-ui #tier2ResBadges { flex:1; min-width:0; padding:0; margin:0!important; }
body.command-ui .werkstoffe-kopf { min-height:36px; padding:7px 2px; }
body.command-ui #tier2ResBadges .rescard { padding:5px 8px; border-radius:3px; }
.command-quests { position:relative; flex:none; max-width:45%; }
.command-quests > summary { display:flex; flex-wrap:wrap; align-items:center; gap:7px; cursor:pointer; list-style:none; min-height:36px; padding:0 10px; border:1px solid var(--command-line); color:var(--command-ink); font:400 12px/1.5 var(--font-ui); background:#19263d; border-radius:3px; }
.command-quests > summary::-webkit-details-marker { display:none; }
#commandRewardCount { color:#f5c875; font-size:10px; }
body.command-ui #dailyQuestBar { position:absolute; top:calc(100% + 4px); right:0; z-index:58; padding:15px; width:min(520px,calc(100vw - 30px)); max-height:60vh; overflow:auto; box-sizing:border-box; border:1px solid #526984; background:#101b2d; }
/* Closed native details must also remove the fixed popup from layout overflow. */
body.command-ui #commandQuests:not([open]) #dailyQuestBar { display:none; }
body.command-ui #dailyQuestBar > div { flex-direction:column; align-items:stretch!important; overflow:visible!important; }
body.command-ui #dailyQuestBar > .command-quests-head { position:sticky; top:-15px; z-index:1; display:flex; flex-direction:row; align-items:center!important; justify-content:space-between; gap:12px; margin:-15px -15px 12px; padding:7px 10px; border-bottom:1px solid var(--command-line); background:var(--gfx-panel); }
.command-quests-head strong { font:600 13px/1.4 var(--font-ui); }
#commandQuestsCloseBtn { display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0; border-radius:3px; }
body.command-ui #dailyQuestBar .lvl-pill { width:100%; box-sizing:border-box; white-space:normal; min-height:44px; }
body.command-ui #dailyQuestBar .lvl-pill span { white-space:normal; }
body.command-ui #dailyQuestBar [data-quest-nav], body.command-ui #dailyQuestBar [data-claim-quest] { flex:1; min-height:44px; }
.command-status { position:fixed; bottom:0; left:var(--command-rail); right:0; display:flex; align-items:center; gap:18px; min-height:56px; padding:6px 22px; box-sizing:border-box; z-index:54; border-top:1px solid var(--command-line); background:#0a1221f5; }
.command-status button { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 0; font:400 12px/1.4 var(--font-ui); color:var(--command-muted); background:transparent; border:0; text-align:left; white-space:normal; }
.command-status button > i { font-size:20px; color:#9ecff4; }
.command-status .loadstate { margin-left:auto; font-size:10px; max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.command-ui .fleet-position-panel { display:none; position:fixed; inset:0 0 56px auto; transform:none; box-sizing:border-box; width:min(340px,92vw); max-height:calc(100dvh - 56px); overflow:auto; background:#101b2d; z-index:210; }
body.command-ui .fleet-position-panel.fp-mobile-open { display:block; }
body.command-ui:has(.fleet-position-panel.fp-mobile-open) .command-status { z-index:206; }
body.command-ui .fp-close-btn { display:block; min-width:44px; min-height:44px; }
body.command-ui #fpToggleBtn { display:none; }
body.command-ui #chatEdgeTab { display:none; }
body.command-ui #chatPanelOverlay { z-index:197; }
body.command-ui #chatPanel { z-index:198; }
.command-colonies { margin:0 0 20px; color:var(--command-muted); }
.command-colonies > summary { cursor:pointer; min-height:44px; padding:8px 0; font-size:14px; box-sizing:border-box; }
body.command-ui .gfx-colony { border:0; background:transparent; margin-bottom:14px; }
body.command-ui .gfx-colony .gfx-heading { background:transparent; padding:0 0 16px; border:0; min-height:0; }
body.command-ui .gfx-colony .gfx-eyebrow { font:500 11px/1.5 var(--font-ui); color:var(--command-muted); }
body.command-ui .gfx-colony .gfx-heading .gfx-eyebrow { display:none; }
body.command-ui .gfx-colony h2 { font:600 28px/1.4 var(--font-ui); }
body.command-ui .gfx-colony .gfx-layout { grid-template-columns:minmax(0,1fr) 320px; gap:14px; min-height:460px; }
body.command-ui .gfx-colony .gfx-scene { min-height:460px; border:1px solid var(--command-line); }
body.command-ui .gfx-colony .gfx-inspector { padding:24px 20px; background:var(--gfx-panel); border:1px solid var(--command-line); }
body.command-ui .gfx-inspector h3 { font:600 22px/1.4 var(--font-ui); }
body.command-ui #game-root :is(h1,h2,h3),
body.command-ui .fwahl-karte .fwahl-titel,
body.command-ui .login-overlay:not(.login-landing) :is(.login-title,.fwahl-titel) { font-family:var(--font-ui); }
body.command-ui .gfx-inspector :is(p,.bmeta,.bcost) { font-size:14px; line-height:1.65; }
body.command-ui .gfx-inspector button { min-height:44px; font-size:14px; }
body.command-ui .gfx-hotspot { font:500 13px/1.4 var(--font-ui); border-radius:3px; }
body.command-ui :is(button,select,input,summary):focus-visible { outline:3px solid #7fcbff; outline-offset:3px; }
body.command-ui .tab-panel :is(input,select) { box-sizing:border-box; max-width:100%; min-width:0; }
body.command-ui :is(.login-card,.profile-card) { background-color:#101b2d; border-color:var(--command-line); }
@media(max-width:1200px) {
  body.command-ui { --command-rail:188px; }
  .command-rail { padding:12px 8px; }
  .command-brand { gap:8px; }.command-brand b { font-size:21px; }
  .command-rail .tab-btn { min-height:44px; padding:8px 9px; font-size:13px; }
  body.command-ui .hero-actions .header-btn-label { display:none; }
  body.command-ui #resbar { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; }
  body.command-ui #resbar .rescard:nth-child(3n) { border-right:0; }
  body.command-ui .gfx-colony .gfx-layout { grid-template-columns:minmax(0,1fr) 285px; }
}
@media(max-width:900px) {
  body.command-ui { --command-rail:0px; }
  body.command-ui #dailyQuestBar { position:fixed; top:auto; bottom:calc(var(--command-status-height,56px) + 12px); left:calc(12px + var(--command-safe-left,0px)); right:calc(12px + var(--command-safe-right,0px)); width:auto; }
  body.command-ui #game-root { width:100%; margin:0; }
  body.command-ui .shell-inner { padding:0 16px 76px; }
  .command-rail { display:none; width:min(280px,90vw); padding:12px; z-index:195; }
  .command-rail.open { display:flex; }
  #commandNavClose { display:grid; place-items:center; width:44px; min-width:44px; height:44px; margin-left:auto; padding:0; font-size:22px; }
  .command-brand { gap:8px; padding-bottom:12px; }
  .command-rail .tab-btn { min-height:44px; font-size:14px; }
  .command-nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; background:#030811b8; z-index:194; }
  #commandMenuToggle { display:flex; align-items:center; gap:7px; min-height:44px; min-width:44px; padding:8px; font-size:13px; background:#17253b; border:1px solid #526984; }
  body.command-ui .hero, body.command-ui.compact-head .hero { margin:0 -16px; padding:0 16px; }
  body.command-ui .hero-bottom { gap:8px; }
  body.command-ui .hero-title { display:none; }
  .command-planet { flex:1; max-width:none; }.command-planet select { max-width:100%; min-width:0; }
  body.command-ui #resbar { margin:0 -16px; padding:14px 10px; }
  .command-utility { margin:0 -16px 16px; padding:7px 16px; }
  .command-status { padding:6px 16px; gap:15px; }
  .command-status .loadstate { display:none; }
  body.command-ui .gfx-colony .gfx-layout { grid-template-columns:minmax(0,1fr) 280px; }
}
@media(max-width:620px) {
  body.command-ui .shell-inner { padding:0 12px 76px; }
  body.command-ui .hero, body.command-ui.compact-head .hero { margin:0 -12px; padding:0 12px; }
  body.command-ui .hero-bottom { min-height:60px; padding:8px 0; }
  .command-planet > i { display:none; }
  #commandMenuToggle span { display:none; }
  body.command-ui .hero-actions :is(#headerFeedbackBtn,#headerKofiBtn,#headerHelpBtn,#headerProfileBtn,#headerLogoutBtn) { display:none!important; }
  body.command-ui .hero-actions { margin-left:auto; }
  .command-stats { right:12px; }
  .command-stats > summary { min-height:32px; padding:0 6px; font-size:10px; }
  body.command-ui #resbar { margin:0 -12px; padding:10px 4px; row-gap:9px; }
  body.command-ui #resbar .rescard { gap:6px; padding:0 6px; min-height:65px; }
  body.command-ui #resbar .icon-badge { flex-basis:24px; width:24px; }
  body.command-ui #resbar .icon-badge svg { width:23px; height:23px; }
  body.command-ui #resbar .label { font-size:10px; }
  body.command-ui #resbar .value { font-size:17px; }
  body.command-ui #resbar .rate { font-size:9.5px; }
  body.command-ui #resbar .rate .pct { display:none; }
  .command-utility { margin:0 -12px 15px; padding:6px 12px; gap:8px; }
  .command-quests { max-width:42%; }
  .command-quests > summary { min-height:44px; padding:4px 8px; font-size:11px; }
  #commandRewardCount { width:100%; font-size:9px; }
  body.command-ui #tier2ResBadges .werkstoffe-kopf { min-height:44px; }
  body.command-ui #tier2ResBadges .werkstoffe-klapper-wort { display:none; }
  body.command-ui .gfx-colony .gfx-heading { padding-bottom:12px; align-items:center; }
  body.command-ui .gfx-colony h2 { font-size:23px; }
  body.command-ui .gfx-colony .gfx-location { max-width:110px; font-size:11px; }
  body.command-ui .gfx-colony .gfx-layout { grid-template-columns:minmax(0,1fr); min-height:0; gap:0; }
  body.command-ui .gfx-colony .gfx-scene { min-height:300px; }
  body.command-ui .gfx-colony .gfx-inspector { padding:18px; }
  body.command-ui .gfx-hotspot { font-size:11px; padding:7px; }
  .command-status { gap:12px; padding:6px 12px; }
  .command-status button { font-size:11px; flex:1; }
}
@media(prefers-reduced-motion:reduce) { .command-rail *, .command-stats *, .command-quests * { transition:none!important; } }

/* Undo the former screen-reader-only one-line HUD treatment in this layout. */
body.command-ui #resbar .rescard :is(.label,.rate) { position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip:auto; white-space:normal; }
body.command-ui #resbar .rescard .label { font-size:12px; line-height:1.4; }
body.command-ui #resbar .rescard .value { font-size:19px; }
body.command-ui #resbar .rescard .icon-badge { height:38px; }
body.command-ui #resbar .rescard .icon-badge svg { width:28px; height:28px; }
body.command-ui #resbar .rescard .rate { white-space:nowrap; }
body.command-ui #tier2ResBadges { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
body.command-ui #tier2ResBadges .werkstoffe-kopf { flex:0 0 auto; width:auto; max-width:100%; padding:7px 8px 7px 0; }
body.command-ui #tier2ResBadges .rescard { flex:0 1 auto; min-width:0; }
body.command-ui .gfx-colony .gfx-facility-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
body.command-ui .gfx-colony .gfx-catalogue { padding:14px 18px; }
body.command-ui .gfx-colony .gfx-facility { box-sizing:border-box; min-height:132px; }
.command-building-model { float:left; margin:0 12px 12px 0; }
.command-building-model canvas { display:block; width:96px; height:96px; }
.command-building-model + .gfx-eyebrow { display:block; padding-top:12px; }
body.command-ui .gfx-inspector .gfx-level { display:block; font-size:17px; color:var(--command-active); }
body.command-ui .gfx-inspector > .command-building-model ~ .gfx-level { clear:both; }
body.command-ui .gfx-inspector p { clear:both; }
body.command-ui .gfx-colony .gfx-inspector > p:last-of-type { display:none; }
.command-queue-action { margin-top:10px; width:100%; padding:10px; color:var(--command-ink); background:#16263c; border:1px solid #526984; }
.command-tools { display:flex; align-items:center; flex-wrap:wrap; gap:3px; margin-top:12px; padding-top:8px; }
.command-tools button,.command-tools summary { min-height:44px; min-width:44px; padding:6px; font-size:11px; color:var(--command-muted); border:0; background:transparent; cursor:pointer; }
.command-tools details { width:100%; }
.command-tools details > summary { min-height:30px; }
.command-tools details[open] button { display:block; width:100%; text-align:left; }
.command-stats, .command-stats[open] { position:static; flex:none; }
.command-stats > summary { min-width:44px; min-height:44px; box-sizing:border-box; }
body.command-ui .command-stats .hero-stats-wrap { position:absolute; top:100%; left:0; right:0; max-height:70vh; overflow:auto; }
body.command-ui .hero-stats { overflow:visible; padding:0; }
body.command-ui .hstat-gruppe { flex:1 1 320px; min-width:0; flex-wrap:wrap; }
body.command-ui .hstat-gruppe-titel { flex:0 0 100%; position:static; padding:0 0 6px; }
body.command-ui .hstat { flex:0 1 auto; max-width:100%; }
body.command-ui .hstat-text { min-width:0; overflow-wrap:anywhere; }
body.command-ui #heroStatsMehr { display:none; }
body.command-ui #resbar .rescard .label { overflow-wrap:anywhere; }
body.command-ui #resbar .rescard .rate { white-space:normal; overflow-wrap:anywhere; }
.command-tools details > summary { min-height:44px; }
@media(min-width:901px) {
 .command-tools { margin-top:4px; padding-top:4px; }
 .command-tools :is([data-command-header=headerHelpBtn],[data-command-header=headerReportsBtn]) { display:none; }
}
@media(max-width:620px) {
 .command-stats > summary { min-height:44px; }
 .command-stats > summary span { display:none; }
 body.command-ui #resbar .rescard .label { font-size:10px; }
 body.command-ui #resbar .rescard .value { font-size:17px; }
 body.command-ui #resbar .rescard .icon-badge svg { width:23px; height:23px; }
 body.command-ui .gfx-colony .gfx-facility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.command-ui .gfx-collection-item > :last-child { box-sizing:border-box; width:calc(100% - 62px); max-width:calc(100% - 62px); min-width:0; }
  body.command-ui .gfx-research .gfx-heading { flex-wrap:wrap; }
  body.command-ui .gfx-research .gfx-heading > div { max-width:100%; }
  body.command-ui .gfx-research .gfx-location { max-width:100%; text-align:left; }
  body.command-ui #research .bname { overflow-wrap:anywhere; }
 .command-utility { display:block; position:relative; }
 .command-quests { position:absolute; right:12px; top:7px; max-width:150px; }
 body.command-ui #tier2ResBadges .werkstoffe-kopf { flex-basis:100%; min-height:60px; padding-right:165px; box-sizing:border-box; }
}

/* Keep native PWA safe areas: the top bar and bottom drawer share the same measured edges. */
body.command-ui {
 --command-safe-top:env(safe-area-inset-top,0px);
 --command-safe-bottom:env(safe-area-inset-bottom,0px);
 --command-safe-left:env(safe-area-inset-left,0px);
 --command-safe-right:env(safe-area-inset-right,0px);
 --command-rail:calc(208px + var(--command-safe-left));
 --command-content-left:max(0px,calc(var(--command-safe-left) - var(--command-rail)));
 --command-status-min-height:calc(56px + var(--command-safe-bottom));
 --command-status-height:var(--command-status-min-height);
 --command-shell-padding:22px;
 --command-content-gap:24px;
 --command-rail-padding-y:16px;
 --command-rail-padding-x:12px;
}
body.command-ui .shell-inner {
 padding:0 calc(var(--command-shell-padding) + var(--command-safe-right)) calc(var(--command-status-height) + var(--command-content-gap)) calc(var(--command-shell-padding) + var(--command-content-left));
}
body.command-ui .hero,body.command-ui.compact-head .hero {
 margin:0 calc(-1 * (var(--command-shell-padding) + var(--command-safe-right))) 0 calc(-1 * (var(--command-shell-padding) + var(--command-content-left)));
 padding:var(--command-safe-top) calc(var(--command-shell-padding) + var(--command-safe-right)) 0 calc(var(--command-shell-padding) + var(--command-content-left));
}
body.command-ui .command-rail {
 padding:calc(var(--command-rail-padding-y) + var(--command-safe-top)) var(--command-rail-padding-x) calc(var(--command-rail-padding-y) + var(--command-safe-bottom)) calc(var(--command-rail-padding-x) + var(--command-safe-left));
}
body.command-ui .command-status {
 min-height:var(--command-status-min-height);
 padding:6px calc(var(--command-shell-padding) + var(--command-safe-right)) calc(6px + var(--command-safe-bottom)) calc(var(--command-shell-padding) + var(--command-content-left));
}
body.command-ui .fleet-position-panel {
 inset:var(--command-safe-top) var(--command-safe-right) var(--command-status-height) auto;
 max-height:calc(100dvh - var(--command-safe-top) - var(--command-status-height));
}
body.command-ui .fleet-sticky { top:var(--leisten-hoehe,64px); }
body.command-ui #buildQueueBox { scroll-margin-top:var(--sprung-abstand,80px); }
@media(max-width:1200px) {
 body.command-ui { --command-rail:calc(188px + var(--command-safe-left)); --command-rail-padding-y:12px; --command-rail-padding-x:8px; }
}
@media(max-width:900px) {
 body.command-ui { --command-rail:0px; --command-shell-padding:16px; --command-content-gap:20px; --command-rail-padding-x:12px; }
 body.command-ui .command-rail { width:min(calc(280px + var(--command-safe-left)),90vw); }
}
@media(max-width:620px) {
 body.command-ui { --command-shell-padding:12px; }
}
@media(max-width:480px) {
 body.command-ui #resbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body.command-ui #resbar .rescard:nth-child(3n) { border-right:1px solid var(--command-line); }
 body.command-ui #resbar .rescard:nth-child(2n) { border-right:0; }
}

/* Player-selected top navigation uses the same native menu, HUD and tab handlers. */
#commandMenuPosition { min-height:44px; max-width:100%; flex-shrink:0; }
body.command-ui.command-menu-top { --command-rail:0px; }
body.command-ui.command-menu-top #game-root #commandNav {
 position:sticky; inset:auto; top:var(--command-header-height,64px);
 display:grid; grid-template-columns:minmax(0,1fr) auto;
 /* Reserve content below the sticky menu, including a complete 44px action
    around the viewport midpoint used by native scrolling and pointer actions. */
 width:100%; max-height:max(44px,min(calc((100dvh - var(--command-header-height,64px) - var(--command-status-height)) / 2),calc(50dvh - var(--command-header-height,64px) - 24px)));
 overflow-x:hidden; overflow-y:auto; padding:8px 0; background:#0a1221;
 margin:0 0 16px; gap:6px; border:0; border-bottom:1px solid var(--command-line); z-index:54;
}
body.command-ui.command-menu-top #commandNav .command-brand,
body.command-ui.command-menu-top #commandNavClose,
body.command-ui.command-menu-top #commandMenuToggle { display:none; }
body.command-ui.command-menu-top #game-root #commandNav .tabs {
 /* Only the outer navigation sticks; compact-header rules must not pin its
    inner tab grid over the account and settings controls while it scrolls. */
 position:static; top:auto; z-index:auto;
 display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-column:1/-1;
 flex-direction:row; flex-wrap:wrap; gap:6px; width:100%; min-width:0;
}
body.command-ui.command-menu-top #commandNav .tab-gruppe {
 display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start;
 gap:4px; flex:initial!important; min-width:0!important; padding:6px!important;
 border:0!important; border-top:var(--bw-rail) solid var(--grp-dom)!important;
 background:var(--gfx-panel)!important;
}
body.command-ui.command-menu-top #commandNav .tab-gruppe-titel {
 grid-column:1/-1; padding:0 0 4px; font-size:11px; color:var(--grp-dom);
}
body.command-ui.command-menu-top #game-root #commandNav .tab-btn {
 flex-direction:row; justify-content:center; gap:6px; padding:6px; font-size:12px;
 min-height:44px; min-width:0; width:100%; white-space:normal; text-align:center; overflow-wrap:anywhere;
}
body.command-ui.command-menu-top #commandNav .tab-icon-badge {
 flex:0 0 18px; width:18px; height:18px;
}
body.command-ui.command-menu-top #commandNav .tab-icon-badge :is(i,svg) {
 width:18px; height:18px; font-size:18px;
}
body.command-ui.command-menu-top #commandNav .command-tools { margin:0; padding:0; }
body.command-ui.command-menu-top #commandNav .command-tools details { width:auto; position:relative; }
body.command-ui.command-menu-top #commandNav .command-tools details[open] {
 align-self:flex-start; border:1px solid var(--command-line); background:var(--gfx-panel);
}
body.command-ui.command-menu-top #commandAccountBtn {
 width:auto; min-width:0; min-height:44px; margin:0; padding:6px;
 border:0; border-left:1px solid var(--command-line);
}
body.command-ui.command-menu-top #commandAvatar { flex-basis:28px; width:28px; height:28px; }
body.command-ui.command-menu-top #commandAvatar :is(svg,i) { width:28px; height:28px; font-size:28px; }
body.command-ui.command-menu-top #commandAccountBtn b { max-width:180px; font-size:12px; }
body.command-ui.command-menu-top #commandAccountBtn small { font-size:10px; }
@media(max-width:900px) {
 /* As in the native compact rail, domain groups remain in the DOM while tiles
    share a small-screen grid. Labels stay readable rather than becoming a drawer. */
 body.command-ui.command-menu-top #game-root #commandNav .tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
 body.command-ui.command-menu-top #commandNav .tab-gruppe { display:contents!important; }
 body.command-ui.command-menu-top #commandNav .tab-gruppe-titel { display:none!important; }
 body.command-ui.command-menu-top #game-root #commandNav .tab-btn {
  flex-direction:column; min-height:56px; padding:6px 4px; gap:4px; border-left-width:1px;
 }
 body.command-ui.command-menu-top #game-root #commandNav .tab-btn[data-tab="sammlung"] {
  grid-column:1/-1; flex-direction:row; min-height:44px;
 }
 body.command-ui.command-menu-top #commandAccountBtn { gap:6px; }
 body.command-ui.command-menu-top #commandAccountBtn b { max-width:100px; }
}
/* Short notices share a readable width; authored wider choice and data dialogs
   retain their 460/520/560px widths and their native scrolling containers. */
body.command-ui :is(#updateNoticeOverlay,#welcomeBackOverlay,#kofiEmailPromptOverlay,
 #prestigePerkOverlay,#ascensionPathOverlay,#conflictOverlay,#tutorialOverlay) > .login-card {
 max-width:min(400px,100%); padding:20px;
}
body.command-ui .kmenu { min-width:min(200px,88vw); max-width:min(260px,88vw); box-sizing:border-box; }
body.command-ui .kmenu button { min-height:44px; font-size:12px; line-height:1.4; }
body.command-ui .kmenu-grund { font-size:11px; line-height:1.45; }

/* Dialog roles: short notices, data choices and context actions keep their own
   widths. Inner columns may shrink and wrap instead of painting over values. */
body.command-ui .login-overlay:not(.login-landing) .login-header {
 align-items:flex-start; gap:12px; margin-bottom:16px;
}
body.command-ui .login-overlay:not(.login-landing) .login-header > :is(div,span) { min-width:0; }
body.command-ui .login-overlay:not(.login-landing) :is(.login-title,.login-sub,.login-note) {
 overflow-wrap:anywhere; line-height:1.5;
}
body.command-ui .login-overlay:not(.login-landing) :is(.login-sub,.login-note) { font-size:12px; }
body.command-ui :is(#updateNoticeOverlay,#welcomeBackOverlay,#kofiEmailPromptOverlay) .login-header { padding-right:44px; }
body.command-ui :is(#updateCloseBtn,#welcomeBackCloseBtn,#kofiEmailPromptCloseBtn,
 #profileCloseBtn,#allianceDonationCloseBtn,#adminPanelCloseBtn) {
 min-width:44px; min-height:44px; box-sizing:border-box;
}
body.command-ui .login-overlay:not(.login-landing) :is(input,select,textarea,button) {
 box-sizing:border-box; max-width:100%;
}
body.command-ui .login-overlay:not(.login-landing) button { min-height:44px; white-space:normal; }

/* Native offline production and login rewards can contain every resource. The
   complete amount belongs below its heading, not in a competing narrow column. */
body.command-ui #welcomeBackBody > .card-row:has(> .lvl-pill),
body.command-ui #welcomeBackBody > .card-row:has(> span:first-child):has(> span:last-child) {
 display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px; align-items:start;
}
body.command-ui #welcomeBackBody .card-row > .left { min-width:0; align-items:flex-start; }
body.command-ui #welcomeBackBody .left > i { flex:0 0 18px; }
body.command-ui #welcomeBackBody .left > :is(.bname,.bmeta) { min-width:0; overflow-wrap:anywhere; line-height:1.5; }
body.command-ui #welcomeBackBody .card-row > .lvl-pill {
 display:block; width:100%; min-width:0; box-sizing:border-box;
 padding:7px 9px; font-size:12px!important; line-height:1.55;
 white-space:normal; overflow-wrap:anywhere; text-align:left;
}
body.command-ui #welcomeBackBody .card-row > span { min-width:0; max-width:100%; overflow-wrap:anywhere; line-height:1.5; }

/* Fleet choice keeps a fixed header/footer and scrolls only its native body. */
body.command-ui .fwahl-karte { width:min(560px,100%); box-sizing:border-box; }
body.command-ui .fwahl-kopf { padding:12px 14px; gap:12px; }
body.command-ui .fwahl-kopf > :first-child { min-width:0; }
body.command-ui .fwahl-art { font-size:11px; }
body.command-ui .fwahl-titel { font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
body.command-ui .fwahl-zu { flex:0 0 44px; min-width:44px; min-height:44px; }
body.command-ui .fwahl-reiter { padding:8px 14px; }
body.command-ui .fwahl-rumpf { min-height:0; padding:10px 14px; }
body.command-ui .fwahl-fuss { padding:12px 14px; }
body.command-ui .fwahl-karte :is(button,input,select) { box-sizing:border-box; min-height:44px; }
body.command-ui .fwahl-karte :is(.bmeta,.fwahl-warn) { font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
body.command-ui .fwahl-rumpf .card-row { flex-wrap:wrap; gap:8px; }
body.command-ui .fwahl-rumpf .card-row > .left { flex:1 1 200px; min-width:0; align-items:flex-start; }
body.command-ui .fwahl-rumpf .card-row > .left > div:last-child { min-width:0; }
body.command-ui .fwahl-rumpf .card-row > div:has(> [data-atksel-dec]) {
 flex-wrap:wrap; max-width:100%; justify-content:flex-start;
}
body.command-ui .fwahl-rumpf .card-row > div:has(> [data-atksel-dec]) .lvl-pill {
 flex:1 1 56px; min-width:0!important; max-width:120px;
 white-space:normal; overflow-wrap:anywhere; line-height:1.5;
}

body.command-ui .kmenu :is(.kmenu-titel,.kmenu-info-zahl,.kmenu-grund) {
 white-space:normal; overflow-wrap:anywhere; line-height:1.5;
}
body.command-ui .kmenu button { box-sizing:border-box; min-width:0; white-space:normal; overflow-wrap:anywhere; }

/* Canvas artwork retains the hull's aspect ratio at both native thumbnail
   sizes. The inspector allocates columns to labels and full numerical values. */
#fleet .ship-art canvas[data-gfx-ship-thumb] { width:100%!important; height:100%!important; object-fit:contain; }
.gfx-native-ship canvas { width:min(94%,680px)!important; max-height:calc(100% - 68px); object-fit:contain; }
@supports (width:1cqh) {
 .gfx-native-ship { container-type:size; }
 /* Restrict both axes to the same 4:3 paint rectangle, retaining the caption gap. */
 .gfx-native-ship canvas { width:min(94cqw,680px,calc((100cqh - 68px) * 4 / 3))!important; }
}
:is(#shipyardVisual .gfx-inspector,#fleet .ship-card) .sstat {
 display:grid; grid-template-columns:60px minmax(8px,1fr) minmax(56px,1fr); gap:6px;
}
:is(#shipyardVisual .gfx-inspector,#fleet .ship-card) .sstat .k { width:auto; min-width:0; font-size:11px; letter-spacing:.02em; line-height:1.4; }
:is(#shipyardVisual .gfx-inspector,#fleet .ship-card) .sstat .v { width:auto; min-width:0; font-size:12px; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
@media(max-width:1100px) {
 .gfx-ship-layout { grid-template-columns:minmax(0,1fr); min-height:0; }
 .gfx-ship-list { flex-direction:row; border-right:0; border-bottom:var(--bw-1) solid var(--gfx-line); }
 .gfx-ship-list .gfx-choice { flex:0 0 110px; }
}
@media(max-width:900px) {
 body.command-ui.command-menu-top #game-root #commandNav .tab-btn {
  font-size:12px; letter-spacing:-.01em; overflow-wrap:normal; word-break:normal; hyphens:auto;
 }
}
@media(max-width:360px) {
 body.command-ui.command-menu-top #game-root #commandNav .tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Keep dormant artwork after themed backgrounds, including the important alliance banner. */
:is(.gfx-asset-deferred,.gfx-officer-portrait,.gfx-material-icon,.gfx-enemy-portrait,.gfx-journey,.gfx-empty-state,#tab-karte .map-wrap,.gfx-alliance-entry .alliance-hero-banner):not([data-gfx-ready="true"]) { background-image:none!important; }

/* interface-clarity:entry */
/* The scrim keeps authored text legible even over the brightest galaxy artwork. */
#loginOverlay .ll-sky-scrim {
 background:linear-gradient(180deg,rgba(4,6,14,.86),rgba(4,6,14,.76) 55%,rgba(4,6,14,.68));
}
#loginOverlay .ll-topbar {
 background:rgba(8,14,27,.96); color:#d5dced; font-size:12px;
 letter-spacing:.09em; flex-wrap:wrap; gap:8px 16px;
 border-bottom:1px solid rgba(180,189,220,.22);
}
#loginOverlay .ll-topbar nav { gap:8px 16px; }
#loginOverlay .ll-topbar nav a {
 display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:#d5dced;
}
#loginOverlay .ll-h1 {
 background:none; color:#f3f4ff; filter:none; text-shadow:0 2px 18px #04060e;
}
#loginOverlay .ll-lede { color:#e2e7f3; font-size:clamp(15px,1.3vw,17px); }
#loginOverlay :is(.ll-kicker,.ll-trust) { font-size:12px; letter-spacing:.12em; }
#loginOverlay :is(.ll-kicker,.ll-trust b) { color:#9be9cf; }
#loginOverlay .ll-trust { color:#d5dced; }
#loginOverlay .ll-livebar { background:rgba(8,14,27,.96); }
#loginOverlay .ll-livebar span { font-size:12px; letter-spacing:.1em; color:#d5dced; line-height:1.5; }
#loginModal .login-card { background:#0d1224; box-sizing:border-box; }
#loginModal .login-field-label {
 display:block; color:#e2e7f3; font-size:13px; font-weight:600; line-height:1.5; margin:0 0 5px;
}
#loginModal .login-field-hint { color:#c8d0e4; font-size:12px; line-height:1.5; margin:-5px 0 12px; }
#loginModal .login-card input:not([type="checkbox"]) { min-height:44px; font-size:14px; }
#loginModal :is(.login-sub,.login-note) { color:#c8d0e4; font-size:12px; line-height:1.5; }
#loginModal .login-secondary-link {
 display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 8px;
 color:#d5dced; font-size:14px; line-height:1.5; text-decoration:underline; text-underline-offset:3px;
}
#loginModal :is(.login-secondary-link,.login-tab,input,.login-submit):focus-visible {
 outline:2px solid #b9b1ff; outline-offset:3px;
}
@media(max-width:520px) {
 #loginOverlay .ll-topbar { justify-content:center; text-align:center; }
 #loginOverlay .ll-livebar div { padding:16px 10px; }
 #loginOverlay .ll-livebar span { letter-spacing:.04em; overflow-wrap:anywhere; }
}
/* interface-clarity:entry end */

/* interface-clarity:display
   Layout density uses actual type, spacing and target sizes. Native sticky offsets,
   safe areas, dialogs, artwork and every building remain in their existing flow. */
body.command-ui .command-display-preference { margin-bottom:8px; gap:12px; flex-wrap:wrap; }
body.command-ui #commandMenuPositionHint { font-size:12px; }
body.command-ui #tab-einstellungen textarea { box-sizing:border-box; min-width:0; max-width:100%; }
body.command-ui .command-display-preference > .left { flex:1 1 240px; min-width:0; align-items:flex-start; }
body.command-ui .command-display-preference > .left > div:last-child { min-width:0; }
body.command-ui .command-display-preference :is(.bname,.bmeta) { white-space:normal; overflow-wrap:anywhere; }
body.command-ui :is(#commandDisplaySize,#commandGraphicsQuality) {
 box-sizing:border-box; min-height:44px; min-width:0; max-width:100%; width:170px;
 padding:8px; font-size:13px;
}
body.command-ui[data-command-display-size="compact"] {
 --display-name:13px; --display-copy:12px; --display-heading:15px; --display-gap:8px;
 --display-pad:8px; --display-target:44px; --display-value:18px;
}
body.command-ui[data-command-display-size="large"] {
 --display-name:16px; --display-copy:14px; --display-heading:19px; --display-gap:14px;
 --display-pad:14px; --display-target:48px; --display-value:24px;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root :is(.bname,.gfx-facility-name) {
 font-size:var(--display-name)!important; line-height:1.5; white-space:normal; overflow-wrap:anywhere;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root :is(.bmeta,.bcost,.gfx-facility-status) {
 font-size:var(--display-copy)!important; line-height:1.55; overflow-wrap:anywhere;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root .section-title {
 font-size:var(--display-heading); line-height:1.5;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root :is(.card-row,.gfx-inspector) {
 padding:var(--display-pad); gap:var(--display-gap);
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root :is(.gfx-facility-grid,.gfx-tech-path) { gap:var(--display-gap); }
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root :is(button,select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),summary) {
 min-height:var(--display-target); font-size:var(--display-copy); box-sizing:border-box;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #game-root button { min-width:44px; }
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #resbar .rescard {
 min-height:calc(var(--display-target) + 16px); padding:var(--display-pad); gap:var(--display-gap);
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #resbar .rescard :is(.label,.rate) {
 font-size:var(--display-copy); line-height:1.4; white-space:normal; overflow-wrap:anywhere;
}
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #resbar .rescard .value {
 font-size:var(--display-value); white-space:normal; overflow-wrap:anywhere;
}
body.command-ui[data-command-display-size="large"] #game-root #commandNav .tab-btn { font-size:14px; }
body.command-ui[data-command-display-size="large"] :is(#commandDisplaySize,#commandGraphicsQuality) { min-height:48px; font-size:14px; }
/* interface-clarity:display:content-type */
/* The same size choice applies to the new comparison and report summaries. */
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) :is(.k7-building-compare-scroll table,#reportsBox .report-overview dt,#reportsBox .report-overview dd,#reportsBox .report-overview-note,#reportsBox .report-overview-ships .schiffchip) { font-size:var(--display-copy); line-height:1.55; }
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) .k7-building-compare-heading h3 { font-size:var(--display-heading); }
body.command-ui:is([data-command-display-size="compact"],[data-command-display-size="large"]) #reportsBox .report-overview dd > strong { font-size:var(--display-value); }
/* interface-clarity:display:content-type:end */
@media(max-width:620px) {
 body.command-ui .command-display-preference > .left { flex-basis:100%; }
 body.command-ui .command-display-preference > select { width:100%; }
 body.command-ui[data-command-display-size="large"] #resbar .rescard { flex-wrap:wrap; }
 body.command-ui[data-command-display-size="large"].command-menu-top #game-root #commandNav .tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Only decorative loops are suppressed. Tab entry, readiness, status signals and
   control feedback retain their original events and visibility. */
body.command-ui[data-command-graphics-quality="economy"] #bgnebel { visibility:hidden; }
body.command-ui[data-command-graphics-quality="economy"] :is(.moon1,.moon2,.twinkle,.planet-terminator,.profile-hero-card,.frame-ring,.profile-online-dot,.vitrine-bild,.konst-emblem,.konst-emblem svg > g,.waechter-portrait,.ab-hero-model,.ab-hero-ring,.ab-hero-radar::before) { animation:none!important; }
body.command-ui[data-command-graphics-quality="economy"] :is(.hero-stats-wrap,.rescard,.gfx-view) { backdrop-filter:none!important; }
body.command-ui:is([data-command-graphics-quality="economy"],[data-command-graphics-quality="balanced"]) :is(.frame-ring,.vitrine-bild,.konst-emblem,.konst-emblem svg > g,.ab-hero-ring,.ab-hero-radar::before) { animation:none!important; }
/* interface-clarity:display:end */

/* interface-clarity:reports */
#reportsBox .report-card { min-width:0; }
#reportsBox .report-card-head { flex-wrap:wrap; }
#reportsBox .report-card-head > .bname { flex-basis:180px!important; overflow-wrap:anywhere; }
#reportsBox .report-card button { min-width:44px; min-height:44px; }
#reportsBox .report-overview { margin-top:12px; padding:10px; background:rgba(10,21,34,.5); border:var(--bw-1) solid var(--line-1); }
#reportsBox .report-overview dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
#reportsBox .report-overview-cell { min-width:0; }
#reportsBox .report-overview dt { margin-bottom:5px; color:var(--gfx-muted); font-size:12px; font-weight:600; line-height:1.4; }
#reportsBox .report-overview dd { margin:0; color:var(--gfx-text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#reportsBox .report-overview dd > strong { color:#cdebf8; font-family:var(--font-mono); font-size:18px; }
#reportsBox .report-overview-resource { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; margin-right:8px; }
#reportsBox .report-overview-resource b { color:#b5e8cf; font-family:var(--font-mono); }
#reportsBox .report-overview-note { display:block; color:var(--gfx-muted); font-size:12px; }
#reportsBox .report-overview-ships { margin-top:7px; }
#reportsBox .report-overview-ships .schiffreihe { gap:5px; }
#reportsBox .report-overview-ships .schiffchip { min-width:0; white-space:normal; font-size:12px; }
#reportsBox .report-overview-ships .gbi-schiff { width:32px; height:28px; flex:0 0 32px; }
@media(max-width:560px) {
 #reportsBox .report-overview dl { grid-template-columns:minmax(0,1fr); gap:9px; }
 #reportsBox .report-overview-cell + .report-overview-cell { padding-top:9px; border-top:var(--bw-1) solid var(--line-1); }
 #reportsBox .report-card-head > .bname { flex-basis:calc(100% - 100px)!important; }
}
/* interface-clarity:buildings */
#buildings .gebaeude-raster .card-row,
#defenseBuildings .gebaeude-raster .card-row { position:relative; }
#buildings .gebaeude-raster .bname,
#defenseBuildings .gebaeude-raster .bname { padding-inline-end:44px; }
.gebaeude-raster .k7-building-compare-pick { position:absolute; top:7px; right:7px; width:36px; min-width:36px; height:36px; min-height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; z-index:1; }
.gebaeude-raster .k7-building-compare-pick[aria-pressed="true"] { border-color:var(--gfx-focus); background:#253553; color:var(--gfx-text); }
.k7-building-comparison[hidden] { display:none!important; }
.k7-building-comparison { margin:12px 0 18px; padding:12px; min-width:0; max-width:100%; box-sizing:border-box; border:1px solid var(--gfx-line); background:var(--gfx-panel); color:var(--gfx-text); }
.k7-building-compare-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.k7-building-compare-heading h3 { margin:0; font-size:15px; line-height:1.5; }
.k7-building-compare-heading > span { color:var(--gfx-muted); font-size:12px; overflow-wrap:anywhere; }
.k7-building-compare-scroll { max-width:100%; overflow:auto; }
.k7-building-compare-scroll:focus-visible { outline:2px solid var(--gfx-focus); outline-offset:-2px; }
.k7-building-compare-scroll table { width:100%; min-width:440px; table-layout:fixed; border-collapse:collapse; font-size:12px; line-height:1.6; }
.k7-building-compare-scroll th,.k7-building-compare-scroll td { padding:10px; vertical-align:top; text-align:left; border-bottom:1px solid var(--gfx-line); overflow-wrap:anywhere; }
.k7-building-compare-scroll th:first-child { width:100px; color:var(--gfx-muted); }
.k7-building-compare-scroll tbody td { font-weight:400; }
.k7-building-compare-name { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.k7-building-compare-name > span { flex:1 1 70px; min-width:0; }
.k7-building-compare-name .bicon { flex:0 0 44px; width:44px; height:44px; }
.k7-building-compare-name button { min-width:44px; min-height:44px; padding:6px; }
@media(pointer:coarse),(max-width:760px) {
 .gebaeude-raster .k7-building-compare-pick { min-width:44px; width:44px; min-height:44px; height:44px; }
 #buildings .gebaeude-raster .bname,#defenseBuildings .gebaeude-raster .bname { padding-inline-end:50px; }
 .k7-building-comparison { padding:8px; }
 .k7-building-compare-scroll th,.k7-building-compare-scroll td { padding:8px; }
}

/* mobile-settings:compact-graphics
   Reduce illustration space on phones, keeping the native actions, full
   catalogues, image proportions and the player's larger type/targets. */
@media(max-width:900px) {
 body.command-ui {
  --mobile-graphics-scene:240px;
  --mobile-graphics-ship:200px;
  --mobile-graphics-research:180px;
  --mobile-graphics-model:64px;
  --mobile-graphics-facility:48px;
  --mobile-graphics-thumb:64px;
  --mobile-graphics-world:96px;
  --mobile-graphics-choice:72px;
  --mobile-graphics-orbital:112px;
  --mobile-graphics-flagship:160px;
  --mobile-graphics-planet:72px;
 }
 body.command-ui[data-command-display-size="large"] {
  --mobile-graphics-scene:260px;
  --mobile-graphics-ship:220px;
  --mobile-graphics-research:200px;
  --mobile-graphics-model:72px;
  --mobile-graphics-facility:56px;
  --mobile-graphics-thumb:80px;
  --mobile-graphics-world:112px;
  --mobile-graphics-choice:84px;
  --mobile-graphics-orbital:128px;
  --mobile-graphics-flagship:180px;
  --mobile-graphics-planet:80px;
 }
 body.command-ui #game-root .command-rail .tabs { position:static; top:auto; z-index:auto; }
 body.command-ui .gfx-scene { box-sizing:border-box; }
 body.command-ui .tab-panel .section-title { flex-wrap:wrap; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
 body.command-ui .tab-panel .section-title > span { min-width:0; }
 body.command-ui .tab-panel .card-row .buy {
  flex-shrink:0; max-width:100%; min-width:44px; min-height:max(44px,var(--display-target,44px));
  white-space:normal; overflow-wrap:anywhere;
 }
 body.command-ui :is(.gfx-layout,.gfx-ship-layout,.gfx-colony .gfx-layout) {
  grid-template-columns:minmax(0,1fr); min-height:0;
 }
 body.command-ui :is(.gfx-colony,.gfx-defense) .gfx-scene {
  min-height:var(--mobile-graphics-scene); height:var(--mobile-graphics-scene);
 }
 body.command-ui #shipyardVisual .gfx-scene {
  min-height:var(--mobile-graphics-ship); height:var(--mobile-graphics-ship);
 }
 body.command-ui #researchVisual .gfx-scene {
  min-height:var(--mobile-graphics-research); height:var(--mobile-graphics-research);
 }
 body.command-ui .gfx-scene > .gfx-landscape { object-fit:contain; object-position:center; }
 body.command-ui .gfx-hotspot {
  box-sizing:border-box; min-width:44px; min-height:max(44px,var(--display-target,44px));
  max-width:calc(50% - 16px); padding:7px; font-size:max(11px,var(--display-copy,11px));
  line-height:1.4; white-space:normal; overflow-wrap:break-word;
 }
 /* Four existing colony actions get two clear rows at the reduced scene size. */
 body.command-ui .gfx-colony [data-gfx-building="mine"] { left:25%!important; top:46%!important; }
 body.command-ui .gfx-colony [data-gfx-building="solar"] { left:75%!important; top:46%!important; }
 body.command-ui .gfx-colony [data-gfx-building="habitat"] { left:25%!important; top:82%!important; }
 body.command-ui .gfx-colony [data-gfx-building="raffinerie"] { left:75%!important; top:82%!important; }
 body.command-ui .gfx-view :is(button,select) {
  min-width:44px; min-height:max(44px,var(--display-target,44px));
 }
 body.command-ui .gfx-colony .gfx-facility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body.command-ui .gfx-facility { min-height:132px; padding:8px; }
 body.command-ui .gfx-facility-model { width:var(--mobile-graphics-facility); height:var(--mobile-graphics-facility); }
 body.command-ui .gfx-facility-model :is(canvas,svg) {
  width:var(--mobile-graphics-facility)!important; height:var(--mobile-graphics-facility)!important;
 }
 body.command-ui .command-building-model canvas { width:var(--mobile-graphics-model); height:var(--mobile-graphics-model); }
 body.command-ui .gfx-defense-model { flex-direction:row; justify-content:center; flex-wrap:wrap; padding:8px; gap:10px; }
 body.command-ui .gfx-defense-model canvas {
  width:calc(var(--mobile-graphics-model) * 1.5)!important;
  height:calc(var(--mobile-graphics-model) * 1.125)!important; object-fit:contain;
 }
 body.command-ui .gfx-tech-preview { inset:auto 12px 12px; padding:10px; gap:10px; font-size:max(14px,var(--display-name,14px)); }
 body.command-ui .gfx-tech-preview :is(svg,canvas) { width:48px!important; height:48px!important; }
 body.command-ui .gfx-tech-preview > span { min-width:0; overflow-wrap:break-word; }
 body.command-ui .gfx-ship-caption {
  left:12px; bottom:12px; box-sizing:border-box; max-width:calc(100% - 24px);
  white-space:normal; overflow-wrap:break-word;
 }
 body.command-ui .gfx-ship-list .gfx-choice { flex:0 0 104px; }
 body.command-ui .gfx-ship-list .gfx-choice :is(canvas,img) { width:var(--mobile-graphics-thumb)!important; height:calc(var(--mobile-graphics-thumb) * .75)!important; object-fit:contain; }
 body.command-ui #fleet .ship-card .ship-art { width:calc(var(--mobile-graphics-thumb) + 2px); }
 body.command-ui #fleet .ship-card .ship-art .frame { width:var(--mobile-graphics-thumb); height:calc(var(--mobile-graphics-thumb) * .75); }
 body.command-ui .gfx-officer-portrait { width:var(--mobile-graphics-thumb); height:calc(var(--mobile-graphics-thumb) * .75); }
 body.command-ui .gfx-enemy-portrait { width:56px; height:56px; }
 body.command-ui .gfx-world-comparison :is(.gfx-world-art,.gfx-world-image) { width:100%; max-width:var(--mobile-graphics-world); max-height:var(--mobile-graphics-world); object-fit:contain; }
 body.command-ui .gfx-world-choice :is(.gfx-world-art,.gfx-world-image) { width:100%; max-width:var(--mobile-graphics-choice); max-height:var(--mobile-graphics-choice); margin-inline:auto; object-fit:contain; }
 body.command-ui .gfx-orbital-choice > .gfx-orbital-art { max-width:var(--mobile-graphics-orbital); }
 body.command-ui .gfx-expedition-type > .gfx-expedition-art { max-width:84px; max-height:84px; align-self:center; }
 body.command-ui .gfx-flagship-art { max-width:var(--mobile-graphics-flagship); }
 body.command-ui .gfx-map-inspector { grid-template-columns:var(--mobile-graphics-planet) minmax(0,1fr); gap:10px; }
 body.command-ui .gfx-map-inspector img { width:var(--mobile-graphics-planet); height:var(--mobile-graphics-planet); object-fit:contain; }
 body.command-ui .gfx-map-actions { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
 body.command-ui .gfx-map-actions button { flex:1 1 120px; }
 /* Banner copy stays in normal flow; only its illustration gets a small slot. */
 body.command-ui .gfx-banner .gfx-scene { display:flex; align-items:center; gap:12px; min-height:0; padding:12px; box-sizing:border-box; }
 body.command-ui .gfx-banner .gfx-scene > :is(.gfx-landscape,.gfx-expedition-art) {
  position:static; inset:auto; flex:0 0 84px; width:84px; height:84px; transform:none; object-fit:contain;
 }
 body.command-ui .gfx-banner .gfx-scene-label {
  position:static; flex:1; min-width:0; max-width:none; padding:0; background:transparent; border:0;
  font-size:max(12px,var(--display-copy,12px)); overflow-wrap:break-word;
 }
 body.command-ui .gfx-banner .gfx-scene-label strong { font-size:max(15px,var(--display-name,15px)); }
 body.command-ui #tab-allianz .alliance-hero-banner { min-height:104px; padding:12px; box-sizing:border-box; }
 body.command-ui #tab-allianz .gfx-alliance-entry .alliance-hero-banner { min-height:104px; }
 body.command-ui #bannerPicker .banner-option { width:64px; height:44px; min-width:44px; min-height:max(44px,var(--display-target,44px)); }
}

@media(max-width:900px) and (max-height:500px) {
 body.command-ui { --mobile-graphics-scene:200px; --mobile-graphics-ship:180px; --mobile-graphics-research:160px; }
 body.command-ui[data-command-display-size="large"] { --mobile-graphics-scene:220px; --mobile-graphics-ship:200px; --mobile-graphics-research:180px; }
}

/* The persistent settings action shares the measured native footer. Its label
   remains visible even when three actions need more than one line. */
@media(max-width:900px) {
 body.command-ui .command-status { gap:6px; align-items:stretch; }
 body.command-ui .command-status button {
  flex:1 1 0; min-width:44px; min-height:max(44px,var(--display-target,44px));
  flex-direction:column; justify-content:center; gap:3px; padding:6px 4px;
  text-align:center; font-size:max(12px,var(--display-copy,12px)); line-height:1.4;
 }
 body.command-ui .command-status button > i { flex:none; }
 body.command-ui .command-status button > span { min-width:0; max-width:100%; white-space:normal; overflow-wrap:break-word; hyphens:auto; }
 body.command-ui #commandNav .command-tools > [data-command-header="headerProfileBtn"] {
  display:inline-flex; align-items:center; gap:6px; min-height:max(44px,var(--display-target,44px));
  font-size:max(12px,var(--display-copy,12px)); white-space:normal; overflow-wrap:break-word;
 }
}
/* mobile-settings:compact-graphics end */