:root {
    --bg: #070b16;
    --bg-2: #0d1426;
    --panel: rgba(18, 28, 52, 0.85);
    --border: #22345c;
    --text: #d6e2ff;
    --muted: #7d8db3;
    --accent: #4fc3f7;
    --accent-2: #ffb74d;
    --ok: #66bb6a;
    --bad: #ef5350;
    --iron: #b0bec5;
    --titanium: #90caf9;
    --food: #a5d6a7;
    --water: #4dd0e1;
    --hydrogen: #ce93d8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--text);
    background:
        radial-gradient(1px 1px at 20% 30%, #fff8 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 80%, #fff6 50%, transparent 51%),
        radial-gradient(1px 1px at 40% 70%, #fff5 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 85% 20%, #fff9 50%, transparent 51%),
        radial-gradient(ellipse at top, #12224a 0%, var(--bg) 60%);
    background-size: 300px 300px, 400px 400px, 250px 250px, 500px 500px, 100% 100%;
    background-attachment: fixed;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h1 small { color: var(--muted); font-weight: normal; font-size: 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; color: var(--accent); }

.logo {
    font-size: 2.6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 18px #4fc3f788;
    text-decoration: none;
}
.logo-small { font-size: 1.1rem; letter-spacing: .15em; white-space: nowrap; }
.logo-link { display: block; flex: none; line-height: 0; }
.logo-image { height: 48px; width: auto; display: block; }
.logo-hero { margin: 0 0 .5rem; line-height: 0; }
.logo-hero img { width: min(446px, 100%); height: auto; filter: drop-shadow(0 0 18px #4fc3f744); }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* Landing / auth */
.landing { max-width: 440px; margin: 0 auto; padding: 10vh 16px 2rem; text-align: center; }
.landing .logo { margin: 0; }
.tagline { color: var(--muted); margin: .5rem 0 2rem; }
.landing-panel { text-align: left; }
.actions { display: flex; gap: .75rem; margin-top: 1rem; }
.hint { color: var(--muted); font-size: .9rem; }

label { display: block; margin: .75rem 0 .25rem; color: var(--muted); font-size: .9rem; }
input[type=text], input[type=password], input[type=email] {
    width: 100%;
    padding: .55rem .7rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    font-size: 1rem;
}
/* Number fields everywhere look like the text fields (width stays per form). */
input[type=number] { padding: .35rem .5rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: .95rem; }
input[type=number].short { width: 6rem; }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
form .btn[type=submit] { margin-top: 1rem; }
.field-error { color: var(--bad); font-size: .85rem; margin-top: .25rem; }

.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 1px solid var(--accent);
    border-radius: 5px;
    background: #4fc3f722;
    color: var(--accent);
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover:not(:disabled) { background: #4fc3f744; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary { border-color: var(--muted); color: var(--text); background: transparent; }
.btn-danger { border-color: var(--bad); color: var(--bad); background: #ef535022; }
.btn-small { padding: .35rem .8rem; font-size: .85rem; }
form .btn-small[type=submit] { margin-top: 0; }

.flash { padding: .6rem .9rem; border-radius: 5px; margin-bottom: 1rem; border: 1px solid; }
.flash-success { border-color: var(--ok); background: #66bb6a1a; }
.flash-error { border-color: var(--bad); background: #ef53501a; }

/* Game layout */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .6rem 1rem;
    background: rgba(7, 11, 22, 0.9);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.resources { display: flex; gap: 1rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.res { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 72px; }
.res-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.res-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.res-rate { font-size: .7rem; color: var(--muted); }
.res-iron .res-amount { color: var(--iron); }
.res-titanium .res-amount { color: var(--titanium); }
.res-food .res-amount { color: var(--food); }
.res-water .res-amount { color: var(--water); }
.res-hydrogen .res-amount { color: var(--hydrogen); }
.res-population .res-amount { color: var(--text); }
.res-credits .res-amount { color: var(--accent-2); }
.res-negative, .negative { color: var(--bad); }
.table-head td { color: var(--muted); font-size: .8rem; }
.at { font-variant-numeric: tabular-nums; }
.rename { margin: -.4rem 0 1rem; }
.rename > summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.rename > summary:hover { color: var(--accent); }
.rename form { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.rename input[type=text] { max-width: 18rem; }
.rename form .btn[type=submit] { margin-top: 0; }
.bookmark-pick { display: block; margin-bottom: .5rem; }
.bookmark-pick select { width: auto; max-width: 100%; }
.spy-cell { white-space: nowrap; }
.spy-cell form { display: inline-block; margin: 0; }
.icon-button.bookmark-add { opacity: .35; }
.icon-button.bookmark-add:hover { opacity: 1; }
.bookmarks input[type=text] { max-width: 20rem; }
.bookmarks form.inline { display: inline; }
.fleet-table td { vertical-align: top; padding-top: .45rem; padding-bottom: .45rem; }
.fleet-table td:first-child { width: 1.8rem; }
.fleet-table tr.moving td { background: rgba(79, 195, 247, .04); }
.fleet-table label { cursor: pointer; display: inline; margin: 0; color: var(--text); font-size: inherit; }
.fleet-table .fleet-status { display: block; line-height: 1.35; }
.fleet-table td:nth-child(2) { width: 55%; }
.fleet-table .release-chip { margin-left: .4rem; }
.squadrons { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-bottom: .6rem; }
.squadron-chip { display: inline-flex; gap: .3rem; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; }
.squadron-chip .squadron-delete { color: var(--muted); font-size: .8rem; }
.squadron-chip .squadron-delete:hover { color: var(--bad); }
.fleet-filter > summary { cursor: pointer; font-weight: 600; }
.filter-rule { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.filter-rule select, .filter-rule input[type=text] { width: auto; }
.filter-rule:first-child [data-join] { visibility: hidden; }
.filter-rule [data-ship-fields] { display: inline-flex; gap: .4rem; align-items: center; }
.filter-rule input[data-count] { width: 4.5rem; }
.filter-rule [hidden] { display: none !important; }
.filter-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.filter-actions .checkbox { margin: 0; }
.saved-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.filter-chip { --chip: var(--accent); display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--chip); background: color-mix(in srgb, var(--chip) 18%, transparent); }
.filter-chip .link-button { color: var(--text); }
.filter-chip.active { background: color-mix(in srgb, var(--chip) 45%, transparent); box-shadow: 0 0 0 1px var(--chip); }
.filter-chip form.inline { display: inline; margin: 0; }
.filter-chip-delete { color: var(--muted) !important; font-size: .8rem; }
.filter-save { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.filter-save input[type=text] { width: auto; flex: 1 1 12rem; }
.filter-save input[type=color] { width: 2.6rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; }
.filter-save .btn[type=submit] { margin-top: 0; }
.bulk-bar { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.bulk-bar select { width: auto; }
.bulk-panel { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .5rem; }
.trade-waiting { border-color: var(--accent-2); padding: .4rem .6rem; }
.trade-waiting-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .45rem .5rem; border-radius: 5px; color: var(--text); text-decoration: none; }
.trade-waiting-row:hover { background: rgba(255, 255, 255, .05); }
.trade-waiting-go { color: var(--accent-2); white-space: nowrap; }
.recall-link { color: var(--accent-2); font-size: .8rem; margin-left: .4rem; white-space: nowrap; }
.recall-link:hover { color: var(--accent); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.tabs a { padding: .45rem .9rem; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.tabs a:hover { color: var(--text); }
.tabs button { padding: .45rem .9rem; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-color: var(--border); background: var(--panel); margin-bottom: -1px; }
.tabs a.active { color: var(--accent); border-color: var(--border); background: var(--panel); margin-bottom: -1px; }
.fusionator-market .order-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.fusionator-market input[type=number] { width: 5.5rem; }
.coords { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.coords:hover { color: var(--accent); }
.galaxy-table tr:target td { background: rgba(79, 195, 247, .18); }
.galaxy-table tr:target { outline: 2px solid var(--accent); outline-offset: -2px; }
.galaxy-table tr { scroll-margin-top: 90px; }
.apply-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 1rem; }
.apply-box form { margin: 0; }
.account-switch { display: flex; align-items: center; gap: .4rem; flex: none; }
.account-switch select { padding: .25rem .4rem; font-size: .85rem; width: auto; max-width: 10rem; border-color: var(--accent-2); }
.account-switch-exit { font-size: .8rem; color: var(--accent-2); white-space: nowrap; }
.server-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.server-clock time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: .02em; }
.res-exposed { text-decoration: underline dotted var(--accent-2); text-underline-offset: 3px; }
.user { color: var(--muted); font-size: .85rem; white-space: nowrap; }

.layout { display: flex; max-width: 1640px; margin: 0 auto; }
.sidebar {
    width: 190px;
    flex-shrink: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.sidebar a, .sidebar .soon { padding: .45rem .7rem; border-radius: 5px; text-decoration: none; color: var(--text); }
.sidebar a:hover { background: #ffffff0d; }
.sidebar a.active { background: #4fc3f722; color: var(--accent); }
.sidebar .soon { color: #4a5677; cursor: default; }
.sidebar .soon::after { content: " · bald"; font-size: .75rem; }
.planet-badge { display: flex; flex-direction: column; padding: .5rem .7rem 1rem; }
.planet-badge span { color: var(--muted); font-size: .85rem; }
.content { flex: 1; padding: 1rem; min-width: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.table { width: 100%; border-collapse: collapse; }
.table td { padding: .35rem 0; border-bottom: 1px solid #ffffff0d; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.warning { color: var(--accent-2); }

.construction { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; border-color: var(--accent-2); }
.countdown { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--accent-2); }

.building-list { display: grid; gap: 1rem; }
.building { margin: 0; }
.building-head { display: flex; justify-content: space-between; align-items: baseline; }
.building-head h2 { margin: 0; }
.level { color: var(--muted); }
.has-picture { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.card-picture { width: 100%; height: auto; aspect-ratio: 345 / 251; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: #05070d; }
.card-body { min-width: 0; }
@media (max-width: 640px) {
    .has-picture { grid-template-columns: 1fr; }
    .card-picture { max-height: 180px; }
}
.building-desc { color: var(--muted); margin: .4rem 0 .8rem; }
.building-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cost { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.cost .lacking { color: var(--bad); }
[hidden] { display: none !important; }
.rate-row { gap: .4rem 1rem; padding: .15rem .4rem; border-radius: 4px; opacity: .6; cursor: pointer; }
.rate-row.rate-active { opacity: 1; background: rgba(255, 255, 255, .06); }
.rate-details { width: 100%; margin: .2rem 0 .3rem; }
.rate-details > summary { cursor: pointer; color: var(--muted); font-size: .85rem; padding: .15rem .4rem; }
.rate-details > summary:hover { color: var(--text); }
.rate-details[open] > summary { margin-bottom: .2rem; }
.rate-label { min-width: 3.2rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-2); }
.duration { color: var(--muted); }
.requirement { color: var(--accent-2); font-size: .9rem; }

@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; gap: .5rem; }
    .resources { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .res-label { letter-spacing: .03em; }
    .res { min-width: 0; }
    .layout { flex-direction: column; }
    .sidebar { width: auto; flex-direction: row; flex-wrap: wrap; padding: .5rem 16px; }
    .planet-badge { width: 100%; padding: .25rem 0; flex-direction: row; gap: .5rem; }
    .content { padding: 0 16px 1rem; }
}

/* Research & shipyard */
.section-title { margin: 1.5rem 0 .75rem; color: var(--text); font-size: 1.15rem; }
.muted { color: var(--muted); }
.firing-order { color: var(--muted); font-size: .8rem; margin-right: .3rem; font-weight: normal; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem .75rem; margin: 0 0 .9rem; }
.stats div { display: flex; flex-direction: column; }
.stats dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats dd .stat-base { color: var(--muted); font-size: .7rem; }
.research-effects { margin: -.4rem 0 .9rem; color: var(--text); }
.order-form { display: flex; align-items: center; gap: .5rem; }
.order-form input[type=number] {
    width: 6.5rem;
    padding: .35rem .5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
}

/* Planets, fleets, galaxy, messages */
.planet-list { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .75rem; }
.sidebar a.planet-badge { padding: .4rem .7rem; border-radius: 5px; border: 1px solid transparent; }
.sidebar a.planet-badge.current { border-color: var(--border); background: var(--panel); }
.badge { background: var(--accent-2); color: #000; border-radius: 9px; padding: 0 .45rem; font-size: .75rem; font-weight: 600; }
.small { font-size: .8rem; }
h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; color: var(--muted); font-weight: normal; text-transform: uppercase; letter-spacing: .06em; }
.fleet-form input[type=number], .galaxy-nav input[type=number] {
    width: 6.5rem; padding: .35rem .5rem; background: var(--bg-2);
    border: 1px solid var(--border); border-radius: 5px; color: var(--text);
}
div.coords { display: flex; gap: 1rem; flex-wrap: wrap; }
div.coords label { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; }
.mission { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
.mission:has(input:checked) { border-color: var(--accent); background: #4fc3f714; }
.mission input { position: absolute; opacity: 0; }
.fleet-table td { vertical-align: top; }
.galaxy-nav { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.galaxy-nav label { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.galaxy-table .pos { width: 2.5rem; color: var(--muted); text-align: left; }
.galaxy-table tr.own td { color: var(--accent); }
.galaxy-table .actions a { margin-left: .75rem; font-size: .85rem; }
.message summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; }
.message.unread summary span:first-child { font-weight: 600; color: var(--accent); }
.message-body { white-space: pre-wrap; font-family: inherit; margin: .75rem 0 0; color: var(--text); }
.inline-action { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lifeform ul { padding-left: 1.1rem; margin: .5rem 0 1rem; }
.lifeform.current { border-color: var(--accent); }

/* Queues */
.queue h2 small { font-weight: normal; font-size: .8rem; }
.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.queue-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2); flex-wrap: wrap; }
.queue-item.active { border-color: var(--accent-2); }
.queue-item.dragging { opacity: .4; }
.queue-item.drop-target { border-color: var(--accent); border-style: dashed; }
.queue-handle { cursor: grab; color: var(--muted); user-select: none; }
.queue-label { flex: 1; min-width: 10rem; display: flex; flex-direction: column; }
.queue-time { color: var(--muted); }
.queue-time .countdown { font-size: .85rem; }
.queue-buttons { display: flex; gap: .25rem; }
.queue-buttons .btn-small { padding: .2rem .5rem; }

/* Fleets */
.fleet-card.moving { border-color: var(--accent-2); }
.fleet-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.fleet-actions details, .panel > details { border-top: 1px solid #ffffff0d; padding-top: .4rem; }
.fleet-actions summary, .panel > details > summary { cursor: pointer; color: var(--accent); }
.type-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .2rem .75rem; margin: .5rem 0 .75rem; }
.type-checks label { margin: 0; color: var(--text); display: flex; gap: .35rem; align-items: center; }
input.short { width: 5rem; }
.inline-action input[type=text], .fleet-form input[type=text] { padding: .35rem .5rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); }
.fleet-form input[type=text] { width: auto; max-width: 20rem; display: block; }

/* Alliance */
textarea, select {
    width: 100%; padding: .5rem .6rem; background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 5px; color: var(--text); font: inherit;
}
select { width: auto; }
.board-post { border-top: 1px solid #ffffff0d; padding: .75rem 0; }
.board-post .message-body { margin-top: .3rem; }
form.inline { display: inline; }
.link-button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.release-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.release-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 12px; font-size: .85rem; }

/* Trade */
:root { --trade: #26a69a; }
.galaxy-table tr.trade-post td { background: rgba(38, 166, 154, 0.16); color: #80cbc4; }
.galaxy-table tr.trade-post td:first-child { box-shadow: inset 3px 0 0 var(--trade); }
.trade-card { border-left: 3px solid var(--trade); }
.trade-card.locked { opacity: .65; border-left-color: var(--border); }
.trade-order { margin-top: .75rem; }
.trade-order summary { cursor: pointer; color: var(--accent); }
.debris { color: var(--accent-2); text-decoration: none; font-size: .8rem; }

/* Confirmation modal */
.modal {
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 60px #000a;
}
.modal::backdrop { background: rgba(3, 6, 14, 0.7); backdrop-filter: blur(2px); }
.modal h2 { margin: 0 0 .5rem; color: var(--accent-2); }
.modal-text { margin: 0 0 1.25rem; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: .75rem; }

/* Three columns: planets | content | empire */
.sidebar-left { width: 270px; }
.sidebar-right { width: 320px; }
.sidebar-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: .75rem .7rem .35rem; font-weight: normal; }
.sidebar-title:first-child { margin-top: 0; }
.sidebar-title small { color: var(--accent); }
.planet-list { max-height: 70vh; overflow-y: auto; gap: 1px; }
/* One compact line per planet */
.sidebar a.planet-badge { display: flex; flex-direction: row; align-items: center; gap: .35rem; padding: .22rem .5rem; white-space: nowrap; line-height: 1.3; }
.planet-badge .pb-icon { flex: none; font-size: .8rem; }
.planet-badge .pb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: .9rem; }
.planet-badge.current .pb-name { color: var(--accent); font-weight: 600; }
.planet-badge .pb-coords { flex: none; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.planet-status { flex: none; font-size: .7rem; letter-spacing: .05rem; }
.planet-status:empty { display: none; }
.planet-list { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

@media (max-width: 1400px) {
    .sidebar-left { width: 245px; }
    .sidebar-right { width: 290px; }
}
@media (max-width: 1100px) {
    .sidebar-right { width: 250px; }
    .sidebar-left { width: 210px; }
}
@media (max-width: 760px) {
    .sidebar-left, .sidebar-right { width: auto; }
    .sidebar-left { order: 1; }
    .content { order: 2; }
    .sidebar-right { order: 3; padding: 0 16px 1rem; }
    .sidebar-title { display: none; }
    .planet-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; width: 100%; gap: .4rem; }
    .planet-list .planet-badge { flex: 0 0 auto; width: auto; border-color: var(--border); }
    .planet-badge .pb-name { max-width: 9rem; }
}

/* Black board column */
.board-column { gap: .5rem; }
.board-form { display: flex; flex-direction: column; gap: .4rem; }
.board-form textarea { font-size: .9rem; resize: vertical; }
.board-form .btn { align-self: flex-end; margin-top: 0 !important; }
.board-feed { display: flex; flex-direction: column; gap: .5rem; max-height: 65vh; overflow-y: auto; padding-right: .2rem; }
.board-note {
    background: #fff8dc0d;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2);
    border-radius: 4px;
    padding: .45rem .6rem;
    font-size: .88rem;
}
.board-meta { color: var(--muted); font-size: .75rem; margin-bottom: .2rem; }
.board-meta strong { color: var(--text); }
.board-hint { padding: 0 .2rem; }

.empire-nav { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .75rem; }
.empire-nav a { padding: .45rem .7rem; border-radius: 5px; text-decoration: none; color: var(--text); }
.empire-nav a:hover { background: #ffffff0d; }
.empire-nav a.active { background: #4fc3f722; color: var(--accent); }
@media (max-width: 760px) {
    .empire-nav { flex-direction: row; flex-wrap: wrap; }
}

/* Profiles & player names */
.player-name { white-space: nowrap; }
.player-name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.player-name a:hover { color: var(--accent); }
.lf-icon { font-size: .9em; margin-right: .1rem; }
.alliance-tag { color: var(--muted) !important; }
.profile { display: flex; gap: 1.25rem; align-items: flex-start; }
.profile-info { flex: 1; min-width: 0; }
.profile-info h1 { margin-bottom: .25rem; }
.profile-info h2 { margin: .5rem 0 .3rem; }
.picture { border-radius: 8px; border: 1px solid var(--border); object-fit: cover; flex-shrink: 0; }
.picture-large { width: 160px; height: 160px; }
.picture-empty { display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: var(--muted); background: var(--bg-2); }
input[type=file] { color: var(--muted); font-size: .9rem; }
label.checkbox { display: flex; gap: .4rem; align-items: center; color: var(--text); }
@media (max-width: 760px) {
    .profile { flex-direction: column; }
}
.galaxy-table .slot-type { width: 1.8rem; text-align: center; cursor: help; }
.flight-preview { color: var(--accent-2); margin: .4rem 0 0; min-height: 1.2em; }
.galaxy-table .spy-cell { width: 2rem; text-align: center; }
.icon-button { background: none; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 1rem; padding: .1rem .3rem; line-height: 1; }
.icon-button:hover { border-color: var(--border); background: #ffffff0d; }
.movements tr.hostile td { color: #ff8a80; }
.movements tr.hostile td:first-child { box-shadow: inset 3px 0 0 var(--bad); padding-left: .5rem; }

/* Post (player mail), quick contacts, online status */
.mail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .mail-layout { grid-template-columns: minmax(0, 1fr); } }
.mail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mail-head .tabs { margin: 0; flex: 1; }
.mail-table td:first-child { width: 1.5rem; }
.mail-table tr.mail-unread td { font-weight: 600; }
.mail-table tr.mail-unread a { color: var(--accent-2); }
.mail-table + .btn { margin-top: .75rem; }
.mail-form { display: flex; flex-direction: column; gap: .75rem; }
.mail-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: .85rem; }
.mail-form input[type=text], .mail-form textarea {
    padding: .5rem .6rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px;
    color: var(--text); font: inherit; font-size: .95rem;
}
.mail-form textarea { resize: vertical; min-height: 10rem; }
.mail-form .btn { align-self: flex-start; }
.mail-letter h1 { margin-bottom: .3rem; }
.mail-letter-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.contact-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.contact-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.contact-list li:last-child { border-bottom: none; }
.contact-requests li { background: #ffb74d14; border: 1px solid #ffb74d55; border-radius: 6px; padding: .4rem .6rem; }
.contact-actions { display: flex; gap: .4rem; }
.presence { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.presence-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.presence-online { color: var(--ok); }
.presence-online .presence-dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.badge[hidden] { display: none; }

.member-table .rank-head td { padding-top: .9rem; color: var(--accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.member-table tr:first-child.rank-head td { padding-top: .2rem; }
.member-name { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
.member-manage { white-space: normal; }
.member-manage form { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; margin: .15rem 0 .15rem .3rem; vertical-align: middle; }
.member-manage select { width: auto; max-width: 9.5rem; padding: .25rem .4rem; font-size: .85rem; }
.player-scores { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .25rem 0 .75rem; color: var(--muted); }
.player-scores strong { color: var(--accent-2); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.copy-link { margin-left: .4rem; padding: .1rem .5rem; font-size: .75rem; vertical-align: middle; }
.battle-report h1 { margin-bottom: .3rem; }

/* Newspaper, tickers */
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1rem 0; }
.ticker-feed { max-height: none; margin-top: 1rem; }
.ticker-feed .board-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ticker-feed .board-meta .btn { padding: 0 .4rem; }
.ticker-close { margin-top: 1rem; }
.ticker-open { margin-top: 1rem; flex-wrap: wrap; }
.ticker-open input[type=text] { flex: 1; min-width: 12rem; }
.inline-form { display: inline; margin: 0; }

/* Fleet movements on the overview: one line each */
.movement-table td { padding-top: .3rem; padding-bottom: .3rem; vertical-align: middle; }
.movement-table .movement-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 100%; }
.movement-table .movement-time { white-space: nowrap; width: 1%; }
.movement-table .movement-time { padding-left: .9rem; }
.pb-fusion { filter: drop-shadow(0 0 3px var(--accent)); }

/* Galaxy view: compact rows, icons side by side */
.galaxy-table td { padding: .12rem .25rem; line-height: 1.25; vertical-align: middle; }
.galaxy-table .pos, .galaxy-table .spy-cell, .galaxy-table .slot-type, .galaxy-table .actions { white-space: nowrap; }
.galaxy-table td:first-child { padding-left: 0; }
.galaxy-table form { display: inline-flex; margin: 0; }
.galaxy-table .spy-cell { width: 4.2rem; text-align: left; }
.galaxy-table .icon-button { padding: 0 .2rem; font-size: .9rem; }
.galaxy-table .actions { display: table-cell; margin: 0; }
.galaxy-table .actions a, .galaxy-table .actions form { margin-left: .6rem; font-size: .85rem; }
.galaxy-table .pos { width: 3rem; }
.galaxy-table .pos .debris { margin-left: .15rem; }
/* Zebra stripes and hover highlight: actions clearly belong to their row */
.galaxy-table tr:nth-child(even) td { background: rgba(255, 255, 255, .035); }
.galaxy-table tr:hover td { background: rgba(79, 195, 247, .09); }
.galaxy-table tr.trade-post:nth-child(even) td { background: rgba(38, 166, 154, 0.2); }
.galaxy-table tr:target td, .galaxy-table tr:target:nth-child(even) td { background: rgba(79, 195, 247, .18); }

/* Highscores */
.highscore-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.highscore-filters .filter-chip { text-decoration: none; }
.highscore-filters .filter-chip.active { border-color: var(--accent); color: var(--accent); }
.highscore-table td:first-child { width: 3.5rem; padding-right: .9rem; }
.highscore-table tr.highscore-own td { background: rgba(255, 183, 77, .12); }
.highscore-table tr.highscore-own td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.sort-link { color: var(--muted); text-decoration: none; }
.sort-link.active { color: var(--accent); }

.cargo-room-info { margin: .4rem 0 0; color: var(--muted); }
.cargo-room-info.lacking { color: var(--bad); font-weight: 600; }
.submit-hint { margin-left: .6rem; color: var(--accent-2); }

/* Diplomacy */
.proposal { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.proposal:last-child { border-bottom: none; }
.relation-war td:first-child { color: var(--bad); }
.relation-bond td:first-child { color: var(--ok); }
.diplomacy-form { flex-wrap: wrap; gap: .5rem; }
.ship-class { font-size: .7rem; font-weight: normal; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; margin-left: .4rem; vertical-align: middle; text-transform: uppercase; letter-spacing: .05em; }
.fleet-owner-head td { padding-top: .8rem; color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.fleet-owner-head td .player-name { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.abandon-form { margin-top: .6rem; }
.abandon-warning { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Attack alarm */
.sidebar a.planet-badge.under-attack { background: rgba(239, 83, 80, .22); border-color: var(--bad); }
.sidebar a.planet-badge.under-attack .pb-name { color: #ff8a80; }
.attack-alarm { animation: alarm-blink 1s steps(2, start) infinite; }
@keyframes alarm-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .attack-alarm { animation: none; } }
.attack-alarm-panel { border-color: var(--bad); background: rgba(239, 83, 80, .14); }
.attack-alarm-panel h2 { color: #ff8a80; }
.attack-table td { color: #ffcdd2; vertical-align: middle; }
.attack-table .attack-time { white-space: nowrap; color: #ff8a80; font-weight: 600; }

/* Notepad */
.notes-form textarea { width: 100%; box-sizing: border-box; padding: .7rem .8rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: .95rem; line-height: 1.5; resize: vertical; min-height: 18rem; }
.notes-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
.notes-count { margin-left: auto; }
.message-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.public-report { max-width: 860px; margin: 0 auto; padding: 1.5rem 16px; }
.public-report-logo { display: inline-block; margin-bottom: 1rem; }
.public-report-logo img { height: auto; max-width: 100%; }
.ticker-description { display: block; margin-top: .15rem; }
.ticker-about { margin: -.4rem 0 .8rem; color: var(--muted); }
.ticker-describe { margin: 0 0 1rem; }
.ticker-open textarea { flex: 1 1 100%; padding: .45rem .6rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font: inherit; }
.proposal-message { margin: .4rem 0 .2rem; padding: .4rem .7rem; border-left: 3px solid var(--accent-2); background: #ffffff08; white-space: pre-wrap; color: var(--text); font-size: .9rem; }
.diplomacy-form textarea { flex: 1 1 100%; padding: .45rem .6rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font: inherit; }
.relation-end summary { list-style: none; display: inline-block; cursor: pointer; }
.relation-end summary::-webkit-details-marker { display: none; }
.relation-end[open] { min-width: 18rem; }

/* Compact menus: more entries fit on the screen */
.sidebar { gap: .05rem; }
.sidebar a, .sidebar .soon, .empire-nav a { padding: .2rem .7rem; line-height: 1.35; font-size: .93rem; }
.empire-nav { gap: .05rem; }
.sidebar-title { margin: .55rem .7rem .2rem; }

/* Planet list: scrolls once there are more than about 30 planets */
.sidebar .planet-list { max-height: min(46rem, 75vh); }
/* Reply and delete side by side, same height */
.mail-letter-actions { align-items: stretch; }
.mail-letter-actions .btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: .95rem; line-height: 1.2; padding: .55rem 1.1rem; margin: 0; box-sizing: border-box; }

/* Support tickets */
.ticket-status { padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.ticket-open { color: var(--accent-2); border-color: var(--accent-2); }
.ticket-question { color: var(--accent); border-color: var(--accent); }
.ticket-accepted { color: var(--ok); border-color: var(--ok); }
.ticket-rejected { color: var(--bad); border-color: var(--bad); }
.ticket-forwarded { color: #ce93d8; border-color: #ce93d8; }
.ticket-comment.from-admin { border-left: 3px solid var(--accent); }
.penalty-form { flex-wrap: wrap; gap: .5rem; }
.danger-zone { border-color: var(--bad); }
.mail-form label.radio { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); font-size: .95rem; }

.top-list { margin: .3rem 0 0; padding-left: 1.4rem; }
.top-list li { display: list-item; padding: .15rem 0; }
.top-list li span { display: inline-block; min-width: 12rem; }
.landing-top { margin-top: 1.5rem; text-align: left; }
.landing-top h3 { font-size: 1rem; color: var(--accent); }
.landing-links { margin-top: 1rem; }
.status-stats { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.imprint h2 { font-size: 1rem; margin-top: 1rem; }
.topic-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }

.vacation-tag { font-size: .75rem; color: var(--ok); white-space: nowrap; }
/* Alliance members: name, status and scores on one line */
.member-table .member-name + .muted.small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-table td:first-child { max-width: 0; width: 100%; }

.queue-toggle-all { display: flex; gap: .5rem; margin-bottom: .5rem; }
.queue-planet > summary { cursor: pointer; list-style: revert; }
.inline-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 .75rem; font-weight: normal; color: var(--muted); }
.vacation-banner { border-color: var(--ok); background: rgba(102, 187, 106, .1); }
.place-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.place-chips .filter-chip { cursor: pointer; color: var(--text); font: inherit; font-size: .85rem; }
.payout-form { flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.admin-user summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; cursor: pointer; }
.admin-user-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.admin-user-actions .inline-action { flex-wrap: wrap; gap: .4rem; }
.admin-user-search { flex-wrap: wrap; gap: .5rem; }

/* Ad slot on the start pages (none for extended accounts). */
.ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 90px; margin: 1rem 0; padding: .5rem; border: 1px dashed var(--border, #334); border-radius: 8px; text-align: center; overflow: hidden; }
.ad-slot-off { opacity: .8; }
#paypal-button { max-width: 400px; margin-top: .75rem; }

/* Planet pictures by planet type. */
.planet-pic { display: inline-block; vertical-align: middle; border-radius: 50%; filter: drop-shadow(0 0 6px rgba(120, 170, 255, .35)); }
.planet-pic-tiny { filter: none; }
.planet-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }