@font-face { font-family: Orbitron; src: url('assets/orbitron.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
/* Compact game-style frames and controls; body text keeps its readable system font. */
:root {
  --bg-top: #0a1a36;
  --bg-bottom: #02050d;
  --panel: rgba(6, 16, 36, 0.82);
  --panel-edge: #1d4f86;
  --edge-soft: rgba(52, 132, 214, 0.28);
  --glow: #38b6ff;
  --glow-soft: rgba(56, 182, 255, 0.35);
  --text: #dce9f7;
  --muted: #7e95b3;
  --heading: #a9dcff;
  --gold: #f4c55a;
  --green: #5edc7a;
  --red: #ff5f5f;
  --amber: #ffb547;
  --cut: 14px;
  font-family: Bahnschrift, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
.topbar, .game-navigation, main { width: 100%; max-width: 1200px; margin-inline: auto; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-size: 14px;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(40, 110, 200, 0.35), transparent 62%),
    radial-gradient(900px 480px at -5% 105%, rgba(20, 70, 150, 0.30), transparent 60%),
    repeating-linear-gradient(90deg, rgba(56, 182, 255, 0.035) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(56, 182, 255, 0.035) 0 1px, transparent 1px 80px),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom) 70%);
  background-attachment: fixed;
}

/* Header ------------------------------------------------------------------------------------- */
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(4, 12, 28, 0.95), rgba(4, 12, 28, 0.75));
  border-bottom: 1px solid var(--panel-edge);
  box-shadow: 0 1px 0 var(--glow-soft), 0 8px 30px rgba(0, 0, 0, 0.45);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; object-fit: contain;
}
.brand-title {
  font-family: Orbitron, Bahnschrift, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #a4eaff; text-shadow: 0 0 8px var(--glow-soft);
}
.brand-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.account { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#account { color: var(--heading); letter-spacing: 0.05em; }

/* Server chips: checked = watched; the dot tells the connection of a watched server. */
.servers { display: flex; align-items: center; gap: 6px; }
.server {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer; user-select: none;
  border: 1px solid var(--edge-soft); color: var(--muted); letter-spacing: 0.12em; font-size: 12px;
}
.server input { position: absolute; opacity: 0; pointer-events: none; }
.server:has(input:checked) { color: #fff; border-color: var(--glow); background: rgba(20, 60, 110, 0.55); box-shadow: 0 0 10px var(--glow-soft); }
.server:has(input:focus-visible) { outline: 1px solid var(--glow); }
.server .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(126, 149, 179, 0.4); }
.server.online .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.server.connecting .dot { background: var(--amber); animation: blink 1s ease-in-out infinite alternate; }
.server.warning .dot { background: var(--amber); }
.server.error .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
@keyframes blink { from { opacity: 0.35; } to { opacity: 1; } }
/* Language switch: two small chips, the chosen one lit like a watched server. */
.languages { display: flex; gap: 0; }
.languages button { padding: 5px 9px; font-size: 11px; letter-spacing: 0.12em; color: var(--muted); border-color: var(--edge-soft); background: transparent; box-shadow: none; }
.languages button + button { border-left: none; }
.languages button.active { color: #fff; border-color: var(--glow); background: rgba(20, 60, 110, 0.55); }
.hint { margin: 6px 0 10px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.region-tag {
  display: inline-block; margin-right: 6px; padding: 0 5px; font-size: 10px; letter-spacing: 0.1em; vertical-align: 1px;
  color: var(--heading); border: 1px solid var(--edge-soft);
}
.server-notes li { font-size: 12px; color: var(--amber); padding: 2px 0 6px; }
.server-notes button { margin-left: 8px; }

/* Layout ------------------------------------------------------------------------------------- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  padding: 16px 20px;
  min-height: 0;
  overflow: hidden;
}
.panel {
  background: linear-gradient(#101c29, #070d16 70px);
  border: 1px solid var(--panel-edge);
  clip-path: none;
  box-shadow: inset 0 0 0 3px #03080f, 0 0 0 1px #03080f;
  padding: 10px 12px 14px;
  overflow: auto;
  min-height: 0;
  max-height: 100%;
  overscroll-behavior: contain;
}
h2, h3 {
  margin: 0 0 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--heading);
}
h2 { font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--edge-soft); }
h3 { font-size: 12px; margin-top: 22px; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--edge-soft); margin-bottom: 8px; }
.panel-head h2 { border-bottom: 0; padding-bottom: 0; }
.controls { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; font-size: 12px; color: var(--muted); }

/* Controls ----------------------------------------------------------------------------------- */
button, select, input { font: inherit; color: var(--text); }
button {
  cursor: pointer;
  padding: 7px 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--panel-edge);
  background: rgba(10, 30, 60, 0.7);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: box-shadow 0.15s, background 0.15s, filter 0.15s;
}
button:hover:not(:disabled) { box-shadow: 0 0 14px var(--glow-soft); background: rgba(20, 60, 110, 0.8); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary {
  background: linear-gradient(180deg, #2f9bff, #0d59c2);
  border-color: #7cc7ff;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
button.primary:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 18px var(--glow); }
button.ghost { background: transparent; }
button.wide { width: 100%; margin-top: 4px; }
button.link { padding: 2px 8px; font-size: 11px; clip-path: none; }
select, input {
  background: rgba(2, 8, 20, 0.85);
  border: 1px solid var(--panel-edge);
  padding: 7px 9px;
  outline: none;
}
select { padding: 6px 8px; color-scheme: dark; }
select option, select optgroup { background: #071321; color: var(--text); }
input:focus, select:focus { border-color: var(--glow); box-shadow: 0 0 10px var(--glow-soft); }
input::placeholder { color: #56708f; }
.row { display: flex; gap: 8px; margin-bottom: 10px; }
.row input { flex: 1; min-width: 0; }

/* Search results ----------------------------------------------------------------------------- */
ul { list-style: none; margin: 0; padding: 0; }
.results { margin-top: 14px; }
.results li + li { margin-top: 6px; }
.results button {
  width: 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 12px;
}
.results button.active { border-color: var(--glow); box-shadow: 0 0 14px var(--glow-soft); }
.results .sub { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px; }

/* An inset clipped fill leaves a real frame along the diagonal edges. */
button:is(.primary, .ghost, .catalogue-item), .results button {
  --button-shape: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --button-fill: linear-gradient(#102c45, #061222);
  position: relative; isolation: isolate; border: 0;
  background: var(--panel-edge); clip-path: var(--button-shape);
}
button:is(.primary, .ghost, .catalogue-item)::before, .results button::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  background: var(--button-fill); clip-path: var(--button-shape);
}
button.primary { --button-fill: linear-gradient(#2f9bff, #0d59c2); background: #7cc7ff; }
button:is(.primary, .ghost, .catalogue-item):hover:not(:disabled), .results button:hover:not(:disabled) {
  --button-fill: linear-gradient(#194566, #0a2138); background: #66bfff;
}
.results button.active { background: var(--glow); }

/* Lobby table -------------------------------------------------------------------------------- */
table { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--edge-soft);
}
td { padding: 4px 7px; border-block: 1px solid #23425b; vertical-align: middle; background: #09131e; overflow: hidden; text-overflow: ellipsis; }
td:first-child { border-left: 1px solid #23425b; }
td:last-child { border-right: 1px solid #23425b; }
tbody tr:hover td { background: #152638; }
tbody tr.selected td { background: #17334d; border-block-color: #5daeff; }
tbody tr.selected td:first-child { border-left-color: #5daeff; }
tbody tr.selected td:last-child { border-right-color: #5daeff; }
tbody tr { cursor: pointer; transition: background 0.12s; }
tbody tr:hover { background: rgba(56, 182, 255, 0.08); }
tbody tr.selected { background: rgba(56, 182, 255, 0.14); }
.map-name { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { color: var(--muted); font-size: 12px; }
.players { font-variant-numeric: tabular-nums; }
.bar { height: 3px; margin-top: 4px; background: rgba(56, 182, 255, 0.15); }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, #2f9bff, #7fd4ff); box-shadow: 0 0 6px var(--glow); }
.clock { font-variant-numeric: tabular-nums; color: var(--heading); }
.empty { color: var(--muted); padding: 14px 4px; }

/* Status badges ------------------------------------------------------------------------------ */
.badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; border: 1px solid currentColor;
}
.badge.open { color: var(--amber); }
.badge.started { color: var(--green); }
.badge.abandoned { color: var(--red); }
.badge.unknown { color: var(--muted); }

/* Closed lobbies ----------------------------------------------------------------------------- */
.closed li {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 8px; cursor: pointer;
  border-bottom: 1px solid rgba(52, 132, 214, 0.12);
}
.closed li:hover, .closed li.selected { background: rgba(56, 182, 255, 0.08); }
.closed .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Detail and timeline ------------------------------------------------------------------------ */
.detail-title { font-size: 18px; color: #fff; margin: 4px 0 2px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: 13px; }
.facts dt { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; padding-top: 2px; }
.facts dd { margin: 0; }
.team { margin: 0; }
.team-name { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.team li { display: flex; align-items: center; height: 30px; padding: 1px 0; }
.team li.player { display: flex; align-items: center; gap: 8px; }
.host { color: var(--gold); }

/* Map images and portraits ------------------------------------------------------------------- */
.with-thumb { display: flex; gap: 10px; align-items: flex-start; }
.thumb-text { flex: 1; min-width: 0; }
.thumb {
  width: 44px; height: 44px; flex: none; object-fit: cover;
  border: 1px solid var(--edge-soft); box-shadow: 0 0 8px rgba(56, 182, 255, 0.18); background: #020712;
}
.map-image {
  display: block; width: 100%; height: clamp(120px, 26dvh, 220px); object-fit: contain; margin-bottom: 10px;
  border: 1px solid var(--panel-edge); box-shadow: 0 0 16px var(--glow-soft); background: #020712;
}
.avatar {
  width: 28px; height: 28px; flex: none; object-fit: cover;
  border: 1px solid var(--edge-soft); background: #020712;
}
.avatar.blank {
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--muted); background: rgba(56, 182, 255, 0.08);
}
.host .avatar { border-color: var(--gold); box-shadow: 0 0 6px rgba(244, 197, 90, 0.4); }
.thumb.missing, .avatar.missing { visibility: hidden; }
.map-image.missing { visibility: hidden; }
.timeline { position: relative; margin: 10px 0 0; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--edge-soft); }
.timeline li { position: relative; padding: 4px 0 8px; }
.timeline li::before {
  content: ""; position: absolute; left: -17px; top: 9px; width: 9px; height: 9px;
  background: var(--panel-edge); transform: rotate(45deg); box-shadow: 0 0 6px var(--glow-soft);
}
.timeline li.opened::before { background: var(--amber); }
.timeline li.joined::before { background: var(--green); }
.timeline li.left::before { background: var(--red); }
.timeline li.closed::before { background: var(--glow); }
.timeline time { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.publication-card { margin: 10px 0 16px; padding: 10px; border: 1px solid var(--edge-soft); background: rgba(2, 8, 20, 0.48); }
.publication-title { display: grid; gap: 2px; margin-bottom: 8px; }
.publication-title span, .publication-facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.publication-title strong { color: #fff; font-size: 14px; }
.publication-image { display: block; width: 100%; max-height: 150px; object-fit: contain; margin-bottom: 8px; background: #020712; border: 1px solid var(--edge-soft); }
.publication-image.missing { display: none; }
.publication-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12px; }
.publication-facts dd { margin: 0; }
.publication-link { display: inline-block; margin-top: 10px; color: var(--glow); font-size: 12px; }
.publication-heading { margin-bottom: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.detail-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 8px; padding: 4px 0; border-block: 1px solid var(--edge-soft); background: linear-gradient(#102c45, #060e1c); }
.detail-tabs button { --tab-shape: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); --tab-fill: linear-gradient(#123451, #061222); position: relative; isolation: isolate; min-width: 0; min-height: 30px; padding: 6px 10px; font-size: 10px; color: #8dc9ea; border: 0; background: #3989ba; clip-path: var(--tab-shape); }
.detail-tabs button::before { content: ''; position: absolute; z-index: -1; inset: 1px; background: var(--tab-fill); clip-path: var(--tab-shape); }
.detail-tabs button:first-child { --tab-shape: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.detail-tabs button:last-child { --tab-shape: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }
.detail-tabs button.active { --tab-fill: linear-gradient(#e1f7ff, #76c5f0); color: #041424; background: #d3f6ff; text-shadow: none; box-shadow: none; }
.detail-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }

html.readonly #login,
html.readonly #logout,
html.readonly #cancel,
html.readonly #refresh { display: none; }
#lobbies, #closed-lobbies, #catalogue { grid-column: 1; grid-row: 1; }
#detail { grid-column: 2; grid-row: 1; }
[hidden] { display: none !important; }
.game-navigation { display: flex; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--panel-edge); background: #040c1c; }
.game-navigation button { padding: 14px 24px; border: 0; border-right: 1px solid var(--edge-soft); background: transparent; clip-path: none; color: var(--muted); }
.game-navigation button.active { color: #fff; text-shadow: 0 0 10px var(--glow); box-shadow: inset 0 -2px var(--glow); background: linear-gradient(0deg, #123b62, transparent); }
.catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.catalogue-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; text-align: left; text-transform: none; letter-spacing: normal; }
.catalogue-item .thumb { grid-row: 1 / 3; }
.catalogue-item strong { overflow-wrap: anywhere; }
.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.team { padding: 6px; border: 1px solid #23425b; box-shadow: 0 0 0 1px #01050b; background: #060c15; min-width: 0; }
.team-name { margin: -6px -6px 3px; padding: 4px 6px; border-bottom: 1px solid #23425b; background: #142434; color: #c5e8f9; text-transform: none; letter-spacing: .04em; }
.player-button { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 28px; padding: 0; border: 0; clip-path: none; background: transparent; font-size: 12px; letter-spacing: normal; text-transform: none; text-align: left; }
.player-button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host .player-button { color: var(--gold); }
dialog { color: var(--text); background: #071429; border: 1px solid var(--glow); width: min(90vw, 400px); padding: 24px; }
dialog::backdrop { background: #000a; }
#player-close { float: right; font-size: 20px; }
.profile-avatar { width: 96px; height: 96px; display: block; }

@media (max-width: 1100px) {
  main { gap: 10px; padding: 10px; }
}
@media (max-width: 980px) {
  main { grid-template-columns: 1fr; }
  #detail { display: none; }
  .game-navigation { padding: 0 10px; }
  .game-navigation button { padding: 12px 18px; }
}
.publication-description { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; color: #b6d8ed; }
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
#image-dialog { width: fit-content; max-width: 95vw; max-height: 95vh; padding: 16px; overflow: auto; }
#image-full { display: block; width: min(1024px, 88vw); max-height: 78vh; height: auto; object-fit: contain; }
#image-close { float: right; font-size: 24px; margin-left: 16px; }
#image-caption { margin: 0 40px 12px 0; overflow-wrap: anywhere; }
#image-stage { position: relative; min-height: 160px; }
#image-loading { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: #051120dd; color: #bcecff; }
#image-loading[hidden] { display: none; }
.preview-spinner { width: 22px; height: 22px; border: 2px solid #25628b; border-top-color: #a6edff; border-radius: 50%; animation: preview-spin .8s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-spinner { animation: none; } }
* { scrollbar-width: auto; scrollbar-color: auto; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #03070d; border: 1px solid #142638; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #397aa7, #73b9e8, #397aa7); border: 1px solid #133d61; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #38b6ff; }
::-webkit-scrollbar-corner { background: #050d19; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #25628b #050d19; }
}
#detail-dialog { width: min(92vw, 760px); height: min(88vh, 820px); height: min(88dvh, 820px); max-height: 88dvh; overflow: hidden; padding: 0; border: 2px solid #46bcff; box-shadow: inset 0 0 0 3px #133d65, 0 0 18px #158bda77; background: linear-gradient(135deg, #0a2840, #050d1c 45%); }
#detail-dialog[open] { display: flex; flex-direction: column; }
.detail-dialog-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; padding: 12px 18px; border-bottom: 1px solid #25658a; background: linear-gradient(#0a3454, #06192c); }
.detail-dialog-header h2, #detail-panel-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-dialog-header h2 { flex: 1; margin: 0; border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: .04em; font-size: 18px; color: #ecfaff; text-shadow: 0 0 8px #49bdff88; }
#detail-dialog #detail-body { flex: 1; min-height: 0; padding: 16px 18px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#detail-close { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; font-size: 24px; clip-path: none; }
#players { grid-column: 1 / -1; grid-row: 1; }
.player-item .avatar { grid-row: 1 / 4; }
.community-panel { grid-column: 1 / -1; grid-row: 1; }
.community-link { display: inline-block; padding: 8px 12px; border: 1px solid #3c83b4; color: #a9dcff; text-decoration: none; }
.community-link:hover { background: #123451; }
.watcher-card { padding: 12px; margin-bottom: 12px; border: 1px solid #23425b; background: #071321; }
.watcher-card .community-link, .watcher-publication { display: flex; align-items: center; gap: 8px; }
.watcher-publications { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.watcher-publication { clip-path: none; text-align: left; }
#watcher-guide pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid #23425b; background: #030a12; }
.subscription-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px; border-bottom: 1px solid #23425b; }
.subscription-row .sub { grid-column: 1; }
.subscription-row .bell { grid-column: 2; grid-row: 1 / 3; }
.subscription-row > button:last-child { grid-column: 3; grid-row: 1 / 3; }
.bell { clip-path: none; min-width: 36px; padding: 5px; font-size: 18px; }
.bell[aria-pressed="true"] { border-color: #f4c55a; background: #243444; }
.catalogue-entry { position: relative; min-width: 0; }
.catalogue-entry > .catalogue-item { width: 100%; height: 100%; padding-right: 44px; }
.catalogue-entry > .bell { position: absolute; right: 4px; top: 4px; min-width: 30px; font-size: 14px; }
.publication-actions { flex-shrink: 0; display: flex; justify-content: flex-end; margin-bottom: 4px; }
#catalogue, #players { display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 0; }
#catalogue { grid-column: 1 / -1; }
#catalogue-search, #players-query, #catalogue-status, #players-status { flex-shrink: 0; }
#catalogue-items, #players-items { flex: 1; min-height: 0; overflow: auto; align-content: start; grid-auto-rows: 72px; padding-bottom: 8px; }
#catalogue-items .catalogue-item, #players-items .catalogue-item { overflow: hidden; }
#catalogue-items .catalogue-item strong, #players-items .catalogue-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#catalogue-pagination, #players-pagination { position: static; flex-shrink: 0; margin: 0 -12px; border-radius: 0; padding: 12px; }
.game-navigation { overflow-x: auto; flex-shrink: 0; }
.pagination { position: sticky; bottom: -18px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 12px 4px; border-top: 1px solid var(--panel-edge); background: #071429; z-index: 1; }
.pagination span { font-size: 12px; color: var(--heading); font-variant-numeric: tabular-nums; }
#lobbies { display: flex; flex-direction: column; overflow: hidden; padding: 10px 0 0; }
.lobby-toolbar { display: flex; flex-shrink: 0; gap: 8px; padding: 0 10px 9px; background: #0b1623; }
#server-notes { padding-inline: 10px; }
#open-lobbies { border-top: 1px solid #3c83b4; }
#open-lobbies > table { border-spacing: 0; }
#open-lobbies tbody tr { margin: 0; }
#open-lobbies td { border: 0; border-bottom: 1px solid #23425b; }
#open-lobbies tbody tr.selected td { border-bottom-color: #5daeff; }
#open-lobbies th { border-bottom: 1px solid #3c83b4; }
#languages { max-width: 116px; font-size: 12px; }
.statistics-summary { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; }
.statistics-summary strong { display: block; color: #fff; font-size: 24px; }
.statistics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.statistics-card { border: 1px solid #23425b; padding: 14px; background: #071321; }
.statistics-card h3 { margin: 0 0 12px; color: #ccefff; letter-spacing: normal; text-transform: none; }
.statistics-card .thumb { float: left; margin: 0 10px 8px 0; }
.statistics-card .bar { clear: both; margin-top: 12px; }
#server-notes { flex-shrink: 0; }
#open-lobbies { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: column; }
#open-lobbies > table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#open-lobbies thead { display: table; width: calc(100% - 8px); table-layout: fixed; flex-shrink: 0; }
#open-lobbies tbody { display: block; flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; }
#open-lobbies tbody tr { display: table; width: 100%; table-layout: fixed; margin: 0; }
#empty { flex-shrink: 0; margin: 0; }
#empty:empty { display: none; }
.lobby-toolbar input { flex: 1; min-width: 0; }
.lobby-toolbar select { width: 130px; }
.lobby-toolbar input, .lobby-toolbar select, #catalogue-query, #players-query {
  min-height: 28px; padding: 4px 8px; font-size: 12px; border: 1px solid #3c83b4; border-radius: 2px;
  background: linear-gradient(#071728, #02070e); box-shadow: inset 0 0 5px #123d60;
}
#lobbies th, .publication-lobby-list th { font-size: 10px; padding: 5px 7px; letter-spacing: .06em; }
#lobbies thead th { background: #0b1623; }
.publication-lobby-list thead th { position: sticky; top: -8px; z-index: 1; background: #0b1623; }
#lobbies td, .publication-lobby-list td { font-size: 12px; }
#lobbies :is(th, td):first-child { width: 34%; }
#lobbies :is(th, td):nth-child(2) { width: 20%; }
#lobbies :is(th, td):nth-child(3) { width: 14%; }
#lobbies :is(th, td):nth-child(4) { width: 8%; }
#lobbies :is(th, td):nth-child(5) { width: 14%; }
#lobbies :is(th, td):nth-child(6) { width: 10%; }
#lobbies .thumb, .publication-lobby-list .thumb { width: 28px; height: 28px; }
#lobbies .with-thumb, .publication-lobby-list .with-thumb { align-items: center; gap: 7px; }
#lobbies .thumb-text, .publication-lobby-list .thumb-text { flex: 1; min-width: 0; }
#lobbies .bar, .publication-lobby-list .bar { height: 2px; }
#detail-dialog.publication-mode { width: min(96vw, 1040px); height: min(90dvh, 820px); max-height: 90dvh; border-radius: 5px;
  border: 2px solid #75c8ff; box-shadow: 0 0 0 3px #0b2c4b, 0 0 0 5px #3475a3, inset 0 0 0 3px #09101c, 0 0 24px #158bda77; }
.publication-mode .detail-dialog-header { height: 72px; background: linear-gradient(120deg, #083857, #021529); }
.publication-mode #detail-body { padding: 10px 14px 16px; background: #071220; display: flex; flex-direction: column; }
.publication-tabs { display: flex; flex-shrink: 0; padding: 8px; margin-bottom: 12px; border: 1px solid #224a69; }
.publication-tabs > button:not(.bell) { flex: 0 1 150px; }
.publication-tabs > .bell { margin-left: auto; }
.closed .badge { width: 120px; flex: 0 0 120px; text-align: center; box-sizing: border-box; }
.subscription-lobbies { width: 100%; border-collapse: collapse; table-layout: fixed; }
.subscription-lobbies th { border-top: 1px solid #3c83b4; }
.subscription-lobbies td { border: 0; border-bottom: 1px solid #23425b; }
.subscription-lobbies th:first-child { width: 30%; }
#notification-feed { overflow: auto; }
.publication-overview { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; min-height: 0;
  border: 1px solid #284761; padding: 12px; background: #060d17; overflow: auto; }
.publication-overview .publication-card { padding: 0 16px 0 0; margin: 0; border: 0; border-right: 1px solid #203c54; background: transparent; }
.publication-author { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #203c54; }
.publication-open { margin-top: 12px; }
.publication-hero { width: 100%; max-height: 100%; object-fit: contain; align-self: start; background: #01060d; border: 1px solid #284761; padding: 2px; }
.publication-lobby-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; min-height: 0; }
.publication-lobby-list, .publication-roster { overflow: auto; min-height: 0; border: 1px solid #284761; padding: 8px; background: #060d17; }
.publication-lobby-list th:first-child { width: 30%; }
.publication-lobby-list .clock { font-size: 10px; }
.publication-roster h3 { margin: 0 0 12px; }
.publication-roster .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.publication-roster .player-button { font-size: 10px; gap: 4px; }
.publication-roster .avatar { width: 22px; height: 22px; }
@media (max-width: 700px) {
  .brand-title { font-size: 15px; }
  #lobbies table { min-width: 640px; }
  .publication-overview { grid-template-columns: 1fr; }
  .publication-overview .publication-card { border-right: 0; padding-right: 0; }
  .publication-hero { grid-row: 1; max-height: 240px; }
  .publication-lobby-layout { display: block; overflow: auto; }
  .publication-lobby-list { overflow: auto; max-height: 50vh; }
  .publication-lobby-list table { min-width: 580px; }
  .publication-roster { margin-top: 12px; }
}