/* ==========================================================================
   Highscores.

   ONE of the site's parchment tables (parchment.css, loaded before this
   sheet): the caption names the board, the first row is the navigation, the
   champion plaque and the Tibia ranking table follow, the pager is the last
   row. Rebuilt 2026-09-08 into the idiom docs/site-style-guide.md records —
   the same tables the Compendium and the Map use. What this page keeps from
   the 2026-09-03 build, because the owner chose it then: one navigation line
   with the families never named, both choosers at the far right, the eight
   skills as a select, the champion as rank 1's band instead of a first row,
   no podium, no "characters ranked" strip, no board title in the content.

   Two site-wide constraints:
   1. mobile.css forces 13px on every #ContentColumn div/span/a/p and
      width:auto/height:auto on every img, all !important. The media block at
      the foot disarms that inside .hs-shell and restates only what changes.
   2. basic.css's :focus { outline: dotted 1px } fires on mouse click; the
      mouse case is switched off and a gold ring drawn for the keyboard.
   ========================================================================== */

.hs-shell {
	--hs-ink: #33280f;
	--hs-muted: #7a6a4c;
	--hs-line: #d8c49a;
	--hs-gold: #9c7c43;
	--hs-paper-2: #f2e6cb;

	position: relative; margin: 0; padding: 0 2px;
	color: var(--hs-ink);
	font-family: Verdana, Arial, sans-serif;
}
.hs-shell *, .hs-shell *::before, .hs-shell *::after { box-sizing: border-box; }
.hs-shell h2, .hs-shell p { margin-top: 0; }
.hs-shell :focus:not(:focus-visible) { outline: none; }
.hs-shell :focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }
.hs-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────
   ONE row of the table:

     • Experience   Achievements   Ledger   Loyalty ....... [ Skills v ] [ Voc v ]

   The boards you go to by name are Tibia list links — bold, link blue — and
   the open one is brown behind the theme's gold bullet, the way every list on
   this site marks the current entry. The two choosers are parchment keys, the
   only pressable-looking things in the row, because they are controls. */
.hs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; }
.hs-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.hs-nav-links a {
	display: inline-block; padding: 3px 8px 3px 20px;
	color: #004294 !important; font-size: 10pt; font-weight: bold; line-height: 18px;
	text-decoration: none !important; white-space: nowrap;
}
.hs-nav-links a:hover { color: #0063DC !important; text-decoration: underline !important; }
.hs-nav-links a.is-current {
	color: #5A2800 !important; text-decoration: none !important; cursor: default;
	background: url(images/global/content/bullet.gif) no-repeat 4px center;
}

.hs-nav-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* `appearance: none` is the whole point: a native select renders as the OS
   widget — grey, square, and obviously not part of this theme. Stripping it
   lets the control take the parchment-and-gold key, with its own caret drawn
   as an inline SVG so no extra asset is needed. */
.hs-nav-select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	max-width: 100%; height: 28px; padding: 0 22px 0 9px;
	border: 1px solid #a8873a;
	background-color: #f3e6c6;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%235A2800'/%3E%3C/svg%3E"),
	                  linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	background-repeat: no-repeat, repeat;
	background-position: right 7px center, 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(90, 66, 26, .12), 0 1px 1px rgba(90, 66, 26, .22);
	color: #5A2800; font-size: 9pt; font-weight: bold; font-family: inherit; cursor: pointer;
}
.hs-nav-select:hover { border-color: #8a6f33; }
.hs-nav-select option { background: #fdf8ec; color: #5A2800; font-weight: normal; }
.hs-nav-select option:checked { background: #e8d9b4; font-weight: bold; }
/* A skill board is "current" through the select, so the control wears the
   pressed gold key rather than looking unselected. */
.hs-nav-select.is-current {
	border-color: #8a6f33; color: #4a3410;
	background-color: #e8c257;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%234a3410'/%3E%3C/svg%3E"),
	                  linear-gradient(to bottom, #d9b34e, #f7e08c);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .35);
}

/* ── Champion ────────────────────────────────────────────────────────────
   Rank 1, once. The banner IS the first row rather than a copy of it — the
   table below starts at rank 2 on page one.

   THE PLAQUE is the Achievement showcase's frame, reused rather than
   reinvented: a black outline, a gold bevel and a parchment face inset into
   it. Every value below is copied from
   plugins/backpackot-achievements/character_section.html.twig — which in turn
   took it from the Loyalty Programme's bar — so the three places this server
   says "look at this one" are one house style. If that plaque is ever
   retuned, retune this with it. */
.hs-champ {
	padding: 3px;
	border-top: 1px solid #000; border-bottom: 1px solid #000;
	background: #d0941c;
	background: linear-gradient(to bottom, #fcf55c, #d0941c);
}
.hs-champ-face {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 8px 12px;
	border: 1px solid #8a6f33;
	background: #f6ecd2;
	background: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);
}

/* THE PORTRAIT. Every number here is measured off the imager, not guessed.
   The imager returns a 64x64 GIF but the character sits in its bottom-right
   corner (x29-63 / y31-63), so the sprite is enlarged exactly 2x (an integer
   factor keeps pixel art crisp) and the empty top-left is cropped away by the
   window: the art's centre (46, 47) at 2x is (92, 94), and window/2 - centre
   gives -44 / -46. */
.hs-champ-portrait {
	position: relative; overflow: hidden;
	flex: 0 0 auto; width: 96px; height: 96px;
	background: #efe6cc; border: 1px solid #8a6f33;
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);
}
.hs-champ-portrait img {
	position: absolute; left: -44px; top: -46px;
	width: 128px; height: 128px;
	image-rendering: pixelated; image-rendering: crisp-edges;
}
.hs-champ-copy { flex: 1 1 160px; min-width: 0; }
.hs-champ-eyebrow { display: block; font-style: normal; font-size: 9px; line-height: 12px; color: #8a7047; letter-spacing: 1px; }
/* The lit gold of the plaque: an eight-way dark outline, not a drop shadow.
   Identical to .ach-name and to the loyalty day-count, which is the point. */
.hs-champ-name, .hs-champ-points {
	color: #f7c927;
	text-shadow: -1px -1px 0 #4a3410, 0 -1px 0 #4a3410, 1px -1px 0 #4a3410, 1px 0 0 #4a3410,
	             1px 1px 0 #4a3410, 0 1px 0 #4a3410, -1px 1px 0 #4a3410, -1px 0 0 #4a3410;
}
.hs-champ-name { display: block; font-size: 19px; line-height: 24px; font-weight: bold; }
.hs-champ-name a { color: #f7c927 !important; text-decoration: none !important; }
.hs-champ-name a:hover { text-decoration: underline !important; }
.hs-champ-sub { display: block; margin-top: 4px; font-style: normal; font-size: 11px; line-height: 15px; color: #6b5b41; }
.hs-champ-detail { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; color: #6b5b41; }
.hs-champ-score { flex: 0 0 auto; margin-left: auto; padding-left: 12px; text-align: right; }
.hs-champ-points { display: block; font-size: 26px; line-height: 28px; font-weight: bold; }
.hs-champ-pointscap { display: block; font-style: normal; font-size: 9px; line-height: 11px; color: #8a7047; letter-spacing: .5px; text-transform: uppercase; }

/* ── Board ───────────────────────────────────────────────────────────────
   THE ROWS ARE THE ORIGINAL TIBIA TABLE, deliberately and exactly: the
   theme's #505050 header (`.Content th`), darkborder #D4C0A1 and lightborder
   #F1E0C6 alternating, links in the content-link blue. `border-spacing: 1px`
   reproduces the old cellspacing="1" so the parchment shows between cells.
   A real table, because this is tabular data. */
.hs-board { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 1px 0 0; }
.hs-table { width: 100%; border-collapse: separate; border-spacing: 1px; }
.hs-table th { padding: 4px 8px; background: #505050; color: #fff; font-size: 10pt; font-weight: bold; text-align: left; white-space: nowrap; }
.hs-table td { padding: 4px 8px; color: #5A2800; font-size: 10pt; vertical-align: middle; }
.hs-table tbody tr:nth-child(odd) td { background: #D4C0A1; }
.hs-table tbody tr:nth-child(even) td { background: #F1E0C6; }
.hs-num { text-align: right; white-space: nowrap; }
.hs-rank { width: 46px; }
.hs-who { min-width: 150px; }
.hs-who a { color: #004294 !important; font-weight: bold; font-size: 10pt; text-decoration: none !important; }
.hs-who a:hover { color: #0063DC !important; text-decoration: underline !important; }
.hs-who small { display: block; color: #6a5a3f; font-size: 8pt; }
.hs-flag { margin-right: 5px; vertical-align: middle; }
.hs-primary { font-weight: bold; }
.hs-primary small { display: block; color: #6a5a3f; font-size: 8pt; font-weight: normal; }
.hs-empty { padding: 28px 16px; margin: 0; color: #5A2800; font-size: 10pt; text-align: center; }

/* ── Pager ───────────────────────────────────────────────────────────── */
.hs-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 10px; color: var(--hs-muted); font-size: 10px; }
.hs-pager a { color: #004294 !important; font-size: 11px; font-weight: bold; white-space: nowrap; }
.hs-pager-gap { flex: 0 0 auto; width: 60px; }

/* ── Mobile ──────────────────────────────────────────────────────────────
   The first two rules disarm the mobile layer inside this shell; everything
   after them is ordinary CSS again. */
@media (max-width: 760px) {
	#ContentColumn .hs-shell * { font-size: inherit !important; line-height: inherit !important; }
	#ContentColumn .hs-shell { font-size: 12px !important; line-height: 1.4 !important; }
	/* The portrait is a deliberate 2x upscale cropped by its window; the
	   blanket img rule would snap it to 64px and show the empty corner. */
	#ContentColumn .hs-champ-portrait img { width: 128px !important; height: 128px !important; max-width: none !important; max-height: none !important; }
	#ContentColumn .hs-nav-links a { font-size: 13px !important; line-height: 20px !important; }
	#ContentColumn .hs-pager { font-size: 11px !important; }
	/* 16px stops iOS zooming the viewport when a select is focused. */
	#ContentColumn .hs-nav-select { font-size: 16px !important; }
	#ContentColumn .hs-champ-eyebrow, #ContentColumn .hs-champ-pointscap { font-size: 9px !important; }
	#ContentColumn .hs-champ-name, #ContentColumn .hs-champ-name a { font-size: 18px !important; }
	#ContentColumn .hs-champ-sub, #ContentColumn .hs-champ-detail { font-size: 11px !important; }
	#ContentColumn .hs-champ-points { font-size: 24px !important; }
	#ContentColumn .hs-table th, #ContentColumn .hs-table td, #ContentColumn .hs-who a { font-size: 13px !important; }
	#ContentColumn .hs-who small, #ContentColumn .hs-primary small { font-size: 11px !important; }

	/* The links wrap as a run; the two choosers share the next line. */
	.hs-nav { gap: 6px; padding: 6px; }
	.hs-nav-links a { padding: 6px 8px 6px 20px; }
	.hs-nav-controls { flex: 1 1 100%; margin-left: 0; }
	.hs-nav-controls .hs-nav-select { flex: 1 1 0; min-width: 0; height: 36px; }
	.hs-table th, .hs-table td { padding: 6px 7px; }
}
@media (max-width: 560px) {
	.hs-champ { gap: 9px; padding: 3px; }
	.hs-champ-face { padding: 8px; }
	.hs-champ-score { padding-left: 6px; }
	/* Level and the secondary column go first: the sort key and who holds it
	   are what the board is for. */
	.hs-table .hs-drop { display: none; }
	.hs-rank { width: 34px; }
	.hs-who { min-width: 0; }
	.hs-champ-copy { flex: 1 1 130px; }
	.hs-champ-score { padding-left: 0; }
}