/* One theme, light. The dark variant is off on purpose: the page should be light
   regardless of system settings, which is why there is no prefers-color-scheme here. */
:root {
  color-scheme: light;

  --bg: #f4f8fc;
  --bg-grad-1: #eaf2fa;
  --bg-grad-2: #ffffff;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --bg-card-2: #fbfdff;
  --stripe: rgba(31, 86, 148, .028);
  --line: #dbe4ef;
  --line-soft: #ecf1f7;
  --text: #1b2532;
  --text-dim: #64748b;
  --accent: #1f6fd0;
  --accent-2: #4aa3e6;
  --accent-soft: rgba(31, 111, 208, .09);
  --good: #1f9d55;
  --warn: #c47f04;
  --bad: #d64550;
  --bg-strength: .10;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20, 40, 70, .05), 0 5px 14px rgba(20, 40, 70, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 55%, var(--bg-grad-1) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* background drawn in assets/bg.js: dungeon tiles, no blur, a pixel stays a pixel */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--bg-strength);
  image-rendering: pixelated;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 52px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 680;
  font-size: 15.5px;
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }

/* The brand mark is the same file as the favicon, so the logo changes in one
   place. Background and letter are drawn by the SVG itself, only the size stays here. */
.brand-mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}

.head-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* On a narrow screen the header breaks into two rows and the navigation stops
   wrapping and scrolls horizontally. With wrapping inside a fixed-height header
   the first row of buttons escaped above the screen and could not be clicked. */
@media (max-width: 760px) {
  .head-inner { flex-wrap: wrap; row-gap: 9px; }

  .head-nav {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .head-nav::-webkit-scrollbar { display: none; }
  .head-nav > * { flex: 0 0 auto; }

  /* The bar does not fit seven items, so the two most important go first:
     adding a server and the language switch. The rest is one finger swipe away. */
  .head-nav .btn-primary { order: -2; }
  .head-nav .lang-btn,
  .head-nav .lang-switch { order: -1; }

  .brand-text { white-space: nowrap; }
}

/* ---------- hero ---------- */

.hero { padding: 26px 0 16px; }

.hero h1 {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.lead { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* ---------- kontrolki ---------- */

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.search-box { flex: 1 1 260px; position: relative; }

/* narrow filter field next to the panel header */
.search-box-sm { flex: 0 1 200px; }

/* character marker: green when in game, grey when only seen before */
.player-state {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  vertical-align: middle;
}
.player-state.is-on { background: var(--good); }

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.select-box select { width: auto; min-width: 150px; }

.view-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 580;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }

.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--accent-soft); border-color: transparent; }
.view-toggle .btn { border: 0; padding: 7px 14px; }
.btn-ghost.is-active { background: var(--accent-soft); color: var(--accent); }

.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); background: rgba(227, 93, 106, .10); }

.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ---------- tagi ---------- */

.tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag-chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .14s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--text); }
.tag-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.count {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ---------- entry list ---------- */

.posts { display: grid; gap: 12px; padding-bottom: 40px; }

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
  transition: border-color .16s, transform .16s;
}

/* accent bar at the left edge */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity .16s;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.card:hover::before { opacity: 1; }

.card-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -.015em;
  font-weight: 620;
}
.card h2 a { color: var(--text); }
.card h2 a:hover { color: var(--accent); text-decoration: none; }

.pin {
  flex: none;
  font-size: 10.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}

.card-body {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  white-space: pre-wrap;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--accent);
  word-break: break-all;
}
.card-link::before { content: "↗"; font-family: var(--font); }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.card-date { white-space: nowrap; }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: .02em;
}

/* ---------- "wide" view: long strips ---------- */

.posts-wide { grid-template-columns: 1fr; gap: 10px; }

.posts-wide .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
}

.posts-wide .card-meta {
  justify-content: flex-end;
  flex: none;
  max-width: 300px;
}

.posts-wide .card-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .posts-wide .card { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .posts-wide .card-meta { justify-content: flex-start; max-width: none; }
}

/* ---------- "compact" view: 5 tiles per row ---------- */

.posts-dense { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.posts-dense .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px;
}

.posts-dense .card h2 { font-size: 15.5px; line-height: 1.3; }

.posts-dense .card-body {
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.posts-dense .card-link { font-size: 12px; }
.posts-dense .card-meta { margin-top: auto; font-size: 11.5px; }
.posts-dense .pin { font-size: 9.5px; padding: 1px 7px; }

@media (max-width: 1080px) { .posts-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .posts-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .posts-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .posts-dense { grid-template-columns: 1fr; } }

/* ---------- the rest ---------- */

.empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-dim);
}

.more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 56px;
  text-align: center;
}
.more p { margin: 0; color: var(--text-dim); font-size: 14px; }
.more[hidden] { display: none; }

.foot-note {
  margin: 0 0 28px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
  color: var(--text-dim);
  font-size: 13.5px;
}

.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 22px 0;
  color: var(--text-dim);
  font-size: 13px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
}
.site-foot p { margin: 0; }

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foot-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-nav a { color: var(--text-dim); }
.foot-nav a:hover { color: var(--accent); text-decoration: none; }

/* ---------- servers ---------- */

.checker { margin-bottom: 20px; }

.checker-form { display: flex; gap: 8px; flex-wrap: wrap; }
.checker-form input { flex: 1 1 240px; font-family: var(--mono); font-size: 14px; }

.check-out {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 14px;
}
.check-out.is-good { border-color: color-mix(in srgb, #3fb984 45%, var(--line)); }
.check-out.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--text-dim); }

.check-head { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: var(--text); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.srv-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.srv-table thead th {
  padding: 7px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.srv-table thead button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.srv-table thead button:hover { color: var(--text); }
.srv-table thead button.is-sorted { color: var(--accent); }
.srv-table thead button.is-sorted::after { content: " ↓"; }

.srv-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.srv-table tbody tr:last-child { border-bottom: 0; }
.srv-table tbody tr:nth-child(even) { background: var(--stripe); }
.srv-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.srv-table tbody tr.is-off { opacity: .62; }

.srv-table td { padding: 6px 12px; vertical-align: middle; line-height: 1.35; }

.srv-msg { color: var(--text-dim); text-align: center; padding: 28px 14px; }

.col-flag { width: 46px; }
.col-players, .col-uptime, .col-exp, .col-pvp, .col-client, .col-points { white-space: nowrap; }
.col-uptime, .col-exp, .col-points { font-variant-numeric: tabular-nums; }

.points-box { display: flex; align-items: center; gap: 7px; }
.points-value { font-weight: 660; font-size: 13px; min-width: 20px; }

.vote-btn {
  width: 21px; height: 21px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all .12s;
}
.vote-btn:hover:not(:disabled) { border-color: #3fb984; color: #3fb984; }
.vote-btn.is-voted { color: #3fb984; border-color: color-mix(in srgb, #3fb984 45%, var(--line)); }
.vote-btn:disabled { cursor: default; }
.vote-btn.is-error { border-color: var(--bad); color: var(--bad); }


.srv-name-line { display: flex; align-items: center; gap: 8px; }

.dot-state {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex: none;
}
.dot-state.is-on { background: #3fb984; box-shadow: 0 0 0 3px rgba(63, 185, 132, .16); }
.dot-state.is-off { background: var(--bad); }
.dot-state.is-unknown { background: var(--text-dim); opacity: .5; }

.srv-name { font-weight: 620; color: var(--text); font-size: 13px; }
a.srv-name:hover { color: var(--accent); text-decoration: none; }

.srv-addr { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* the description is cut to two lines: otherwise one chatty entry stretches the whole table */
.srv-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srv-desc.is-error { color: var(--bad); opacity: .85; }

.col-players strong { font-size: 13.5px; font-weight: 680; }
.srv-peak { color: var(--text-dim); font-size: 11.5px; }
.srv-max { color: var(--text-dim); }

.col-uptime.is-low { color: var(--warn); }

.pvp-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}

.col-client { color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }

/* Table on a narrow screen.
 *
 * Eight columns give 743 px, and a phone has 375, so players and points, that is
 * what people come for, fell out of view and needed sideways scrolling.
 * The least important columns are hidden in this order: client, mode, EXP, uptime.
 * Everything hidden is visible on the server page anyway.
 */
@media (max-width: 720px) {
  .col-client { display: none; }
  /* min-width must go down together with the columns, otherwise the table still
     stretches to 720 px and hiding columns gives nothing */
  .srv-table, .table-scroll > .srv-table { min-width: 600px; }
}

@media (max-width: 620px) {
  .col-pvp { display: none; }
  .srv-table, .table-scroll > .srv-table { min-width: 500px; }
}

@media (max-width: 540px) {
  .col-exp { display: none; }
  .srv-table, .table-scroll > .srv-table { min-width: 400px; }
  .srv-table td { padding: 6px 8px; }
  .srv-table thead th { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 430px) {
  .col-uptime { display: none; }
  .col-flag { width: 30px; }
  .srv-table, .table-scroll > .srv-table { min-width: 0; }
}

/* search */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 12px;
}

/* ranking */

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.tab-bar .btn { border: 0; }

.rank-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; }

.rank-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}
.rank-row.is-off { opacity: .6; }
.rank-row.is-top { border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); }

.rank-no {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-row.is-top .rank-no { color: var(--warn); }

.rank-main { min-width: 0; }

.rank-value {
  font-size: 17px;
  font-weight: 660;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-unit {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 5px;
}

@media (max-width: 560px) {
  .rank-row { grid-template-columns: 34px minmax(0, 1fr); }
  .rank-value { grid-column: 2; font-size: 17px; }
}

.srv-out { font-size: 12px; color: var(--text-dim); }
.srv-out:hover { color: var(--accent); text-decoration: none; }
.srv-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* Highlight of the vote button for someone who came with ?vote=1.
   With animations off only the outline stays. */
.is-wanted {
  animation: wanted 1.1s ease-in-out 3;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@keyframes wanted {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px var(--accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .is-wanted { animation: none; }
}

/* bars on the scene statistics page */

.bar-list { display: flex; flex-direction: column; gap: 5px; }

.bar-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 44px 84px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}

.bar-track {
  height: 9px;
  border-radius: 5px;
  background: var(--line-soft);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.bar-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }

/* Levels gained today on the player list and the character card */
.col-gain { color: var(--good); font-weight: 660; font-variant-numeric: tabular-nums; }
#player-levels .bar-row { grid-template-columns: 70px minmax(0, 1fr) 44px; }
#player-levels-box { margin: 4px 0 14px; }
#player-levels-box h3, .player-card h3 { font-size: 13px; margin: 14px 0 8px; }
.player-card h2 { display: flex; align-items: center; gap: 8px; }
.player-card .stat-grid { margin: 10px 0 4px; }
.bar-players { color: var(--text-dim); font-size: 11.5px; text-align: right; }

@media (max-width: 560px) {
  .bar-row { grid-template-columns: 84px minmax(0, 1fr) 38px; }
  .bar-players { display: none; }
}

/* stat tiles on the server page */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-tile {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.stat-label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat-value {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.02em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.chart { width: 100%; height: 280px; display: block; cursor: crosshair; touch-action: pan-y; }

/* Legend under the chart: the same colours as on the canvas. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
}
.chart-legend span { display: inline-block; vertical-align: middle; margin-right: -8px; }
.lg-line { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.lg-avg { width: 16px; height: 0; border-top: 2px dashed rgba(100, 116, 139, .7); }
.lg-peak { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; }
.lg-bar { width: 16px; height: 4px; background: rgba(31, 157, 85, .55); }
.lg-bar.is-down { background: var(--bad); }

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tab-bar-sm { margin-bottom: 0; }
.tab-bar-sm .btn { padding: 4px 10px; font-size: 12px; }

/* server page header */

.srv-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 18px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.state-badge {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: #fff;
  background: var(--text-dim);
}
.state-badge.is-on { background: var(--good); }
.state-badge.is-off { background: var(--bad); }

.srv-header-main { flex: 1 1 220px; min-width: 0; }
.srv-header-main h1 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.srv-header-addr { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }

.srv-header-players {
  font-size: 13.5px;
  font-weight: 620;
  white-space: nowrap;
}

.srv-header-actions { display: flex; gap: 6px; }

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* hourly breakdown */

.hour-track {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}

.hour-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* daily profile */

.profile {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 130px;
}

.profile-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.profile-bar {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .12s;
}
.profile-col:hover .profile-bar { background: var(--accent); }
.profile-col.is-best .profile-bar { background: var(--good); }

.profile-hour {
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  height: 12px;
}

@media (max-width: 620px) {
  .profile { height: 100px; gap: 2px; }
  .profile-hour { font-size: 8px; }
}

/* token after adding a server */

.token-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.token-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.token-box input { font-family: var(--mono); font-size: 12px; margin-bottom: 8px; }

/* full server description */

.server-desc {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  max-height: 420px;
  overflow-y: auto;
}

/* API documentation */

.code-list { display: flex; flex-direction: column; gap: 6px; }

.code-list code.code-block {
  display: block;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
}

.code-block { margin: 0; line-height: 1.5; }

/* Response examples in api.html: long lines (curl, JSON) scroll inside the frame,
   not the whole page sideways on a phone (as it was in MC at 390 px). */
pre.code-block {
  max-width: 100%;
  overflow-x: auto;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: 12px;
}

/* Banner variants are lower, right after .banner: with the same specificity
   the order in the file counts, and standing here they lost to the base rule. */

/* language switch */

.lang-btn {
  font-weight: 700;
  letter-spacing: .05em;
  border: 1px solid var(--line);
  min-width: 40px;
}

/* Language switch: three flags side by side.

   There was a <select> here, but the global rule "select { width: 100% }" higher in this
   file spread it over the whole page width and pushed it under the bar. A group
   of buttons is not a form field, so the problem disappears at the source,
   and choosing a language is one click instead of unfolding a list. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  flex: 0 0 auto;
}

.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s, color .12s;
}

/* The flag carries recognition, the abbreviation confirms it. Hence the flag is bigger
   than the text next to it: it should be noticed first. */
.lang-flag { font-size: 14px; line-height: 1; }
.lang-code { font-size: 11px; }

.lang-opt:hover { background: var(--bg-card); color: var(--text); }

.lang-opt.is-on {
  background: var(--accent);
  color: #fff;
}

.lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* On a narrow screen the abbreviation alone takes space, and the flag is enough. */
@media (max-width: 560px) {
  .lang-code { display: none; }
  .lang-opt { padding: 3px 6px; }
}

/* launch announcements */

.upcoming { margin-bottom: 12px; border-left: 3px solid var(--warn); }
.upcoming-list { display: flex; flex-direction: column; gap: 6px; }

.upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.upcoming-main { min-width: 0; }

.upcoming-time {
  font-size: 13px;
  font-weight: 660;
  color: var(--warn);
  white-space: nowrap;
}

/* tags in a list row */

.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.tag-chip-sm {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
}
.tag-chip-sm:hover { text-decoration: none; filter: brightness(.95); }

/* comparison */

.pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.pick-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
}
.pick-item:hover { background: var(--accent-soft); }
.pick-item.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.pick-item input { width: auto; }
.pick-item small { color: var(--text-dim); font-size: 11px; margin-left: auto; font-family: var(--mono); }

.compare-table th[scope="row"] {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  background: var(--stripe);
}
.compare-table td.is-best { font-weight: 700; color: var(--good); }
.compare-table th { padding: 7px 12px; }

/* Turnstile verification */

.turnstile-box { margin-top: 8px; }

.turnstile-box.is-floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}
.turnstile-box[hidden] { display: none; }

/* MOTD */

.motd-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 9px 13px;
  margin-bottom: 8px;
}
.motd-date { font-size: 11.5px; color: var(--text-dim); }
.motd-text { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }
/* Error and reason lines in the admin Dead/Fake lists: looks like MOTD text, but is translated. */
.dead-note { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }

/* signatures */

.sig-list { display: flex; flex-direction: column; gap: 16px; }

.sig-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 12px;
}

.sig-img {
  display: block;
  margin-bottom: 10px;
  max-width: 100%;
  height: auto;
}

.sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
}

.sig-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sig-label {
  width: 62px;
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.sig-row input {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 8px;
}

/* card list in the moderation panel */

.srv-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }

.srv-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 18px 0 8px;
}

.page-btn {
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.page-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn:disabled { opacity: .35; cursor: default; }

/* ---------- kontakt / informacje ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding-bottom: 20px;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.info-card h2 {
  margin: 0;
  font-size: 14.5px;
  letter-spacing: -.015em;
}

.info-card p { margin: 0; color: var(--text-dim); font-size: 12.5px; }

.info-card ul {
  margin: 0;
  padding-left: 17px;
  color: var(--text-dim);
  font-size: 12.5px;
}
.info-card li { margin-bottom: 4px; }

.info-card .btn { align-self: flex-start; margin-top: 4px; }

.info-card.is-wide { grid-column: 1 / -1; }

.mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.mail-row code {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--text-dim);
}
.kv dt { font-weight: 560; color: var(--text); }
.kv dd { margin: 0; }

.hero-sub {
  margin: 26px 0 12px;
  font-size: 20px;
  letter-spacing: -.02em;
}

.faq { padding-bottom: 48px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.faq summary {
  cursor: pointer;
  font-weight: 560;
  font-size: 15px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.faq details[open] summary::before { content: " "; }
.faq details p { margin: 10px 0 2px; color: var(--text-dim); font-size: 14.5px; }

/* ---------- generator ---------- */

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 48px;
}

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 15px 17px;
  box-shadow: var(--shadow);
}

.panel + .panel { margin-top: 16px; }

.panel h2 { margin: 0 0 3px; font-size: 14.5px; letter-spacing: -.015em; }
.panel .hint { margin: 0 0 11px; color: var(--text-dim); font-size: 12px; }
.panel code { font-family: var(--mono); font-size: 12.5px; }

.field { margin-bottom: 11px; }

.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 560;
  color: var(--text-dim);
}

/* error returned by the server, shown next to a specific field */
.field-error {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--bad);
}

input.is-wrong,
select.is-wrong,
textarea.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 5%, var(--bg-soft));
}

/* Checkbox in one line with its description.
   The selector must be stronger than ".field label", which sets display:block. */
.field label.check-line,
.check-line {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: auto; }

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.step {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 13px;
}
.step b { color: var(--accent); margin-right: 2px; }
.step code { font-family: var(--mono); font-size: 12px; color: var(--text); }

.json-out {
  width: 100%;
  min-height: 220px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 560;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 50;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-bad { background: var(--bad); color: #fff; }

.banner {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--text);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.banner code { font-family: var(--mono); font-size: 12.5px; }

/* info banner: clones, the entry waits for a decision */
.banner-info {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}

/* confirmation banner: the entry is on the list, all good */
.banner-ok {
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
  background: color-mix(in srgb, var(--good) 9%, transparent);
}

/* ---------- notifications ---------- */

/* List of events to tick: two columns on a wide screen,
   one on a phone. Each event has a label and an explaining sentence,
   because "Update" by itself does not say what it is about. */
.watch-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.watch-event {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 2px 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.watch-event:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.watch-event input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.watch-event-label {
  font-weight: 600;
  font-size: 13.5px;
}

/* The explanation starts under the label, not under the checkbox. */
.watch-event-hint {
  grid-column: 2;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

/* Recipient tile in the moderation panel: address, channel and numbers side by side. */
.subs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.subs-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--text-dim);
}

.subs-tag.is-active {
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
}

.subs-tag.is-waiting {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}

.subs-tag.is-off {
  opacity: .7;
}

/* Edit form unfolded in the entry card in the moderation panel.
   Separated by a line from the rest of the card, so it is clear it is a separate mode. */
.edit-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.edit-form .field:last-of-type {
  margin-bottom: 12px;
}

.edit-form textarea {
  resize: vertical;
  min-height: 90px;
}

/* ---------- navigation ---------- */

/* Current page in the bar. Bold alone is not enough on a dark background,
   so an underline in the accent colour is added. */
.head-nav a.is-here,
.head-nav summary.is-here {
  color: var(--text);
  font-weight: 640;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* "More" menu: <details> instead of own unfolding, so it works
   without event handling and stays usable after a JavaScript failure. */
.nav-more {
  position: relative;
  flex: 0 0 auto;
}

.nav-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.nav-more > summary::-webkit-details-marker { display: none; }

/* The arrow rotates when open: the only sign that it is not a plain button. */
.nav-more > summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.nav-more[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav-more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 8px 28px rgba(20, 40, 70, .16);
}

.nav-more-list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.nav-more-list a:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.nav-more-list a.is-here {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-more-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

/* Explaining sentence under the name: without it "Compare" and "API" say nothing
   to someone visiting for the first time. */
.nav-more-desc {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
}

@media (max-width: 760px) {
  /* On a phone the menu unfolds to the full screen width, not next to the
     button: with horizontal scrolling of the bar the list would escape out of
     view anyway. Positioned relative to the header, not to <details>. */
  .nav-more { position: static; }

  .nav-more-list {
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}

/* ---------- flagi ---------- */

/* Flags as SVG in data URIs, not emoji.

   National flag emoji do not work on Windows: the system has no font with these
   characters, so instead of a flag two letters show ("PL", "BR"). On Mac
   and phones it works, on Windows not, and Windows is where most
   Open Tibia players are.

   Drawn here: no file to upload, no external library,
   the same look on every system and no blur when zoomed. */
.flag-svg {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  /* Outline, because white flags blend with the page background. */
  box-shadow: 0 0 0 1px rgba(20, 40, 70, .12);
  vertical-align: -1px;
  /* default background: globe */
  /* A country outside the list below (older entry, code typed by hand) gets
     a globe instead of an empty square. A specific flag below overrides it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23dbe4ef'/%3E%3Ccircle cx='8' cy='5.5' r='3.4' fill='none' stroke='%2364748b' stroke-width='.9'/%3E%3Cpath d='M8 2.1v6.8M4.6 5.5h6.8' stroke='%2364748b' stroke-width='.9'/%3E%3C/svg%3E");
}

.flag-pl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23dc143c'/%3E%3C/svg%3E"); }
.flag-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23000'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23d00'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ffce00'/%3E%3C/svg%3E"); }
.flag-nl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ae1c28'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%2321468b'/%3E%3C/svg%3E"); }
.flag-at { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ed2939'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ed2939'/%3E%3C/svg%3E"); }
.flag-hu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ce2939'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23477050'/%3E%3C/svg%3E"); }
.flag-ua { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%230057b7'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23ffd700'/%3E%3C/svg%3E"); }
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230039a6'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.flag-ee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%234891d9'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23000'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-lt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fdb913'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23006a44'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23c1272d'/%3E%3C/svg%3E"); }
.flag-lv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%239e3039'/%3E%3Crect y='4.4' width='16' height='2.2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23009b74'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23d62612'/%3E%3C/svg%3E"); }
.flag-no { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ba0c2f'/%3E%3Crect x='4' width='3' height='11' fill='%23fff'/%3E%3Crect y='4' width='16' height='3' fill='%23fff'/%3E%3Crect x='4.8' width='1.4' height='11' fill='%2300205b'/%3E%3Crect y='4.8' width='16' height='1.4' fill='%2300205b'/%3E%3C/svg%3E"); }
.flag-dk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c8102e'/%3E%3Crect x='4.5' width='2' height='11' fill='%23fff'/%3E%3Crect y='4.5' width='16' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-se { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23006aa7'/%3E%3Crect x='4.5' width='2' height='11' fill='%23fecc00'/%3E%3Crect y='4.5' width='16' height='2' fill='%23fecc00'/%3E%3C/svg%3E"); }
.flag-fi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect x='4.5' width='2.5' height='11' fill='%23003580'/%3E%3Crect y='4.25' width='16' height='2.5' fill='%23003580'/%3E%3C/svg%3E"); }
.flag-is { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23003897'/%3E%3Crect x='4' width='3' height='11' fill='%23fff'/%3E%3Crect y='4' width='16' height='3' fill='%23fff'/%3E%3Crect x='4.8' width='1.4' height='11' fill='%23d72828'/%3E%3Crect y='4.8' width='16' height='1.4' fill='%23d72828'/%3E%3C/svg%3E"); }
.flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23002395'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ed2939'/%3E%3C/svg%3E"); }
.flag-it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23009246'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce2b37'/%3E%3C/svg%3E"); }
.flag-ie { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23169b62'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ff883e'/%3E%3C/svg%3E"); }
.flag-be { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23000'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fdda24'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ef3340'/%3E%3C/svg%3E"); }
.flag-ro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23002b7f'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fcd116'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-pe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23d91023'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23d91023'/%3E%3C/svg%3E"); }
.flag-mx { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23006847'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-br { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23009c3b'/%3E%3Cpath d='M8 1.4 14.6 5.5 8 9.6 1.4 5.5Z' fill='%23ffdf00'/%3E%3Ccircle cx='8' cy='5.5' r='2.4' fill='%23002776'/%3E%3C/svg%3E"); }
.flag-pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ff0000'/%3E%3Crect width='6.4' height='11' fill='%23006600'/%3E%3Ccircle cx='6.4' cy='5.5' r='2.2' fill='%23ffff00' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E"); }
.flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c60b1e'/%3E%3Crect y='2.75' width='16' height='5.5' fill='%23ffc400'/%3E%3C/svg%3E"); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23012169'/%3E%3Cpath d='M0 0 16 11M16 0 0 11' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M0 0 16 11M16 0 0 11' stroke='%23c8102e' stroke-width='1.3'/%3E%3Cpath d='M8 0V11M0 5.5H16' stroke='%23fff' stroke-width='3.6'/%3E%3Cpath d='M8 0V11M0 5.5H16' stroke='%23c8102e' stroke-width='2.2'/%3E%3C/svg%3E"); }
.flag-us { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='16' height='1.7'/%3E%3Crect y='3.4' width='16' height='1.7'/%3E%3Crect y='6.8' width='16' height='1.7'/%3E%3Crect y='10.2' width='16' height='.8'/%3E%3C/g%3E%3Crect width='7' height='6' fill='%233c3b6e'/%3E%3C/svg%3E"); }
.flag-ar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%2374acdf'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Ccircle cx='8' cy='5.5' r='1.3' fill='%23f6b40e'/%3E%3C/svg%3E"); }
.flag-cl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23d52b1e'/%3E%3Crect width='5.5' height='5.5' fill='%230039a6'/%3E%3C/svg%3E"); }
.flag-co { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fcd116'/%3E%3Crect y='5.5' width='16' height='2.75' fill='%23003893'/%3E%3Crect y='8.25' width='16' height='2.75' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-ca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='4' height='11' fill='%23d52b1e'/%3E%3Crect x='12' width='4' height='11' fill='%23d52b1e'/%3E%3Cpath d='M8 3 8.7 4.8 10 4.2 9.3 6 10.6 6.2 8.9 7.2 9.2 8.4 8 8 6.8 8.4 7.1 7.2 5.4 6.2 6.7 6 6 4.2 7.3 4.8Z' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.flag-au { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23012169'/%3E%3Crect width='7' height='5' fill='%23012169'/%3E%3Cpath d='M0 0 7 5M7 0 0 5' stroke='%23fff' stroke-width='1'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23c8102e' stroke-width='1'/%3E%3C/svg%3E"); }
.flag-ch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23d52b1e'/%3E%3Crect x='6.6' y='2.4' width='2.8' height='6.2' fill='%23fff'/%3E%3Crect x='4.4' y='4.6' width='7.2' height='1.8' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-cz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23d7141a'/%3E%3Cpath d='M0 0 8 5.5 0 11Z' fill='%2311457e'/%3E%3C/svg%3E"); }
.flag-sk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230b4ea2'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ee1c25'/%3E%3C/svg%3E"); }
.flag-si { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23005ce5'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ed1c24'/%3E%3C/svg%3E"); }
.flag-hr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23ff0000'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23171796'/%3E%3C/svg%3E"); }
.flag-rs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23c6363c'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230c4076'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-by { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='7.3' fill='%23c8313e'/%3E%3Crect y='7.3' width='16' height='3.7' fill='%234aa657'/%3E%3Crect width='3' height='11' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-gr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23004c98'%3E%3Crect width='16' height='1.22'/%3E%3Crect y='2.44' width='16' height='1.22'/%3E%3Crect y='4.88' width='16' height='1.22'/%3E%3Crect y='7.32' width='16' height='1.22'/%3E%3Crect y='9.76' width='16' height='1.24'/%3E%3C/g%3E%3Crect width='6' height='6.1' fill='%23004c98'/%3E%3Crect x='2.4' width='1.2' height='6.1' fill='%23fff'/%3E%3Crect y='2.45' width='6' height='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-tr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23e30a17'/%3E%3Ccircle cx='6' cy='5.5' r='2.6' fill='%23fff'/%3E%3Ccircle cx='6.9' cy='5.5' r='2.1' fill='%23e30a17'/%3E%3C/svg%3E"); }
.flag-il { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='1.4' width='16' height='1.5' fill='%230038b8'/%3E%3Crect y='8.1' width='16' height='1.5' fill='%230038b8'/%3E%3Cpath d='M8 3.2 9.6 6.2H6.4Z' stroke='%230038b8' stroke-width='.6' fill='none'/%3E%3Cpath d='M8 7.8 6.4 4.8h3.2Z' stroke='%230038b8' stroke-width='.6' fill='none'/%3E%3C/svg%3E"); }
.flag-ae { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%2300732f'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23000'/%3E%3Crect width='4' height='11' fill='%23ff0000'/%3E%3C/svg%3E"); }
.flag-xx { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23dbe4ef'/%3E%3Ccircle cx='8' cy='5.5' r='3.4' fill='none' stroke='%2364748b' stroke-width='.9'/%3E%3Cpath d='M8 2.1v6.8M4.6 5.5h6.8' stroke='%2364748b' stroke-width='.9'/%3E%3C/svg%3E"); }

/* Flag of the chosen country inside the select field.

   <option> takes no images, and next to the field the flag does not fit,
   because <select> takes the whole row width. The field background it is: the place
   on the right, just before the dropdown arrow. */
select.has-flag {
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 16px 11px;
  padding-right: 52px;
}

/* ==========================================================================
   otservlist-style look
   ==========================================================================

   Everything above is the original "card" look: rounded panels, big
   spacing, shadows. The model was otservlist.org, and something else came out, so this
   layer brings that layout back: a dense table with one line per row,
   page frame in the middle, header with a language bar, full-width menu
   and grey column headers. Colours are light, because the dark theme was dropped earlier.

   The layer sits at the end of the file on purpose: with the same specificity the later
   rule wins, so old classes do not need removing, and all
   sub-pages get the new look at once. */

:root {
  --ots-blue: #2c5b76;
  --ots-blue-dark: #1d4257;
  --ots-blue-soft: #d1e8ef;
  --ots-line: #b4ccd4;
  --ots-row-line: #dfdfdf;
  --ots-orange: #cf5626;
  --ots-orange-hi: #ff5917;
  --ots-promo: #fff7b0;
  --ots-promo-line: #efe08a;
  --ots-page: #90afbb;
  --ots-frame: #ffffff;
  --ots-text: #084358;

  --bg: #eef4f6;
  --line: var(--ots-line);
  --line-soft: #e4edf0;
  --text: #13303d;
  --text-dim: #587482;
  --accent: var(--ots-blue);
  --accent-2: #3d7a9c;
  --accent-soft: rgba(44, 91, 118, .10);
  --radius: 3px;
  --radius-sm: 3px;
  --shadow: none;
  --font: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--ots-page) linear-gradient(180deg, #5f8595 0, #90afbb 260px, #b7cdd5 100%) no-repeat;
  background-attachment: scroll;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

/* The background of dungeon tiles and torches (assets/bg.js) stays, as the owner wanted:
   a Tibia-like canvas instead of a gradient. It is visible only at the sides, around the white
   page frame, so it does not disturb reading the dense table. The gradient underneath
   is a fallback when the canvas does not draw. */
#bg { display: block; opacity: .55; }

/* Page frame in the middle, like a white sheet on a blue background. */
.wrap { max-width: 980px; padding: 0 14px; }

.site-head,
main.wrap,
.site-foot {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

main.wrap {
  background: var(--ots-frame);
  padding: 14px 18px 20px;
  border-left: 1px solid var(--ots-line);
  border-right: 1px solid var(--ots-line);
  flex: 1 0 auto;
}

a { color: var(--ots-blue); }
a:hover { color: var(--ots-orange-hi); }

h1, h2, h3 { font-family: Verdana, var(--font); }

/* ---------- header ---------- */

.site-head {
  position: static;
  backdrop-filter: none;
  background: none;
  border: 0;
}

.site-head .wrap { max-width: none; }

.head-top {
  background: var(--ots-blue-dark);
  color: #cfe3ea;
  font-size: 11px;
}

.head-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.head-tagline { letter-spacing: .02em; }

.head-top .lang-switch {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 4px;
}

.head-top .lang-opt {
  color: #e6f2f6;
  padding: 2px 6px;
  font-weight: 600;
}

.head-top .lang-opt:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.head-top .lang-opt.is-on { background: rgba(255, 255, 255, .22); color: #fff; }

.head-inner {
  height: auto;
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1f4 100%);
  border-left: 1px solid var(--ots-line);
  border-right: 1px solid var(--ots-line);
}

.brand { font-size: 20px; font-weight: 700; color: var(--ots-blue-dark); letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; }
.brand:hover { color: var(--ots-blue-dark); }

.head-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.head-search input[type="search"] {
  width: 210px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--ots-line);
  border-radius: 2px;
  background: #fff;
}

.head-adv {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.head-menu {
  background: linear-gradient(180deg, #3b6f8c 0%, var(--ots-blue) 55%, #244d63 100%);
  border-top: 1px solid #1a3a4c;
  border-bottom: 1px solid #1a3a4c;
}

.head-menu .wrap { padding: 0; }

.head-nav {
  flex-wrap: nowrap;
  gap: 0;
  min-height: 36px;
  overflow: visible;
}

.head-nav .btn,
.head-nav summary.btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, .22);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10);
}

.head-nav .btn:hover,
.head-nav summary.btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
}

.head-nav a.is-here,
.head-nav summary.is-here {
  background: rgba(0, 0, 0, .22);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--ots-orange-hi);
}

/* "Add server" stays highlighted, but in the same row as the rest. */
.head-nav .btn-primary {
  margin-left: auto;
  background: var(--ots-orange);
  border-right: 0;
  filter: none;
}
.head-nav .btn-primary:hover { background: var(--ots-orange-hi); }

/* Items share the bar width: in Polish the slack is spread
   evenly, and longer Portuguese labels (ADICIONAR SERVIDOR, ESTATISTICAS)
   fit in the frame instead of sticking out past the right edge. */
@media (min-width: 761px) {
  .head-nav > .btn,
  .head-nav > .nav-more { flex: 1 1 auto; min-width: 0; }
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 11px; justify-content: center; }
  .head-nav > .nav-more > summary.btn { width: 100%; }
  .head-nav .btn-primary { margin-left: 0; }
}

/* Narrow window, but not a phone yet: smaller letters and spacing. */
@media (min-width: 761px) and (max-width: 1000px) {
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 7px; font-size: 11px; letter-spacing: 0; }
}

.nav-more-list {
  border-radius: 0;
  border: 1px solid var(--ots-line);
  border-top: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  top: 100%;
  left: 0;
  right: auto;
}

.nav-more-list a { border-radius: 0; border-bottom: 1px solid var(--line-soft); }
.nav-more-name { font-size: 12px; color: var(--ots-blue); }
.nav-more-desc { font-size: 11px; }

@media (max-width: 760px) {
  .head-inner { flex-wrap: wrap; }
  .head-search { margin-left: 0; width: 100%; }
  .head-search input[type="search"] { flex: 1; width: auto; }
  .head-tagline { display: none; }
  .head-top-inner { justify-content: flex-end; }
  .head-nav { overflow-x: auto; }
  .head-nav .btn-primary { order: 0; margin-left: 0; }
}

/* ---------- shared elements ---------- */

.hero { padding: 6px 0 10px; border-bottom: 1px solid var(--ots-line); margin-bottom: 12px; }
.hero h1 { font-size: 18px; color: var(--ots-orange); letter-spacing: 0; }
.lead { font-size: 12px; }

.panel,
.stat-tile,
.info-card,
.rank-row,
.srv-row,
.table-scroll,
.card {
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.panel { border: 1px solid var(--ots-line); padding: 10px 12px; }
.panel h2 { font-size: 13px; color: var(--ots-orange); }

.btn {
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}

.btn-primary {
  background: var(--ots-blue);
  border-color: var(--ots-blue);
}
.btn-primary:hover { background: var(--ots-blue-dark); filter: none; }

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
select,
textarea {
  border-radius: 2px;
  font-size: 12px;
  padding: 5px 8px;
  border-color: var(--ots-line);
}

.foot-note {
  border: 0;
  border-top: 1px solid var(--ots-line);
  border-radius: 0;
  background: none;
  padding: 10px 0 0;
  margin: 14px 0 0;
  font-size: 11px;
}

/* Old tables (ranking, search, server page) also without rounding. */
.srv-table { font-size: 12px; }
.srv-table thead th {
  background: #e3eef2;
  color: #000;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--ots-line);
}
.srv-table td { padding: 4px 8px; }

/* ---------- home page: three tiles ---------- */

.homeboxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 14px;
}

.homebox {
  border: 1px solid var(--ots-line);
  background: linear-gradient(180deg, #fffef4 0%, #ffffff 60%);
  min-height: 132px;
}

.homebox-title {
  padding: 5px 10px;
  background: linear-gradient(180deg, #4b7f9b 0%, var(--ots-blue) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

.homebox-body { padding: 8px 10px; }
.homebox-body p { margin: 0 0 6px; }
.homebox-body code { font-size: 11px; }
.homebox-dim { color: var(--text-dim); font-size: 11px; }
.homebox-empty { color: var(--text-dim); }
.homebox-stats #totals { font-weight: 700; color: var(--ots-text); }

.featured-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--ots-text);
  margin-bottom: 3px;
}

.featured-addr { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.featured-addr .srv-addr { color: var(--ots-orange); font-weight: 700; font-family: var(--font); font-size: 12px; }

.featured-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  margin: 0;
  font-size: 11.5px;
}
.featured-kv dt { color: var(--text-dim); }
.featured-kv dd { margin: 0; font-weight: 600; }

.mini-form { display: flex; gap: 6px; margin-bottom: 6px; }
.mini-form input { flex: 1; min-width: 0; font-family: var(--mono); }

.check-out { border-radius: 0; margin: 0 0 12px; font-size: 12px; }

@media (max-width: 820px) {
  .homeboxes { grid-template-columns: 1fr; }
  .homebox { min-height: 0; }
}

/* ---------- server table ---------- */

.list-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}

.list-search { flex: 1 1 260px; }
.list-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.list-toggle input { width: auto; margin: 0; accent-color: var(--ots-blue); }

.table-scroll { border: 1px solid var(--ots-line); }

.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.list-table thead th {
  height: 28px;
  padding: 0 6px;
  background: linear-gradient(180deg, #f3f8fa 0%, #dbe8ed 100%);
  border-bottom: 1px solid var(--ots-line);
  color: #000;
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.list-table thead button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.list-table thead button:hover { color: var(--ots-orange-hi); text-decoration: underline; }
.list-table thead button.is-sorted { color: var(--ots-orange); }
.list-table thead button.is-sorted::after { content: " \25BC"; font-size: 8px; vertical-align: 1px; }

.list-table tbody tr { height: 24px; border-bottom: 1px solid var(--ots-row-line); }
.list-table tbody tr:hover { background: var(--ots-blue-soft); }

.list-table td {
  padding: 2px 6px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
}

/* Featured: yellow row like "promoted" on otservlist, plus an orange bar
   on the left, a gold star and a bold name. Colour alone gets lost among 50 rows. */
.list-table tbody tr.is-promoted {
  background: linear-gradient(90deg, #ffef8a 0%, var(--ots-promo) 35%, var(--ots-promo) 100%);
  border-bottom-color: var(--ots-promo-line);
}
.list-table tbody tr.is-promoted:hover { background: #fdf088; }
.list-table tbody tr.is-promoted td:first-child { box-shadow: inset 4px 0 0 var(--ots-orange-hi); }
.list-table tbody tr.is-promoted .srv-name { font-weight: 700; color: #5a3d00; }
.list-table tbody tr.is-promoted.is-off td:first-child { box-shadow: inset 4px 0 0 #e7c07a; }

.list-table tbody tr.is-off { opacity: 1; color: #8a9aa2; }
.list-table tbody tr.is-off .srv-addr { color: #9a7a6c; }

.list-table .col-flag { width: 28px; text-align: center; padding-left: 8px; }
.list-table .col-flag .flag-svg { box-shadow: 0 0 0 1px #376680; border-radius: 0; }

.list-table .col-ip { width: 1%; }

/* The address is the main link: orange and bold. */
.list-table .srv-addr,
.upcoming-table .srv-addr {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ots-orange);
  margin: 0;
}
.list-table .srv-addr:hover,
.upcoming-table .srv-addr:hover { color: var(--ots-orange-hi); text-decoration: underline; }

.list-table .col-out { width: 16px; padding: 0 2px; }

/* "Server website" icon drawn in CSS: a square with an arrow. */
.srv-out {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7' fill='none' stroke='%232c5b76' stroke-width='1.3'/%3E%3Cpath d='M7 1.5h3.5V5M10.5 1.5 5.5 6.5' fill='none' stroke='%23cf5626' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.srv-out:hover { filter: brightness(1.2); }

.list-table .col-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.list-table .srv-name { font-weight: 400; font-size: 12px; color: inherit; }

.srv-off-label {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid #d9b8ab;
  color: #b0573a;
  font-size: 10px;
  text-transform: uppercase;
}

.list-table .col-players,
.list-table .col-uptime,
.list-table .col-points,
.list-table .col-exp { white-space: nowrap; }

.list-table .col-uptime.is-low { color: #b86b00; }

.list-table .col-points a { color: inherit; font-weight: 700; }
.list-table .col-points a:hover { color: var(--ots-orange-hi); }

.list-table .col-client { font-family: var(--font); color: inherit; font-size: 12px; }

.list-table .srv-msg { text-align: center; padding: 18px 10px; color: var(--text-dim); white-space: normal; }

@media (max-width: 760px) {
  .list-table .col-client,
  .list-table .col-pvp,
  .list-table .col-out { display: none; }
}

@media (max-width: 560px) {
  .list-table .col-exp,
  .list-table .col-uptime,
  .list-table .col-name { display: none; }
}

/* ---------- launching soon ---------- */

.upcoming-table {
  margin: 0 0 12px;
  border: 1px solid var(--ots-line);
}

.upcoming-table caption {
  caption-side: top;
  text-align: left;
  padding: 5px 8px;
  background: linear-gradient(180deg, #4b7f9b 0%, var(--ots-blue) 100%);
  color: #fff;
  font-weight: 700;
}

.upcoming-table tbody tr { background: var(--ots-promo); height: 28px; }
.upcoming-table td { padding: 3px 8px; }
.upcoming-table .upcoming-desc { white-space: normal; }
.upcoming-table .upcoming-desc .srv-name { color: var(--ots-orange); font-weight: 700; }
.upcoming-table .upcoming-when { width: 130px; text-align: center; white-space: nowrap; }
.upcoming-table .upcoming-time { color: #000; font-size: 12px; }

/* ---------- paging ---------- */

.pager {
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}

.pager:empty { display: none; }

.pager-label { font-weight: 700; margin-right: 6px; color: var(--ots-blue); }

.page-btn {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--ots-blue);
  border-radius: 0;
  background: #fff;
  color: var(--ots-blue);
  font-size: 12px;
  line-height: 1.3;
}
.page-btn:hover:not(:disabled) { background: var(--ots-blue); color: #fff; }
.page-btn.is-active { background: var(--ots-blue); border-color: var(--ots-blue); color: #fff; }
.page-btn:disabled { opacity: .35; }
.page-btn.is-active { font-weight: 700; min-width: 30px; }

/* Pager with a range and a 50/100 choice (ranking, players). */
.pager-bar { justify-content: space-between; gap: 8px 16px; padding: 6px 0; }
.pager-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.pager-side { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--text-dim); margin-left: auto; }
.pager-side > span:first-child { margin-right: 8px; font-variant-numeric: tabular-nums; }

/* Skipped pages between numbers: "1 … 5 6 7 … 37". */
.page-gap { padding: 0 5px; color: var(--ots-blue); font-weight: 700; letter-spacing: 1px; user-select: none; }

/* ---------- stopka ---------- */

.site-foot {
  margin-top: 0;
  padding: 14px 0 18px;
  background: linear-gradient(180deg, #dbe8ed 0%, #c7dbe2 100%);
  border: 1px solid var(--ots-line);
  border-top: 2px solid var(--ots-blue);
  backdrop-filter: none;
  color: var(--ots-text);
  font-size: 11px;
}

.site-foot p { font-weight: 700; }

.foot-nav { gap: 0; }
.foot-nav a {
  color: var(--ots-orange-hi);
  padding: 0 8px;
  border-left: 1px solid var(--ots-blue);
  line-height: 1.1;
}
.foot-nav a:first-child { border-left: 0; }
.foot-nav a:hover { color: var(--ots-orange); text-decoration: underline; }

/* ---------- server page ---------- */

.srv-header {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, #ffffff 0%, #eef5f7 100%);
  border: 1px solid var(--ots-line);
  margin: 0 0 8px;
  padding: 8px 12px;
}

.srv-header-main h1 { font-size: 16px; color: var(--ots-text); display: flex; align-items: center; gap: 7px; }
.srv-header-addr { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ots-orange); }
.state-badge { border-radius: 2px; font-size: 11px; padding: 4px 9px; }
.srv-header-players { font-size: 13px; }

/* Tabs like folders on otservlist: the active one merges with the content below. */
.tab-bar {
  border: 0;
  border-bottom: 1px solid var(--ots-line);
  border-radius: 0;
  background: none;
  padding: 0;
  gap: 2px;
  margin-bottom: 10px;
}

.tab-bar .btn {
  border: 1px solid var(--ots-line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #e8f1f4;
  color: var(--ots-blue);
  margin-bottom: -1px;
}

.tab-bar .btn.is-active {
  background: #fff;
  color: var(--ots-orange);
  border-bottom: 1px solid #fff;
}

.tab-bar-sm .btn { background: #f3f8fa; }

/* Summary: a key: value table instead of tiles. */
.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--ots-line);
  border-right: 0;
  border-bottom: 0;
  margin-bottom: 10px;
}

.stat-tile {
  border: 0;
  border-right: 1px solid var(--ots-line);
  border-bottom: 1px solid var(--ots-line);
  padding: 6px 9px;
}

.stat-label { font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.stat-value { font-size: 14px; font-weight: 700; color: var(--ots-text); }
.stat-sub { font-size: 10.5px; }

.kv {
  grid-template-columns: 170px 1fr;
  gap: 0;
  font-size: 12px;
  border-top: 1px solid var(--ots-row-line);
}

.kv dt,
.kv dd {
  padding: 4px 8px;
  border-bottom: 1px solid var(--ots-row-line);
}

.kv dt { font-weight: 700; color: var(--ots-text); background: #f5f9fa; }

.server-desc { font-size: 12.5px; max-height: none; }

.motd-item,
.sig-box { border-radius: 0; }

/* ---------- panel moderacji ---------- */

.srv-row.is-promoted { background: var(--ots-promo); border-color: var(--ots-promo-line); }
.promo-note { font-size: 11.5px; font-weight: 700; color: #7a6400; }

/* ---------- ranking jako tabela ---------- */

.rank-table .col-rank { width: 34px; text-align: right; font-weight: 700; color: var(--text-dim); }
.rank-table tbody tr.is-top .col-rank { color: var(--ots-orange); }
.rank-table .col-value { text-align: right; font-weight: 700; padding-right: 10px; }
.rank-table thead .col-value { text-align: right; }

/* "Featured" badge next to the name on the server page */
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #e0b640;
  background: linear-gradient(180deg, #fff6c2, #ffe27a);
  color: #6b4a00;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.promo-badge .promo-star { margin: 0; }

/* Gold star of a featured server: a clip-path shape, no emoji or images.
   Every few seconds it flashes briefly to catch the eye; no animation for those
   who turned it off in the system. */
.promo-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: linear-gradient(135deg, #fff1a8 0%, #ffc61a 45%, #e08a00 100%);
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
  animation: promo-shine 5s ease-in-out infinite;
}
@keyframes promo-shine {
  0%, 86%, 100% { filter: none; transform: none; }
  92% { filter: brightness(1.35) saturate(1.2); transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-star { animation: none; }
}

/* Featured server page: gold header frame. */
.srv-header.is-promoted {
  border-color: #e0b640;
  box-shadow: inset 4px 0 0 var(--ots-orange-hi);
  background: linear-gradient(90deg, #fff9d9 0%, #ffffff 60%);
}

/* "Featured server" tile: star before the name, in the same line. */
#featured .promo-star { width: 14px; height: 14px; }
#featured .promo-star + .featured-name { display: inline; }
#featured .promo-star + .featured-name + .featured-addr { margin-top: 3px; }

.srv-header-main h1 .srv-name { font-size: 16px; font-weight: 700; color: var(--ots-text); }

/* Launching soon on a phone: description in two lines, the rest in a tooltip and on the server page. */
@media (max-width: 560px) {
  .upcoming-table .upcoming-desc .srv-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .upcoming-table .upcoming-when { width: auto; }
}

/* ---------- fixes visible in the new look ---------- */

/* The hidden attribute always wins. Rules like ".toolbar { display: flex }"
   had the same weight as the default [hidden] and showed the moderation panel
   filters even before login. */
[hidden] { display: none !important; }

/* Events to watch: ".field label" set display:block and the description
   stuck to the label in one line. */
.field label.watch-event {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
  color: var(--text);
  font-weight: 400;
  background: #fff;
  border-radius: 0;
}
.watch-event-label { font-size: 12.5px; }
.watch-event-hint { font-size: 11.5px; font-weight: 400; }

/* Lists in the rules cards and the 404 page: the inline style zeroes the indent,
   so the bullets hung outside the frame. */
ul.info-card { padding-left: 20px !important; }
ul.info-card li { margin-bottom: 4px; }

/* Comparison: wider select fields, name in one line, address under it. */
.pick-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-height: 320px; }
.pick-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-items: center;
  border-radius: 0;
  font-size: 12px;
}
.pick-item input { grid-row: 1 / span 2; }
.pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pick-item small { grid-column: 2; margin-left: 0; font-family: var(--font); color: var(--ots-orange); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Server page on a phone: four buttons do not fit in a row. */
.srv-header-actions { flex-wrap: wrap; }
/* Server name in one line: when there are many buttons, they go to a second row
   instead of squeezing the name. */
.srv-header-main { flex: 1 1 320px; }
.srv-header-main h1 .srv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .srv-header-actions { width: 100%; }
  .srv-header-players { width: 100%; }
}

/* Entry claim by the owner: code to put into the MOTD or on a website. */
.claim-code-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 12px; }
.claim-code-label { font-weight: 700; color: var(--ots-navy, #1d3a52); }
.claim-code {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 12px; background: #fff8d6; border: 1px dashed #d7b84a; color: #5a4300;
  user-select: all;
}
.claim-step { margin: 10px 0; }
.claim-step p { margin: 6px 0; }
.claim-sample {
  margin: 6px 0; padding: 8px 10px; background: #f3f6f9; border: 1px solid var(--line);
  font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 13px; white-space: pre-wrap; word-break: break-all;
}
.claim-token {
  display: block; margin: 8px 0 10px; padding: 6px 10px; background: #fff; border: 1px solid var(--line);
  font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 14px; word-break: break-all; user-select: all;
}
.src-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--line); color: var(--text-dim); text-transform: uppercase; letter-spacing: .3px;
}
.import-sources { display: grid; gap: 6px; margin: 10px 0; }
.import-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); background: #fff; }
.import-source .import-name { font-weight: 700; min-width: 150px; }
.import-source .import-result { color: var(--text-dim); font-size: 12px; }
.import-source.is-blocked { background: #faf6ee; }

/* ---------- reklamy ---------- */
.ad-strip {
  margin: 0 0 10px; padding: 6px; border: 1px solid var(--ots-promo-line, #efe08a); background: #fffdf0;
}
.ad-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 5px; }
.ad-label {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Grid of 4 per row; 2 on a narrow screen, 1 on a phone. */
.ad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 900px) { .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ad-grid { grid-template-columns: 1fr; } }
.ad-item {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 50px;
  padding: 5px 9px; border: 1px solid var(--ots-line, var(--line)); background: #fff; color: var(--text);
}
.ad-item.is-free { border-style: dashed; background: transparent; justify-content: center; }
.ad-item.is-free .ad-title { color: var(--text-dim); font-weight: 600; }
.ad-item.is-free .ad-text { white-space: normal; }
.ad-item.is-free:hover .ad-title { color: var(--ots-orange, var(--accent)); }
.ad-item:hover { border-color: var(--ots-orange, var(--accent)); text-decoration: none; }
.ad-title { color: var(--ots-orange, var(--accent)); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-text { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-addr { font-size: 11px; color: var(--ots-blue, var(--accent)); font-weight: 700; }
.ad-item.is-house { background: #fbfdff; }
.ad-own { font-size: 11px; white-space: nowrap; }
.ad-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.ad-offer .panel { margin: 0; }
.ad-points { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.ad-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ad-price {
  display: flex; flex-direction: column; align-items: center; min-width: 110px;
  padding: 8px 14px; border: 1px solid var(--ots-line, var(--line)); background: #fff;
}
.ad-price-days { font-size: 12px; color: var(--text-dim); }
.ad-price-sum { font-size: 18px; color: var(--ots-orange, var(--accent)); }
.ad-code { display: inline-block; margin: 2px 0 8px; }
.ad-method { margin: 6px 0; font-size: 13px; }
.ad-row-meta { font-size: 12px; color: var(--text-dim); }

/* ---------- server summary: now, availability, players, server ---------- */

.sum-top {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sum-top .panel { margin: 0; }

.tab-panel[data-panel="summary"] > .panel + .panel,
.tab-panel[data-panel="summary"] > .sum-top + .panel { margin-top: 12px; }

.now-big {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.now-big strong { font-size: 32px; line-height: 1.1; color: var(--good); letter-spacing: -.02em; }
.now-big span { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.now-big.is-off strong { color: var(--bad); font-size: 26px; text-transform: uppercase; }
.now-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.now-track { display: block; margin-top: 4px; }
.now-sub { font-size: 11px; color: var(--text-dim); margin: 3px 0 10px; }
.now-kv { grid-template-columns: auto 1fr; }
.now-kv dt { background: transparent; font-weight: 600; }
.now-kv dd { text-align: right; font-variant-numeric: tabular-nums; }

.chart.chart-mini { height: 150px; }
.sum-note { margin: 6px 0 0 !important; }

.up-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px 110px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
}

.up-name { font-weight: 700; color: var(--ots-text); }
.up-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ots-text); }
.up-sub { font-size: 11px; color: var(--text-dim); }

.up-track {
  position: relative;
  height: 10px;
  background: #e5edf0;
  border: 1px solid #d3e0e5;
  overflow: hidden;
}

.up-fill { position: absolute; inset: 0 auto 0 0; background: var(--good); }
.up-fill.is-warn { background: var(--warn); }
.up-fill.is-bad { background: var(--bad); }

.day-strip-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ots-text);
}

.day-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 400; color: var(--text-dim); font-size: 11px; }
.day-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.day-legend .day-cell { width: 11px; height: 11px; }

.day-strip {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
}

.day-cell {
  display: inline-block;
  height: 22px;
  background: #e5edf0;
  border: 1px solid #d3e0e5;
}

.day-cell.is-on { background: var(--good); border-color: #178246; }
.day-cell.is-on.is-warn { background: var(--warn); border-color: #a86c02; }
.day-cell.is-on.is-bad { background: var(--bad); border-color: #b8323c; }

.day-strip-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 3px;
}

.rate-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 8px 0 12px; }
.rate-tile .stat-value { font-size: 20px; color: var(--ots-orange); }

.kv-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin-top: 8px;
}

.kv-col h3 {
  margin: 0 0 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.kv-col .kv { grid-template-columns: 150px 1fr; }
.kv-col .kv dd { overflow-wrap: anywhere; }
.kv-col .flag-svg { vertical-align: -1px; }

/* Flag before the server name in player tables and on the character card: with a gap,
   otherwise it sticks to the first letter. */
.srv-table td > .flag-svg,
.player-where > .flag-svg,
#card-where > .flag-svg { margin-right: 6px; vertical-align: -1px; }

/* Names on bar charts (statistics): a wider column, so
   "The Forgotten Server" does not end with an ellipsis. */
.bar-row { grid-template-columns: minmax(108px, 170px) minmax(0, 1fr) 44px 118px; }
.bar-players { white-space: nowrap; }
#player-levels .bar-row { grid-template-columns: 70px minmax(0, 1fr) 44px; }
@media (max-width: 560px) {
  .bar-row { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 38px; }
}

@media (max-width: 820px) {
  .sum-top, .kv-cols { grid-template-columns: 1fr; }
  .kv-col + .kv-col { margin-top: 12px; }
  .up-row { grid-template-columns: 50px 1fr 64px; }
  .up-sub { display: none; }
  .day-cell { height: 16px; }
  .day-strip { gap: 2px; }
}

/* ---------- komunikat administratora (plik .env, OTS_NOTICE_*) ---------- */

.notice {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 11px 44px 11px 16px;
  border: 1px solid #9cc3e0;
  border-left: 5px solid var(--accent);
  background: #eef6fd;
  color: var(--ots-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.notice[hidden] { display: none; }
.notice-text { flex: 1 1 320px; font-weight: 600; text-align: center; }
.notice-warn { border-color: #e7cf8a; border-left-color: var(--warn); background: #fff8e1; }
.notice-ok { border-color: #a9dcbc; border-left-color: var(--good); background: #eaf8ef; }

.notice-more {
  flex: 0 0 auto;
  padding: 3px 11px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  color: var(--ots-orange);
  text-decoration: none;
  background: #fff;
}

.notice-more:hover { background: var(--ots-orange); border-color: var(--ots-orange); color: #fff; }

.notice-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}

.notice-close:hover { opacity: 1; }

/* Cross drawn with CSS, no characters or images. */
.notice-close::before,
.notice-close::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 4px;
  width: 16px;
  height: 2px;
  background: var(--ots-text);
  transform: rotate(45deg);
}

.notice-close::after { transform: rotate(-45deg); }

/* ---------- ranking: server mode bar (PVP, nPVP, ...) ---------- */

.mode-bar { align-items: center; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.mode-label { font-size: 12px; font-weight: 700; color: var(--ots-text); margin-right: 4px; }
.mode-bar .btn { gap: 6px; }
.mode-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--ots-blue);
  background: var(--ots-blue-soft);
}
.mode-bar .btn.is-active .mode-count { background: var(--ots-orange); color: #fff; }
.mode-bar .btn:disabled { opacity: .45; cursor: default; }

/* == OTS:ads-board == */
/* Ads: board (adverts.html), order (ads.html), link in the bar on the home page. */
.ad-links { display: inline-flex; gap: 12px; align-items: center; }
.ad-board-link { font-weight: 700; }

.adv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.adv-add { font-size: 14px; padding: 9px 18px; font-weight: 700; }
.adv-cats { flex-wrap: wrap; margin-bottom: 10px; }
.adv-cats .btn { display: inline-flex; gap: 4px; align-items: center; }
.adv-count { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.adv-cats .btn.is-active .adv-count { color: inherit; }

.adv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.adv-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text);
}
.adv-item:hover { border-color: var(--ots-orange, var(--accent)); text-decoration: none; }
.adv-item.is-featured { background: var(--ots-promo, #fff7b0); border-color: var(--ots-promo-line, #efe08a); }
.adv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adv-title { color: var(--ots-orange, var(--accent)); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-badge {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #6b5200; background: #ffe36b; border: 1px solid #e3c23a; border-radius: 3px; padding: 0 5px;
}
.adv-text { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-foot { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.adv-kind { font-weight: 600; }
.adv-where { color: var(--ots-blue, var(--accent)); font-weight: 700; font-family: var(--mono); font-size: 11px; }
.adv-go {
  width: 12px; height: 12px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='%232c5b76' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.adv-item:hover .adv-go { opacity: 1; }
.adv-empty { text-align: center; }
.adv-empty .btn { margin-top: 4px; }

/* Type icons: a coloured square and a simple sign in SVG. */
.adv-icon {
  width: 40px; height: 40px; border-radius: 6px; display: block;
  background-color: #6b7c88; background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.adv-icon-server { background-color: #3f6b2a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1.5 14.5 2.5 7 10 6 9z' fill='%23e8eef3'/%3E%3Cpath d='M4 8.5 7.5 12 6.5 13 3 9.5z' fill='%23f2b544'/%3E%3Cpath d='M5 11 2 14' stroke='%23f2b544' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.adv-icon-www { background-color: #2c5b76; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12'/%3E%3C/svg%3E"); }
.adv-icon-youtube { background-color: #e02b2b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 4v8l7-4z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-hosting { background-color: #4a5a66; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Crect x='2.5' y='2.5' width='11' height='4.5' rx='1'/%3E%3Crect x='2.5' y='9' width='11' height='4.5' rx='1'/%3E%3Cpath d='M5 4.75h.1M5 11.25h.1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.adv-icon-discord { background-color: #5865f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5C5 3 11 3 13 4.5c1 2 1.3 4.5 1 7-1.2 1-2.3 1.4-3.2 1.6l-.8-1.3c-1.3.4-2.7.4-4 0l-.8 1.3C4.3 12.9 3.2 12.5 2 11.5c-.3-2.5 0-5 1-7z' fill='%23fff'/%3E%3Ccircle cx='6' cy='8.3' r='1.1' fill='%235865f2'/%3E%3Ccircle cx='10' cy='8.3' r='1.1' fill='%235865f2'/%3E%3C/svg%3E"); }
.adv-icon-shop { background-color: #cf5626; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Cpath d='M3 5.5h10l-1 8H4z'/%3E%3Cpath d='M5.8 5.5V4a2.2 2.2 0 0 1 4.4 0v1.5'/%3E%3C/svg%3E"); }
.adv-icon-other { background-color: #7a6a9c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.6l-3.8 2 .7-4.3-3.1-3 4.3-.6z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-tiktok { background-color: #111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%2325f4ee' transform='translate(-.5 -.4)'/%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%23fe2c55' transform='translate(.5 .4)'/%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-twitch { background-color: #9146ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5 2 4v9h3v2h2l2-2h2.5L14 10.5v-9z' fill='%23fff'/%3E%3Cpath d='M4 2.8h8.7v7.2l-1.8 1.8H8.2l-1.8 1.8v-1.8H4z' fill='%239146ff'/%3E%3Cpath d='M7 4.8h1.3v3.5H7zM10 4.8h1.3v3.5H10z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-kick { background-color: #53fc18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h3.2v3.2h1.6V3.6h1.6V2H13v4.2h-1.6v1.6H9.8v.4h1.6v1.6H13V14H9.4v-1.6H7.8v-1.6H6.2V14H3z' fill='%23111'/%3E%3C/svg%3E"); }
.adv-icon-social { background-color: #1877f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Ccircle cx='12' cy='3.8' r='2'/%3E%3Ccircle cx='12' cy='12.2' r='2'/%3E%3Cpath d='M4 8 12 3.8M4 8l8 4.2' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); }

@media (max-width: 560px) {
  .adv-item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .adv-icon { width: 32px; height: 32px; background-size: 18px 18px; }
  .adv-go { display: none; }
  .adv-text { white-space: normal; }
}

/* ads.html: two places side by side. */
.ad-place-tag { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ots-orange, var(--accent)); }
.ad-place-board .ad-place-tag { color: var(--good); }
.ad-place-home { border-top: 3px solid var(--ots-orange, var(--accent)); }
.ad-place-board { border-top: 3px solid var(--good); }
.ad-offer .ad-prices { margin-top: 10px; }
.ad-free-count { font-weight: 700; }
.ad-free-count.is-full { color: var(--bad); }
.field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
#ad-places, #ad-kinds { flex-wrap: wrap; }
#ad-places .btn.is-off, #ad-places .btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.ad-full { margin-top: 6px !important; color: var(--bad) !important; }

/* rules.html: subtitles in the Ad rules section. */
.rules-sub { font-size: 13px; margin: 12px 0 6px; }
/* == /OTS:ads-board == */

/* == OTS:reviews == */
/* ---------- rating stars: five stars from an SVG mask, fill by --rv (0-5) ---------- */
.rv-stars {
  --rv: 0;
  --rv-size: 13px;
  display: inline-block;
  flex: none;
  width: calc(var(--rv-size) * 5);
  height: var(--rv-size);
  vertical-align: -2px;
  background: linear-gradient(90deg, #f0a800 calc(var(--rv) * 20%), #cfd8de calc(var(--rv) * 20%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L10 15l-5.4 2.9 1.1-6.1L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") left center / var(--rv-size) var(--rv-size) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L10 15l-5.4 2.9 1.1-6.1L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") left center / var(--rv-size) var(--rv-size) repeat-x;
}
.rv-stars.is-big { --rv-size: 22px; }

/* Average in a list row: a small star and a number. */
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border: 1px solid #ecd48a;
  background: #fffaf0;
  color: #7a5200;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}
.rv-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #f0a800;
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
}
.rv-chip:hover { border-color: #f0a800; text-decoration: none; }

/* Link with stars in the server page header. */
.rv-head-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.rv-head-link b { color: var(--ots-text); font-size: 13px; }
.rv-head-link:hover { text-decoration: none; }
.rv-head-link:hover span:last-child { text-decoration: underline; }

/* ---------- Reviews tab ---------- */
.rv-summary {
  display: grid;
  grid-template-columns: 170px minmax(0, 320px);
  gap: 18px;
  align-items: center;
  padding: 4px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ots-row-line);
}
.rv-avg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rv-avg-num { font-size: 34px; line-height: 1; color: var(--ots-text); }
.rv-hist { display: flex; flex-direction: column; gap: 3px; }
.rv-hist-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 28px; gap: 6px; align-items: center; font-size: 11.5px; }
.rv-hist-label { color: var(--text-dim); font-weight: 700; text-align: right; }
.rv-hist-track { height: 8px; background: #edf1f4; border: 1px solid #dfe5ea; }
.rv-hist-fill { display: block; height: 100%; background: #f0a800; }
.rv-hist-num { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.rv-list { display: flex; flex-direction: column; }
.rv-item { padding: 10px 0; border-bottom: 1px solid var(--ots-row-line); }
.rv-item:last-child { border-bottom: 0; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-author { color: var(--ots-text); font-size: 13px; }
.rv-date { color: var(--text-dim); font-size: 11.5px; }
.rv-body { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.rv-reply {
  margin: 8px 0 0 18px;
  padding: 6px 10px;
  border-left: 3px solid var(--ots-blue);
  background: #f3f8fa;
  font-size: 12.5px;
}
.rv-reply b { color: var(--ots-blue); font-size: 11.5px; }
.rv-reply p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-reply-form { margin-top: 8px; }
.rv-reply-form textarea { min-height: 54px; }
.rv-reply-form .form-actions { margin-top: 6px; }

/* Rating choice: five stars. Reversed order, so :hover ~ highlights the stars on the left. */
.rv-pick { border: 0; padding: 0; margin: 0 0 10px; }
.rv-pick legend { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; padding: 0; }
.rv-pick-stars { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.rv-pick-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-pick-stars label {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: #cfd8de;
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
  transition: background .1s, transform .1s;
}
.rv-pick-stars label:hover,
.rv-pick-stars label:hover ~ label,
.rv-pick-stars input:checked ~ label { background: #f0a800; }
.rv-pick-stars label:hover { transform: scale(1.1); }
.rv-pick-stars input:focus-visible + label { outline: 2px solid var(--ots-blue); outline-offset: 2px; }

@media (max-width: 560px) {
  .rv-summary { grid-template-columns: 1fr; gap: 10px; }
  .rv-reply { margin-left: 8px; }
}
/* == /OTS:reviews == */

/* == OTS:menu == */
/* Section tabs for Search (Server | Character) and Ranking (Ranking | Online now | Statistics),
   drawn by assets/nav.js under the page header. Looks like .tab-bar, only links. */
.section-tabs { margin: 0 0 12px; }
.section-tabs a.btn { text-decoration: none; }
.section-tabs a.btn:hover { text-decoration: none; color: var(--ots-orange-hi); }
.section-tabs a.btn.is-active { font-weight: 700; }

/* Footer: section sub-pages in one group with the section, separated by a dot instead of a line. */
.foot-nav a.foot-sub { border-left: 0; padding-left: 0; }
.foot-nav a.foot-sub::before { content: "\00B7"; color: var(--text-dim); padding-right: 6px; }

/* Privacy policy: sentence under the e-mail field in forms. */
.privacy-note { margin-top: 4px; }

/* Lost panel link: two fields side by side, on a narrow screen one under the other. */
#lost-panel .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
#lost-panel .field-row > * { flex: 1 1 220px; }
#lost-panel .field-row input { width: 100%; }
/* == /OTS:menu == */

/* == OTS:kategorie-banery == */
/* Category pages: /serwery, /serwery/pvp, /serwery/wersja/8.60 (category.php) */
.cat-page h1 { margin: 12px 0 8px; font-size: 22px; }
.cat-crumbs { margin: 14px 0 0; font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; flex-wrap: wrap; }
.cat-intro { margin: 0 0 12px; line-height: 1.6; max-width: 900px; }
.cat-summary { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); }
.cat-table .cat-rank { width: 36px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cat-table .srv-name { font-weight: 700; }
.cat-table td > .flag-svg { margin-right: 6px; vertical-align: -1px; }
.cat-table .cat-off { color: var(--text-dim); }
.cat-table .pl-nw { white-space: nowrap; }
.cat-more { margin: 10px 0 0; }
.cat-groups { margin-top: 16px; }
.cat-groups h2 { margin: 0 0 8px; }
.cat-group + .cat-group { margin-top: 14px; }
.cat-group h3 { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.cat-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line); background: var(--bg-card);
  color: var(--text); font-size: 13px;
}
.cat-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cat-link.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-link-count {
  font-size: 11px; padding: 0 6px; background: var(--accent-soft); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cat-link.is-active .cat-link-count { background: rgba(255, 255, 255, .25); color: #fff; }
.cat-groups.is-index .cat-link { font-size: 14px; padding: 6px 12px; }
.cat-foot { margin: 16px 0 24px; font-size: 13px; color: var(--text-dim); }

/* 468x60 banner: server page, TOP card, server panel (api/banner.php) */
.srv-banner { margin: 0 0 12px; text-align: center; line-height: 0; }
.srv-banner img, .banner-preview img {
  max-width: 100%; height: auto; border: 1px solid var(--line); background: var(--bg-card);
}
.banner-preview { margin: 0 0 12px; }
.banner-preview .hint { margin: 6px 0 0; }
/* == /OTS:kategorie-banery == */

/* == OTS:w4osb-seo == */
/* Home page: visible header, intro and category links (SEO) */
.home-intro { margin: 14px 0 10px; }
.home-intro h1 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }
.home-intro p { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); max-width: 860px; line-height: 1.5; }
.home-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.home-cats a { font-size: 12px; padding: 3px 9px; border: 1px solid var(--border, #d6dde6); border-radius: 12px; text-decoration: none; background: #fff; }
.home-cats a:hover { border-color: currentColor; }
.srv-crumbs { margin: 10px 0 8px; }
/* == /OTS:w4osb-seo == */

/* == OTS:w4-sort == */
/* Sorting by clicking the header (sortableTable in site.js): arrow from a border triangle. */
.list-table thead button.is-sorted::after,
.srv-table thead button.is-sorted::after,
thead .sort-btn.is-sorted::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  font-size: 0;
}
.list-table thead button.is-asc::after,
.srv-table thead button.is-asc::after,
thead .sort-btn.is-asc::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}
.srv-table thead .sort-btn {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  white-space: nowrap;
}
.srv-table thead .sort-btn:hover { text-decoration: underline; }
.srv-table thead .sort-btn.is-sorted { color: var(--accent); }
thead .sort-btn:focus-visible { outline: 2px solid var(--ots-orange, #1f6fd0); outline-offset: 2px; }

/* Reviews column: small stars, average and count. */
.col-rating { white-space: nowrap; width: 1%; }
.rv-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7a5200;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.rv-cell .rv-stars { --rv-size: 10px; vertical-align: 0; }
.rv-cell:hover { text-decoration: underline; }

/* Phone: only review counts stay, no stars, so the table does not break. */
@media (max-width: 560px) {
  .rv-cell .rv-stars { display: none; }
  .rv-cell { font-size: 10.5px; }
}
@media (max-width: 400px) {
  .list-table .col-rating { display: none; }
}
/* == /OTS:w4-sort == */

/* == OTS:import-custom == */
/* Admin panel, Import: own lists (api/importcustom.php). */
.ic-lists { display: grid; gap: 10px; margin: 12px 0 16px; }
.ic-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.ic-row.is-off { background: var(--line-soft); }
.ic-row.is-off .ic-head strong { color: var(--muted, #6b7a8c); }
.ic-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ic-url { overflow-wrap: anywhere; font-size: .9em; }
.ic-meta { font-size: .85em; color: var(--muted, #6b7a8c); }
.ic-last { margin: 6px 0; }
.ic-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-result { margin-top: 8px; }
.ic-sample { columns: 2; margin: 6px 0 0; padding-left: 18px; font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.ic-form { display: grid; grid-template-columns: 2fr 1.3fr 110px; gap: 0 12px; }
@media (max-width: 640px) {
  .ic-form { grid-template-columns: 1fr; }
  .ic-sample { columns: 1; }
}
.ic-form input[type="number"] { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--text); font: inherit; font-size: 13.5px; }
/* == /OTS:import-custom == */

/* == OTS:w5ota-styl == */
/* Wave 5, OTS STYLE: footer in columns and category chips (consistent with MC:w5mca-styl). */

/* ---------- stopka ---------- */
.site-foot { padding: 18px 0 16px; font-size: 13px; }
.foot-inner.foot-grid { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
.foot-inner.foot-grid > p {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--ots-line);
  font-size: 12px; font-weight: 600; color: var(--ots-text); text-align: center;
}
.foot-nav.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; width: 100%; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.foot-col .foot-head {
  align-self: stretch; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--ots-blue);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ots-text);
}
.foot-nav.foot-cols a {
  display: inline-block; padding: 3px 0; border: 0; line-height: 1.35;
  color: var(--ots-blue); font-size: 13px; text-decoration: none; cursor: pointer;
}
.foot-nav.foot-cols a::before { content: none; }
.foot-nav.foot-cols a:hover { color: var(--ots-orange); text-decoration: underline; }
.foot-nav.foot-cols a[aria-current="page"] { color: var(--ots-orange); font-weight: 700; }
@media (max-width: 720px) {
  .foot-nav.foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .foot-nav.foot-cols a { padding: 5px 0; font-size: 14px; }
}

/* ---------- category chips: home (.home-cats .cat-chip) and category.php (.cat-link) ---------- */
.home-cats { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 8px; font-size: 13px; }
.home-cat-group {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  position: relative; padding-left: 112px; min-height: 28px;
}
.home-cat-label { position: absolute; left: 0; top: 5px; font-size: 12px; font-weight: 700; color: var(--ots-text); }
.home-cats a.cat-chip,
.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--ots-line); border-radius: 3px;
  background: #fff; color: var(--ots-text); font-size: 13px; font-weight: 600; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
.home-cats a.cat-chip-all { align-self: flex-start; margin-left: 112px; }
.home-cats a.cat-chip.is-empty { opacity: .6; }
.home-cats a.cat-chip:hover,
.cat-link:hover { border-color: var(--ots-blue); background: #eef4f7; color: var(--ots-blue); text-decoration: none; }
.home-cats a.cat-chip:focus-visible,
.cat-link:focus-visible { outline: 2px solid var(--ots-orange); outline-offset: 1px; }
.cat-chip-count,
.cat-link-count {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 0;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  color: var(--ots-blue); background: var(--ots-blue-soft, #dde9ef); font-variant-numeric: tabular-nums;
}
.cat-link.is-active { background: var(--ots-blue); border-color: var(--ots-blue); color: #fff; }
.cat-link.is-active .cat-link-count { background: var(--ots-orange); color: #fff; }
.cat-groups.is-index .cat-link { font-size: 14px; padding: 6px 11px; }
.cat-group h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ots-text);
}
.cat-links { gap: 6px; }
/* Category table on a phone: the server name does not break under the flag. */
.cat-table td > .flag-svg + .srv-name { white-space: nowrap; }
@media (max-width: 600px) {
  /* Phone: group label next to it, chips in one scrolling row. */
  .home-cat-group { flex-wrap: nowrap; overflow-x: auto; padding: 0 0 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .home-cat-label { position: static; flex: 0 0 auto; min-width: 70px; }
  .home-cats a.cat-chip-all { margin-left: 0; }
}

/* Phone: menu in two rows instead of a sideways scrolling bar, in which "More" and "Add server" got lost. */
@media (max-width: 760px) {
  .head-nav { flex-wrap: wrap; overflow: visible; }
  .head-nav > .btn, .head-nav > .nav-more { flex: 1 1 30%; min-width: 0; }
  .head-nav > .nav-more > summary { width: 100%; justify-content: center; }
  .head-nav > .btn-primary { flex-basis: 100%; }
  .head-nav > .nav-more { position: relative; }
  .head-nav > .nav-more > .nav-more-list { left: auto; right: 0; min-width: 240px; }
}
/* == /OTS:w5ota-styl == */

/* == OTS:w5otd-authlog == */
#authlog-list table{width:100%%;border-collapse:collapse;font-size:13px;margin-top:10px}
#authlog-list th,#authlog-list td{text-align:left;padding:6px 10px;border-bottom:1px solid #e3e9f1;white-space:nowrap}
#authlog-list th{color:#5b6b7f;font-weight:600;background:#f5f8fb}
#authlog-list td.is-ok{color:#1f8a4c;font-weight:600}
#authlog-list td.is-bad{color:#c43d47;font-weight:600}
#authlog-list{overflow-x:auto}
/* == /OTS:w5otd-authlog == */

/* == OTS:w5osb-zamow == */
/* Ordering in the Ads tab (adverts.html#order). */
.adv-order { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line, #d7dee5); scroll-margin-top: 12px; }
.adv-order-intro { margin-bottom: 12px; }
.adv-order-intro h2 { margin: 0 0 4px; }
.adv-order-intro .lead { margin: 0; }
/* == /OTS:w5osb-zamow == */

/* == OTS:w6otc-pulpit == */
/* Admin panel dashboard: tiles and the hosting readiness list */
#dashboard .dash-tiles { margin-top: 4px; }
.dash-tile { text-align: left; font: inherit; color: inherit; width: 100%; }
button.dash-tile { cursor: pointer; }
button.dash-tile:hover { border-color: var(--accent, #1f6fd0); }
.dash-tile.is-todo { border-color: color-mix(in srgb, #d49a1a 60%, var(--line)); background: color-mix(in srgb, #d49a1a 10%, var(--bg-card)); }
.dash-tile.is-todo .stat-value { color: #b87a00; }
.dash-tile.is-warn { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.dash-tile.is-warn .stat-value { color: var(--bad); }
.dash-notes { display: grid; gap: 8px; margin: 0 0 16px; }
.dash-note { margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); color: var(--text-dim); }
.dash-note.is-warn { border-color: color-mix(in srgb, #d49a1a 60%, var(--line)); color: var(--text); }
.dash-note.is-link { cursor: pointer; }
.ready-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.ready-item { display: grid; grid-template-columns: 80px minmax(140px, 220px) 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.ready-mark { font-weight: 700; font-size: .85em; text-transform: uppercase; }
.ready-item.is-ok .ready-mark { color: #1f8a4c; }
.ready-item.is-warn .ready-mark { color: #b87a00; }
.ready-item.is-bad .ready-mark { color: var(--bad); }
.ready-item.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.ready-text { color: var(--text-dim); }
@media (max-width: 640px) {
  .ready-item { grid-template-columns: 70px 1fr; }
  .ready-text { grid-column: 1 / -1; }
}
/* == /OTS:w6otc-pulpit == */

/* == OTS:w6osb-server == */
/* Server page: auto description and similar servers (server.php, api/similarlib.php) */
.srv-auto-desc { white-space: normal; max-height: none; margin: 0 0 8px; }
.srv-auto-note { margin: 0; font-size: 12.5px; }
.srv-similar h2 { margin-bottom: 10px; }
.sim-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
}
.sim-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.sim-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.sim-item .flag-svg { flex: 0 0 auto; }
.sim-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sim-meta { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.sim-players { font-variant-numeric: tabular-nums; color: var(--good); font-weight: 600; }
.sim-ver { padding: 1px 6px; border-radius: 4px; background: var(--line-soft); color: var(--text); }
.sim-more { margin: 10px 0 0; font-size: 13px; }
@media (max-width: 600px) {
  .sim-list { grid-template-columns: 1fr; }
}
/* == /OTS:w6osb-server == */

/* == OTS:rv-compact == */
/* Reviews column in tables: one gold star, average and count, e.g. 4,3 (4).
   Five stars took too much space and pushed the last columns off the screen. */
.col-rating .rv-stars,
.rv-cell .rv-stars {
  --rv-size: 11px;
  width: var(--rv-size);
  background: #f0a800;
  vertical-align: -1px;
}
.col-rating { width: 1%; }
.rv-cell { gap: 3px; }
@media (max-width: 760px) {
  .col-rating .rv-stars,
  .rv-cell .rv-stars { display: inline-block; }
}
/* == /OTS:rv-compact == */

/* == OTS:w6-look == */
/* Categories under the ad: one row of dropdown lists (index.html, .cat-drops). */
.cat-drops {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 10px 0; font-size: 13px;
}
.cat-drops-label { font-weight: 700; color: var(--ots-text); }
.cat-drop { position: relative; }
.cat-drop > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--ots-line); border-radius: 3px;
  background: #fff; color: var(--ots-text); font-weight: 600; line-height: 1.3;
  cursor: pointer; list-style: none; user-select: none;
}
.cat-drop > summary::-webkit-details-marker { display: none; }
.cat-drop > summary::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.cat-drop[open] > summary::after { border-top: 0; border-bottom: 5px solid currentColor; }
.cat-drop > summary:hover,
.cat-drop[open] > summary { border-color: var(--ots-blue); color: var(--ots-blue); background: #eef4f7; }
.cat-drop > summary:focus-visible { outline: 2px solid var(--ots-orange); outline-offset: 1px; }
.cat-drop-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; min-width: 200px; padding: 4px;
  background: #f4f5f7; border: 1px solid var(--ots-line); border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.cat-drop-menu a.cat-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border-radius: 2px; color: var(--ots-text); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.cat-drop-menu a.cat-chip:hover { background: #fff; color: var(--ots-blue); text-decoration: none; }
.cat-drop-menu a.cat-chip:focus-visible { outline: 2px solid var(--ots-orange); outline-offset: -2px; }
.cat-drop-menu .cat-chip-count { background: none; color: var(--text-dim, #6b7680); padding: 0; font-size: 12px; }
.cat-drop-menu a.cat-chip.is-empty { order: 1; color: var(--text-dim, #6b7680); font-weight: 400; }
.cat-drops-all { margin-left: 4px; font-weight: 600; color: var(--ots-blue); }
@media (max-width: 600px) {
  .cat-drop[open] { flex-basis: 100%; }
  .cat-drop-menu { position: static; margin-top: 4px; min-width: 0; box-shadow: none; }
}

/* Short footer: one row of links, site name on the right (nav.js: .foot-row, .foot-slim). */
.foot-inner.foot-slim {
  display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between;
  align-items: center; gap: 8px 24px;
}
.foot-inner.foot-slim > p { margin: 0; font-size: 12px; font-weight: 600; color: var(--ots-text); }
.foot-nav.foot-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav.foot-row a {
  padding: 0; border: 0; line-height: 1.5; font-size: 13px;
  color: var(--ots-blue); text-decoration: none; cursor: pointer;
}
.foot-nav.foot-row a::before { content: none; }
.foot-nav.foot-row a:hover { color: var(--ots-orange); text-decoration: underline; }
.foot-nav.foot-row a[aria-current="page"] { color: var(--ots-orange); font-weight: 700; }
@media (max-width: 600px) {
  .foot-inner.foot-slim { flex-direction: column-reverse; align-items: flex-start; }
  .foot-nav.foot-row { gap: 6px 16px; }
  .foot-nav.foot-row a { padding: 3px 0; font-size: 14px; }
}

/* Ads: two tabs on top, ordering in the second (adverts.html #board / #order). */
.adv-views { margin: 10px 0 14px; }
.adv-views a { text-decoration: none; }
.adv-order { margin-top: 0; padding-top: 0; border-top: 0; }
.adv-order[hidden], .adv-board[hidden] { display: none; }
/* == /OTS:w6-look == */

/* == OTS:w6sug == */
/* Wave 6c: tabs in add.html and the list suggestion form (add.html#list). */
.add-views { margin: 4px 0 16px; }
.add-views a { text-decoration: none; }
.sug-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sug-rules { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; cursor: pointer; }
.sug-rules input { width: auto; margin-top: 3px; flex: none; }
@media (max-width: 600px) {
  .add-views { display: flex; }
  .add-views a { flex: 1 1 0; text-align: center; white-space: normal; }
}
/* == /OTS:w6sug == */

/* == OTS:w6bot == */
/* Suspicious (artificially inflated) player count: a small grey "?" with a hint. */
.players-suspect {
  display: inline-block;
  min-width: 1.15em;
  height: 1.15em;
  line-height: 1.15em;
  margin-left: 4px;
  border-radius: 50%;
  background: #e4e4e4;
  color: #666;
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  cursor: help;
}
.now-big .players-suspect { font-size: 15px; margin-left: 8px; }
.now-suspect {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f4f4f4;
  color: #555;
  font-size: 0.9em;
  line-height: 1.4;
}
/* == /OTS:w6bot == */

/* == OTS:w6spam == */
/* Reviews: "Voted" badge and the sentence about points under the server page buttons (wave 6, anti-spam). */
.rv-voted { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.vote-hint { flex-basis: 100%; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); text-align: right; }
@media (max-width: 620px) { .vote-hint { text-align: left; } }
/* == /OTS:w6spam == */

/* == OTS:w6g-ads-390 == */
/* Ads panel on a phone: the order header (code, title, 3 labels)
   did not fit in 390 px and widened the page. Labels wrap. */
#ads-list .srv-name-line { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
#ads-list .srv-name-line strong { min-width: 0; overflow-wrap: anywhere; }
#ads-list .srv-name-line .pvp-tag { white-space: nowrap; }
/* == /OTS:w6g-ads-390 == */

/* ===== FALA 8: motyw Tibia ===== */
/* OTS gets its own look in the style of the Tibia client: dark stone and wood
   around the page, parchment under the text, gold and bronze in frames, red accents.
   MC has a separate theme (mc-status, block "FALA 8: motyw Minecraft").

   Rule: classes and HTML layout unchanged. First the variables from two
   layers above are overridden (:root at the top of the file and the --ots-* layer), then
   places with hard-coded colours (#fff, light blues) are fixed.

   Contrast (WCAG AA, min. 4.5:1 for text): text #2a1d10 on parchment
   #f4ead2 about 14:1, muted #5b4631 about 7:1, links #6b3f12 about 8:1,
   addresses #8f2a12 about 8:1, gold text #f0d493 on the dark bar #2d251d about 11:1.

   Heading font: system serif (Georgia, Palatino), nothing downloaded
   from Google Fonts. Table text stays sans-serif (Tahoma),
   because at 12 px it is more readable. */

:root {
  color-scheme: light;

  /* stone and wood */
  --tb-stone-1: #4a4038;
  --tb-stone-2: #2d251d;
  --tb-stone-3: #1a140e;
  --tb-wood-1: #6a4522;
  --tb-wood-2: #3d2612;
  /* gold and bronze */
  --tb-gold: #d9a531;
  --tb-gold-hi: #f0d493;
  --tb-gold-dark: #8a6212;
  --tb-bronze: #6b3f12;
  /* pergamin */
  --tb-parch: #f4ead2;
  --tb-parch-hi: #fbf5e6;
  --tb-parch-lo: #eadcb8;
  --tb-parch-line: #c9ad78;
  /* red */
  --tb-red: #8f2a12;
  --tb-red-hi: #b8361a;
  --font-head: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;

  --ots-blue: var(--tb-bronze);
  --ots-blue-dark: #3a2410;
  --ots-blue-soft: #efdcaa;
  --ots-line: #b99a66;
  --ots-row-line: #e0cfa8;
  --ots-orange: var(--tb-red);
  --ots-orange-hi: var(--tb-red-hi);
  --ots-promo: #ffe680;
  --ots-promo-line: #e0b440;
  --ots-page: var(--tb-stone-3);
  --ots-frame: var(--tb-parch);
  --ots-text: #3a2410;

  --bg: var(--tb-parch);
  --bg-grad-1: var(--tb-parch-lo);
  --bg-grad-2: var(--tb-parch-hi);
  --bg-soft: var(--tb-parch-hi);
  --bg-card: var(--tb-parch-hi);
  --bg-card-2: var(--tb-parch-hi);
  --stripe: rgba(107, 63, 18, .045);
  --line: var(--ots-line);
  --line-soft: #e6d6b0;
  --text: #2a1d10;
  --text-dim: #5b4631;
  --accent: var(--tb-bronze);
  --accent-2: #8a5a22;
  --accent-soft: rgba(107, 63, 18, .12);
  --good: #2e7a2f;
  --warn: #9a5c00;
  --bad: #b3261e;
}

/* ---------- page background: tiled dungeon (assets/bg.js) on dark stone ---------- */

body {
  background: var(--tb-stone-3) linear-gradient(180deg, #0f0b08 0, #221a13 280px, #1a140e 100%) no-repeat;
  color: var(--text);
}

#bg { opacity: .9; }

h1, h2, h3,
.panel h2,
.homebox-title,
.brand-text,
.foot-head { font-family: var(--font-head); }

a { color: var(--tb-bronze); }
a:hover { color: var(--tb-red-hi); }

/* Parchment: page frame like a page from a book, light texture from gradients. */
main.wrap {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 252, 240, .7), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 105, 45, .13), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(150, 105, 45, .08), transparent 45%),
    var(--tb-parch);
  border-left: 2px solid #5a4630;
  border-right: 2px solid #5a4630;
  box-shadow: inset 0 0 0 1px #d8c08a, 0 0 24px rgba(0, 0, 0, .55);
}

/* ---------- header: stone wall, gold text ---------- */

.head-top {
  background: #0f0b08;
  color: #d9c49a;
  border-bottom: 1px solid #3a2c1d;
}

.head-top .lang-opt { color: #ecdcb4; }
.head-top .lang-opt:hover { background: rgba(240, 212, 147, .14); color: #fff6dc; }
.head-top .lang-opt.is-on { background: rgba(217, 165, 49, .32); color: #fff6dc; box-shadow: inset 0 0 0 1px rgba(240, 212, 147, .5); }

.head-inner {
  background-color: var(--tb-stone-2);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, var(--tb-stone-1) 0%, var(--tb-stone-2) 100%);
  border-left: 2px solid #5a4630;
  border-right: 2px solid #5a4630;
  border-top: 1px solid #6b5a45;
}

.brand,
.brand:hover { color: var(--tb-gold-hi); text-shadow: 0 1px 0 #000, 0 0 8px rgba(217, 165, 49, .35); }

.head-search input[type="search"] {
  background: var(--tb-parch-hi);
  border-color: var(--tb-gold-dark);
  color: var(--text);
}

.head-adv,
.head-adv:hover { color: var(--tb-gold-hi); }

/* Menu bar: a wooden beam with gold trims. */
.head-menu {
  background: linear-gradient(180deg, var(--tb-wood-1) 0%, #4e3118 55%, var(--tb-wood-2) 100%);
  border-top: 1px solid var(--tb-gold-dark);
  border-bottom: 2px solid var(--tb-gold-dark);
  box-shadow: inset 0 1px 0 rgba(240, 212, 147, .25);
}

.head-nav .btn,
.head-nav summary.btn {
  color: #f6e4b4;
  border-right-color: rgba(0, 0, 0, .35);
  box-shadow: inset -1px 0 0 rgba(240, 212, 147, .12);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

.head-nav .btn:hover,
.head-nav summary.btn:hover { background: rgba(240, 212, 147, .12); color: #fff6dc; }

.head-nav a.is-here,
.head-nav summary.is-here {
  background: rgba(0, 0, 0, .3);
  color: #fff6dc;
  box-shadow: inset 0 -3px 0 var(--tb-gold);
}

.head-nav .btn-primary {
  background: linear-gradient(180deg, #a8391a 0%, var(--tb-red) 60%, #6a1d0b 100%);
  color: #ffe9b0;
}
.head-nav .btn-primary:hover { background: linear-gradient(180deg, #c2461f 0%, var(--tb-red-hi) 100%); color: #fff6dc; }

.nav-more-list { background: var(--tb-parch-hi); border-color: #5a4630; }
.nav-more-list a:hover { background: var(--tb-parch-lo); }

/* ---------- windows like in the Tibia client: frame, title bar ---------- */

.panel,
.homebox,
.table-scroll,
.upcoming-table,
.stat-grid,
.srv-header {
  border: 1px solid #5a4630;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 225, .7), 0 1px 2px rgba(58, 36, 16, .25);
}

.panel,
.stat-tile,
.info-card,
.rank-row,
.srv-row,
.table-scroll,
.card {
  background: var(--tb-parch-hi);
}

.panel h2 { color: var(--tb-red); }

.homebox { background: linear-gradient(180deg, var(--tb-parch-hi) 0%, #f3e7c8 100%); }

/* Window title bar: dark stone with a bevel and gold text. */
.homebox-title,
.upcoming-table caption {
  background: linear-gradient(180deg, #5a4d41 0%, var(--tb-stone-2) 100%);
  color: var(--tb-gold-hi);
  border-bottom: 1px solid #120d09;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(0, 0, 0, .4);
  text-shadow: 0 1px 0 #000;
  letter-spacing: .03em;
}

.hero { border-bottom-color: var(--tb-parch-line); }
.hero h1,
.home-intro h1,
.cat-page h1 { color: var(--tb-red); }

/* Decorative gold line under the home page header. */
.home-intro h1::after {
  content: "";
  display: block;
  width: 140px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--tb-gold), rgba(217, 165, 49, 0));
}

/* ---------- client-style buttons ---------- */

.btn {
  background: linear-gradient(180deg, #f6ebcc 0%, #e2cf9e 100%);
  border: 1px solid #7a6038;
  color: #2a1d10;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), inset -1px -1px 0 rgba(90, 60, 20, .25);
}
.btn:hover { border-color: var(--tb-red); background: linear-gradient(180deg, #fbf2d8 0%, #ead9ad 100%); color: #2a1d10; }
.btn:active { box-shadow: inset 1px 1px 2px rgba(60, 40, 10, .35); }

.btn-primary {
  background: linear-gradient(180deg, #a8391a 0%, var(--tb-red) 55%, #6a1d0b 100%);
  border-color: #4a1206;
  color: #ffefc4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  box-shadow: inset 1px 1px 0 rgba(255, 220, 160, .3), inset -1px -1px 0 rgba(0, 0, 0, .35);
}
.btn-primary:hover { background: linear-gradient(180deg, #c2461f 0%, var(--tb-red-hi) 100%); border-color: #4a1206; color: #fff6dc; }

.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-dim); }
.btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.btn-ghost.is-active { background: var(--accent-soft); color: var(--tb-red); }

.btn-danger { color: var(--bad); }

/* Tabs like folders: the active one merges with the parchment below. */
.tab-bar { border-bottom-color: #7a6038; }
.tab-bar .btn {
  background: linear-gradient(180deg, #eadcb6 0%, #dcc795 100%);
  border-color: #7a6038;
  color: var(--tb-bronze);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5);
}
.tab-bar .btn.is-active {
  background: var(--tb-parch);
  color: var(--tb-red);
  border-bottom-color: var(--tb-parch);
}
.tab-bar-sm .btn { background: #efe3c4; }

.page-btn { background: var(--tb-parch-hi); border-color: var(--tb-bronze); color: var(--tb-bronze); }
.page-btn:hover:not(:disabled),
.page-btn.is-active { background: var(--tb-bronze); border-color: var(--tb-bronze); color: #fff6dc; }

/* ---------- form fields ---------- */

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  background: #fffaf0;
  border-color: #a88a58;
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--tb-red);
  box-shadow: 0 0 0 3px rgba(143, 42, 18, .15);
}

/* ---------- server table ---------- */

.list-table thead th,
.srv-table thead th {
  background: linear-gradient(180deg, #5a4d41 0%, var(--tb-stone-2) 100%);
  color: var(--tb-gold-hi);
  border-bottom: 1px solid #120d09;
  text-shadow: 0 1px 0 #000;
}

.list-table thead button:hover,
.srv-table thead .sort-btn:hover { color: #fff6dc; }
.list-table thead button.is-sorted,
.srv-table thead button.is-sorted,
.srv-table thead .sort-btn.is-sorted { color: #ffcf5a; }

.list-table tbody tr { border-bottom-color: var(--ots-row-line); }
.list-table tbody tr:hover,
.srv-table tbody tr:hover { background: #ecdcae; }

/* Featured (ad a1): saturated gold row, red-gold bar on the left
   and a star. The parchment is beige, so yellow still stands out clearly. */
.list-table tbody tr.is-promoted {
  background: linear-gradient(90deg, #ffd84d 0%, var(--ots-promo) 35%, var(--ots-promo) 100%);
  border-bottom-color: var(--ots-promo-line);
}
.list-table tbody tr.is-promoted:hover { background: #ffe066; }
.list-table tbody tr.is-promoted td:first-child { box-shadow: inset 4px 0 0 var(--tb-red-hi); }
.list-table tbody tr.is-promoted .srv-name { color: #4a2f00; }

.list-table tbody tr.is-off { color: #6e5a44; }
.list-table tbody tr.is-off .srv-addr { color: #8a5a44; }

.list-table .col-flag .flag-svg { box-shadow: 0 0 0 1px #5a4630; }

.srv-out {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7' fill='none' stroke='%236b3f12' stroke-width='1.3'/%3E%3Cpath d='M7 1.5h3.5V5M10.5 1.5 5.5 6.5' fill='none' stroke='%238f2a12' stroke-width='1.3'/%3E%3C/svg%3E");
}

.list-table .col-uptime.is-low { color: #9a5c00; }

.upcoming-table tbody tr { background: var(--ots-promo); }
.upcoming-table .upcoming-time { color: #2a1d10; }

/* ---------- server page ---------- */

.srv-header { background: linear-gradient(180deg, var(--tb-parch-hi) 0%, #efe2c0 100%); }
.srv-header.is-promoted {
  border-color: var(--tb-gold-dark);
  box-shadow: inset 4px 0 0 var(--tb-red-hi), inset 0 0 0 1px rgba(255, 248, 225, .7);
  background: linear-gradient(90deg, #ffefa8 0%, var(--tb-parch-hi) 60%);
}

.stat-tile { border-color: var(--ots-line); }
.kv dt { background: #efe3c4; }
.rv-reply { background: #efe5cc; border-left-color: var(--tb-bronze); }
.up-track,
.day-cell,
.rv-hist-track { background: #e6d9b8; border-color: #cdb888; }
.claim-sample { background: #efe5cc; }
.claim-token,
.import-source,
.ic-row,
.field label.watch-event { background: var(--tb-parch-hi); }

/* ---------- chips, dropdowns, messages ---------- */

.home-cats a,
.home-cats a.cat-chip,
.cat-link,
.cat-drop > summary {
  background: var(--tb-parch-hi);
  border-color: #a88a58;
  color: var(--ots-text);
}

.home-cats a.cat-chip:hover,
.cat-link:hover,
.cat-drop > summary:hover,
.cat-drop[open] > summary {
  background: #efdfb8;
  border-color: var(--tb-bronze);
  color: var(--tb-bronze);
}

.cat-link.is-active { background: var(--tb-bronze); border-color: var(--tb-bronze); color: #fff6dc; }

.cat-drop-menu { background: var(--tb-parch-hi); border-color: #5a4630; }
.cat-drop-menu a.cat-chip:hover { background: #efdfb8; color: var(--tb-red); }

.mode-count,
.cat-chip-count,
.cat-link-count { background: #efdcaa; color: var(--tb-bronze); }

.notice {
  border-color: #c9a86a;
  border-left-color: var(--tb-bronze);
  background: #fbf1d6;
  color: var(--ots-text);
}
.notice-more { background: var(--tb-parch-hi); }

.toast { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }

.lang-switch { background: var(--tb-parch-hi); border-color: #a88a58; }
.lang-opt.is-on { background: var(--tb-bronze); color: #fff6dc; }

/* ---------- footer: dark wood, gold links ---------- */

.site-foot {
  background: linear-gradient(180deg, #33231a 0%, #1f160f 100%);
  border: 2px solid #5a4630;
  border-top: 2px solid var(--tb-gold-dark);
  color: #e9d9b0;
}

.site-foot p,
.foot-inner.foot-grid > p,
.foot-inner.foot-slim > p { color: #e9d9b0; }
.foot-inner.foot-grid > p { border-top-color: #5a4630; }

.foot-col .foot-head { color: var(--tb-gold-hi); border-bottom-color: var(--tb-gold-dark); }

.foot-nav a,
.foot-nav.foot-cols a,
.foot-nav.foot-row a { color: #f0c870; }
.foot-nav a:hover,
.foot-nav.foot-cols a:hover,
.foot-nav.foot-row a:hover { color: #fff1c9; }
.foot-nav.foot-cols a[aria-current="page"],
.foot-nav.foot-row a[aria-current="page"] { color: #fff6dc; }
.foot-nav a.foot-sub::before { color: #b59c6a; }

/* ---------- admin panel: the same parchment, no decorations in content ---------- */

#authlog-list th { background: #efe3c4; color: var(--text-dim); }
#authlog-list th,
#authlog-list td { border-bottom-color: var(--ots-row-line); }

/* Language switch with four languages on a phone: flags only
   (the abbreviation is hidden by the rule above at <= 560 px), so the bar does not stick out. */
@media (max-width: 420px) {
  .head-top .lang-opt { padding: 2px 5px; }
  .head-top .lang-switch { gap: 2px; }
}
/* ===== /FALA 8: motyw Tibia ===== */

/* ===== FALA 8 REKLAMY: trzy czesci, promocje, panel cennika ===== */
.ad-place-featured { border-top: 3px solid #d4a017; }
.ad-place-featured .ad-place-tag { color: #b8860b; }
.ad-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .ad-parts { grid-template-columns: 1fr; } }
.ad-part {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line, #ccc); border-radius: 8px; background: var(--panel, #fff);
  color: inherit; font: inherit; cursor: pointer;
}
.ad-part:hover { border-color: var(--ots-orange, var(--accent)); }
.ad-part.is-active { border-color: var(--ots-orange, var(--accent)); box-shadow: 0 0 0 2px var(--ots-orange, var(--accent)) inset; }
.ad-part.is-off, .ad-part:disabled { opacity: .5; cursor: not-allowed; }
/* Highlight on the list is only for servers: the other kinds stay visible but faded and not
   clickable (assets/ads.js setPlace), the same as in mc-status. Without this rule the disabled
   buttons looked exactly like the active ones. */
#ad-kinds .btn:disabled,
#ad-kinds .btn:disabled:hover { opacity: .45; cursor: not-allowed; background: #efe3c4; color: var(--text-dim); border-color: #7a6038; }
.ad-part-desc { font-size: 12px; color: var(--text-dim); }
.ad-part-from { font-size: 13px; font-weight: 700; }
.ad-price-old { color: var(--text-dim); font-weight: 400; font-size: .85em; }
.ad-price.is-promo { border-color: var(--bad, #c0392b); }
.ad-promo {
  margin: 6px 0; padding: 6px 10px; border-radius: 6px; font-size: 13px;
  background: rgba(192, 57, 43, .1); border: 1px dashed var(--bad, #c0392b);
}
.ad-promo-pct { font-weight: 700; color: var(--bad, #c0392b); }
.ad-promo-until { color: var(--text-dim); font-size: 12px; }
.ad-promo-row input { text-transform: uppercase; }
.ad-terms { white-space: normal; font-size: 13px; margin: 6px 0 10px; align-items: flex-start; }
.ad-terms input { margin-top: 3px; }
.ad-price-now { font-size: 14px; }
.ad-item.is-free .ad-price-old { font-size: .9em; }
.ad-item.is-free .ad-promo-tag { display: block; font-size: 11px; font-weight: 700; color: var(--bad, #c0392b); }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pr-grid .panel { margin: 0; }
.pr-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.pr-row input { width: 90px; }
.pr-src { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: rgba(0, 0, 0, .07); color: var(--text-dim); }
.pr-src.is-panel { background: rgba(31, 157, 85, .15); color: var(--good); }
.pr-tpl { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pr-promo { border: 1px solid var(--line, #ccc); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.pr-promo.is-running { border-color: var(--good); }
/* Ad vouchers in the Pricing tab: generated codes and the list. */
.pr-voucher-codes { width: 100%; font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.pr-voucher-filters { margin: 6px 0; }
.pr-voucher-table td.mono { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
/* ===== /FALA 8 REKLAMY ===== */

/* ===== FALA 8b: MOTD i sygnatury ===== */
/* MOTD: text from OT servers is often Polish, Portuguese, Spanish, with emoji and symbols.
   Theme fonts (Georgia/Palatino/Tahoma) lack many of these characters, hence a list with spares
   (the same in MC, agreed with MC-MOTD). */
.motd-text,
.motd-item .motd-text,
html[data-theme] .motd-text,
body .motd-text {
  font-family: "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Noto Sans", "Noto Sans Symbols 2", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-style: normal;
  letter-spacing: normal;
  font-variant-ligatures: none;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: normal;
}
.motd-item { max-width: 100%; box-sizing: border-box; }
.motd-date { font-variant-numeric: tabular-nums; }

/* Signatures: nothing may stick out sideways on a phone. */
.sig-list, .sig-box { min-width: 0; max-width: 100%; box-sizing: border-box; }
.sig-box .sig-img,
.sig-box img {
  max-width: 100%;
  height: auto;
}
.sig-head { flex-wrap: wrap; min-width: 0; }
.sig-row { min-width: 0; }
.sig-row input,
.sig-row textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono, ui-monospace, Consolas, "Courier New", monospace);
  font-size: 12px;
  letter-spacing: 0;
}
.sig-row .btn { flex: none; white-space: nowrap; }
.sig-label, .sig-head { font-family: inherit; }

@media (max-width: 560px) {
  .sig-box { padding: 10px; }
  .sig-row { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; }
  .sig-label { width: 100%; }
  .sig-row input { flex: 1 1 0; }
  .motd-item { padding: 8px 10px; }
  .motd-text { font-size: 13.5px; }
}
/* ===== /FALA 8b: MOTD i sygnatury ===== */