@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; }
.game-navigation, main { width: 100%; max-width: 1400px; 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 {
  position: relative; z-index: 20;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  width: 100%;
  padding-inline: max(20px, calc((100% - 1400px) / 2 + 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; }
.signed-in-profile { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.signed-in-profile[hidden] { display: none; }
.discord-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #123451; color: var(--heading); flex-shrink: 0;
  border: 1px solid #3c83b4; box-shadow: 0 0 6px #38b6ff44; box-sizing: border-box; }
.guest-avatar { align-items: end; background: linear-gradient(#123451, #081a2c); color: #4f8fbd; }
.user-menu summary:hover .discord-avatar { border-color: #79d5ff; box-shadow: 0 0 8px #38b6ff88; }
.discord-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-caption strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-caption > span { font-size: 11px; color: var(--muted); }
.user-menu { position: relative; }
.user-menu summary { cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.user-menu-items { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; max-width: calc(100vw - 40px); padding: 4px; background: #061321; border: 1px solid var(--panel-edge); box-shadow: 0 8px 24px #0009; }
.user-menu-items .account-menu-item { display: block; width: 100%; min-height: 36px; padding: 8px 10px; text-align: left; border: 0; background: transparent; }
.user-menu-items .account-menu-item[hidden] { display: none; }
.user-menu-items #discord-logout, .user-menu-items #discord-login { border-top: 1px solid var(--edge-soft); margin-top: 4px; }
.user-menu-items .account-menu-item.active { color: #fff; background: #123b62; box-shadow: inset 2px 0 var(--glow); }

/* Shared filter row and circular region controls on every directory/table page. */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; flex-shrink: 0; gap: 8px; padding: 10px; margin: 0; background: #0b1623; border-bottom: 1px solid #3c83b4; }
.filter-row input { flex: 1; min-width: min(180px, 100%); }
.filter-row select { width: 130px; max-width: 100%; }
.filter-row :is(input, select, button:not(.region-flag)) { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.filter-row :is(input, select) { border: 1px solid #3c83b4; border-radius: 2px; background: linear-gradient(#071728, #02070e); box-shadow: inset 0 0 5px #123d60; }
.servers { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.servers .server { position: relative; width: 28px; height: 28px; min-width: 28px; }
.server[aria-pressed="true"] { border-color: var(--glow); box-shadow: 0 0 8px var(--glow-soft); }
.server:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.server .dot { position: absolute; right: -1px; bottom: -1px; width: 6px; height: 6px; border: 1px solid #061321; 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 {
  --button-fill: linear-gradient(#102c45, #061222);
  --button-edge: var(--panel-edge);
  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; }
.notification-controls { flex-wrap: wrap; }

/* 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:not(.link, .bell, .player-button, .table-sort, .language-option, .region-flag, .watcher-tile, .game-navigation button, .detail-tabs button, #detail-close, #player-close, #image-close, #watcher-close, #bot-guide-close, #notification-toast-close, .gallery-dot) {
  --button-shape: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  position: relative; isolation: isolate; border: 0;
  background: var(--button-edge); clip-path: var(--button-shape);
}
button:not(.link, .bell, .player-button, .table-sort, .language-option, .region-flag, .watcher-tile, .game-navigation button, .detail-tabs button, #detail-close, #player-close, #image-close, #watcher-close, #bot-guide-close, #notification-toast-close, .gallery-dot)::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); --button-edge: #7cc7ff; }
button:not(.link, .bell, .player-button, .table-sort, .language-option, .region-flag, .watcher-tile, .game-navigation button, .detail-tabs button, #detail-close, #player-close, #image-close, #watcher-close, #bot-guide-close, #notification-toast-close, .gallery-dot):hover:not(:disabled) {
  --button-fill: linear-gradient(#194566, #0a2138); --button-edge: #66bfff;
}
.results button.active { --button-edge: 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: 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); }
/* A publication without an Arcade image (common for extension mods) keeps its slot with a neutral emblem. */
img.thumb.missing { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' fill='%23081a2c'/%3E%3Cpath d='M22 9l11 6.5v13L22 35l-11-6.5v-13z' fill='none' stroke='%2338b6ff' stroke-opacity='.45' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='4' fill='%2338b6ff' fill-opacity='.45'/%3E%3C/svg%3E"); }
.avatar.missing { visibility: hidden; }
/* A larger map image shows its small thumbnail stretched and blurred until it has loaded, then sharpens. */
/* The blur is clipped to the image's own box (a filter paints beyond it); the clip is lifted only after the
   image has sharpened, so a loaded image keeps its outer glow. */
img.blur-up { background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: blur(5px); clip-path: inset(0);
  transition: filter .35s ease-out, clip-path 0s linear .35s; transition-behavior: allow-discrete; }
img.thumb.blur-up { background-size: cover; }
img.blur-up.loaded { filter: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) { img.blur-up { transition: none; } }
.map-image.missing { visibility: hidden; }
/* A large map image with its Arcade screenshots: squares in the bottom-right corner switch them. */
.map-gallery { display: block; min-width: 0; }
.gallery-frame { position: relative; }
.gallery-map-image { margin-bottom: 10px; }
.map-gallery .map-image { margin-bottom: 0; }
.gallery-publication-image { margin-bottom: 8px; }
.map-gallery .publication-image { margin-bottom: 0; }
.gallery-publication-hero { align-self: start; min-height: 0; }
.gallery-dots { position: absolute; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px;
  max-width: calc(100% - 12px); padding: 3px; background: rgba(2, 7, 18, 0.78); border: 1px solid #203c54; }
.gallery-dots .gallery-dot { box-sizing: border-box; width: 10px; height: 10px; padding: 0; cursor: pointer; clip-path: none; box-shadow: none;
  border: 1px solid #2a4a66; background: #0b1a2a; }
.gallery-dots .gallery-dot:hover { border-color: #6cc8ff; }
.gallery-dots .gallery-dot.active { background: #38b6ff; border-color: #38b6ff; }
.gallery-dots .gallery-dot:focus-visible { outline: 1px solid #e6fbff; outline-offset: 1px; }
.gallery-caption { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* Lobby events: one compact row each (icon, time, offset, player or change). */
.timeline { position: relative; margin: 10px 0 0; padding: 0; }
.timeline li { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; padding: 0; white-space: nowrap; font-size: 12px; }
.timeline li::before { display: none; }
.timeline time { display: inline; flex-shrink: 0; }
.timeline .event-offset { flex-shrink: 0; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.event-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; color: var(--glow); }
.event-icon.opened { color: var(--amber); }
.event-icon.joined, .event-icon.started { color: var(--green); }
.event-icon.left, .event-icon.abandoned { color: var(--red); }
.event-icon.unknown, .event-icon.change { color: var(--muted); }
.timeline li.late .event-icon { opacity: .6; }
.event-player { display: inline-flex; align-items: center; gap: 5px; min-width: 0; min-height: 0; height: 20px; line-height: 20px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 12px !important;
  color: var(--heading); font: inherit; text-transform: none; letter-spacing: normal; }
.event-player::before, .event-player::after { display: none; }
button.event-player { cursor: pointer; }
button.event-player:hover .event-player-name { color: #fff; text-decoration: underline; }
.event-player .avatar { width: 18px; height: 18px; font-size: 10px; }
.event-player-name, .timeline .event-text, .timeline .event-change { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.timeline .event-change { flex-wrap: nowrap; }
.timeline time { 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; }
.detail-tabs button:disabled { opacity: .4; cursor: default; }

.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, #catalogue { grid-column: 1; grid-row: 1; }
#detail { grid-column: 2; grid-row: 1; }
[hidden] { display: none !important; }
.navigation-bar { width: 100%; flex-shrink: 0; background: #040c1c; border-bottom: 1px solid var(--panel-edge); }
.game-navigation { display: flex; gap: 0; padding: 0 20px; background: transparent; }
.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: 4px; border: 1px solid #23425b; box-shadow: 0 0 0 1px #01050b; background: #060c15; min-width: 0; }
.team-name { margin: -4px -4px 4px; 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; }
.profile-avatar { width: 96px; height: 96px; display: block; }
.player-avatar { position: relative; flex-shrink: 0; overflow: hidden; }
.player-avatar .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-avatar .avatar-photo.missing { display: none; }
.profile-avatar.player-avatar { display: flex; align-items: center; justify-content: center; font-size: 32px; background: #091c32; }

@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-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; }

/* Shared preloader: one animated mark for every place that waits for content. A comet arc, a
   counter-rotating dashed ring and a pulsing core. All parts share a 2.4 s period; the script sets
   --preloader-phase from one clock, so a mark recreated by a re-render keeps moving smoothly. */
.preloader { display: inline-flex; align-items: center; gap: 10px; color: #bcecff; }
.preloader-text { min-width: 0; }
.preloader-block { display: flex; flex-direction: column; justify-content: center; gap: 14px; grid-column: 1 / -1;
  width: 100%; min-height: 180px; padding: 24px; box-sizing: border-box; text-align: center; font-size: 13px; letter-spacing: .04em; }
.preloader-block .preloader-mark { --size: 46px; }
.preloader-block .preloader-text { animation: preloader-breathe 2.4s ease-in-out var(--preloader-phase, 0ms) infinite; }
.preloader-mark { --size: 20px; --ring: max(2px, calc(var(--size) * .1)); position: relative; display: inline-block;
  flex: 0 0 var(--size); width: var(--size); height: var(--size); vertical-align: middle; filter: drop-shadow(0 0 4px #38b6ff99); }
.preloader-mark::before, .preloader-mark::after { content: ''; position: absolute; border-radius: 50%; }
.preloader-mark::before { inset: 0;
  background: conic-gradient(from 0deg, transparent 0 18%, #1d6fa855 40%, #38b6ff 78%, #e6fbff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring)));
  animation: preloader-spin 1.2s linear var(--preloader-phase, 0ms) infinite; }
.preloader-mark::after { inset: 24%; border: max(1px, calc(var(--size) * .04)) dashed #6cc8ffaa;
  animation: preloader-spin 2.4s linear var(--preloader-phase, 0ms) infinite reverse; }
.preloader-mark i { position: absolute; inset: 41%; background: #e6fbff; transform: rotate(45deg);
  box-shadow: 0 0 4px #a6edff, 0 0 10px #38b6ff; animation: preloader-pulse 1.2s ease-in-out var(--preloader-phase, 0ms) infinite; }
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-pulse { 0%, 100% { transform: rotate(45deg) scale(.55); opacity: .5; } 50% { transform: rotate(45deg) scale(1.2); opacity: 1; } }
@keyframes preloader-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .preloader-mark::before, .preloader-mark::after, .preloader-mark i, .preloader-block .preloader-text { 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; }
#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; }
#bot-guide-body pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid #23425b; background: #030a12; }
#bot-guide-dialog { width: min(820px, 94vw); max-height: 90dvh; padding: 0; overflow: hidden; }
#bot-guide-dialog[open] { display: flex; flex-direction: column; }
#bot-guide-body { padding: 16px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
#bot-guide-body h3 { margin-top: 24px; }
#bot-guide-body h3:first-child { margin-top: 0; }
#bot-guide-body .community-link { margin-top: 12px; }
#monitoring-login-dialog { width: min(700px, 94vw); max-height: 90dvh; padding: 0; overflow: hidden; }
#monitoring-login-dialog[open] { display: flex; flex-direction: column; }
#monitoring-login-body { padding: 16px; overflow: auto; min-height: 0; }
#monitoring-login-body form { display: grid; gap: 12px; }
#monitoring-login-body input, #monitoring-login-body select { width: 100%; }
#monitoring-login-body .community-link { margin-block: 12px; }
#subscription-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.subscription-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 34px 18px 32px 30px; gap: 4px 8px; align-items: center; height: 154px; padding: 10px; border: 1px solid #23425b; }
.subscription-row strong { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subscription-row .sub { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-regions { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 6px; }
.subscription-region { opacity: .45; }
.subscription-region[aria-pressed="true"] { opacity: 1; border-color: #f4c55a; background: #243444; }
.subscription-row > button:last-child { grid-column: 1; grid-row: 4; justify-self: start; }
.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: 0; }
#catalogue { grid-column: 1 / -1; }
#catalogue-search, #players-search, #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: 10px 12px 8px; }
/* A loading listing shows only the preloader, centred in the list area. */
#catalogue-items:has(> .preloader-block), #players-items:has(> .preloader-block) { display: flex; align-items: center; justify-content: center; }
#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; 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; }

/* Authenticated Discord management, separate from browser-local subscriptions. */
#server-management { grid-column: 1 / -1; overflow: auto; }
.table-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; min-height: 26px; }
.table-sort::before { display: none; }
th[aria-sort=ascending] .table-sort::after, th[aria-sort=descending] .table-sort::after { content: ''; border-inline: 4px solid transparent; flex-shrink: 0; }
th[aria-sort=ascending] .table-sort::after { border-bottom: 6px solid var(--glow); }
th[aria-sort=descending] .table-sort::after { border-top: 6px solid var(--glow); }
th:has(.table-sort) { cursor: pointer; }
.table-sort:hover:not(:disabled), .table-sort:focus-visible { color: var(--glow); background: none; box-shadow: none; }
.managed-guilds, .managed-subscriptions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.managed-guild { display: flex; flex-direction: column; align-items: start; gap: 8px; min-height: 76px; text-align: left; text-transform: none; }
.managed-guild.active { --button-edge: var(--glow); --button-fill: #123451; }
.managed-guild small { color: var(--muted); }
.managed-subscription { border: 1px solid var(--panel-edge); background: #071321; padding: 12px; min-width: 0; overflow-wrap: anywhere; }
.managed-subscription .row { flex-wrap: wrap; margin-bottom: 0; }
.managed-subscription strong { color: var(--heading); }
.managed-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; padding: 12px; border: 1px solid var(--panel-edge); }
.managed-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.managed-form input, .managed-form select, .managed-form textarea { min-width: 0; width: 100%; }
.managed-form input[type=checkbox] { width: 20px; height: 20px; }
.managed-form textarea { background: #071321; color: var(--text); border: 1px solid var(--panel-edge); font: inherit; resize: vertical; }
.managed-search-results, .managed-form > .hint { grid-column: 1 / -1; }
.managed-search-results { display: flex; flex-direction: column; gap: 4px; }
.managed-search-results:empty { display: none; }
.managed-name-search { display: flex; align-items: center; gap: 8px; }
.managed-name-search input { flex: 1; width: 0; }
.managed-name-search button { flex-shrink: 0; padding: 7px 9px; font-size: 10px; }
.managed-form textarea:disabled { opacity: .5; }
.managed-search-results button { text-align: left; text-transform: none; }
#manage-dialog { width: min(94vw, 920px); max-height: 90vh; max-height: 90dvh; padding: 0; overflow: hidden; border: 2px solid #46bcff; background: #071321; box-shadow: inset 0 0 0 3px #133d65, 0 0 18px #158bda77; }
#manage-dialog[open] { display: flex; flex-direction: column; }
#manage-dialog-body { overflow: auto; min-height: 0; padding: 12px; overscroll-behavior: contain; }
#manage-dialog-status:empty { display: none; }
#manage-close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; font-size: 24px; clip-path: none; }
.managed-exclusions { grid-column: 1 / -1; min-width: 0; }
.managed-exclusion-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }
.managed-exclusion-picker > label { flex: 1; min-width: min(200px, 100%); }
.managed-exclusion-picker > .managed-search-results, .managed-exclusion-chips { flex-basis: 100%; min-width: 0; }
.managed-exclusion-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.managed-exclusion-chips button { text-transform: none; overflow-wrap: anywhere; max-width: 100%; }
.managed-form :disabled { opacity: .8; }
.managed-premium-request { grid-column: 1 / -1; border: 1px solid #b79549; padding: 12px; }
.managed-premium-request[hidden] { display: none; }
.managed-premium-request button { margin-top: 8px; }
#manage-premium-crown { text-transform: none; }
#manage-roles { border: 1px solid var(--panel-edge); padding: 12px; margin-bottom: 12px; }
.managed-role-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.managed-role-form label { display: flex; flex-direction: column; gap: 6px; }
.managed-role-form input[type=checkbox] { width: 20px; height: 20px; }
.managed-role-form input:not([type=checkbox]) { width: min(240px, 100%); }
.managed-role-list .row { flex-wrap: wrap; }
.account { flex-wrap: wrap; }
#discord-account { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .managed-form { grid-template-columns: 1fr; } }
#lobbies { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#server-notes { padding-inline: 10px; }
#open-lobbies tbody tr.selected td { border-bottom-color: #5daeff; }
#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; }
/* General chat channel sizes per language: compact chips under the summary. */
.chat-channels { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.chat-channels:empty { display: none; }
.chat-locale { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid #23425b; background: #071321; font-size: 12px; color: var(--muted); }
.chat-locale strong { color: #fff; font-variant-numeric: tabular-nums; }
.statistics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.statistics-table-scroll { display: flex; flex-direction: column; max-height: 560px; margin-top: 12px; overflow-x: auto; overflow-y: hidden; }
.statistics-table-scroll table { min-width: 760px; }
.statistics-table .statistics-row { cursor: pointer; }
.statistics-share { min-width: 110px; }
.statistics-share .bar { margin-top: 4px; }
.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; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
@media (max-width: 800px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .resource-grid { grid-template-columns: 1fr; } }
.resource-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #071321; border: 1px solid #23425b; min-width: 0; }
.resource-card strong { color: #ccefff; font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }
.resource-card > span { color: var(--muted); font-size: 11px; }
.resource-card > small { color: var(--muted); font-size: 11px; }
.resource-card .bar { margin-top: auto; height: 4px; }
.resource-pressure .bar span { background: var(--amber); box-shadow: none; }
.activity-panel { margin: 20px 0; padding: 14px; border: 1px solid #23425b; background: #071321; }
/* Edge-to-edge parts of padded community panels, like the lobby page: the statistics filter row spans
   the panel and stays on top while it scrolls; the lobby and player tables span their containers. */
#statistics > .filter-row { position: sticky; top: -10px; z-index: 2; margin: -10px -12px 12px; }
#notification-feed { margin: 0 -12px -14px; }
.active-players-filter { margin: 6px -15px 0; border-top: 1px solid #3c83b4; }
.active-player-list { margin: 0 -15px -15px; }
#activity-legend { gap: 16px; color: var(--muted); font-size: 12px; }
.activity-swatch { display: inline-block; width: 16px; height: 3px; vertical-align: middle; margin-right: 6px; background: #38b6ff; }
.activity-eu { stroke: #5edc7a; background: #5edc7a; }
.activity-us { stroke: #f4c55a; background: #f4c55a; }
.activity-kr { stroke: #b995ff; background: #b995ff; }
.activity-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.activity-chart-title { margin: 12px 0 6px; font-size: 12px; }
.activity-line { fill: none; stroke: #38b6ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.activity-line.activity-eu { stroke: #5edc7a; }.activity-line.activity-us { stroke: #f4c55a; }.activity-line.activity-kr { stroke: #b995ff; }
.activity-dot { fill: #38b6ff; }.activity-dot.activity-eu { fill: #5edc7a; }.activity-dot.activity-us { fill: #f4c55a; }.activity-dot.activity-kr { fill: #b995ff; }
.activity-grid { stroke: #23425b; stroke-width: 1; }.activity-axis { fill: var(--muted); font-size: 12px; }
.activity-times { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin: 6px 0 12px; padding-left: 42px; }
.activity-frame { position: relative; }
.activity-hatch { stroke: rgba(120, 150, 180, .16); stroke-width: 2; }
.activity-cursor { stroke: #8fb3cf; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.activity-hit { fill: transparent; cursor: crosshair; }
.activity-tooltip { position: absolute; top: 8px; z-index: 2; pointer-events: none; padding: 6px 8px; border: 1px solid #23425b; background: rgba(7, 19, 33, .95); color: var(--text, #d7e6f2); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.activity-tooltip strong { display: block; margin-bottom: 2px; }
.active-player-list { display: flex; flex-direction: column; max-height: 420px; overflow-x: auto; overflow-y: hidden; }
.active-player-list table { min-width: 620px; }
.active-player-list .avatar { width: 28px; height: 28px; flex-shrink: 0; }
.active-player-list button.link { padding: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; text-transform: none; letter-spacing: normal; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; }
.active-player-list button.link::before, .active-player-list button.link::after { display: none; }
.with-thumb > .region-tag { margin-right: 0; flex-shrink: 0; }
#server-notes { flex-shrink: 0; }
#open-lobbies { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: column; }
#empty { flex-shrink: 0; margin: 0; }
#empty:empty { display: none; }
#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; }
.closed .badge { width: 120px; flex: 0 0 120px; text-align: center; box-sizing: border-box; }
#notification-feed { display: flex; flex-direction: column; max-height: min(70dvh, 640px); overflow-x: auto; overflow-y: hidden; }
.notification-toast { position: fixed; right: 16px; bottom: 16px; z-index: 100; width: min(400px, calc(100vw - 32px)); padding: 16px 44px 16px 16px; background: #061b2e; border: 1px solid #67caff; box-shadow: 0 0 18px #00101ecc; }
.notification-toast[hidden] { display: none; }
.notification-toast p { margin: 8px 0; }
.notification-toast small { display: block; color: var(--muted); }
#notification-toast-close { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; padding: 0; clip-path: none; font-size: 22px; }
#watcher-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.watcher-tile { display: flex; gap: 12px; align-items: center; height: 84px; padding: 12px; text-align: left; clip-path: none; }
.watcher-tile > span { min-width: 0; }
.watcher-tile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watcher-tile .avatar { width: 48px; height: 48px; flex-shrink: 0; }
/* A server this browser has not listed before: the new-lobby tint and light sweep, once. */
.watcher-tile.watcher-new { position: relative; overflow: hidden; animation: watcher-arrive 5.4s ease-out var(--shine-delay, 0ms) both; }
.watcher-tile.watcher-new::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0; animation: lobby-shine-new .9s ease-out var(--shine-delay, 0ms) both; }
@keyframes watcher-arrive { 0% { background-color: #09131e; } 7%, 85% { background-color: #3a4552; } }
@media (prefers-reduced-motion: reduce) { .watcher-tile.watcher-new, .watcher-tile.watcher-new::after { animation: none; } }
#watcher-dialog { width: min(1000px, 96vw); height: min(740px, 90dvh); padding: 0; background: #061321; border: 2px solid #3c83b4; color: var(--text); }
#watcher-dialog[open] { display: flex; flex-direction: column; }
#watcher-dialog::backdrop { background: #000b; }
#watcher-close { width: 36px; height: 36px; padding: 0; font-size: 24px; clip-path: none; }
#watcher-subscriptions { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; align-content: start; }
#watcher-subscriptions .watcher-publication { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 86px; min-width: 0; padding: 24px 10px 10px; border: 1px solid #214e76; background: #091c32; cursor: pointer; }
.subscription-flags { position: absolute; top: 3px; right: 6px; display: flex; gap: 4px; font-size: 16px; }
.region-flag { width: 24px; height: 24px; min-width: 24px; border: 1px solid #54b8f0; border-radius: 50%; padding: 2px; background: #061321; clip-path: none; }
.region-flag img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.region-flag[aria-pressed="false"] { opacity: .45; }
.region-flag[aria-pressed="true"] { border-color: #f4c55a; }
#subscription-form { margin-bottom: 14px; border-bottom: 1px solid #23425b; padding-bottom: 12px; }
#subscription-form .row { flex-wrap: wrap; }
#subscription-query { flex: 1; min-width: 120px; }
#subscription-servers { display: flex; align-items: center; gap: 6px; }
.history-table { border-spacing: 0; }
.history-table td { border: 0; border-bottom: 1px solid #23425b; font-size: 12px; }
.history-table th { height: 36px; padding: 9px 7px; font-size: 10px; background: #0b1623; border-bottom: 0; }
.history-table :is(th, td):nth-child(1) { width: 26%; }
.history-table :is(th, td):nth-child(2) { width: 18%; }
.history-table :is(th, td):nth-child(3) { width: 13%; }
.history-table :is(th, td):nth-child(4) { width: 112px; }
.history-table :is(th, td):nth-child(5) { width: 15%; }
.history-table :is(th, td):nth-child(6) { width: 16%; }
.lobby-table tr.history-started td { background-color: #123023; }
.lobby-table tr.history-abandoned td { background-color: #351b23; }
.lobby-table tr.history-started:hover td { background-color: #18402f; }
.lobby-table tr.history-abandoned:hover td { background-color: #46232e; }
.outcome-icon { font-size: 18px; font-weight: bold; }
.outcome-icon.started { color: var(--green); }
.outcome-icon.abandoned { color: var(--red); }
.outcome-icon.unknown { color: var(--muted); }
.outcome-icon.open { color: var(--glow); font-size: 12px; }
.history-table .thumb { width: 42px; height: 28px; }
/* Finished (or open + finished) lobbies inside the lobby panel, chosen by the #lobby-state select. */
#closed-lobbies { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; }
#closed-lobbies[hidden], #open-lobbies[hidden] { display: none; }
#lobby-state { width: 140px; }
.history-table-scroll { flex: 1; min-height: 0; display: flex; }
.history-table-scroll table { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.history-table-scroll thead { display: block; width: 100%; flex-shrink: 0; background: #0b1623; border-bottom: 1px solid #3c83b4; }
.history-table-scroll thead tr { display: table; width: calc(100% - 8px); table-layout: fixed; }
.history-table-scroll tbody { display: block; flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; }
.history-table-scroll tbody tr { display: table; width: 100%; table-layout: fixed; }
#history-empty { margin: 0; }
#watcher-subscriptions .watcher-publication span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#watcher-subscriptions .thumb { width: 48px; height: 48px; flex-shrink: 0; }
#watcher-server-link { align-self: flex-start; margin: 12px; }
.guide-illustrations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.guide-illustrations svg { width: 100%; height: auto; border: 1px solid #33435b; background: #232428; }
.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-download-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.publication-download { display: inline-block; padding: 6px 12px; border: 1px solid #3c83b4; background: #0b2035; color: #9cddff; text-decoration: none; }
.publication-version-select { max-width: 100%; min-width: 120px; }
.publication-download-locked { display: inline-flex; align-items: center; gap: 5px; color: #dfb975; cursor: help; }
.publication-download-locked::before { content: ''; width: 14px; height: 14px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.publication-ladder { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid #284761; }
.publication-ladder > :not(.ladder-table-scroll) { margin: 8px 12px; flex-shrink: 0; }
.ladder-modes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ladder-modes button.active { border-color: #4fb3ff; color: #fff; }
.ladder-all { margin-left: auto; }
.ladder-table-scroll { overflow: auto; flex: 1; min-height: 0; }
.lobby-table.ladder-table { min-width: 640px; }
.lobby-table.ladder-table :is(th, td):nth-child(1) { width: 7%; }
.lobby-table.ladder-table :is(th, td):nth-child(2) { width: 27%; }
.lobby-table.ladder-table :is(th, td):nth-child(3) { width: 10%; }
.lobby-table.ladder-table :is(th, td):nth-child(4), .lobby-table.ladder-table :is(th, td):nth-child(5) { width: 9%; }
.lobby-table.ladder-table :is(th, td):nth-child(6), .lobby-table.ladder-table :is(th, td):nth-child(7) { width: 9%; }
.lobby-table.ladder-table :is(th, td):nth-child(8) { width: 20%; }
.ladder-row { cursor: pointer; }
.ladder-mmr { font-weight: 600; color: #e7f3ff; }
.mmr-up { color: #6fd38a; }
.mmr-down { color: #ff8a80; }
.mmr-chart { width: 100%; height: auto; max-height: 220px; background: #071321; border: 1px solid #23425b; }
.mmr-chart polyline { fill: none; stroke: #4fb3ff; stroke-width: 2; }
.mmr-chart circle.up { fill: #6fd38a; }
.mmr-chart circle.down { fill: #ff8a80; }
.mmr-chart text { fill: #7895ad; font-size: 11px; }
.mmr-chart .rule { stroke: #23425b; stroke-dasharray: 3 3; }
#ladder-dialog { width: min(820px, 96vw); }
.publication-versions-note { flex-basis: 100%; color: #7895ad; }
.publication-versions { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid #284761; }
.publication-versions > :not(table) { margin: 8px 12px; flex-shrink: 0; }
.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 { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* The same table component in the main page, notifications, statistics and publication dialogs. */
.lobby-table { display: flex; flex-direction: column; flex: 1; min-height: 0; border-spacing: 0; }
.lobby-table thead { display: block; width: 100%; flex-shrink: 0; background: #0b1623; border-bottom: 1px solid #3c83b4; }
.lobby-table thead tr { display: table; width: calc(100% - 8px); table-layout: fixed; }
.lobby-table thead th { position: static; height: 36px; padding: 9px 7px; border-bottom: 0; font-size: 10px; letter-spacing: .06em; }
.lobby-table .table-sort { max-width: 100%; white-space: nowrap; }
.table-sort-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-table tbody { display: block; flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; }
.lobby-table tbody tr { display: table; width: 100%; table-layout: fixed; margin: 0; }
.lobby-table td { border: 0; border-bottom: 1px solid #23425b; font-size: 12px; transition: background-color .4s, padding .4s, border-color .4s; }
.lobby-table:not(.history-table) :is(th, td):nth-child(1) { width: 30%; }
.lobby-table:not(.history-table) :is(th, td):nth-child(2) { width: 20%; }
.lobby-table:not(.history-table) :is(th, td):nth-child(3) { width: 14%; }
.lobby-table:not(.history-table) :is(th, td):nth-child(4) { width: 112px; }
.lobby-table:not(.history-table) :is(th, td):nth-child(5) { width: 14%; }
.lobby-table:not(.history-table) :is(th, td):nth-child(6) { width: 10%; }
.lobby-table.publication-versions-table :is(th, td):nth-child(1) { width: 45%; }
.lobby-table.publication-versions-table :is(th, td):nth-child(2) { width: 35%; }
.lobby-table.publication-versions-table :is(th, td):nth-child(3) { width: 20%; }
.lobby-table.statistics-table :is(th, td):nth-child(1) { width: 6%; }
.lobby-table.statistics-table :is(th, td):nth-child(2) { width: 27%; }
.lobby-table.statistics-table :is(th, td):nth-child(3) { width: 11%; }
.lobby-table.statistics-table :is(th, td):nth-child(4) { width: 9%; }
.lobby-table.statistics-table :is(th, td):nth-child(5) { width: 9%; }
.lobby-table.statistics-table :is(th, td):nth-child(6) { width: 8%; }
.lobby-table.statistics-table :is(th, td):nth-child(7) { width: 9%; }
.lobby-table.statistics-table :is(th, td):nth-child(8) { width: 9%; }
.lobby-table.statistics-table :is(th, td):nth-child(9) { width: 12%; }
.lobby-table.statistics-players-table :is(th, td):nth-child(1) { width: 8%; }
.lobby-table.statistics-players-table :is(th, td):nth-child(2) { width: 44%; }
.lobby-table.statistics-players-table :is(th, td):nth-child(n+3) { width: 16%; }
.lobby-table.active-players-table :is(th, td):nth-child(1) { width: 26%; }
.lobby-table.active-players-table :is(th, td):nth-child(2) { width: 24%; }
.lobby-table.active-players-table :is(th, td):nth-child(3) { width: 20%; }
.lobby-table.active-players-table :is(th, td):nth-child(4) { width: 18%; }
.lobby-table.active-players-table :is(th, td):nth-child(5) { width: 12%; }
.lobby-table .thumb { width: 42px; height: 28px; }
.lobby-table .with-thumb { align-items: center; gap: 7px; }
.lobby-table .thumb-text { flex: 1; min-width: 0; }
.lobby-table .thumb-text .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-table .bar { height: 2px; }
/* Every place stays 6px square; wrap places rather than shrinking them in narrow cells. */
.seats { --seat: 6px; display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; margin-top: 3px; }
/* Every place has the same box: a 1px border inside its size, no outer glow, whatever its state. */
.seat { width: var(--seat); height: var(--seat); flex: none; aspect-ratio: 1; box-sizing: border-box; background: #13263a; border: 1px solid #2a4a66; }
/* Slots grouped by team: squares of a team touch (1px), teams are set apart; groups wrap in the cell. */
.players-count { vertical-align: middle; }
/* Overlap adjacent borders, including wrapped rows, to make one shared 1px line.
   The trailing padding keeps the final square's overlapping edge inside the team box. */
.seat-team { display: flex; flex-wrap: wrap; gap: 0; padding: 0 1px 1px 0; min-width: 0; max-width: 100%; }
.seat-team .seat { margin: 0 -1px -1px 0; }
.seat.taken { background: linear-gradient(#7fd4ff, #2f9bff); }
.seat.ai { background: linear-gradient(#d4a6ff, #8b4dff); }
.lobby-table .lobby-cell { max-height: 80px; overflow: hidden; transition: max-height .4s, opacity .4s; }
.lobby-table tr.lobby-started td { background-color: #123023; }
.lobby-table tr.lobby-abandoned td { background-color: #351b23; }
/* A light sweeps the row from left to right once when its status changes. Each status has its own
   keyframes, so replacing one status class with another restarts the sweep on the retained row. */
.lobby-table tbody tr { position: relative; }
.lobby-table tr:is(.lobby-new, .lobby-changed, .lobby-started, .lobby-abandoned)::after {
  content: ''; position: absolute; inset: 0 0 1px; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0; }
/* A new lobby and a changed one shine once without tinting the row. */
.lobby-table tr.lobby-new::after { animation: lobby-shine-new .9s ease-out; }
.lobby-table tr.lobby-changed::after { animation: lobby-shine-changed .9s ease-out; }
.lobby-table tr.lobby-started::after { animation: lobby-shine-started .9s ease-out; }
.lobby-table tr.lobby-abandoned::after { animation: lobby-shine-abandoned .9s ease-out; }
@keyframes lobby-shine-new { to { background-position: 0 0; } }
@keyframes lobby-shine-changed { to { background-position: 0 0; } }
@keyframes lobby-shine-started { to { background-position: 0 0; } }
@keyframes lobby-shine-abandoned { to { background-position: 0 0; } }
.lobby-table tr.lobby-leaving td { padding-block: 0; border-bottom-color: transparent; }
.lobby-table tr.lobby-leaving .lobby-cell { max-height: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lobby-table td, .lobby-table .lobby-cell, .lobby-table tr::after { transition: none; animation: none !important; } }
.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; }
.publication-reviews { overflow: auto; min-height: 0; }
.review { padding: 12px; border-bottom: 1px solid #23425b; background: #061321; }
.review-heading { display: flex; align-items: center; gap: 10px; }
.review-stars { margin-left: auto; color: var(--green); white-space: nowrap; }
.review-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.publication-history { margin: 0; padding: 0; }
.publication-roster .timeline { font-size: 11px; }
.language-picker { position: relative; font-size: 12px; }
.language-picker summary { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #245b80; cursor: pointer; background: #061321; list-style: none; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary::after { content: '▾'; margin-left: 6px; }
.language-picker img { width: 24px; height: 18px; object-fit: cover; border: 1px solid #245b80; }
.language-picker img:not([src]) { visibility: hidden; }
#language-options { position: absolute; right: 0; top: 100%; z-index: 100; min-width: 160px; background: #061321; border: 1px solid #245b80; padding: 4px; }
#language-options button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px; text-align: left; text-transform: none; clip-path: none; border: 0; box-shadow: none; background: #061321; }
#language-options button:hover { background: #102638; }
#language-options button[aria-selected="true"] { background: #174469; }
#language-options button:focus-visible, .language-picker summary:focus-visible { outline: 2px solid #79d5ff; outline-offset: 1px; }
.language-select-bridge { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
  .brand-title { font-size: 15px; }
  #lobbies table, #notification-feed 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; }
  .gallery-publication-hero { grid-row: 1; }
  .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; }
}
.premium-icon::before { content: "👑" / ""; margin-inline-end: .35em; }
[data-i18n="player.open"]::after, [data-i18n="publication.open"]::after { content: " ↗" / ""; }
.event-change { display: inline-flex; flex-wrap: wrap; gap: .35em; align-items: baseline; }
.event-to::before { content: "→" / ""; margin-inline-end: .35em; color: var(--muted, #72a3c1); }
.pagination { justify-content: space-between; }
.pagination .hint { flex: 1; margin: 0; font-size: 11px; }
.pagination-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
button.pagination-previous::after { content: '‹' / ''; font-size: 22px; line-height: 1; }
button.pagination-next::after { content: '›' / ''; font-size: 22px; line-height: 1; }
td.clock { text-align: right; font-variant-numeric: tabular-nums; }
#head th:last-child, #history-head th:nth-child(6) { text-align: right; }
.region-tag { display: inline-flex; padding: 0; border: 0; background: none; }
.region-tag img { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #4385a8; }
.bell, .catalogue-entry > .bell { width: 24px; height: 24px; min-width: 24px; padding: 1px; display: inline-flex; align-items: center; justify-content: center; }
.bell-icon { width: 20px; height: 20px; display: block; background: #344452; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v5l-3 4v2h18v-2l-3-4V8a6 6 0 0 0-6-6M9 21h6a3 3 0 0 1-6 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.bell[aria-pressed="true"] .bell-icon { background: #f4c55a; }
.publication-modes { margin-top: 16px; }
.publication-modes h3 { font-size: 13px; margin: 0 0 8px; }
.publication-modes table { border-spacing: 0; }
.publication-modes td { border: 0; border-bottom: 1px solid #23425b; }
.publication-modes th:last-child, .publication-modes td:last-child { text-align: right; }
input[type="search"], #lobby-query, #subscription-query { padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2372a3c1' stroke-width='2'%3E%3Cpath d='M3 5h18l-7 8v6l-4-2v-4z'/%3E%3C/svg%3E"); background-position: right 7px center; background-size: 16px; background-repeat: no-repeat; }
#monitoring-admin { grid-column: 1 / -1; overflow: auto; max-width: 1400px; width: 100%; margin-inline: auto; }
#monitoring-settings .row { margin-block: 12px; align-items: end; flex-wrap: wrap; }
#monitoring-settings label, #monitoring-accounts label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#monitoring-accounts input { width: 100%; }
.monitoring-states { color: var(--heading); font-size: 12px; }
#pwa-offline { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 1200; max-width: 90vw; padding: 10px 14px; background: #06101c; border: 1px solid #23425b; pointer-events: none; }

/* One modal frame/header/spacing system; individual dialogs only choose their dimensions. */
:is(#detail-dialog, #player-dialog, #match-dialog, #image-dialog, #watcher-dialog, #bot-guide-dialog, #manage-dialog, #monitoring-login-dialog).app-dialog {
  padding: 0; overflow: hidden; max-height: 90dvh; border: 2px solid #75c8ff; border-radius: 5px; background: #071220;
  box-shadow: 0 0 0 3px #0b2c4b, 0 0 0 5px #3475a3, inset 0 0 0 3px #09101c, 0 0 24px #158bda77;
}
dialog.app-dialog[open] { display: flex; flex-direction: column; }
dialog.app-dialog .detail-dialog-header { height: 56px; min-height: 56px; padding: 10px 16px; gap: 8px; align-items: center; background: linear-gradient(120deg, #083857, #021529); }
dialog.app-dialog .detail-dialog-header h2 { font-size: 16px; line-height: 1.3; padding: 0; margin: 0; }
dialog.app-dialog .dialog-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
dialog.app-dialog .dialog-actions:empty { display: none; }
dialog.app-dialog .detail-dialog-header :is(.dialog-close, .bell) { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0; clip-path: none; border: 1px solid #3c83b4; background: #091c32; }
dialog.app-dialog .detail-dialog-header .dialog-close { font-size: 22px; line-height: 1; }
dialog.app-dialog .detail-dialog-header .bell-icon { width: 24px; height: 24px; }
:is(#detail-dialog, #player-dialog, #match-dialog, #image-dialog, #watcher-dialog, #bot-guide-dialog, #manage-dialog, #monitoring-login-dialog).app-dialog :is(.dialog-body, #detail-body) { flex: 1; min-height: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; }
.app-dialog #image-caption { margin: 0; }
#player-dialog:has(.player-matches), #match-dialog { width: min(1000px, calc(100vw - 32px)); }
.match-table { margin-block: 12px; font-size: 12px; }
.match-table th { height: 36px; background: #0b1623; letter-spacing: .06em; }
.match-table td { padding: 7px; }
.match-chart { margin: 16px 0; padding: 12px; border: 1px solid var(--edge-soft); background: #071220; }
.match-chart svg { display: block; width: 100%; max-height: 180px; margin-block: 8px; }
.match-chart polyline { fill: none; stroke: var(--glow); stroke-width: 2; vector-effect: non-scaling-stroke; }
.app-dialog .detail-tabs { padding: 8px; gap: 8px; margin: 0 0 12px; border: 1px solid #224a69; }
@media (max-width: 600px) {
  dialog.app-dialog .detail-dialog-header { padding-inline: 12px; }
  :is(#detail-dialog, #player-dialog, #match-dialog, #image-dialog, #watcher-dialog, #bot-guide-dialog, #manage-dialog, #monitoring-login-dialog).app-dialog :is(.dialog-body, #detail-body) { padding: 12px; }
  .app-dialog .detail-tabs { gap: 4px; }
  .app-dialog .detail-tabs button { padding-inline: 6px; font-size: 9px; }
}
.publication-version-row { cursor: pointer; }
.publication-version-row.selected td { background: rgba(56, 182, 255, .12); }
.variant-details { margin: 8px 0; border: 1px solid #23425b; padding: 6px 10px; }
.variant-details > summary { cursor: pointer; font-weight: 600; }
.variant-details .teams { margin: 6px 0; }
.variant-details table { width: 100%; margin-top: 6px; }