/* OrbitLords "Mostek" visual guide (specs/002-game-ui-redesign, data-model.md §5).
   One stylesheet for every page: tokens, fonts, base, shell, components, pages, phone, print. */

/* 1. Tokens ------------------------------------------------------------------------------- */
:root {
  --void: #0d131d;
  --hull: #151e2b;
  --hull-2: #1c2738;
  --seam: #2a384d;
  --ink: #e4e9f0;
  --ink-2: #9aa7b8;
  --lamp: #e9a23b;
  --lamp-ink: #1a1206;
  --metal: #b4bfcc;
  --crystal: #71c4ef;
  --deut: #4fd1a5;
  --energy: #f2dd5c;
  --own: #4fd1a5;
  --ally: #71c4ef;
  --neutral: #9aa7b8;
  --hostile: #ef5a5f;
  --hostile-bg: #2a1519;
  --track: #243146;
  --field-edge: #62748c;
  --r-panel: 6px;
  --r-chip: 999px;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-semi: "Barlow Semi Condensed", "Barlow", sans-serif;
  --f-cond: "Barlow Condensed", "Barlow", sans-serif;
  --top-h: 56px;
  --nav-w: 220px;
  --gap: 16px;
}

/* 2. Fonts (self-hosted, SIL OFL 1.1; see ../fonts/SOURCE.txt) ---------------------------- */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 3. Base --------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 15px/1.45 var(--f-body);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; }
h1 { font: 700 34px/1.05 var(--f-cond); }
h2 { font: 600 20px/1.2 var(--f-semi); }
h3 { font: 600 18px/1.2 var(--f-semi); }
p { margin: 0 0 .75em; }
a { color: var(--ink); text-decoration-color: var(--ink-2); text-underline-offset: 2px; }
a:hover { color: #fff; text-decoration-color: var(--lamp); }
img { max-width: 100%; height: auto; border: 0; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 10; padding: 8px 12px; background: var(--lamp); color: var(--lamp-ink); border-radius: var(--r-panel); }
.skip:focus { top: 8px; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.truncate { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

/* 4. Shell -------------------------------------------------------------------------------- */
body.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "nav gauges"
    "nav alert"
    "nav flash"
    "nav main"
    "status status";
  grid-template-rows: var(--top-h) auto auto auto 1fr auto;
  min-height: 100vh;
}
.topbar { grid-area: top; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--hull); border-bottom: 1px solid var(--seam); }
.mark { font: 700 24px/1 var(--f-cond); text-decoration: none; color: var(--ink); letter-spacing: .02em; }
.mark b { color: var(--lamp); }
.topbar__spacer { flex: 1; }
.topbar__count { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); font-size: 14px; }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-chip); background: var(--lamp); color: var(--lamp-ink); font: 600 12px/18px var(--f-body); text-align: center; }
.topbar .menu-link { display: none; }

.planet-pick { position: relative; }
.planet-pick > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid var(--seam); border-radius: var(--r-panel); background: var(--hull-2); cursor: pointer; max-width: 360px; }
.planet-pick > summary::-webkit-details-marker { display: none; }
.planet-pick > summary img { width: 28px; height: 28px; border-radius: 50%; }
.planet-pick__name { font: 600 16px/1.1 var(--f-semi); }
.planet-pick__coords { color: var(--ink-2); font-size: 13px; }
.planet-pick__fields { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.planet-pick__list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: 320px; max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; background: var(--hull); border: 1px solid var(--seam); border-radius: var(--r-panel); box-shadow: 0 12px 32px #0009; }
.planet-pick:not([open]) > .planet-pick__list { display: none; }
.planet-pick__list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 12px; text-decoration: none; }
.planet-pick__list a:hover, .planet-pick__list a[aria-current] { background: var(--hull-2); }
.planet-pick__list img { width: 28px; height: 28px; border-radius: 50%; }
.stepper { display: flex; gap: 4px; }

.gauges { grid-area: gauges; position: sticky; top: var(--top-h); z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--hull); border-bottom: 1px solid var(--seam); }
.gauge { --c: var(--metal); padding: 9px 16px 11px; border-right: 1px solid var(--seam); min-width: 0; }
.gauge:last-child { border-right: 0; }
.gauge--metal { --c: var(--metal); }
.gauge--crystal { --c: var(--crystal); }
.gauge--deuterium { --c: var(--deut); }
.gauge--energy { --c: var(--energy); }
.gauge__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gauge__name { display: inline-flex; align-items: center; gap: 6px; color: var(--c); font: 600 14px var(--f-semi); }
.gauge__cap { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.gauge__value { font: 600 22px/1.1 var(--f-cond); }
.gauge__foot { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 13px; }
.gauge__rate { color: var(--c); }
.gauge__flag { color: var(--lamp); font-weight: 600; }
.gauge.is-deficit .gauge__value { color: var(--hostile); }
.gauge.is-deficit .gauge__flag, .gauge.is-full .gauge__flag { color: var(--lamp); }
.track { position: relative; display: block; height: 8px; margin: 6px 0 5px; overflow: hidden; border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--void) calc(10% - 1px) 10%), var(--track); }
.track > i { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--lamp)); }
.gauge.is-full .track > i { background: repeating-linear-gradient(135deg, var(--c) 0 6px, #ffffff40 6px 9px); }
.gauge.is-deficit .track > i { background: var(--hostile); }

.alert { grid-area: alert; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 16px 24px 0; padding: 10px 14px; border: 1px solid var(--hostile); border-left-width: 4px; border-radius: var(--r-panel); background: var(--hostile-bg); }
.alert strong { color: #ffb4b6; }
.alert__more { color: var(--ink-2); }
.alert__link { margin-left: auto; font-weight: 600; }

table.flashes { grid-area: flash; width: auto; margin: 16px 24px 0; border-collapse: separate; border-spacing: 0 6px; }
table.flashes td.zielona { padding: 10px 14px; text-align: left; background: var(--hull-2); border: 1px solid var(--seam); border-left: 4px solid var(--lamp); border-radius: var(--r-panel); }

main#content { grid-area: main; min-width: 0; padding: 20px 24px 48px; }

.nav { grid-area: nav; padding: 12px 0 24px; border-right: 1px solid var(--seam); background: var(--void); }
.nav .nav__close { display: none; }
.nav h2 { margin: 16px 20px 6px; color: var(--ink-2); font: 600 13px/1 var(--f-semi); letter-spacing: .02em; }
.nav h2:first-of-type { margin-top: 4px; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 20px; border-left: 3px solid transparent; text-decoration: none; }
.nav a:hover { background: var(--hull); }
.nav a[aria-current="page"] { border-left-color: var(--lamp); background: var(--hull); color: #fff; }

.status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 8px 16px; border-top: 1px solid var(--seam); background: var(--hull); color: var(--ink-2); font-size: 13px; }
.status form { margin-left: auto; }
.bottom-bar { display: none; }

/* 5. Components --------------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 0; color: var(--ink-2); }
.panel { margin-bottom: var(--gap); background: var(--hull); border: 1px solid var(--seam); border-radius: var(--r-panel); min-width: 0; }
.panel > h2, .panel__head { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--seam); font: 600 18px/1.2 var(--f-semi); }
.panel__body { padding: 12px 16px; }
.group { margin: 4px 0 10px; color: var(--ink-2); font: 600 20px var(--f-semi); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); }

.btn, button.btn, input.btn, input[type=submit], button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--r-panel); background: var(--lamp); color: var(--lamp-ink);
  font: 600 16px/1 var(--f-semi); cursor: pointer; text-decoration: none; }
.btn:hover, input[type=submit]:hover, button[type=submit]:hover { filter: brightness(1.08); }
.btn.btn--secondary, input.btn--secondary, button.link, input.link { background: transparent; color: var(--ink); border: 1px solid var(--seam); }
.btn.btn--secondary:hover, input.btn--secondary:hover, button.link:hover, input.link:hover { border-color: var(--ink-2); filter: none; }
.btn[disabled], input[type=submit][disabled], button[disabled] { background: var(--hull-2); color: var(--ink-2); border: 1px solid var(--seam); cursor: not-allowed; filter: none; }
.btn--block { display: flex; width: 100%; }
.icon-btn { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--seam); border-radius: var(--r-panel); background: transparent; color: var(--ink); text-decoration: none; font: 500 14px var(--f-body); cursor: pointer; }
button.icon-btn[type=submit] { min-height: 36px; padding: 0 8px; border: 1px solid var(--seam); background: transparent; color: var(--ink); filter: none; }
.icon-btn:hover { border-color: var(--ink-2); }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--r-chip); font: 600 13px/1.5 var(--f-semi); white-space: nowrap; }
.tag--own { color: var(--own); }
.tag--ally { color: var(--ally); }
.tag--neutral { color: var(--neutral); }
.tag--hostile { color: var(--hostile); }
.tag--new { color: var(--lamp); }
.tag--protected { color: var(--own); }
.tag--strong { color: var(--lamp); }
.tag--vacation { color: var(--ally); }
.tag--inactive, .tag--long-inactive { color: var(--neutral); }
.tag--supporter { color: var(--lamp); }

.countdown, .cd { font: 600 18px var(--f-cond); color: var(--lamp); white-space: nowrap; }

table.data { width: 100%; border-collapse: collapse; }
table.data th { padding: 10px 12px; border-bottom: 1px solid var(--seam); color: var(--ink-2); font: 600 14px var(--f-semi); text-align: left; }
table.data td { padding: 8px 12px; border-bottom: 1px solid var(--seam); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num, table.data td.num { text-align: right; }
.scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--seam) transparent; }

label { color: var(--ink-2); font-size: 14px; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=search], input:not([type]), select, textarea {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--field-edge); border-radius: var(--r-panel);
  background: var(--hull-2); color: var(--ink); font: 400 15px var(--f-body); }
textarea { min-height: 120px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--lamp); outline: none; box-shadow: 0 0 0 2px var(--lamp); }
.field { display: grid; gap: 4px; margin-bottom: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.tabs a { display: inline-block; padding: 6px 12px; border: 1px solid var(--seam); border-radius: var(--r-chip); text-decoration: none; }
.tabs a[aria-current] { border-color: var(--lamp); color: #fff; background: var(--hull-2); }

.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--seam); border-radius: 50%; font: 600 14px var(--f-cond); }
.steps li[aria-current="step"] { color: #fff; }
.steps li[aria-current="step"]::before { border-color: var(--lamp); background: var(--lamp); color: var(--lamp-ink); }

.bar { display: block; height: 6px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--lamp); }

details > summary { cursor: pointer; }

/* Fill widths of tracks and bars: class fill-N, N in steps of 5 (no inline style). */
.fill-0 { width: 0; } .fill-5 { width: 5%; } .fill-10 { width: 10%; } .fill-15 { width: 15%; }
.fill-20 { width: 20%; } .fill-25 { width: 25%; } .fill-30 { width: 30%; } .fill-35 { width: 35%; }
.fill-40 { width: 40%; } .fill-45 { width: 45%; } .fill-50 { width: 50%; } .fill-55 { width: 55%; }
.fill-60 { width: 60%; } .fill-65 { width: 65%; } .fill-70 { width: 70%; } .fill-75 { width: 75%; }
.fill-80 { width: 80%; } .fill-85 { width: 85%; } .fill-90 { width: 90%; } .fill-95 { width: 95%; }
.fill-100 { width: 100%; }

/* Public pages (landing, login, registration, errors). */
body.public { min-height: 100vh; display: grid; place-items: start center; padding: 48px 16px; }
.public__panel { width: min(560px, 100%); padding: 28px; background: var(--hull); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.public__panel--wide { width: min(960px, 100%); }
.public__mark { display: block; margin-bottom: 20px; font: 700 40px/1 var(--f-cond); text-decoration: none; }
.public__mark b { color: var(--lamp); }
.public__foot { margin-top: 20px; color: var(--ink-2); font-size: 13px; }

/* Legacy page bodies inside the shell (until each page is redesigned): tables of the old skin. */
main#content table { border-collapse: collapse; }
main#content td.c { padding: 8px 10px; background: var(--hull-2); font: 600 15px var(--f-semi); }
main#content table:not(.data):not(.report) th, main#content td.l, main#content td.k, main#content td.f { padding: 6px 10px; border: 1px solid var(--seam); background: var(--hull); }
main#content table:not(.data):not(.report) th { font-weight: 500; }
main#content table img { max-width: none; }

/* Pages: build cards (buildings, research, shipyard, defence; contracts/cards.md) --------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-bottom: 28px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--hull); border: 1px solid var(--seam); border-radius: var(--r-panel); overflow: hidden; }
.card__art { display: grid; place-items: center; height: 140px; border-bottom: 1px solid var(--seam);
  background: linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 16px 16px, #111a27; }
.card__art img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }
.card__art:has(img[width="640"]) { height: auto; }
.card__art img[width="640"] { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.card__level { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: var(--r-panel); background: #0d131dcc; font: 700 24px/1 var(--f-cond); }
.card__level small { margin-right: 4px; color: var(--ink-2); font: 400 13px var(--f-body); }
.card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 14px 14px; }
.card__body h3 { margin: 0; }
.card__body h3 a { text-decoration: none; }
.card__text { margin: 0; color: var(--ink-2); font-size: 14px; }
.card__meta { margin: 0; color: var(--ink-2); font-size: 14px; }
.card__state { margin: 0; font-size: 14px; }
.card__state--ok { color: var(--own); font-weight: 600; }
.card__queue { margin: 0; color: var(--lamp); font-weight: 600; font-size: 14px; }
.card__wait { display: block; color: var(--ink-2); }
.card form, .card .card__action { margin-top: auto; }
.card > .card__body > .btn, .card .card__action .btn { margin-top: auto; }
.card--locked .card__art img { opacity: .35; filter: grayscale(1); }
.card__left { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; color: var(--ink-2); font-size: 13px; }
.card__left-item { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.card--locked { border-style: dashed; }
.card.is-in-progress { border-color: var(--lamp); }
.cost { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.cost__item { display: inline-flex; align-items: center; gap: 5px; }
.cost__item--metal .icon { color: var(--metal); }
.cost__item--crystal .icon { color: var(--crystal); }
.cost__item--deuterium .icon { color: var(--deut); }
.cost__item--energy .icon { color: var(--energy); }
.cost__item.is-short { color: var(--hostile); }
.shortfall { display: block; color: var(--hostile); font-size: 14px; }
.reqs { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); }
.card__qty { display: grid; gap: 6px; margin-top: auto; }
.card__qty label { color: var(--ink-2); font-size: 14px; }
.card__qty-row { display: flex; gap: 8px; }
.card__qty-row input { flex: 1; min-width: 0; text-align: right; }
.queue .data td, .queue .data th { white-space: nowrap; }
@media (max-width: 599px) { .queue .data td:first-child { white-space: normal; } }
.form-submit { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 12px 0; background: linear-gradient(transparent, var(--void) 30%); }

/* Pages: overview (contracts/shell.md, design-proposal.md §3) ---------------------------- */
.overview > div { min-width: 0; }
.hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px;
  background: radial-gradient(circle at 20% 50%, #1d2b44 0, transparent 60%), var(--hull); }
.hero__planet { width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff14, 0 0 40px #71c4ef22; }
.hero__rename summary { margin-bottom: 10px; font: 600 18px/1.2 var(--f-semi); }
.hero__rename form { display: flex; gap: 8px; margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts .bar { margin-top: 4px; max-width: 260px; }
.bar-progress { width: 140px; height: 8px; vertical-align: middle; accent-color: var(--lamp); }
.panel__head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn--small { min-height: 30px; padding: 0 10px; font-size: 14px; }
.queue-list { margin: 0; padding: 8px 16px 14px; list-style: none; }
.queue-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.planet-list { margin: 0; padding: 6px 0; list-style: none; }
.planet-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--seam); }
.planet-list li:last-child { border-bottom: 0; }
.planet-list li > a { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.planet-list img { width: 40px; height: 40px; border-radius: 50%; }
.planet-list__busy { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.planet-list__actions { grid-column: 1 / -1; color: var(--ink-2); font-size: 14px; }
.panel__body > table { width: 100%; }
.quest .panel__body > p { margin: 0 0 8px; }
.quest__progress { margin: 0 0 10px; padding: 0; list-style: none; }
.quest__progress li { display: flex; align-items: center; gap: 6px; padding: 3px 0; overflow-wrap: anywhere; }
.quest__progress li.is-met { color: var(--own); }
.quest__progress li.is-open { color: var(--ink); }
.quest__progress li.is-open::before { content: ""; flex: none; width: 10px; height: 10px; margin: 0 3px; border: 1px solid var(--ink-2); border-radius: 50%; }
.quest__reward { color: var(--ink-2); }
.quest form { margin: 10px 0 0; }
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hero__planet { width: 150px; height: 150px; }
}

/* Pages: galaxy (contracts/shell.md; design-proposal.md §3) ------------------------------ */
.gx-nav { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.gx-nav__step label { display: block; margin-bottom: 4px; }
.gx-nav .stepper input { width: 64px; text-align: center; font-weight: 600; }
table.gx td { vertical-align: middle; }
.gx-pos { width: 36px; color: var(--ink-2); font: 600 18px var(--f-cond); }
.gx-planet__in { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 240px; }
.gx-planet__in img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.gx-planet__in img.gx-moon { width: 18px; height: 18px; }
.gx-row.is-empty td { color: var(--ink-2); }
.gx-player details > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.gx-player details > summary::-webkit-details-marker { display: none; }
.gx-player .noob { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.gx-player details[open] > summary { margin-bottom: 4px; }
.gx-player details a { font-size: 14px; }
.debris { color: var(--ink-2); font-size: 13px; }
.gx-acts { white-space: nowrap; text-align: right; }
.gx-acts__links { display: inline-flex; gap: 10px; margin-left: 8px; font-size: 14px; }
.gx-acts__moon, .gx-acts__more { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 4px 0 0; }
.gx-acts .icon-btn, .gx-acts button.icon-btn[type=submit] { height: 32px; min-width: 32px; min-height: 32px; padding: 0 6px; border: 1px solid var(--seam); background: transparent; color: var(--ink); filter: none; }
.gx-acts form.inline { display: inline; margin: 0; }
.gx-deep { margin: 12px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.rules ul { margin: 0; padding-left: 20px; }
.rules li + li { margin-top: 6px; }

/* The 3D view of the galaxy page (mostek/js/galaxy3d.js); hidden until the script shows it. */
.space { margin-bottom: var(--gap); }
.space [hidden] { display: none; }
.space__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.space__title { margin: 0; font: 600 22px var(--f-cond); }
.space__modes { display: flex; flex-wrap: wrap; gap: 6px; }
.space__modes [aria-pressed="true"] { border-color: var(--lamp); color: var(--lamp); }
.space__stage { position: relative; height: clamp(360px, 66vh, 780px); border: 1px solid var(--seam); border-radius: var(--r-panel); overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #142036 0%, #0a0f19 58%, #05080e 100%); }
.space__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.space__canvas:active { cursor: grabbing; }
.space__canvas.is-pointing { cursor: pointer; }
.space__canvas:focus-visible { outline: 2px solid var(--lamp); outline-offset: -2px; }
.space__tip { position: absolute; z-index: 2; margin: 0; padding: 4px 8px; pointer-events: none; white-space: nowrap; font-size: 13px; background: rgba(13, 19, 29, .9); border: 1px solid var(--seam); border-radius: 4px; transform: translate(-50%, calc(-100% - 14px)); }
.space__card { position: absolute; z-index: 3; left: 12px; bottom: 12px; width: min(360px, calc(100% - 84px)); max-height: calc(100% - 24px); overflow: auto; padding: 12px 14px; background: rgba(21, 30, 43, .95); border: 1px solid var(--seam); border-radius: var(--r-panel); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.space-card__head { display: flex; align-items: center; gap: 10px; }
.space-card__head img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.space-card__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.space-card__close { flex: none; width: 32px; height: 32px; border: 1px solid var(--seam); border-radius: 4px; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.space-card__rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: 14px; }
.space-card__rows dt { color: var(--ink-2); }
.space-card__rows dd { margin: 0; overflow-wrap: anywhere; }
.space-card__note { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.space-card__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.space-card__acts form.inline { display: inline; margin: 0; }
.space__zoom { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.space__zoom .icon-btn, .space__edge { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 20px; background: rgba(21, 30, 43, .85); border: 1px solid var(--seam); border-radius: 50%; color: var(--ink); }
.space__edge { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; }
.space__edge--prev { left: 12px; }
.space__edge--next { right: 12px; }
.space__status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--ink-2); }
.space__fleets { position: absolute; z-index: 2; top: 12px; left: 12px; width: min(300px, calc(100% - 84px)); max-height: calc(100% - 24px); overflow: auto; background: rgba(21, 30, 43, .92); border: 1px solid var(--seam); border-radius: var(--r-panel); font-size: 14px; }
.space__fleets summary { padding: 8px 12px; cursor: pointer; font: 600 15px var(--f-semi); }
.space__fleets ol { list-style: none; margin: 0; padding: 0 6px 6px; }
.space__fleet { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 8px; border: 0; border-left: 3px solid var(--neutral); border-radius: 4px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.space__fleet:hover, .space__fleet:focus-visible { background: var(--hull-2); }
.space__fleet span + span { color: var(--ink-2); font-size: 13px; }
.space__fleet--own { border-left-color: var(--own); }
.space__fleet--friendly { border-left-color: var(--ally); }
.space__fleet--hostile { border-left-color: var(--hostile); }
.space__help { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; max-width: 110ch; }
@media (max-width: 599px) {
  .space__stage { height: clamp(320px, 62vh, 560px); }
  .space__card { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58%; }
  .space__zoom { top: 8px; bottom: auto; right: 8px; }
  .space__fleets { top: 8px; left: 8px; }
  .space__edge { width: 34px; height: 34px; }
  .space__help { display: none; }
}
@media (max-width: 899px) {
  .hide-sm { display: none; }
  table.gx thead { display: none; }
  table.gx, table.gx tbody { display: block; }
  table.gx tr.gx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 8px 12px; border-bottom: 1px solid var(--seam); }
  table.gx tr.gx-row > td { padding: 0; border: 0; }
  table.gx td.gx-acts { grid-column: 1 / -1; white-space: normal; text-align: left; }
  .gx-acts .icon-btn, .gx-acts button.icon-btn[type=submit] { min-height: 44px; min-width: 44px; }
  .gx-acts__links { display: inline-flex; flex-wrap: wrap; margin: 0 0 0 6px; }
}

/* Pages: fleet tables (overview and fleet page), fleet page ------------------------------ */
.fleet-group + .fleet-group { margin-top: 16px; }
.fleet-group__head { margin: 0 0 6px; font: 600 16px var(--f-semi); color: var(--ink-2); }
table.fleets td { white-space: nowrap; }
table.fleets small { color: var(--ink-2); }
.coords { font-variant-numeric: tabular-nums; }
.fleet-ships > summary { cursor: pointer; color: var(--lamp); font-weight: 600; }
.fleet-ships ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; white-space: nowrap; }
tr.fleet-hostile td:first-child { box-shadow: inset 3px 0 var(--hostile); }
tr.fleet-friendly td:first-child { box-shadow: inset 3px 0 var(--ally); }
.fleet-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fleet-send { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.coords-input { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.coords-input legend { padding: 0; margin-bottom: 4px; color: var(--ink-2); }
.coords-input label, .fleet-send > label { display: grid; gap: 4px; color: var(--ink-2); font-size: 14px; }
.coords-input input { width: 64px; }
.fast-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; }
.pager a { min-width: 32px; padding: 4px 8px; border: 1px solid var(--seam); border-radius: var(--r-panel); text-align: center; text-decoration: none; }
.pager a[aria-current] { border-color: var(--lamp); color: var(--lamp); }
.hint { color: var(--ink-2); font-size: 14px; }
.hint .icon { vertical-align: -3px; }

/* Pages: dispatch wizard (contracts/shell.md; design-proposal.md §3) --------------------- */
.steps li.is-done { color: var(--ink); }
.steps li.is-done::before { border-color: var(--lamp); color: var(--lamp); }
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wizard__summary { position: sticky; top: calc(var(--top-h) + 120px); }
.form-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.field-label { display: grid; gap: 4px; color: var(--ink-2); font-size: 14px; }
.ships-pick .pick { white-space: nowrap; }
.ships-pick input[data-ship] { width: 96px; text-align: right; }
.cargo { display: grid; gap: 10px; }
.cargo__row { display: grid; grid-template-columns: 90px minmax(0, 200px) auto; justify-content: start; align-items: center; gap: 10px; }
.cargo__row input { text-align: right; }
button.link { padding: 0; border: 0; background: none; color: var(--lamp); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; min-width: 0; filter: none; }
.notice { color: var(--lamp); }
@media (max-width: 899px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wizard__summary { position: static; order: -1; }
}

/* Reports (contracts/reports.md §2): the structured tables of the new reports --------- */
.report { width: 100%; margin: 0 0 14px; border: 1px solid var(--seam); border-collapse: collapse; background: var(--hull); }
.report caption { padding: 8px 12px; border: 1px solid var(--seam); border-bottom: 0; background: var(--hull-2); color: var(--ink); font: 600 16px var(--f-semi); text-align: left; }
.report th, .report td { padding: 6px 12px; border-bottom: 1px solid var(--seam); text-align: left; vertical-align: top; }
.report th { color: var(--ink-2); font-weight: 600; }
.report .num { text-align: right; font-variant-numeric: tabular-nums; }
.report tr:last-child > td, .report tr:last-child > th { border-bottom: 0; }
.report__outcome { font: 700 22px var(--f-cond); }
.report__outcome--attacker { color: var(--hostile); }
.report__outcome--defender { color: var(--ally); }
.report__outcome--draw { color: var(--ink-2); }
.report--round { table-layout: fixed; }
.report table.statki { width: 100%; border-collapse: collapse; }
.report table.statki td { padding: 2px 0; border: 0; }
.report table.statki td + td { text-align: right; font-variant-numeric: tabular-nums; }
.report img { vertical-align: middle; }
.report.report--units th, .report.report--units td { text-align: center; }
.report-actions { margin-top: 8px; }
table.reports tr.is-new td { background: var(--hull-2); }
table.reports tr.is-new td:first-child { box-shadow: inset 3px 0 var(--lamp); }
.report-kind { white-space: nowrap; color: var(--ink-2); }
/* Stored reports written before the redesign: printed unchanged, restyled here. */
.report-legacy table { width: 100%; border-collapse: collapse; }
.report-legacy td, .report-legacy th { padding: 4px 8px; border: 0; background: none; text-align: left; vertical-align: top; }
.report-legacy td.z_b, .report-legacy th.z_b { padding-top: 12px; color: var(--ink-2); font: 600 15px var(--f-semi); }
.report-legacy td.z, .report-legacy th.z { color: var(--ink); }
.report-legacy table.statki td + td { text-align: right; font-variant-numeric: tabular-nums; }

/* Pages: messages (contracts/reports.md §5) ------------------------------------------------ */
.mail-state { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 0 8px; border: 1px solid var(--seam); border-radius: var(--r-chip); color: var(--ink-2); font-size: 13px; }
.mail-state--new { border-color: var(--lamp); color: var(--lamp); }
table.inbox tr.is-new td { background: var(--hull-2); }
table.inbox tr.is-new a { font-weight: 600; }
.inbox__time, .inbox__who { white-space: nowrap; }
.messages-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.msg { max-width: min(75%, 640px); border: 1px solid var(--seam); border-radius: 14px 14px 14px 4px; background: var(--hull); }
.msg--mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; border-color: #e9a23b66; background: var(--hull-2); }
.msg--theirs { align-self: flex-start; }
.msg__head { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px 0; }
.msg--mine .msg__author { color: var(--lamp); }
.msg .msg__text { padding: 6px 14px 10px; }
@media (max-width: 599px) { .msg { max-width: 92%; } }
.msg__author { font-weight: 600; }
.msg__time { color: var(--ink-2); font: 400 14px var(--f-body); }
.msg__text { overflow-wrap: anywhere; }
.reply, .compose { display: grid; gap: 8px; max-width: 760px; }
.reply textarea, .compose textarea, .compose input.subject { width: 100%; }
.error { color: var(--hostile); }

/* Pages: empire (FR-015): planets as columns, the row labels stay in view while scrolling --- */
table.empire th:first-child { position: sticky; left: 0; z-index: 1; background: var(--hull); white-space: nowrap; }
table.empire thead th { vertical-align: bottom; }
.empire__planet { min-width: 150px; }
.empire__planet a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.empire__planet img { width: 40px; height: 40px; border-radius: 50%; }
.empire__name { font: 600 15px var(--f-semi); color: var(--ink); }
.empire__planet .coords { display: block; margin: 4px 0; color: var(--ink-2); font-weight: 400; }
.empire__order { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.empire__order input { width: 52px; text-align: right; }
table.empire td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.empire__when { display: block; color: var(--ink-2); font-size: 13px; }
.empire__store--full .empire__when { color: var(--lamp); }
.empire__total { background: var(--hull-2); font-weight: 600; }

/* Pages: resources ------------------------------------------------------------------------- */
.production-level { display: flex; align-items: center; gap: 12px; }
.production-level .bar { width: 220px; height: 8px; accent-color: var(--lamp); }
table.production td.is-plus { color: var(--own); }
table.production td.is-minus { color: var(--hostile); }
table.production tfoot th, table.production tfoot td { border-top: 1px solid var(--seam); }
.production__sum td { font-weight: 600; }
.percent-field { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.percent-field input { width: 72px; text-align: right; }
.resource-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.storage progress { width: 160px; height: 8px; vertical-align: middle; accent-color: var(--lamp); }
.storage progress.full { accent-color: var(--hostile); }
progress.bar { appearance: none; border: 0; border-radius: 2px; background: var(--track); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--track); }
progress.bar::-webkit-progress-value { background: var(--lamp); }
progress.bar::-moz-progress-bar { background: var(--lamp); }
progress.bar.full::-webkit-progress-value { background: var(--hostile); }
progress.bar.full::-moz-progress-bar { background: var(--hostile); }
.storage dd { display: flex; align-items: center; gap: 8px; }

/* Pages: technology tree -------------------------------------------------------------------- */
.techtree { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.requirements { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.requirement { display: inline-flex; align-items: center; gap: 4px; }
.requirement.is-met { color: var(--own); }
.requirement.is-unmet { color: var(--hostile); }

/* Pages: item info --------------------------------------------------------------------------- */
.info__band { display: flex; gap: 20px; align-items: flex-start; }
.info__band img { flex: none; width: min(320px, 100%); height: auto; border-radius: var(--r-panel); background: var(--void); }
.info__text { max-width: 70ch; line-height: 1.55; }
table.data td.gain { color: var(--own); }
table.data td.loss { color: var(--hostile); }
@media (max-width: 599px) { .info__band { flex-direction: column; } }

/* Pages: statistics ----------------------------------------------------------------------- */
.stats-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.stats-bar .pager { padding: 0; }
.stats-bar .icon-btn { gap: 6px; display: inline-flex; }
.stats-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stats-search input[type=text] { flex: 1 1 10em; min-width: 0; }
table.stats tr.is-me td { background: var(--hull-2); color: var(--lamp); }
table.stats tr.is-me td:first-child { box-shadow: inset 3px 0 var(--lamp); }
.icon-link { margin-left: 6px; color: var(--ink-2); }

/* Pages: trader and market --------------------------------------------------------------- */
.market__nav { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.market__nav .icon-btn { display: inline-flex; gap: 6px; }
.market__nav [rel="next"] { margin-left: auto; }
form.buy { display: flex; gap: 6px; align-items: center; }
form.buy input.packages { width: 56px; text-align: right; }
.paginate-current { min-width: 32px; padding: 4px 8px; border: 1px solid var(--lamp); border-radius: var(--r-panel); color: var(--lamp); text-align: center; }
.offer-form { display: grid; gap: 10px; max-width: 520px; }
.offer-form__field { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 10px; }
@media (max-width: 599px) { .offer-form__field { grid-template-columns: minmax(0, 1fr); } }

/* Pages: profile --------------------------------------------------------------------------- */
.profile__body { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.profile__body > img { max-width: 160px; border-radius: var(--r-panel); }
.profile__sign { overflow-wrap: anywhere; }
.profile-form { display: grid; gap: 12px; max-width: 720px; }
.profile-form__field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: start; }
.profile-form__field textarea, .profile-form__field input[type=text], .profile-form__field input[type=email], .profile-form__field input[type=password] { width: 100%; }
.field-error { display: block; color: var(--hostile); font-size: 14px; }
@media (max-width: 599px) { .profile-form__field { grid-template-columns: minmax(0, 1fr); } }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.medal { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.medal > img, .medal > .icon { grid-row: span 2; width: 48px; height: 48px; }
.medal > .icon { color: var(--lamp); }
.medal__title { font-weight: 600; overflow-wrap: anywhere; }
.medal__date { color: var(--ink-2); font-size: 14px; }
.notify-form fieldset { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.notify-form legend { margin-bottom: 8px; font-weight: 600; }

/* Pages: alliance ---------------------------------------------------------------------------- */
.alliance-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.alliance-side { display: grid; gap: 16px; }
.alliance-card__body { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.alliance-card__body img { max-width: 160px; border-radius: var(--r-panel); }
.invitations { margin: 0; padding: 0; list-style: none; }
.invitation { border-bottom: 1px solid var(--seam); }
.invitation-text { overflow-wrap: anywhere; }
.permissions__form { display: grid; gap: 10px; }
.nowrap { white-space: nowrap; }
@media (max-width: 899px) { .alliance-overview { grid-template-columns: minmax(0, 1fr); } }

/* Chat: the page and the drawer (specs/004-realtime-chat) ------------------------------------ */
.chat__tabs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.chat__tabs a[aria-current="page"] { color: var(--lamp); font-weight: 600; }
.chat__lines { min-height: 280px; max-height: 60vh; margin: 0; padding: 8px 16px; overflow-y: auto; list-style: none; }
.chat__lines--single { min-height: 0; }
.chat-line { padding: 3px 0; overflow-wrap: anywhere; }
.chat-line--own .chat-line__text { color: var(--ink); }
.chat-line__time { margin-right: 6px; color: var(--ink-2); font-size: 13px; }
.chat-line__author { margin-right: 6px; color: var(--lamp); font-weight: 600; }
.chat-line__text { color: var(--ink-2); }
.chat-line__actions { display: inline-flex; gap: 8px; margin-left: 8px; font-size: 13px; }
.chat-line__actions form { display: inline; }
.chat-line__action { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
.chat__status { margin: 0; color: var(--lamp); }
.chat__status[hidden], .chat__new[hidden], .chat-drawer [hidden], .badge[hidden] { display: none; }
.chat__new { align-self: center; }
.chat-report { display: grid; gap: 10px; }
.chat-drawer { position: fixed; z-index: 9; top: var(--top-h); right: 0; bottom: 0; display: flex; flex-direction: column; width: min(380px, 100vw); background: var(--hull); border-left: 1px solid var(--seam); box-shadow: -8px 0 24px #0009; }
.chat-drawer[hidden] { display: none; }
.chat-drawer__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--seam); }
.chat-drawer__tabs { display: flex; gap: 6px; flex: 1; }
.chat-drawer__tabs button { padding: 4px 10px; border: 1px solid var(--seam); border-radius: var(--r-chip); background: none; color: var(--ink-2); font: 600 14px/1.4 var(--f-semi); cursor: pointer; }
.chat-drawer__tabs button[aria-selected="true"] { border-color: var(--lamp); color: var(--lamp); }
.chat-drawer__page { font-size: 13px; white-space: nowrap; }
.chat-drawer__note { margin: 0; padding: 8px 12px; }
.chat-drawer__lines { flex: 1; min-height: 0; max-height: none; padding: 8px 12px; }
.chat-drawer .chat__status { padding: 0 12px 6px; }
.chat-drawer .chat__form { padding: 8px 12px 12px; border-top: 1px solid var(--seam); }
.chat-drawer .chat__form input[type="text"] { flex: 1; min-width: 0; }
@media (max-width: 767px) { .chat-drawer { top: 0; left: 0; width: auto; border-left: 0; } }

/* Pages: buddies and notes (spec 003 US4, contracts/social.md) ----------------------------- */
.buddy-status--online { color: var(--own); }
.buddy-status--recently { color: var(--ally); }
.buddy-status--offline { color: var(--neutral); }
.buddies__actions { display: flex; flex-wrap: wrap; gap: 6px; }
table.buddies td:first-child, .notes__title { overflow-wrap: anywhere; }
.note-form { display: grid; gap: 8px; max-width: 760px; }
.note-form input[type=text], .note-form textarea { width: 100%; }
.note-text { overflow-wrap: anywhere; }

/* Pages: alliance ranks (spec 003 FR-016) --------------------------------------------------- */
.rank-form { display: grid; gap: 10px; }
.rank-form__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); }
.rank-form__permissions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 8px 12px 10px; border: 1px solid var(--seam); border-radius: var(--r-panel); }
.rank-form__permissions legend { padding: 0 4px; color: var(--ink-2); font-size: 14px; }
.rank-form__permissions label { display: inline-flex; align-items: center; gap: 6px; }
.ranks__actions { display: grid; gap: 6px; justify-items: start; }
.ranks__actions .rank-form { min-width: 260px; padding: 8px 0; }
.ranks__name { overflow-wrap: anywhere; }

/* Pages: battle simulator (spec 003 FR-018) -------------------------------------------------- */
.sim-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.sim-units caption, .sim-losses caption { padding: 8px 0 4px; color: var(--ink-2); font: 600 15px var(--f-semi); text-align: left; }
.sim-units input { width: 11em; max-width: 100%; text-align: right; }
.sim-outcome { margin: 0; padding-left: 32px; }
.sim-head { margin: 14px 0 6px; font: 600 16px var(--f-semi); }
table.sim-resources tr:last-child th { border-bottom: 0; }

/* Pages: confirmation ----------------------------------------------------------------------- */
.confirm { max-width: 640px; }
.confirm__consequence { font-size: 17px; }
.confirm__preview td + td { text-align: right; font-variant-numeric: tabular-nums; }
.refusal { color: var(--hostile); }

/* Public pages: landing ---------------------------------------------------------------------- */
.landing { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.landing__intro h1 { margin: 0 0 12px; font: 700 34px/1.1 var(--f-cond); }
.landing__login h2 { margin: 0 0 12px; font: 600 20px var(--f-semi); }
.login-form { display: grid; gap: 8px; }
.login-form input[type=text], .login-form input[type=password] { width: 100%; }
.login-form__remember { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.landing__links { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; }
.public dl dt { margin-top: 8px; }
.public form input[type=text], .public form input[type=email], .public form input[type=password] { width: 100%; max-width: 360px; }
@media (max-width: 699px) { .landing { grid-template-columns: minmax(0, 1fr); } }

.register-form { display: grid; gap: 14px; max-width: 460px; }
.register-form__field { display: grid; gap: 4px; }
.register-form__field input, .register-form__field select { width: 100%; }

/* Admin panel and the game's impersonation confirmation ------------------------------------- */
.moderation { display: grid; gap: 12px; margin-bottom: 20px; }
.moderation__ban { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--seam); border-radius: var(--r-panel); }
.moderation textarea { width: 100%; }
.confirm-link form { display: grid; gap: 12px; }
/* The panel's wide tables scroll inside it instead of widening the page. */
body.admin { grid-template-columns: minmax(0, 1fr); }
body.admin .public__panel { min-width: 0; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: -8px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--seam); }
.admin-nav__who { margin-left: auto; color: var(--ink-2); font-size: 14px; }
.admin-logout { margin-top: 20px; }
.admin-actions { margin: 16px 0; }
.enrolment { margin-bottom: 20px; }
.enrolment code { overflow-wrap: anywhere; }
.enrolment__codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 16px; padding-left: 20px; }

/* 6. Phone (below 900 px): menu behind #menu, bottom bar, compact gauges ------------------ */
.gauge__short { display: none; }
@media (max-width: 899px) {
  :root { --top-h: 52px; }
  body.shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "gauges" "alert" "flash" "main" "status" "bottom";
    grid-template-rows: var(--top-h) auto auto auto 1fr auto auto;
  }
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .menu-link { display: inline-grid; }
  .mark { font-size: 20px; }
  .planet-pick { flex: 1; min-width: 0; }
  .planet-pick > summary { max-width: none; }
  .planet-pick__coords, .planet-pick__fields, .topbar .stepper, .topbar__count { display: none; }
  .planet-pick { position: static; }
  .planet-pick__list { left: 16px; right: 16px; width: auto; }
  /* One compact row: icon, short amount, bar and a warning icon; a tap (focus) opens the rate and
     the time until full below the gauge. */
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gauge { position: relative; padding: 6px 8px; border-bottom: 1px solid var(--seam); cursor: pointer; }
  .gauge__label, .gauge__cap, .gauge__flag-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gauge__head { gap: 4px; }
  .gauge__value { font-size: 15px; }
  .gauge__full { display: none; }
  .gauge__short { display: inline; }
  .gauge__foot { display: none; }
  .gauge.is-full .gauge__name, .gauge.is-deficit .gauge__name { color: var(--lamp); }
  .gauge:focus .gauge__foot, .gauge:focus-within .gauge__foot { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; z-index: 7; min-width: 180px; padding: 8px 10px; border: 1px solid var(--seam); border-radius: var(--r-panel); background: var(--hull); box-shadow: 0 8px 24px #0009; }
  .gauge:focus .gauge__flag-text, .gauge:focus-within .gauge__flag-text { position: static; width: auto; height: auto; clip: auto; }
  .gauge--energy:focus .gauge__foot, .gauge--deuterium:focus .gauge__foot { left: auto; right: 0; }
  .alert, table.flashes { margin: 12px 12px 0; }
  main#content { padding: 16px 12px 32px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; position: fixed; inset: 0; z-index: 8; overflow-y: auto; border-right: 0; padding-top: 56px; }
  .nav:target { display: block; }
  .nav .nav__close { display: inline-grid; position: absolute; top: 10px; right: 12px; }
  .bottom-bar { grid-area: bottom; position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--seam); background: var(--hull); }
  .bottom-bar a { display: grid; place-items: center; gap: 2px; min-height: 52px; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: 12px; }
  .bottom-bar a .icon { width: 22px; height: 22px; }
  .bottom-bar a[aria-current="page"] { color: var(--lamp); }
  .btn, input[type=submit], button[type=submit], .icon-btn { min-height: 44px; min-width: 44px; }
  .status form { margin-left: 0; }
}

/* 7. Motion -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .alert--hostile { animation: alert-pulse 2.4s ease-in-out 3; }
  @keyframes alert-pulse { 50% { box-shadow: 0 0 0 4px #ef5a5f33; } }
}

/* 8. Print -------------------------------------------------------------------------------- */
@media print {
  body, body.shell { display: block; background: #fff; color: #000; }
  .topbar, .gauges, .nav, .bottom-bar, .status, .skip, .alert, .space { display: none; }
  main#content { padding: 0; }
  .panel, .card, table.data td, table.data th { background: #fff; color: #000; border-color: #888; }
  a { color: #000; }
}

/* Pages: the shop (spec 003 US8) ------------------------------------------------------- */
/* Its pages render without a game, so without the top bar, gauges and menu column. */
body.shell:not([data-section]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "flash" "main" "status";
  grid-template-rows: auto 1fr auto;
}
body.shell:not([data-section]) main#content { width: 100%; max-width: 1120px; margin: 0 auto; }
.shop-form fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.shop-form legend { margin-bottom: 4px; color: var(--ink-2); }
.shop-form fieldset label { display: block; margin: 4px 0; }
.shop-price { margin: 8px 0; }
.shop-group { margin: 20px 0 10px; }
.plus-teaser { margin: 8px 0; }
.advisor td:last-child { min-width: 14em; }
.look-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.look-preview__type { width: 96px; margin: 0; color: var(--ink-2); font-size: 13px; text-align: center; }
.queues { display: grid; gap: 12px; }
.queue-lines { margin: 0 0 8px; padding-left: 20px; }
.queue-lines li + li { margin-top: 4px; }
.template-form__body { display: grid; gap: 10px; }
.template-form__ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.template-form__ships .count { width: 100px; }
.templates { margin: 0; list-style: none; }
.templates__row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--seam); overflow-wrap: anywhere; }
.template-links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.folder-bar__manage { margin-left: auto; }
.search-result { margin: 8px 0; }
.shop-supporters { columns: 3 12em; margin: 0; padding: 12px 16px 12px 32px; }

/* Cosmetics (spec 003 US10, contracts/cosmetics.md): name colours (never red or green, which
   mark fleets; each at least 4.5:1 on the panel), alliance themes and the profile's pictures. */
.name--amber { color: #f5b553; }
.name--teal { color: #40c8d0; }
.name--violet { color: #b99bf5; }
.name--silver { color: #d0d6de; }
.theme--deep { background: #101a30; border-color: #2f4f86; }
.theme--ember { background: #26160f; border-color: #8a4a24; }
.theme--frost { background: #14262e; border-color: #5f9fb8; }
.profile__banner { display: block; width: 100%; height: auto; max-height: 240px; margin-bottom: var(--gap); object-fit: cover; border-radius: var(--r-panel); }
.avatar--framed { position: relative; display: inline-block; width: 160px; height: 160px; }
.avatar--framed .avatar__picture { position: absolute; inset: 20%; width: 60%; height: 60%; object-fit: cover; border-radius: 50%; }
.avatar--framed .avatar__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.alliance__emblem { width: 32px; height: 32px; margin-right: 8px; vertical-align: middle; }
.looks-form fieldset { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.looks-form legend { margin-bottom: 8px; font-weight: 600; }
.looks-choice { display: flex; gap: 8px; align-items: center; }
.looks-planets { display: grid; gap: 8px; }