/*
 * Soulbound Armoury — public styles.
 *
 * Style kit (BUILD.md): black #212129 surfaces, bright green #6FFF6B accents,
 * white text, Steam blue #71B9EF reserved for Steam UI only (unused here).
 * Orbitron 700 display / Space Grotesk 400 body, both already loaded by the
 * site's Elementor kit — referenced by family name, never bundled.
 *
 * Flat and sharp on purpose: no border radius, no blur, no translucent panels.
 */

.sb-armoury {
	--sb-bg: #212129;
	--sb-surface: #212129;
	--sb-surface-2: #191920;
	--sb-accent: #6FFF6B;
	--sb-text: #FFFFFF;
	--sb-muted: #A8A8B4;
	--sb-line: rgba(111, 255, 107, 0.2);

	background: var(--sb-bg);
	color: var(--sb-text);
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	padding: 2.5rem 1.25rem 4rem;
	margin: 0;
}

/* The theme's content wrapper can be narrow; keep the armoury full-bleed inside it. */
.sb-armoury * {
	box-sizing: border-box;
}

.sb-armoury > * {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Typography ---------- */

.sb-h1,
.sb-h2,
.sb-h3 {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	color: var(--sb-text);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
}

.sb-h1 {
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	line-height: 1.05;
}

.sb-h1--character {
	/* Player-chosen names can be long and unspaced. */
	overflow-wrap: anywhere;
	text-transform: none;
	letter-spacing: 0.02em;
}

.sb-h2 {
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.sb-h3 {
	font-size: 0.875rem;
	color: var(--sb-accent);
	margin-bottom: 0.75rem;
}

.sb-lede {
	color: var(--sb-muted);
	max-width: 52ch;
	margin: 0.75rem 0 0;
}

.sb-note {
	color: var(--sb-muted);
	font-size: 0.8125rem;
	margin-top: 2rem;
}

.sb-empty {
	color: var(--sb-muted);
	margin: 0;
}

.sb-link {
	color: var(--sb-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--sb-line);
}

.sb-link:hover,
.sb-link:focus {
	border-bottom-color: var(--sb-accent);
}

.sb-page-head {
	margin-bottom: 2rem;
}

/* ---------- Buttons ---------- */

.sb-btn {
	display: inline-block;
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-text);
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	border-radius: 0;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
}

.sb-btn:hover,
.sb-btn:focus {
	border-color: var(--sb-accent);
	color: var(--sb-accent);
}

.sb-btn.is-active,
.sb-btn--primary {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: #212129;
}

/* ---------- Search ---------- */

.sb-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	border: 1px solid var(--sb-line);
	background: var(--sb-surface-2);
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.sb-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 14rem;
}

.sb-search__label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sb-accent);
}

.sb-search input[type="search"],
.sb-search select {
	background: var(--sb-bg);
	color: var(--sb-text);
	border: 1px solid var(--sb-line);
	border-radius: 0;
	padding: 0.6rem 0.7rem;
	font-family: inherit;
	font-size: 0.9375rem;
	width: 100%;
	min-height: 2.75rem;
}

.sb-search input[type="search"]:focus,
.sb-search select:focus {
	outline: 2px solid var(--sb-accent);
	outline-offset: 1px;
}

.sb-results-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
}

.sb-results-count {
	margin: 0;
	color: var(--sb-muted);
	font-size: 0.875rem;
}

/* ---------- Result grid ---------- */

.sb-grid {
	list-style: none;
	/* `auto` keeps the grid in the same centred 1120px column as the heading and
	   search bar: this shorthand comes after `.sb-armoury > *` at equal
	   specificity, so a plain `margin: 0` would reset those auto side margins
	   and leave the block hugging the container's left padding edge. */
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}

.sb-card {
	margin: 0;
}

.sb-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	padding: 1rem;
	text-decoration: none;
	color: var(--sb-text);
}

.sb-card__link:hover,
.sb-card__link:focus {
	border-color: var(--sb-accent);
}

.sb-card__art {
	display: block;
	background: var(--sb-bg);
	border: 1px solid var(--sb-line);
	padding: 0.5rem;
	text-align: center;
}

.sb-card__portrait,
.sb-silhouette {
	display: block;
	margin: 0 auto;
	image-rendering: pixelated;
}

/* Roughly double the old size. `height: auto` is load-bearing: the portrait is
   one square sheet frame, and the previous fixed 96x128 stretched it vertically.
   The intrinsic width/height attributes carry the real aspect ratio. */
.sb-card__portrait {
	width: 192px;
	max-width: 100%;
	height: auto;
}

/* The placeholder SVG has its own 3:4 viewBox, so it keeps explicit sizes. */
.sb-silhouette {
	width: 144px;
	height: 192px;
	max-width: 100%;
}

.sb-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.sb-card__name {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.sb-card__level {
	color: var(--sb-accent);
	font-size: 0.8125rem;
}

/* ---------- Badges ---------- */

.sb-badge {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--sb-line);
	color: var(--sb-accent);
	align-self: flex-start;
}

.sb-badge--count {
	color: #212129;
	background: var(--sb-accent);
	border-color: var(--sb-accent);
}

/* ---------- Pagination ---------- */

.sb-pager {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

.sb-pager__status {
	color: var(--sb-muted);
	font-size: 0.8125rem;
}

/* ---------- Panels ---------- */

.sb-panel {
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.sb-empty-state__title {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

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

.sb-crumbs {
	font-size: 0.8125rem;
	color: var(--sb-muted);
	margin-bottom: 1rem;
	display: flex;
	gap: 0.5rem;
}

.sb-page-head--character {
	margin-bottom: 1.5rem;
}

.sb-identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
}

.sb-identity__level {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	color: var(--sb-accent);
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.sb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	color: var(--sb-muted);
	font-size: 0.8125rem;
	margin: 0.5rem 0 0;
}

/* ---------- Paper doll ---------- */

.sb-paperdoll__layout {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem;
	align-items: start;
}

.sb-paperdoll__stage {
	display: flex;
	justify-content: center;
	/* A grid item floors its track at its own min-content width, and the viewer
	   reserves a box of frame x scale (384px today). Without this the track — and
	   with it the whole panel — blows past a phone viewport rather than letting
	   the viewer shrink into it. */
	min-width: 0;
}

.sb-slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sb-slots--wide {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.sb-slot {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var(--sb-bg);
	border: 1px solid var(--sb-line);
	padding: 0.6rem 0.7rem;
	min-height: 3.25rem;
}

.sb-slot--empty {
	border-color: rgba(255, 255, 255, 0.08);
}

.sb-slot__label {
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-slot__item {
	font-size: 0.875rem;
	color: var(--sb-text);
	overflow-wrap: anywhere;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sb-slot--empty .sb-slot__item {
	color: var(--sb-muted);
}

/* The item's own in-game icon, native 16px drawn at an exact 2x on a
   nearest-neighbour grid. The --none variant keeps the box (so names stay
   aligned down a column) and draws nothing: an item with no exported icon
   falls back to the text-only slot this panel had before icons existed. */
.sb-slot__icon {
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

.sb-slot__icon--none {
	visibility: hidden;
}

.sb-slot__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A slot with a tooltip is a real <button>, so the browser gives it keyboard
   focus and Enter/Space for free. Everything visual is inherited from the li;
   the button only has to stop being a button. */
.sb-slot--tip {
	padding: 0;
}

.sb-slot__trigger {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	width: 100%;
	margin: 0;
	padding: 0.6rem 0.7rem;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: help;
}

.sb-slot__trigger:hover,
.sb-slot__trigger[aria-expanded="true"] {
	background: var(--sb-surface-2);
}

.sb-slot__trigger:focus-visible {
	outline: 2px solid var(--sb-accent);
	outline-offset: -2px;
}

.sb-slot-group {
	margin-top: 1.75rem;
}

/* ---------- Gear tooltip ---------- */
/*
 * Mirrors the client's own gear tooltip (GuiGearTooltip.gml) in content and
 * order — see pipeline/ITEM_ASSETS_NOTES.md. It is appended to <body> rather
 * than to the slot, so it cannot inherit the armoury's custom properties and
 * carries literal colours instead.
 *
 * The rarity pairing the client uses (name in color_primary on a color_secondary
 * box) contrasts at 1.02-1.44:1, which a pixel font with an outline carries and
 * web text does not. The name keeps color_primary; the box drops to #0B0B0E,
 * where every rarity clears 3:1 at this size. color_secondary stays on as the
 * name row's bottom rule, where contrast does not apply.
 */

.sb-tip {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: max-content;
	max-width: min(280px, calc(100vw - 16px));
	background: #191920;
	border: 1px solid #373737;
	padding: 0;
	color: #FCFCFC;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.75rem;
	line-height: 1.45;
	text-align: left;
	pointer-events: none;
	box-sizing: border-box;
}

.sb-tip[hidden] {
	display: none;
}

.sb-tip * {
	box-sizing: border-box;
}

/* 1. Name — GuiGearTooltip.gml:11-38 */
.sb-tip__name {
	background: #0B0B0E;
	border-bottom: 2px solid transparent;
	padding: 0.5rem 0.6rem;
	font-family: "Orbitron", "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

/* 2. "<Rarity> <Type>" + bind + level, icon in the right column — :40-77 */
.sb-tip__info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem 0.35rem;
}

.sb-tip__info-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sb-tip__type {
	/* The client draws this line at alpha 0.57 (:64). */
	opacity: 0.57;
	overflow-wrap: anywhere;
}

.sb-tip__bind {
	color: #5B5B5B;
}

.sb-tip__level {
	color: #FCFCFC;
}

.sb-tip__icon {
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

/* 3/4. Primary then secondary stat blocks — :79-135 */
.sb-tip__stats {
	display: flex;
	flex-direction: column;
	padding: 0.35rem 0.6rem 0;
}

.sb-tip__stats-head {
	color: #FCFCFC;
	font-weight: 700;
	margin-bottom: 0.1rem;
}

.sb-tip__stat {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.3rem;
	overflow-wrap: anywhere;
}

/* col_stat_primary / col_stat_secondary, GuiGearTooltip.gml:6-7, with the
   value colours from :477-479. */
.sb-tip__stats--primary .sb-tip__stat-value {
	color: #D3D3D3;
}

.sb-tip__stats--primary .sb-tip__stat-name {
	color: #558FDD;
}

.sb-tip__stats--secondary .sb-tip__stat-value {
	color: #B3B5E9;
}

.sb-tip__stats--secondary .sb-tip__stat-name {
	color: #8789BE;
}

/* A tagged or described stat — GuiItemTooltipBase.gml:135-139. */
.sb-tip__stat--special .sb-tip__stat-note {
	color: #DF9042;
}

.sb-tip__tag {
	font-weight: 700;
}

/* 5. Divider — :137-147 */
.sb-tip__rule {
	height: 1px;
	background: #373737;
	margin: 0.5rem 0;
}

/* 6. Description — :165-172 */
.sb-tip__desc {
	display: block;
	padding: 0 0.6rem;
	color: #8A8A8A; /* :168 draws #686868; lifted to clear 4.5:1 on #191920. */
	overflow-wrap: anywhere;
}

/* 7. Skill requirements — :174-198 */
.sb-tip__reqs {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.6rem 0;
}

.sb-tip__reqs-head {
	color: #B58C40; /* :178 draws #8B6730; lifted for contrast on #191920. */
}

.sb-tip__req {
	color: #75FB4C; /* :191, the "requirement met" colour — the only one a public
	                   page can know, since it has no viewer skill levels. */
}

/* 8. Sell value — :200-225 */
.sb-tip__economy {
	display: flex;
	gap: 0.3rem;
	margin: 0.6rem 0 0;
	padding: 0.35rem 0.6rem;
	background: #42352A;
}

.sb-tip__sell-label {
	color: #DDAE55; /* :213 draws #B58C40; lifted for contrast on #42352A. */
}

.sb-tip__sell-value {
	color: #FCFCFC;
}

/* Last block in the panel should not leave a bare edge. */
.sb-tip > .sb-tip__desc:last-child,
.sb-tip > .sb-tip__reqs:last-child,
.sb-tip > .sb-tip__stats:last-child {
	padding-bottom: 0.6rem;
}

.sb-tip > .sb-tip__rule:last-child {
	display: none;
}

/* ---------- Viewer ---------- */

.sb-viewer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	/* Takes its width from its container rather than from the artwork, so the
	   reserved box below has a definite length to measure its max-width against
	   and can shrink instead of pushing the page wider. */
	width: 100%;
}

.sb-viewer__stage {
	position: relative;
	background: var(--sb-bg);
	border: 1px solid var(--sb-line);
	padding: 1rem;
	min-width: 208px;
	min-height: 272px;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/* The stage takes focus so the left/right arrow keys can rotate the facing. */
.sb-viewer__stage:focus {
	outline: 2px solid var(--sb-accent);
	outline-offset: 2px;
}

/* Holds the canvas and the pre-script fallback, so the flanking arrows sit
   either side of the artwork rather than either side of the whole stack. */
.sb-viewer__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

/* PHP reads the bundle's meta.json, so it already knows the baked frame size and
   reserves the final box here — an inline width of frameW x data-scale plus an
   aspect-ratio. The canvas and the pre-script fallback then both FILL that one
   box, which is what makes first paint the final size: nothing is waiting on
   meta.json or sheet.png to find out how big the artwork is. */
.sb-viewer__frame--sized > .sb-viewer__canvas {
	width: 100%;
	height: 100%;
}

.sb-viewer__frame--sized > .sb-viewer__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-viewer__frame--sized .sb-viewer__portrait,
.sb-viewer__frame--sized .sb-silhouette {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Rotation arrows. Same flat kit as .sb-btn, narrower, and deliberately not in
   Orbitron — it has no glyph for the triangles. */
.sb-btn--arrow {
	flex: 0 0 auto;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	padding: 0.7rem 0.55rem;
}

.sb-viewer__canvas {
	display: none;
	image-rendering: pixelated;
	/* -moz-crisp-edges keeps older Firefox from smoothing the upscale. */
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.sb-viewer.is-ready .sb-viewer__canvas {
	display: block;
}

.sb-viewer.is-ready .sb-viewer__fallback {
	display: none;
}

.sb-viewer__portrait,
.sb-viewer--empty .sb-silhouette {
	width: 96px;
	height: 128px;
	image-rendering: pixelated;
}

.sb-viewer__controls {
	display: flex;
	gap: 0.5rem;
	/* Three buttons now (Idle / Run / Export GIF), so let them wrap on a phone. */
	flex-wrap: wrap;
	justify-content: center;
}

.sb-viewer--empty {
	background: var(--sb-bg);
	border: 1px solid var(--sb-line);
	padding: 1.5rem;
}

.sb-viewer__note {
	color: var(--sb-muted);
	font-size: 0.75rem;
	margin: 0.75rem 0 0;
	text-align: center;
}

/* ---------- Columns ---------- */

.sb-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

.sb-columns > .sb-panel {
	margin-bottom: 0;
}

/* ---------- Skills ---------- */

.sb-skills,
.sb-achievements {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sb-skill {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	align-items: center;
	gap: 0.3rem 0.75rem;
}

/* The icon the game draws for the skill, at native 15-16px scaled up on a
   nearest-neighbour grid. The empty variant is a spacer, not a box: a skill with
   no exported icon keeps its column alignment and draws nothing. */
.sb-skill__icon {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

.sb-skill__icon--none {
	visibility: hidden;
}

.sb-skill__name {
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.sb-skill__level {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--sb-accent);
}

.sb-skill__bar {
	grid-column: 1 / -1;
	display: block;
	height: 6px;
	background: #101014;
	border: 1px solid var(--sb-line);
}

.sb-skill__fill {
	display: block;
	height: 100%;
	background: var(--sb-accent);
}

/* ---------- Achievements ---------- */

.sb-achievement {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 0.5rem;
}

.sb-achievement__name {
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.sb-achievement__date {
	color: var(--sb-muted);
	font-size: 0.75rem;
	white-space: nowrap;
}

/* The collapsed line for achievements the catalogue can no longer name. */
.sb-achievement--older {
	border-bottom: 0;
	color: var(--sb-muted);
}

.sb-achievement--older .sb-achievement__name {
	color: var(--sb-muted);
}

.sb-achievement--older .sb-achievement__date {
	font-style: italic;
	white-space: normal;
}

/* ---------- Panel stat (achievement points) ---------- */

.sb-stat {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: -0.25rem 0 1.1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--sb-line);
}

.sb-stat__value {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sb-accent);
}

.sb-stat__label {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

/* ---------- Mobile: viewer stacks above the panels ---------- */

@media (max-width: 767px) {
	.sb-armoury {
		padding: 1.75rem 1rem 3rem;
	}

	.sb-paperdoll__layout {
		grid-template-columns: 1fr;
	}

	/* Viewer first, then the slot columns. */
	.sb-paperdoll__stage {
		order: -1;
	}

	.sb-slots--left,
	.sb-slots--right {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}

	/* The canvas is sized in JS (frame width × scale) and can exceed a phone
	   viewport; without these caps its intrinsic width stretches the grid track
	   and every panel clips off the right edge. */
	.sb-paperdoll__stage,
	.sb-paperdoll__stage canvas {
		max-width: 100%;
	}

	.sb-slot {
		min-width: 0;
	}

	.sb-slot__item {
		overflow-wrap: anywhere;
	}

	.sb-columns {
		grid-template-columns: 1fr;
	}

	.sb-results-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.sb-search__field {
		flex-basis: 100%;
	}

	.sb-achievement {
		flex-direction: column;
		gap: 0.15rem;
	}
}

/* ---------- wp-admin (only the couple of classes the dashboard uses) ---------- */

.sb-admin-hidden {
	color: #b32d2e;
	font-weight: 600;
}

/* ==========================================================================
   Scoreboard
   Flat sharp panels, same kit as the rest of the Armoury. No glass.
   ========================================================================== */

/* --- dungeon picker (the /armoury/scoreboard/ hub) --- */

/* Jump links, one per difficulty. Reuses the board filter chip. */
.sb-tier-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 auto 2rem;
}

.sb-tier {
	margin: 0 auto 2.25rem;
	/* The header is a jump target, so keep it clear of any sticky site chrome. */
	scroll-margin-top: 1.5rem;
}

.sb-tier__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px solid var(--sb-line);
}

.sb-tier__name {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sb-accent);
	margin: 0;
}

/* The ladder, drawn once per section: filled pips = how deep the storm is. */
.sb-tier__meter {
	display: flex;
	gap: 3px;
}

.sb-tier__pip {
	width: 16px;
	height: 6px;
	background: var(--sb-line);
}

.sb-tier__pip--on {
	background: var(--sb-accent);
}

.sb-tier__step {
	color: var(--sb-muted);
	font-size: 0.8rem;
}

.sb-tier__count {
	color: var(--sb-muted);
	font-size: 0.8rem;
	margin-left: auto;
}

.sb-dungeon-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	width: 100%;
}

.sb-dungeon-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	color: var(--sb-text);
	text-decoration: none;
	height: 100%;
}

.sb-dungeon-card__link:hover,
.sb-dungeon-card__link:focus-visible {
	border-color: var(--sb-accent);
}

.sb-dungeon-card__name {
	font-family: "Orbitron", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}

.sb-dungeon-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-dungeon-card__rooms {
	color: var(--sb-muted);
	font-size: 0.8rem;
}

.sb-tag {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--sb-line);
	color: var(--sb-muted);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.sb-tag--tier {
	border-color: var(--sb-accent);
	color: var(--sb-accent);
}

/* --- filters --- */

.sb-board-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin: 0 auto 20px;
}

.sb-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-chip {
	display: inline-block;
	padding: 6px 14px;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	color: var(--sb-muted);
	font-size: 0.8rem;
	text-decoration: none;
	white-space: nowrap;
}

.sb-chip:hover,
.sb-chip:focus-visible {
	border-color: var(--sb-accent);
	color: var(--sb-accent);
}

.sb-chip--on {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: #212129;
	font-weight: 700;
}

.sb-crumb {
	margin: 0 0 6px;
	font-size: 0.8rem;
}

/* --- the table itself --- */

/* Wide content scrolls inside its own box; the page must never scroll sideways. */
.sb-board-wrap {
	width: 100%;
	overflow-x: auto;
}

.sb-board {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	text-align: left;
}

.sb-board thead th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--sb-line);
	color: var(--sb-muted);
	font-family: "Orbitron", sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.sb-board tbody td {
	padding: 6px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	vertical-align: middle;
}

.sb-board tbody tr:hover {
	background: rgba(111, 255, 107, 0.06);
}

.sb-board__rank {
	width: 1%;
	white-space: nowrap;
	color: var(--sb-muted);
	font-variant-numeric: tabular-nums;
}

.sb-board__score {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.sb-board__lvl,
.sb-board__rooms,
.sb-board__server {
	white-space: nowrap;
	color: var(--sb-muted);
	font-variant-numeric: tabular-nums;
}

.sb-board__win {
	color: var(--sb-accent);
}

.sb-board__who-inner {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sb-board__head {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sb-board__headimg {
	width: 44px;
	height: 44px;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
}

.sb-board__head-blank {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.07) 55%, transparent 55%);
}

.sb-board__name {
	color: var(--sb-text);
	overflow-wrap: anywhere;
}

.sb-board__name--link {
	color: var(--sb-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sb-board__name--link:hover,
.sb-board__name--link:focus-visible {
	border-bottom-color: var(--sb-accent);
}

/* Top three get the accent, weighted so #1 reads first. */
.sb-board__row--top .sb-board__rank {
	color: var(--sb-accent);
	font-weight: 700;
}

.sb-board__row--top1 .sb-board__head {
	border-color: var(--sb-accent);
}

/* --- dungeon records panel on a character page --- */

.sb-panel--dungeons {
	margin-top: 20px;
}

.sb-panel__count {
	color: var(--sb-muted);
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 8px;
}

@media (max-width: 600px) {
	.sb-board {
		font-size: 0.82rem;
	}

	.sb-board__head,
	.sb-board__headimg {
		width: 34px;
		height: 34px;
	}

	/* Too narrow to push the count to the far edge; let it sit in the flow. */
	.sb-tier__count {
		margin-left: 0;
	}
}

/* Rank cells: position on top, denominator beneath in muted type. */
.sb-rank__n {
	display: block;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
}

.sb-rank__of {
	display: block;
	color: var(--sb-muted);
	font-size: 0.7rem;
	line-height: 1.2;
	white-space: nowrap;
}

.sb-board__rank--global .sb-rank__n {
	color: var(--sb-accent);
}

.sb-board--records .sb-board__rank {
	text-align: left;
}

/* --- trophy strip: global top-ten placings, above the viewer --- */

.sb-trophies {
	margin: 0 auto 1.5rem;
}

.sb-trophies__title {
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sb-muted);
	margin: 0 0 8px;
}

.sb-trophies__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sb-trophy {
	/* Five across on a wide page, but never so narrow that a long dungeon name
	   has nowhere to wrap; the strip drops to fewer per row instead. */
	flex: 1 1 190px;
	max-width: 260px;
	min-width: 0;
}

.sb-trophy__link {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 8px 12px;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-line);
	color: var(--sb-text);
	text-decoration: none;
}

a.sb-trophy__link:hover,
a.sb-trophy__link:focus-visible {
	border-color: var(--sb-accent);
}

.sb-trophy__rank {
	flex: 0 0 auto;
	font-family: "Orbitron", "Space Grotesk", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--sb-text);
	font-variant-numeric: tabular-nums;
}

.sb-trophy__body {
	min-width: 0;
}

.sb-trophy__name {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--sb-text);
	overflow-wrap: anywhere;
}

.sb-trophy__meta {
	display: block;
	font-size: 0.7rem;
	line-height: 1.4;
	color: var(--sb-muted);
	white-space: nowrap;
}

/* The podium in the accent; first place also takes the border. */
.sb-trophy--top .sb-trophy__rank {
	color: var(--sb-accent);
}

.sb-trophy--1 .sb-trophy__link {
	border-color: var(--sb-accent);
}

@media (max-width: 480px) {
	/* One per row rather than two squeezed ones: at 360px a two-up strip leaves
	   about 12 characters of dungeon name per card. */
	.sb-trophy {
		flex-basis: 100%;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   Specificity guard.

   The chips, the breadcrumb and the player names are all <a> elements, and the
   theme colours anchors with a selector that outranks a bare single class. That
   turned active chips green-on-green and inactive chips theme-blue. Scoping each
   rule under .sb-armoury takes the win back without resorting to !important.
   --------------------------------------------------------------------------- */

.sb-armoury a.sb-chip {
	color: var(--sb-muted);
}

.sb-armoury a.sb-chip:hover,
.sb-armoury a.sb-chip:focus-visible {
	color: var(--sb-accent);
}

.sb-armoury a.sb-chip--on,
.sb-armoury a.sb-chip--on:hover,
.sb-armoury a.sb-chip--on:focus-visible {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: #212129;
}

.sb-armoury a.sb-board__name--link {
	color: var(--sb-accent);
}

.sb-armoury .sb-crumb a.sb-link,
.sb-armoury .sb-board--records a.sb-link {
	color: var(--sb-accent);
}

.sb-armoury a.sb-dungeon-card__link {
	color: var(--sb-text);
}

.sb-armoury a.sb-dungeon-card__link .sb-dungeon-card__rooms {
	color: var(--sb-muted);
}

.sb-armoury a.sb-trophy__link {
	color: var(--sb-text);
}

/* The trophy eyebrow is an <h2> for document structure, but it is a small label,
   not a section heading. The Elementor kit sizes headings via `.elementor-kit-6 h2`
   — specificity (0,1,1), which outranks a bare `.sb-trophies__title` — and blew it
   up to full heading size on the live page. Restate it above that weight. */
.sb-armoury h2.sb-trophies__title {
	font-size: 0.7rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: var(--sb-muted);
	margin: 0 0 8px;
}