/* fixed vertical metrics: the file's hhea / typo metrics disagree, so Chrome and Firefox placed the text at different heights;
   these center capitals in the line box in every browser (cap height 70%: 95% - 70% = 25%), lines stay 1.2em at line-height normal */

/* ====================================================================== */
/* Font                                                                   */
/* ====================================================================== */

@font-face {
	font-family: "Nocturne";
	src: url("../images/NocturneSerif-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
}

/* ====================================================================== */
/* Design tokens (colors, glows, viewport unit)                           */
/* ====================================================================== */

:root {
	--heat: 46, 160, 90;
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	--bg: url(../images/tileBg2.png) #05171b;
	--bgT: url(../images/tileBg3.png);
	--fg: #ecebf3;
	--mut: #acaab9;
	--card: #173f408e;
	--card2: #15282e;
	--line: #383d38;
	--line2: #313f4180;
	--hi: #1d3b2e86;
	--sel: #3d3f3385;
	--text: #ffe8c4;
	--acc: #ffe8c4;
	--boxLine: #484e44;
	--thickShadow:
		-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
		-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	--glow: 0 0 2px #cab99d, 0 0 5px #cab99d, 0 0 10px #cab99d, 0 0 20px #cab99d;
	--smallGlow: 0 0 2px #cab99d, 0 0 4px #cab99d, 0 0 5px #cab99d;
	--glowBox: drop-shadow(0 0 2px #e0c18fed);
	--minW: 800px;
	--vw: calc(max(100vw, var(--minW)) / 100);
}

/* ====================================================================== */
/* Base: links, scrollbars, html / body                                   */
/* ====================================================================== */

a.pk:hover {
	text-shadow: var(--glow);
}

.sizer {
	min-width: var(--minW);
}

* {
	scrollbar-color: #8a7f6c transparent;
	scrollbar-width: thin;
}

html {
	scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
	font-family: "Nocturne", serif;
	margin: 0;
	color: var(--text);
	text-shadow:
		-1px -1px 0 #0000007a,
		1px -1px 0 #0000007a,
		-1px 1px 0 #0000007a,
		1px 1px 0 #0000007a;
	background-color: black;
	font-size: 15px;
	line-height: 130%;
}
@media (pointer: coarse) {
	body {
		height: 2000px;
	}
}

.tn > img {
	width: 38px;
	margin: -8px;
	margin-right: 0;
	margin-bottom: 0px;
}

/* ====================================================================== */
/* Typography & text helpers                                              */
/* ====================================================================== */

h1 {
	font-size: 1.2em;
	line-height: 130%;
	font-weight: normal;
	margin: 0;
	margin-left: 1em;
	margin-bottom: 4px;
}

.idForge {
	width: 100%;
	font-size: 14px;
}
.idForge th,
.idForge td {
	padding: 2px 6px;
	border-color: var(--line2);
}
.idForge td.idUp {
	color: #9fe0a0;
}
.idForge tr.idCur {
	background: var(--sel);
}
.idForge .l {
	text-align: left;
	white-space: normal;
}

small {
	white-space: pre-line;
	font-size: 90%;
	line-height: 130%;
}

p.m,
small,
.idText {
	color: var(--mut);
}

p.m {
	margin: 0 0 10px;
	display: none;
}

/* ====================================================================== */
/* Page layout: card grid, character card                                 */
/* ====================================================================== */

.grid2 {
	width: calc(30.1 * var(--vw));
	display: inline-block;
	flex-shrink: 0;
	max-height: 100%;
	padding-right: 10px;
	box-sizing: border-box;
	padding-left: calc(1 * var(--vw));
}

.grid2 > *:first-child {
	padding-bottom: 0;
}

.card {
	padding: 10px 8px;
}

.card.pc .row {
	position: relative;
	z-index: 2;
}

.card .bt {
	padding: calc(0.4 * var(--vw)) calc(0.8 * var(--vw));
}

/* ====================================================================== */
/* Form controls & tables                                                 */
/* ====================================================================== */

select,
input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}
[hidden] {
	display: none !important;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border: 1px solid var(--line);
	padding: 4px 8px;
	text-align: center;
	white-space: nowrap;
}

.movText {
	color: #c1b197;
	font-size: 0.9em;
	display: inline-block;
	margin-right: 0.5em;
}

/* ====================================================================== */
/* Character sheet: growth table, spider chart, recruit list              */
/* ====================================================================== */

#gt {
	position: absolute;
	left: 7.85%;
	top: calc(22.2 * var(--vw));
	font-size: calc(1.25 * var(--vw));
	line-height: 180%;
	width: auto;
}

#gt td {
	padding: 0;
	border: 0 solid transparent;
	text-align: right;
	white-space: nowrap;
	border-right-width: calc(2.2 * var(--vw));
	border-bottom-width: calc(0.46 * var(--vw));
	box-sizing: content-box;
	width: calc(6.7 * var(--vw));
	cursor: pointer;
}
.spider-chart-container {
	position: absolute;
	left: 24.4%;
	top: calc(22.6 * var(--vw));
	width: 9.35%;
	aspect-ratio: 1 / 1;
	line-height: 0;
}

.lrs .lr {
	width: 2.4em;
}

.recruitContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
}

.recruitContainer > span {
	flex-basis: 17em;
	max-width: calc(33% - 5px);
	margin: 0;
}

td#g-total {
	position: absolute;
	top: calc(-2.7 * var(--vw));
	left: calc(8.9 * var(--vw));
}

div#abil {
	padding-bottom: 0;
}

summary::marker {
	margin-right: 4px;
}

#gt td:empty {
	display: none;
}

td.l {
	text-align: left;
}

td.pl {
	white-space: normal;
	max-width: calc(33vw);
}

td.d {
	color: var(--mut);
}
td.bb {
	background: var(--hi);
}
td select {
	padding: 3px;
	min-width: 80px;
}
.ok {
	color: var(--text);
}

/* ====================================================================== */
/* Skill lists & popup links (.arrowLink, .skItem)                        */
/* ====================================================================== */

.sk {
	margin: 12px 10px;
}
.sk.nr {
	background: rgba(229, 72, 77, 0.16);
	border-color: #e5484d;
	color: #e5484d;
}
.sk.nr .rk {
	color: #e5484d;
}
.sh {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	justify-content: space-between;
}
.sh select {
	width: auto;
	min-width: 90px;
}
select.bb {
	background: var(--hi);
	color: var(--fg);
}

.sk ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.searchIcon {
	display: flex;
	margin-left: auto;
}

.searchIcon svg {
	width: 1em;
	margin-right: 0.5em;
}

.sk li {
	display: flex;
	border-top: 1px solid var(--line);
}

.sk li summary {
	padding: 0.3em 0;
}

/* links to the item popup that stand in for expandable rows: same arrow as a summary */
.arrowLink {
	display: list-item;
	list-style: disclosure-closed inside;
	line-height: 130%;
	color: inherit;
	white-space: normal;
}

small a.arrowLink {
	text-decoration: underline; /* like small details summary */
}
/* a popup link that starts with an icon (a weapon's combat art, the weapons with an art): icon first, then the arrow */
.arrowLink > :is(img, .sw):first-child {
	float: left;
}
/* ...or the icon alone, no arrow (a weapon's combat art in the weapon tables, the weapons with an art) */
.arrowLink.noArrow {
	list-style: none;
}

.pl .skItem.arrowLink .si {
	margin-right: 0;
}

/* a popup link with no icon of its own: an info badge (a circled i, like the rank badges) instead of the arrow */
a.arrowLink:not(:has(img, .sw, .si, .rk)) {
	list-style: none;
	text-decoration-style: dotted; /* where these links are underlined (small text) */
	text-underline-offset: 0.15em;
}
a.arrowLink:not(:has(img, .sw, .si, .rk))::before {
	content: "i";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* the letter at 0.9em; the circle kept at its size (1.0125em of the link text) */
	width: 1.125em;
	height: 1.125em;
	margin-right: 4px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1;
	vertical-align: 0.1em;
	opacity: 0.85;
}
/* stacked info links and location rows: 3px above each one that isn't first (also when each link has a wrapper of its
   own, e.g. <div><a></div><div><a></div>); not the skill-list rows (own padding and dividers) or side-by-side shop links */
.arrowLink:not(:first-child):not(.skItem),
.acqLoc:not(:first-child):not(.acqInline > .acqLoc) {
	padding-top: 3px;
}
/* combat arts and blaze skills in the character's skill lists: the whole row opens the popup */
.sk li a.skItem {
	flex: 1;
	padding: 0.3em 0;
}
.sk li a.skItem > .sw {
	float: left; /* like summary>.sw: icon first, then the arrow */
	margin-right: 4px;
}
/* the combat art / ability icon after the arrow: 1px up, centred on the name */
.sk li a.skItem > img.si {
	vertical-align: text-bottom;
}

.dk img {
	filter: hue-rotate(220deg) contrast(1.5);
}

.dkI {
	filter: hue-rotate(235deg) contrast(1.4) saturate(1.8);
}

.sk li .rk {
	margin-right: 6px;
	margin-left: 2px;
}

.sk li .lrt .rk {
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle;
}

/* ====================================================================== */
/* Icons, rank badges, chips                                              */
/* ====================================================================== */

.rk {
	flex: none;
	position: relative;
	box-sizing: border-box;
	border: 1px solid var(--text);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75em;
	color: var(--text);
	line-height: 1.5em;
	aspect-ratio: 1 / 1;
	height: 1.5em;
}

small .rk b {
	color: #ffe8c4;
}

.mountName {
	white-space: nowrap;
}

.rk:empty {
	visibility: hidden;
	width: 3px;
	border: 0;
}

.rk i {
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 13px;
	height: 13px;
	color: var(--text);
	font-style: normal;
	font-size: 13px;
	line-height: 15px;
	text-align: center;
	font-weight: 700;
}

.ln .rk {
	width: 1.8em;
	height: 1.8em;
	font-size: 10px;
	margin: 0;
}

.skill > *,
.art-skill > *,
.requirementsWrapper > *,
.smallRequirements > * {
	vertical-align: text-bottom;
}

:is(#cmn, #mtb) .pk.tabIc {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
:is(#cmn, #mtb) .pk.tabIc .si {
	height: 1em;
	width: 1em;
	margin: 0;
	object-fit: contain;
	margin-left: -0.3em;
}

.si {
	height: 1.2em;
	width: 1.2em;
	vertical-align: middle;
}

.pl .si,
.arrowLink .si,
.giftContainer .si {
	margin-right: 6px;
}

.ln .si {
	height: 20px;
}

.chp {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 2px 8px 2px 0;
	vertical-align: middle;
}

.sw {
	position: relative;
	flex: none;
	display: inline-flex;
}

.bn {
	position: absolute;
	right: 0px;
	top: 0px;
	background: rgba(0, 0, 0, 0.67);
	color: var(--text);
	font-style: normal;
	font-size: 0.6vw;
	font-weight: 700;
	border-radius: 50%;
	z-index: 1;
	aspect-ratio: 1;
	border: 1px solid var(--text);
	width: 1.67em;
	line-height: 1.67em;
	text-align: center;
}

/* ====================================================================== */
/* Skill list headers (boon / bane)                                       */
/* ====================================================================== */

/* learned skill list header: skill icon (boon / bane) + name */
/* name in spaced small caps, then a line fading out to the right; --hc is the header colour: boon gold (glowing), bane blue,
   neutral the normal text */
.skHead {
	--hc: #d2c6af;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 0 6px;
	margin-bottom: 2px;
}
.skHead .si {
	height: 1.35em;
	width: 1.35em;
}
.skHead b {
	color: var(--hc);
	font-variant: small-caps;
	letter-spacing: 0.08em;
	font-size: 1.08em;
	white-space: nowrap;
}
.skHead::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-left: 4px;
	background: linear-gradient(to right, var(--hc), transparent);
	opacity: 0.45;
}
.skHead.boonH {
	--hc: #e3cf9b;
}
.skHead.boonH b {
	text-shadow:
		0 0 4px rgba(227, 207, 155, 0.4),
		0 0 8px rgba(227, 207, 155, 0.2);
}
.skHead.boonH::after {
	opacity: 0.7;
	box-shadow: 0 0 4px rgba(227, 207, 155, 0.35);
}
.skHead.baneH {
	--hc: #b8c2c8;
}

.idChip .lmItem {
	overflow: visible;
}

.li0 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
}

.sk li {
	align-items: flex-start;
}

.sk li:first-child {
	border-top: 0;
}

.br {
	flex-basis: 100%;
	height: 0;
}

.ds {
	white-space: pre-line;
}

summary {
	line-height: 130%;
	cursor: pointer;
}

small summary {
	line-height: 130%;
}

.lrs .lr {
	margin: 1px 2px;
	vertical-align: middle;
}

.st {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	color: var(--mut);
}
.st b {
	color: var(--fg);
}
.boon,
.bane {
	padding: 1px 8px;
	border-radius: 6px;
	background: #f1efe6;
}
.boon {
	color: #b8860b;
}
.bane {
	color: #1e3a8a;
}

/* ====================================================================== */
/* Rows & ability boxes                                                   */
/* ====================================================================== */

.row {
	padding-left: 10px;
	font-size: max(13px, min(1em, calc(1.25 * var(--vw))));
	line-height: 120%;
}

.row:first-child {
	padding-left: 0;
	font-size: calc(2 * var(--vw));
	line-height: 120%;
}

.row:first-child button {
	text-shadow:
		0 0 2px #cab99d,
		0 0 5px #cab99d,
		0 0 10px #cab99d,
		0 0 20px #cab99d;
}

.row small,
.ab small {
	white-space: pre-line;
	margin-top: 4px;
	display: inline-block;
}
.ab .st {
	margin-top: 0;
}

.ab {
	margin: 8px 0;
}
/* the ability boxes in groups: the character's own, the class's, the mount's */
.abGrp + .abGrp {
	margin-top: 10px;
	padding-top: 2px;
	border-top: 1px solid var(--line2);
}
/* ability icons in the ability boxes (ability, equippable, class mastery / inherent, mount): 4px before the name */
.ab img.si {
	margin-right: 4px;
	vertical-align: text-bottom;
}
/* class inherent abilities: one per line, the description below the name */
.ab .abLine {
	margin-top: 6px;
}
.ab .abLine small {
	margin-top: 2px;
}

/* ====================================================================== */
/* Buttons & modal frame (.pk, .mb, .mh)                                  */
/* ====================================================================== */

.pk {
	box-sizing: border-box;
	padding: 0.4vw 1vw;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 0;
	pointer-events: all;
}

#md {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px;
	box-sizing: border-box;
}

.mountHeader .mi {
	margin: 0 !important;
}

.mb {
	background: #142324;
	background-image: url(../images/listCenter2.png);
	background-position: center center;
	width: 100%;
	max-height: 100%;
	background-size: 100%;
	/*border: 1px solid var(--line);
  border-radius: 12px;*/
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	min-height: 50%;
}

.rcCont svg {
	vertical-align: middle;
}

.mb > * {
	z-index: 1;
	position: relative;
}

.mb:before {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 50%;
	left: 0;
	background-image: url(../images/listTop.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
}

.mb:after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50%;
	left: 0;
	background-image: url(../images/listBottom.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
}

#mtl {
	padding-right: 10px;
}

input[type="search"] {
	max-width: 250px;
	min-width: 150px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.879 119.799' fill='%23757575'%3E%3Cpath d='M49.988,0h0.016v0.007C63.803,0.011,76.298,5.608,85.34,14.652c9.027,9.031,14.619,21.515,14.628,35.303h0.007v0.033v0.04 h-0.007c-0.005,5.557-0.917,10.905-2.594,15.892c-0.281,0.837-0.575,1.641-0.877,2.409v0.007c-1.446,3.66-3.315,7.12-5.547,10.307 l29.082,26.139l0.018,0.016l0.157,0.146l0.011,0.011c1.642,1.563,2.536,3.656,2.649,5.78c0.11,2.1-0.543,4.248-1.979,5.971 l-0.011,0.016l-0.175,0.203l-0.035,0.035l-0.146,0.16l-0.016,0.021c-1.565,1.642-3.654,2.534-5.78,2.646 c-2.097,0.111-4.247-0.54-5.971-1.978l-0.015-0.011l-0.204-0.175l-0.029-0.024L78.761,90.865c-0.88,0.62-1.778,1.209-2.687,1.765 c-1.233,0.755-2.51,1.466-3.813,2.115c-6.699,3.342-14.269,5.222-22.272,5.222v0.007h-0.016v-0.007 c-13.799-0.004-26.296-5.601-35.338-14.645C5.605,76.291,0.016,63.805,0.007,50.021H0v-0.033v-0.016h0.007 c0.004-13.799,5.601-26.296,14.645-35.338C23.683,5.608,36.167,0.016,49.955,0.007V0H49.988L49.988,0z M50.004,11.21v0.007h-0.016 h-0.033V11.21c-10.686,0.007-20.372,4.35-27.384,11.359C15.56,29.578,11.213,39.274,11.21,49.973h0.007v0.016v0.033H11.21 c0.007,10.686,4.347,20.367,11.359,27.381c7.009,7.012,16.705,11.359,27.403,11.361v-0.007h0.016h0.033v0.007 c10.686-0.007,20.368-4.348,27.382-11.359c7.011-7.009,11.358-16.702,11.36-27.4h-0.006v-0.016v-0.033h0.006 c-0.006-10.686-4.35-20.372-11.358-27.384C70.396,15.56,60.703,11.213,50.004,11.21L50.004,11.21z'/%3E%3C/svg%3E");
	background-size: 1em;
	background-position: 0.3em 0.3em;
	background-repeat: no-repeat;
	padding-left: 1.55em !important;
}

.mh {
	/* height of a one-line header: the min-height, or a tab button (#cmn .pk: min 1.8vw, text min(18px, max(14px, 1.1vw)) * 130%,
       0.18vw padding and 2px border top and bottom) plus this padding when that is taller (small screens); the close button uses it */
	--tabH: max(1.8vw, min(18px, max(14px, 1.1vw)) * 1.3 + 0.36vw + 4px);
	--mhLine: max(3.3vw + 1px, var(--tabH) + 0.88vw + 2px);
	display: flex;
	gap: 4px;
	align-items: center;
	min-height: calc(3.3vw + 1px);
	flex-shrink: 0;
	padding-bottom: calc(0.4vw + 2px);
	padding-top: 0.48vw;
	box-sizing: border-box;
	padding-left: 1vw;
	padding-right: 1vw;
	background-image: url(../images/listTop.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	position: relative;
	margin-bottom: -2px;
	z-index: 2;
}

.mh input {
	flex: 1;
}
.mh .pk {
	width: auto;
}

.mountSelectionGrowth {
	width: calc(100% + 8px);
	margin: 0px -4px;
}

.mountSelectionGrowth tr {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
}

.mountSelectionGrowth td {
	border: 0;
	color: var(--text);
}

/* ====================================================================== */
/* Tiles & pickers (.tg, .tile, .im)                                      */
/* ====================================================================== */

.tg {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 6px;
}
.tg.w {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 25em), 1fr));
}

.wrap {
	margin: auto;
	position: relative;
	line-height: 130%;
	flex-grow: 1;
	transform-origin: center top;
	top: 50%;
	transform: translate(0, -50%);
}

.tile {
	padding: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	font-size: 16px;
	line-height: 130%;
}

.tg:not(.w) .tile {
	text-align: center;
	padding: 0;
}

/* character picker: the character's boons in the bottom right of the tile */
.tile .tBoon {
	position: absolute;
	right: 2px;
	bottom: 2px;
	display: flex;
	gap: 1px;
	pointer-events: none;
}
.tile .tBoon .si {
	width: 16px;
	height: 16px;
	margin: 0;
	filter: drop-shadow(0 0 2px #000);
}

.displayNone {
	display: none !important;
}

.tg:not(.w) .tile b {
	position: absolute;
	top: 5px;
	text-shadow: var(--thickShadow);
	width: 100%;
	left: 0;
}

.tile.sel {
	background: var(--sel);
}

.im {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	line-height: 130%;
	font-weight: 700;
	color: var(--mut);
	overflow: hidden;
	margin-top: 10px;
}
.im img,
.im video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.gh {
	margin: 14px 0 6px;
	font-weight: 700;
	color: var(--text);
}
.ln {
	font-size: 14px;
	line-height: 130%;
	margin-top: 3px;
	white-space: pre-line;
	color: var(--mut);
}

.tile > small {
	color: var(--mut);
}

/* ====================================================================== */
/* Portrait card & main section background                                */
/* ====================================================================== */

.pc {
	display: flex;
	align-items: flex-start;
	position: absolute;
	left: 6.38%;
	margin: 0;
	padding: 0;
	top: calc(5.96 * var(--vw));
	width: 27.03%;
	height: calc(13.05 * var(--vw));
	overflow: hidden;
}

.pf {
	flex: 1;
	min-width: 0;
	position: relative;
	height: 100%;
	pointer-events: none;
}
.pt {
	flex: none;
	width: calc(12 * var(--vw));
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 97%;
}
.pt .im {
	margin: 0;
	height: 100%;
	border-radius: 0;
}

#cmc small:has(> details) + br {
	display: none;
}

summary .si {
	margin-right: 4px;
}

div#lt {
	flex-grow: 1;
	padding: 10px 8px;
	box-sizing: border-box;
	gap: 0.5em;
	padding-top: 0;
	max-height: 100%;
}

section {
	padding-left: 35%;
	padding-top: calc(8.7 * var(--vw));
	padding-right: 2.5%;
	padding-bottom: calc(2.2 * var(--vw));
	background: url(../images/background8.webp);
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	aspect-ratio: 1.85567;
	box-sizing: border-box;
}

.tn span:first-child {
	white-space: nowrap;
}

.ds a {
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.ds small {
	margin-top: 5px;
	display: inline-block;
}

.card > .ab:first-child {
	margin-top: 0.3em;
}

/* ====================================================================== */
/* Tab containers & wrappers                                              */
/* ====================================================================== */

.tabContainer,
.gridcontainer {
	padding: 10px;
	padding-left: calc(1 * var(--vw));
	padding-right: calc(1 * var(--vw));
	padding-top: 0;
	position: relative;
	max-height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	width: 100%;
}

.tabContainer,
.gridcontainer > * {
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

.tabContainer > *:first-child {
	padding-top: 0;
	margin-top: 12px;
}

.tabContainer p {
	padding-left: 8px;
	padding-right: 8px;
}

.gridcontainer {
	padding: 0;
	display: flex;
}

.lineCover {
	content: "";
	background-image: url(../images/bgLineCover.png);
	background-size: 100%;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
}

.mainWrapper {
	/*display: flex;*/
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}

.mainWrapper th {
	text-align: left;
}
.mainWrapper th,
.mainWrapper td {
	border-left: 0;
	border-right: 0;
}
.mainWrapper tr:first-of-type th,
.mainWrapper tr:first-of-type td {
	border-top-width: 0;
}
.mainWrapper tr:last-child th,
.mainWrapper tr:last-child td {
	border-bottom-width: 0;
}

/* class picker: allowed-skill icons on the name line, right aligned */
.tn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.tn .al {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-left: auto;
}

.tn .chp {
	margin: 0 0 0 6px;
}

.sks {
	display: flex;
	flex-wrap: wrap;
	padding: calc(0.5 * var(--vw));
	position: absolute;
	bottom: 0;
}

.noVertPadding {
	padding-top: 0;
	padding-bottom: 0;
}

.ski {
	display: inline-flex;
}

.ski.off {
	filter: brightness(0.4);
}

.ski .si {
	height: calc(1.4 * var(--vw));
	width: calc(1.4 * var(--vw));
	padding-right: calc(0.5 * var(--vw));
	padding-top: calc(0.5 * var(--vw));
}

.gm {
	color: #f3cc4b;
}

#tip {
	position: fixed;
	z-index: 20;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

#tip hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 4px 0;
}

td.gm {
	position: relative;
}

td.gm::after {
	content: "";
	position: absolute;
	right: calc(-0.8 * var(--vw));
	top: calc(0.5 * var(--vw));
	width: 0;
	height: 0;
	border-left: calc(0.3 * var(--vw)) solid transparent;
	border-right: calc(0.3 * var(--vw)) solid transparent;
	transform: translateY(-50%);
}

td.gm.up::after {
	border-bottom: 7px solid currentColor;
}

td.gm.dn::after {
	border-top: 7px solid currentColor;
}

.mv {
	position: absolute;
	top: calc(19.7 * var(--vw));
	left: calc(28 * var(--vw));
	text-align: right;
	width: calc(5 * var(--vw));
	font-size: calc(1.25 * var(--vw));
	line-height: 150%;
}

.chp .bn {
	font-size: 10px;
	padding: 1px;
	border-width: 1px;
	right: -5px;
	top: -5px;
}

/* ====================================================================== */
/* Card buttons, .bt buttons, .ci icons                                   */
/* ====================================================================== */

.cardButtons {
	position: absolute;
	display: flex;
	/*border: 2px solid var(--line);*/
	border-radius: 0;
	/*background: var(--bgT);*/
	padding: 0;
	width: 61%;
	top: calc(5.95 * var(--vw));
	z-index: 1;
	justify-content: center;
	left: 34.3%;
	pointer-events: none;
	line-height: calc(2.2 * var(--vw));
	height: calc(2.2 * var(--vw));
	line-height: max(1.4em, calc(2.2 * var(--vw)));
	height: max(1.4em, calc(2.2 * var(--vw)));
	margin-top: min(0px, 2.2 * var(--vw) - 1.4em);
	box-sizing: border-box;
}

.cardButtons > .pk {
	pointer-events: all;
	flex-grow: 1;
	margin-left: 0;
	margin-right: 0;
	font-size: max(15px, calc(1 * var(--vw)));
	flex-basis: 1%;
	white-space: nowrap;
	border-radius: 0;
	background: none;
	/*border: 2px solid transparent;
    margin: -2px;*/
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	padding-left: 0.4em;
	padding-right: 0.4em;
	text-decoration: none;
	border: 1px solid transparent;
}

/* the open tab looks like a .bt button (tiled background, rounded border); border-box, so it keeps its size */
.cardButtons > .pk.open {
	text-shadow: var(--glow);
	background: #60593e5c !important;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.rcPath .rt {
	width: 4em;
	height: 4em;
	background-position: top center;
	background-size: 6em auto;
	cursor: auto;
}

.bt {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--bgT);
	display: inline-block;
}

.skItem .sw {
	vertical-align: text-bottom;
	float: left;
}

.idChip .ci {
	margin-left: 0;
	margin-right: 2px;
}

.sc {
	margin-top: 8px;
}

.bt::before,
.compareButtons > .pk::before {
	content: "";
	display: inline-block;
	margin-right: 8px;
	border-left: 7px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.bt.open::before {
	transform: rotate(90deg);
}

.wrapper {
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: var(--minW);
}

#md input {
	margin-left: auto;
}

.ci {
	height: calc(1.2em + calc(0.8 * var(--vw)));
	width: calc(1.2em + calc(0.8 * var(--vw)));
	object-fit: contain;
	vertical-align: middle;
	margin: calc(-0.4 * var(--vw));
	margin-right: 4px;
}

.ci.mi {
	height: calc(1.2em + calc(0.4 * var(--vw)));
	width: calc(1.2em + calc(0.4 * var(--vw)));
	margin-left: calc(-0.2 * var(--vw));
	margin-right: calc(calc(0.2 * var(--vw)) + 4px);
}

/* compare views (characters, weapons, combat arts and magic) */
.bt.nb::before {
	content: none;
}

.skillContainer {
	float: left;
	vertical-align: middle;
}

.skillContainer > * {
	vertical-align: text-bottom;
}

summary > .si,
summary > .sw {
	float: left;
}

/* the title, and the invisible copy of it on the right of the tabs (#cmn .mTabs::after) that keeps the tabs centered */
.modalTitle,
#cmn .mTabs::after {
	display: flex;
	align-items: center;
	margin: 0 0.5em;
	font-size: min(18px, max(14px, 1.1vw));
	white-space: nowrap;
	pointer-events: none;
}

.skillContainer .si {
	margin-right: 0;
}

/* ====================================================================== */
/* Compare modal (#cmp / #cmc): tables, details, headers                  */
/* ====================================================================== */

#cmp {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px;
	box-sizing: border-box;
}

#cmc,
#mc {
	overflow: auto;
	margin: 0 calc(1 * var(--vw));
	margin-bottom: calc(1 * var(--vw));
}

#mc > *:first-child {
	margin-top: 2px;
}

#cmc td,
#cmc th {
	border-color: var(--line2);
	user-select: none;
}

.maxWidthColumn {
	width: calc(50 * var(--vw));
}

.maxWidthColumn details {
	display: inline-block;
	margin-right: 10px;
	padding: 0;
}

*[data-mt] {
	cursor: pointer;
}

#cmc .sk {
	padding: 0;
  margin: 0;
}

#cmc .sk li a.skItem {
    padding: 0;
}

#cmc .sk li .rk {
	display: none;
}

.modalabilities .growthCol {
	display: none;
}

.abilityColumn {
	width: calc(25 * var(--vw));
}

#cmc li {
	border: 0;
	padding: 1px 0;
}

#cmc details {
	padding: 0;
}

#cmc details:not(:first-child) {
	padding-top: 2px;
}

details {
	width: 100%;
}

details summary {
	width: 100%;
}

small details summary {
	text-decoration: underline;
}

small details summary::marker {
	text-decoration: none;
}

#cmc small:not(:last-child) details:open {
	margin-bottom: 5px;
}

td.eff {
	padding: 0;
}

#cmc details:not(:first-of-type) {
	margin-top: 4px;
}

.eff,
.skill {
	text-align: left;
	white-space: nowrap !important;
}

img.ef {
	height: calc(8px + 1em);
	width: calc(8px + 1em);
	margin-top: 0.2em;
}

.nameField,
.art-name,
.classNameField {
	min-width: 11em;
}

/* the text is centered on the :before box (top 2px, bottom 0.55vw + 2px), the header keeps its height (4px + 0.7vw of padding) */
#cmc th {
	border: 0;
	height: calc(1.5 * var(--vw));
	padding-top: calc(2px + 0.075 * var(--vw));
	padding-bottom: calc(2px + 0.625 * var(--vw));
	position: relative;
	font-weight: normal;
	text-align: center;
	padding-left: 2px;
	padding-right: 2px;
}

#cmc tbody th {
	padding: 4px 8px;
}

#cmc tbody th:not(:empty):before,
#cmc tbody th:not(:first-child):before {
	height: calc(100% - 2px);
	top: 1px;
}

#cmc th:not(:empty):before,
#cmc th:not(:first-child):before {
	content: "";
	position: absolute;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - calc(0.55 * var(--vw)) - 4px);
	border: 2px #39484f solid;
	background-color: #192d34;
	top: 2px;
	box-sizing: border-box;
	z-index: -1;
}

/* ====================================================================== */
/* Modal tabs & header (#cmn): tab buttons, end caps, title, tools        */
/* ====================================================================== */

:is(#cmn, #mtb) .pk,
input[type="search"],
.tile,
.classModal .rc {
	border: 2px #39484f solid;
	background-color: #192d34;
	border-radius: 0;
}

.pk.cn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#cmn .pk.cn.on,
input[type="search"]:focus,
#cmn .pk:hover,
.compareButtons > .pk:hover,
.tile.sel,
.classModal .rc.active {
	background-color: #3b453a;
	border-color: #60593e !important;
	outline: none;
}

#cmn .pk:hover select {
	background-color: #3b453a;
}

/* tabs (and the tab-style links to other views): no box, only the selected one has a background; the side padding leaves room
   for its end caps on every tab, so the tabs don't move when another one is selected */
:is(#cmn, #mtb) a.pk.cn[data-f],
#cmn a.pk.cn[data-view] {
	--capW: calc(var(--tabH) * 18 / 36);
	padding-left: var(--capW);
	padding-right: var(--capW);
	background-color: transparent;
	border-color: transparent;
	color: #d2c6af;
}
/* no glow when selected (.cn.on adds one): the page's normal dark outline; hovered tabs glow */
:is(#cmn, #mtb) a.pk.cn[data-f],
#cmn a.pk.cn[data-view] {
	text-shadow: inherit;
}
:is(#cmn, #mtb) a.pk.cn[data-f]:hover,
#cmn a.pk.cn[data-view]:hover {
	text-shadow: var(--glow);
}
:is(#cmn, #mtb) a.pk.cn.on[data-f] {
	color: #fff4d9;
}

:is(#cmn, #mtb) a.pk.cn[data-f],
:is(#cmn, #mtb) a.pk.cn[data-view] {
	border-color: transparent !important;
	margin: 0 calc(-0.1 * var(--capW));
}

/* selected and hovered tab: buttonLeft end cap, buttonCenter stretched between the caps, the right cap is the left one mirrored
   (::after); the caps scale with the tab height (--tabH on .mh, the images are 20 x 36) and cover the border */
:is(#cmn, #mtb) a.pk.cn.on[data-f],
#sppY {
	position: relative;
	z-index: 0; /* the mirrored cap (z-index -1) stays above this background and below the text */
	border-color: transparent !important;
	background:
		url(../images/buttonLeft.png) left top / var(--capW) 100% no-repeat
			border-box,
		url(../images/buttonCenter.png) center / calc(100% - 2 * var(--capW) + 2px)
			100% no-repeat border-box;
}
:is(#cmn, #mtb) a.pk.cn.on[data-f]::after,
:is(#cmn, #mtb) a.pk.cn[data-f]:hover::after,
#cmn a.pk.cn[data-view]:hover::after,
#sppY::after {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	right: -2px;
	width: var(--capW);
	background: url(../images/buttonLeft.png) 0 0 / 100% 100% no-repeat;
	transform: scaleX(-1);
	z-index: -1;
	pointer-events: none;
}

#cmc thead {
	position: sticky;
	top: 0;
	z-index: 5;
	background: url(../images/headerBG.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	font-size: 16px;
	line-height: 130%;
}

#cmc th.class-skill {
	padding: 4px;
	vertical-align: top;
	padding-top: 8px;
}

#cmn {
	margin: 0 auto 0 0;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	width: 100%;
}

/* the tabs as one item of the header row: as wide as all tabs in a row, so it goes to the next line as a whole when it doesn't
   fit next to the title, and shrinks (wrapping the tabs) only when a whole line is too narrow */
/* title + tabs: title on the left, tabs centered between it and an invisible copy of it on the right (data-title);
   stacked (.stack, set by fitModalHeader when the tabs would wrap): title centered above the tabs */
#cmn .mTabs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "title tabs right";
	align-items: center;
	row-gap: 1px;
	flex: 1 1 auto;
}
#cmn .mTabs .modalTitle {
	grid-area: title;
	justify-self: start;
}
#cmn .mTabList {
	grid-area: tabs;
}
#cmn .mTabs::after {
	grid-area: right;
	content: attr(data-title);
	visibility: hidden;
}
/* weapons: the max forge toggle shares the right column with the title copy (both end columns are 1fr, the tabs stay centered);
   on magic tabs (.mxOff) it keeps its place invisibly there, and is left out when it is with the sort bar and search */
#cmn .mTabs .mxToggle {
	grid-area: right;
	justify-self: end;
}
#cmn .mxToggle.mxOff {
	visibility: hidden;
	pointer-events: none;
}
#cmn .mTools .mxToggle.mxOff {
	display: none;
}
/* title + tabs end the first line (fitModalHeader): the right column also covers the close button's room (its 0.5em margins count) */
#cmn .mTabs.cmxIn::after {
	min-width: calc(var(--mhLine) - 1vw - 1em);
}
#cmn .mTabs.cmxIn .mxToggle {
	margin-right: calc(var(--mhLine) - 1vw);
}
#cmn .mTabList {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	justify-content: center;
}
#cmn .mTabs.stack {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "tabs";
	justify-items: center;
}
#cmn .mTabs.stack .modalTitle {
	justify-self: center;
	/* its middle is the close button's middle: .mh pads 0.48vw at the top, so the row is the button height minus twice that */
	min-height: calc(var(--mhLine) - 0.96vw);
}
#cmn .mTabs.stack::after {
	display: none;
}
/* the group fills the first line by itself (fitModalHeader): room for the close button, on both sides when stacked so it stays centered */
#cmn .cmxPad {
	padding-right: calc(var(--mhLine) - 1vw);
}
#cmn .mTabs.stack.cmxPad {
	padding-left: calc(var(--mhLine) - 1vw);
}

/* (max forge toggle +) sort bar + search: one item of the header row, so they wrap together; natural width, at the right end of
   the line it shares with the tabs, centered on a line of its own (.alone, set by fitModalHeader) */
#cmn .mTools {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex: 0 1 auto;
	margin-left: auto; /* sharing a line with the tabs: at its right end */
	justify-content: center;
	align-self: center; /* next to stacked title + tabs: one row high, not stretched to their height */
}
/* a definite width (min / max 150 - 250px from input[type="search"]): with width auto the group was sized for a narrower box
   than the one it got, which pushed the search onto a second line */
#cmn .mTools input {
	flex: 0 1 auto;
	width: 250px;
}
#cmn .mTools.alone {
	margin: 0 auto;
}

/* room for the close button at the end of the header's first line (placed by fitModalHeader in app.js); the gap before it counts too */
#cmn .cmxSpace {
	flex: 0 0 auto;
	width: max(0px, calc(var(--mhLine) - 1vw - 4px));
	height: 0;
}

.sr {
	cursor: pointer;
}

.smallRequirements:not(:first-child) {
	margin-left: calc(0.3 * var(--vw));
}

.smallRequirements {
	transform: scale(0.8);
	display: inline-block;
	transform-origin: left;
}

/* ====================================================================== */
/* Compare buttons & sort indicators                                      */
/* ====================================================================== */

.compareButtons {
	display: flex;
	position: absolute;
	width: 57%;
	top: calc(2.3 * var(--vw));
	z-index: 1;
	justify-content: center;
	left: 0;
	left: 21.5%;
	pointer-events: none;
}

.compareButtons > .pk {
	margin: 0;
	font-size: max(13.5px, calc(1.1 * var(--vw)));
	padding: 0 calc(0.4 * var(--vw));
	flex-grow: 1;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	background: none;
	text-shadow: var(--glow);
	line-height: calc(2.2 * var(--vw));
	margin-left: -1px;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	position: relative;
}

.compareButtons > .pk:last-child {
	border-right-color: transparent !important;
}
.compareButtons > .pk:first-child {
	border-left-color: transparent !important;
}

.compareButtons > .pk:hover {
	z-index: 1;
}

.compareButtons > .pk:not(:last-child) {
	border-right: 1px solid var(--boxLine);
}

.sr.asc::after,
.sr.desc::after {
	content: "";
	display: inline-block;
	margin-left: 5px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	vertical-align: middle;
	margin-right: -13px;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 0 2px black);
}

.sr.asc::after {
	border-bottom: 6px solid currentColor;
}

.sr.desc::after {
	border-top: 6px solid currentColor;
}

.cn {
	width: auto;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.cn.on {
	background: var(--sel);
	text-shadow: var(--glow);
}

/* ====================================================================== */
/* Compare table cells, recruitment, supports (.rc, .rt, .sg)             */
/* ====================================================================== */

td.cav {
	height: 48px;
	width: 48px;
	min-width: 48px;
	padding: 0;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.mi.off {
	filter: grayscale(1) brightness(0.5);
}

.tn .ci.mi {
	height: 1.2em;
	margin: 0;
	margin-left: 4px;
	margin-top: -1px;
}

a {
	color: inherit;
}

a:hover {
	text-shadow: var(--smallGlow);
}

#cmc .si {
	vertical-align: text-bottom;
}

#cmc td:first-child {
	text-align: left;
}

.class-skillList > div {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 82px;
}

.class-skillList {
	max-width: 107px;
}

#disclaimer {
	pointer-events: none;
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 12px;
	width: 100%;
	text-align: center;
	color: #747680;
}

#disclaimer a {
	pointer-events: all;
}

td.cav[data-ch],
td[data-cl] {
	cursor: pointer;
}

#btp,
#lgp {
	margin-top: 8px;
}

.rg th {
	white-space: nowrap;
}

.rg td {
	text-align: left;
}

.rc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 10px;
	cursor: pointer;
}

.rc.rcPath {
	cursor: auto;
}

.rc.rcPath .rcCont small {
	margin-top: 4px;
}

.rt {
	display: inline-block;
	height: 3em;
	width: 3em;
	background-size: 4.875em auto;
	background-position: -1em top;
	background-repeat: no-repeat;
	border-radius: 6px;
	flex: none;
}

.sg {
	width: auto;
}

.sg th,
.sg td {
	padding: 0;
	min-width: 26px;
	height: 26px;
	text-align: center;
	font-size: 11px;
}

.sgh {
	width: 28px;
	height: 36px;
	background-size: auto 50px;
	background-position: top;
	background-repeat: no-repeat;
	cursor: pointer;
}

.sgr {
	white-space: nowrap;
	text-align: left;
	padding: 0 6px;
	cursor: pointer;
}

.sgr .rt {
	width: 20px;
	height: 24px;
	vertical-align: middle;
	margin-right: 6px;
}

.sgx {
	background: var(--line);
}

a.lr {
	position: relative;
	width: 3em;
	aspect-ratio: 1 / 1;
	display: inline-block;
	vertical-align: middle;
}

a.lr {
	background-size: 180% auto;
	background-position: 45% top;
	background-repeat: no-repeat;
}

a.lr .rk {
	background: rgba(0, 0, 0, 0.67);
	position: absolute;
	right: -6px;
	top: 1px;
	margin: 0;
	z-index: 1;
}

.lic {
	height: 1.3em;
	width: auto;
}

#cmc td {
	white-space: normal;
	border-left: 0;
	border-right: 0;
}

#cmc tbody > tr:first-child td {
	border-top: 0;
}

#cmc tbody > tr:last-child td {
	border-bottom: 0;
}

button#cmx {
	--dim: var(--mhLine);
	height: var(--dim);
	width: var(--dim);
	padding: 0;
	line-height: var(--dim);
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: content-box;
	text-align: center;
}

/* ====================================================================== */
/* Close buttons                                                          */
/* ====================================================================== */

/* close buttons (compare modal, map, picker, item popup): a crimson box with a bronze border and a drawn cross, inset in the
   button so the whole corner stays clickable; on hover it glows and the cross turns (the square looks the same turned) */
#cmx,
#lmx,
#mx,
#idx,
#shx,
#sppX {
	font-size: 0; /* the ✕ text: the cross is drawn below, aria-label names the button */
	color: transparent;
	text-shadow: none;
	background: none;
	border: 0;
}
#cmx::before,
#lmx::before,
#mx::before,
#idx::before,
#shx::before,
#sppX::before {
	content: "";
	position: absolute;
	inset: 22%;
	box-sizing: border-box;
	border: 2px solid #60593e;
	background: #3a1d1d
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23ffe8c4' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")
		center / 62% no-repeat;
	transition:
		transform 0.15s,
		filter 0.15s,
		background-color 0.15s;
	pointer-events: none;
}
#cmx:hover::before,
#lmx:hover::before,
#mx:hover::before,
#idx:hover::before,
#shx:hover::before,
#sppX:hover::before,
#cmx:focus-visible::before,
#lmx:focus-visible::before,
#mx:focus-visible::before,
#idx:focus-visible::before,
#shx:focus-visible::before,
#sppX:focus-visible::before {
	transform: rotate(90deg);
	filter: var(--glowBox);
	background-color: #4d2424;
}
/* the picker's button: a small square in the top right corner, on the first line of the header when it wraps (weapon tabs);
   the header keeps room for it on every line (#md .mh padding) */
#md .mh {
	padding-right: calc(1vw + var(--tabH) + 4px);
}
#mx {
	position: absolute;
	top: calc(0.48vw + (var(--mhLine) - 0.48vw - 0.4vw - 2px - var(--tabH)) / 2);
	right: 1vw;
	width: var(--tabH);
	height: var(--tabH);
	padding: 0;
}
#mx::before {
	inset: 8%;
}
/* small screens: the corner buttons are small (about 28px), so the box fills more of them */
@media screen and (max-width: 700px) {
	#cmx::before,
	#lmx::before,
	#idx::before,
	#shx::before,
	#sppX::before {
		inset: 8%;
	}
}

#cmn:empty {
	display: none;
}

input[type="search"],
:is(#cmn, #mtb) .pk {
	border-color: var(--boxLine);
	padding: 0.18vw 0.6vw;
	font-size: min(18px, max(14px, 1.1vw));
	line-height: 130%;
	white-space: nowrap;
	min-height: 1.8vw;
	text-decoration: none;
}

.rcCont small:last-child {
	display: block;
}

.supportCh {
	background-size: 5em auto;
	background-position: -0.625em top;
	background-repeat: no-repeat;
	height: 2.5em;
	text-align: right;
	vertical-align: top;
	padding: 4px 8px;
	padding-top: 0.5em;
	width: 8em;
	text-shadow: var(--thickShadow);
}

div.supportCh {
	width: 15em;
}

*[data-ch] {
	cursor: pointer;
}

.supportCh a {
	margin-left: 3.5em;
	text-decoration: none;
}

.classModal {
	width: auto;
	margin: 0 auto;
}

.classModal td {
	white-space: normal;
}

.classModal td,
.classModal th {
	border: 0;
	padding: 0;
}

.rcCont {
	position: relative;
	z-index: 0;
}

.tilemt > div:first-of-type {
	margin-top: 15px;
}

small b,
small details:open,
.ln b {
	color: #c3c2ca;
}

.classModal .rcCont {
	position: relative;
	z-index: 1;
	overflow: hidden;
	white-space: nowrap;
	flex-shrink: 1;
	text-align: left;
	text-overflow: ellipsis;
}

.classModal .rc {
	display: flex;
	position: relative;
	padding-left: 0;
	margin-right: 8px;
	margin-bottom: 4px;
	line-height: 2em;
	gap: 4px;
	margin-left: 8px;
	padding-right: 8px;
}

.classModal .ci {
	margin: 0;
	height: 2em;
	width: 2em;
	line-height: 1px;
}

.classListMovement {
	transform: scale(0.55);
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: top left;
	display: flex;
	flex-direction: column;
	height: calc(1.818 * 2em);
	justify-content: space-between;
}

.classListWeaponTypes {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1px;
	transform: scale(0.55);
	transform-origin: top right;
	max-height: calc(1.818 * 2em);
}

.rc[data-v="Commoner"] .classListWeaponTypes,
.rc[data-v="Noble"] .classListWeaponTypes {
	display: none;
}

.classListMovement .si {
	vertical-align: top;
}

.classListMovement > *[data-l="Infantry"] {
	display: none;
}

.classModal td,
.classModal th {
	border: 0;
}

/* ====================================================================== */
/* Site search (.gsSearch)                                                */
/* ====================================================================== */

.gsSearch {
	pointer-events: all;
	left: 4%;
	top: calc(var(--vw) * 2);
	position: absolute;
	z-index: 5;
	width: 14%;
}
.gsSearch input {
	max-width: none;
	min-width: 0;
	width: 100%;
}

/* site search frame: searchboxRepeat tiled across, searchboxRight as the right end and mirrored as the left end (square, as tall as
   the box; the images are opaque, so the ends simply cover the tiles); the input is transparent on top of it */
.gsSearch {
	background: url(../images/searchboxRepeat.png) left center / auto 100%
		repeat-x;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
.gsSearch::before,
.gsSearch::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	aspect-ratio: 1;
	background: url(../images/searchboxRight.png) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.gsSearch::before {
	left: 0;
	transform: scaleX(-1);
}
.gsSearch::after {
	right: 0;
}
.gsSearch #gsi,
.gsSearch #gsi:focus {
	position: relative;
	z-index: 1;
	background-color: transparent;
	border-color: transparent !important;
	/* roomier than the other search boxes; the magnifier moves in with the text, clear of the corner art */
	padding: calc(0.45 * var(--vw)) calc(1.2 * var(--vw));
	padding-left: 2.1em !important;
	background-position: 0.7em center;
}
.gsSearch:focus-within {
	filter: brightness(1.2);
}

#gsr {
	position: absolute;
	top: 100%;
	left: 0;
	width: min(440px, 90vw);
	max-height: min(70vh, 520px);
	margin-top: 4px;
	overflow: auto;
	z-index: 20;
	background: #142324;
	border: 2px solid var(--boxLine);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
	text-align: left;
	text-shadow: none;
}

#gsr .gsClasses {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 6px;
	width: auto;
}

#gsr .gsClasses .rc {
	margin: 0;
	flex: 1 1 160px;
}

#gsr .gsChars {
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	padding: 6px;
}

.classModal th {
	padding-top: 12px;
	padding-bottom: 2px;
}

#cmn .mxToggle::before {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 6px;
	border: 2px solid var(--boxLine);
	background: #0b1416;
	vertical-align: middle;
}

#cmn .mxToggle.on::before {
	border-color: #60593e;
	background: #0b1416
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23ffe8c4' stroke-width='2'/%3E%3C/svg%3E")
		center / 90% no-repeat;
}

#cmc .bn {
	font-size: 10px;
	right: -10px;
	top: -5px;
}

.combatArt {
	min-width: 12em;
}

.mount-abilities {
	width: min(20vw, 300px);
}

.class-growth,
.class-skill {
	padding: 2px;
	font-size: 16px;
}

.class-growth small:not(.tableSv) {
	display: block;
}

#cmc th.class-skill {
	padding: 6px;
	vertical-align: top;
	padding-right: 12px;
}

#cmc th.class-skill .sw {
	line-height: 1.25vw;
	vertical-align: baseline;
}

#cmc th.class-skill img {
	height: 1.25vw;
	margin-right: -6px;
}

.class-requirements {
	text-align: left;
}

.class-requirements > div:first-child {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
}

.class-requirements > small:first-of-type {
	display: block;
	margin-top: 5px;
}

td.characterName a {
	text-decoration: none;
	font-weight: bold;
}
td.characterName {
	text-align: left;
	white-space: nowrap !important;
	padding-top: 0;
	padding-bottom: 0;
}

.rcAllP {
	margin: 0 0 12px; /* at the top of the recruitment tab, above the paths */
	font-size: 16px;
	line-height: 140%;
}
/* a ▶ in front of a button's text (Full recruitment list, Highlight all places) */
.rcArrow {
	display: inline-block; /* the link's underline doesn't carry into an inline block */
	margin-right: 6px;
	font-size: 0.75em;
}
/* the item popup's "Highlight all N locations on map" (a small info link), next to its "How to get" heading */
.idMapAll {
	display: inline-block;
	margin-left: 10px;
	color: var(--text);
}
.idMapAll > a.arrowLink {
	display: inline-block; /* not a list item here: on the heading's line */
}

.grid2 .sk {
	padding-left: 0;
}

.giftList {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: flex-start; /* a button with a note under it (starting equipment) doesn't make the others taller */
	margin-top: 8px;
}

.giftContainer h1:not(:first-child) {
	margin-top: 12px;
}

.giftList > * {
	min-width: 14em;
}
/* an item button with a note (starting equipment's conditions): the button, then the note under it */
.giftItem {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}
.giftItem > small {
	color: var(--mut);
	font-size: 0.8em;
	line-height: 120%;
	padding: 0 4px;
}

.sv {
	display: none;
}

.dottedUnder {
	text-decoration: underline dotted;
}

.rcPath b a {
	padding-top: 3px;
	padding-bottom: 3px;
}

.rcPath {
	display: flex;
	margin: 0 0 8px;
}

.classNameField b {
	margin-right: 4px;
}

a.itemLink {
	text-decoration: underline dotted;
	text-underline-offset: 2px;
	cursor: pointer;
}

a.itemLink:hover {
	color: var(--text);
}

.idNote + .idNote {
	margin-top: 8px;
}

.lmItem .si {
	margin-right: 4px;
	vertical-align: text-bottom;
}

.lmItem {
	vertical-align: text-bottom;
}

.weaponTrait {
	padding-left: 2px;
	padding-right: 2px;
	white-space: nowrap !important;
}

.tableSv {
	display: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sortBar {
	display: none;
	padding: 0 8px !important;
}

.sortToggle {
	flex-basis: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font: inherit;
	background: transparent;
	border: 0;
	outline: none;
	color: inherit;
	padding: 2px 8px;
	cursor: pointer;
}

.sortArrow {
	transition: transform 0.15s;
}

#sortBar.open .sortArrow {
	transform: rotate(180deg);
}

#sortBar:not(.open) .sortChip {
	display: none;
}

.flex-break {
	flex-basis: 100%;
	height: 0;
}

.sortChip {
	font: inherit !important;
	background: transparent !important;
	outline: none !important;
	border: 0 !important;
	color: inherit !important;
	padding: 2px 7px !important;
	cursor: pointer !important;
	flex-basis: 1px !important;
	width: auto !important;
	min-width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
}

.giftContainer small {
	font-weight: normal;
}

.sortChip::after {
	content: "";
	position: absolute;
}

.sortChip.asc::after {
	content: " ▲";
}

.sortChip.desc::after {
	content: " ▼";
	visibility: visible;
}

.art-skill {
	white-space: nowrap !important;
}

select.sortSel {
	background: none;
	border: 0;
	max-width: 100%;
	font: inherit;
	background: #192d34;
	border-radius: 0;
	outline: none;
	padding: 2px;
}

#sortBar label {
	display: flex;
	white-space: nowrap;
	align-items: center;
	gap: 6px;
}

#cmc td:first-child b {
	white-space: normal;
}

/* ====================================================================== */
/* World map popup (map.js)                                               */
/* ====================================================================== */

/* ---------- world map popup (map.js) ---------- */
a.loc {
	text-decoration: underline dotted;
	text-underline-offset: 2px;
	cursor: pointer;
}
#lmp {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 15;
	display: flex;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px;
	box-sizing: border-box;
}
#lmp .mb {
	height: 100%;
}
#lmn {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	width: 100%;
	padding-right: calc(3.3 * var(--vw) + 1px - 1vw);
}
#lmn .pk,
#lmf .pk {
	border: 2px solid var(--boxLine);
	background-color: #192d34;
	border-radius: 0;
	padding: 0.18vw 0.6vw;
	font-size: min(18px, max(14px, 1.1vw));
	line-height: 130%;
	white-space: nowrap;
	text-decoration: none;
}
#lmn .pk.on,
#lmn .pk:hover,
#lmf .pk.on,
#lmf .pk:hover,
#lmd .pk:hover {
	background-color: #3b453a;
	border-color: #60593e;
}
#lmn .pk.lmOff {
	opacity: 0.45;
}
#lmx {
	--dim: calc(3.3 * var(--vw) + 1px);
	position: absolute;
	top: 0;
	right: 0;
	height: var(--dim);
	width: var(--dim);
	padding: 0;
	text-align: center;
	font-size: max(16px, calc(1.2 * var(--vw) + 1px));
}
#lmf {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 4px calc(1 * var(--vw));
	font-size: 13px;
	display: none;
} /*Disabled */
#lmf .lmGroup {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
}
#lmf .pk {
	font-size: 13px;
	padding: 1px 6px 1px 2px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
#lmf .pk:not(.on) {
	opacity: 0.45;
	background-color: transparent;
}
#lmf .pk img {
	height: 18px;
}
#lmb {
	flex: 1;
	min-height: 0;
	display: flex;
	gap: 8px;
	margin: 0 calc(1 * var(--vw)) calc(1 * var(--vw));
	padding-top: 4px;
}
#lmv {
	flex: 1;
	min-width: 0;
	position: relative;
	overflow: hidden;
	background: #0b1416;
	border: 2px solid var(--boxLine);
	touch-action: none;
	cursor: grab;
	user-select: none;
}
#lmv.drag {
	cursor: grabbing;
}
#lmw {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}
#lmk {
	position: absolute;
	inset: 0;
}
.lmm {
	position: absolute;
	width: var(--pin, 26px);
	height: var(--pin, 26px);
	padding: 0;
	border: 0;
	background: none;
	transform: translate(-50%, -50%);
	cursor: pointer;
	background: center / contain no-repeat;
	/*filter: drop-shadow(0 1px 2px #000);*/
}
.lmm:hover {
	z-index: 2;
	transform: translate(-50%, -50%) scale(1.25);
}
.lmm.on {
	z-index: 3;
	width: calc(var(--pin, 26px) * 1.45);
	height: calc(var(--pin, 26px) * 1.45);
	border-radius: 50%;
	box-shadow:
		0 0 0 3px #ffe8c4,
		0 0 14px 4px #e0c18f;
	background-color: rgba(0, 0, 0, 0.45);
}

.lmm.lmmBig {
	width: calc(var(--pin, 26px) * 1.35);
	height: calc(var(--pin, 26px) * 1.35);
}

.lmm.lmmBig.on {
	width: calc(var(--pin, 26px) * 1.35 * 1.45);
	height: calc(var(--pin, 26px) * 1.35 * 1.45);
}

a.loc,
a.lmItem,
a.itemLink,
.giftBtn {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmm.p-base {
	width: calc(var(--pin, 26px) * 1.65);
	height: calc(var(--pin, 26px) * 1.65);
}

.lmm.p-base.on {
	width: calc(var(--pin, 26px) * 1.65 * 1.45);
	height: calc(var(--pin, 26px) * 1.65 * 1.45);
}

.lmm.lmmMid {
	width: calc(var(--pin, 26px) * 1.2);
	height: calc(var(--pin, 26px) * 1.2);
}

.lmm.lmmMid.on {
	width: calc(var(--pin, 26px) * 1.2 * 1.45);
	height: calc(var(--pin, 26px) * 1.2 * 1.45);
}
#lmz {
	position: absolute;
	right: 8px;
	top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 4;
}
/* the map image still loading (map.js): a spinner over the map view; markers, tabs and the side panel already work */
.lmLoad {
	display: none;
}
#lmp.lmLoading .lmLoad {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
/* a small solid panel, so the spinner stays readable over markers and the selected place's ping */
.lmLoadBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 22px;
	color: #ffe8c4;
	font-size: 16px;
	background: #05171b;
	border: 2px solid var(--boxLine);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#lmz .pk {
	width: 32px;
	height: 32px;
	padding: 0;
	text-align: center;
	font-size: 18px;
	border: 2px solid var(--boxLine);
	background-color: #192d34;
}
#lmd {
	width: max(30vw, 320px);
	flex: none;
	overflow: auto;
	padding: 4px 8px;
	box-sizing: border-box;
	font-size: 15px;
}
#lmd h2 {
	margin: 4px 0;
}
.lmMeta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: var(--mut);
}
.lmCat {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.lmCat img {
	height: 18px;
}
.lmDesc,
.lmHint {
	color: var(--mut);
	margin: 8px 0;
}
.lmSec {
	margin: 10px 0;
}
/* Part 3 town repair materials: first in the panel, framed and tinted so they stand out */
.lmSec.lmRepair {
	padding: 6px 10px 8px;
	border: 2px solid #8a7440;
	background: rgba(255, 213, 154, 0.09);
	box-shadow: inset 0 0 12px rgba(255, 213, 154, 0.08);
}
.lmRepair > b {
	color: #ffd59a;
}
.lmRepair .lmQty {
	color: #ffe8c4;
	font-weight: bold;
}
.lmSec ul {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
}
.lmSec li {
	padding: 2px 0;
	border-top: 1px solid var(--line2);
	display: flex;
	align-items: center;
	gap: 4px;
}
.lmCols {
	display: flex;
	gap: 10px;
}
.lmCols > .lmSec {
	flex: 1;
	margin: 0;
}
.lmIc {
	height: 20px;
	width: 20px;
	object-fit: contain;
}
#lmd .pk {
	border: 2px solid var(--boxLine);
	background-color: #192d34;
	padding: 0 6px;
	margin: 2px 0;
	display: inline-block;
	text-decoration: none;
}
@media screen and (max-width: 800px) {
	#lmb {
		flex-direction: column;
	}
	#lmd {
		width: auto;
		max-height: 40%;
	}
	#lmf {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	#lmf .lmGroup {
		flex-wrap: nowrap;
	}
}

.acqInline {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
}

.acqInline .acqLoc {
	white-space: nowrap;
}

/* item popup: a source's whole description, under its map link */
.acqFull {
	margin: 1px 0 6px;
}
.acqFull:last-child {
	margin-bottom: 0;
}

/* a location's shops side by side: each at least as wide as its longest item name (so names don't run out of it),
   wrapping to the next row when there isn't room */
.lmShopGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.lmShopGrid > .lmSec {
	margin: 0;
	flex: 1 1 140px;
}

.srcK {
	color: var(--mut);
	font-size: 0.9em;
	white-space: normal;
}

.locIc {
	height: 1.2em;
	width: 1.2em;
	object-fit: contain;
	vertical-align: text-bottom !important;
	margin-right: 2px;
}

.lmPing {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #ffe8c4;
	box-shadow: 0 0 10px #e0c18f;
	transform: translate(-50%, -50%);
	animation: lmPing 1.2s ease-out 3 both;
	pointer-events: none;
}

.dropsContainer {
	display: flex;
	flex-wrap: wrap;
}

.dropsContainer > .idChip {
	flex: 0 1 160px;
}

th.weaponTrait {
	min-width: 3.2em;
}

.lmPing2 {
	animation-delay: 0.4s;
}

@keyframes lmPing {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(3.4);
		opacity: 0;
	}
}

#lmk.finding .lmm:not(.hit):not(.on) {
	filter: grayscale(1);
}

.lmm.hit {
	z-index: 2;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #ffe8c4;
	background-color: rgba(0, 0, 0, 0.35);
}

.lmSearch {
	position: relative;
	margin-left: auto;
	flex: 1;
	max-width: 400px;
	min-width: 150px;
}

.lmSearch input[type="search"] {
	max-width: none;
	width: 100%;
}

#lmr {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	max-height: min(60vh, 420px);
	overflow: auto;
	background: #142324;
	border: 2px solid var(--boxLine);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.lmRes {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 15px;
}

.lmRes.act,
.lmRes:hover {
	background: #3b453a;
}

.lmRes .lmResName {
	flex: 1;
}

.lmRes .lmIc,
.lmRes .locIc {
	height: 20px;
	width: 20px;
}

.lmNone {
	color: var(--mut);
	cursor: default;
}
.lmm.off {
	opacity: 0;
}
.lmm.off.on {
	opacity: 1;
	filter: grayscale(1);
	box-shadow:
		0 0 0 2px #9a9a9a,
		0 0 10px 3px rgba(160, 160, 160, 0.6);
	outline: 2px dashed #ffe8c4;
	outline-offset: 3px;
	background-color: rgba(0, 0, 0, 0.45);
}

.lmFind {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 6px 8px;
	margin: 4px 0 8px;
	border: 2px solid var(--boxLine);
	background: #192d34;
}

.lmFind .pk {
	margin-left: auto;
	border: 0;
	padding: 0 4px;
}

.lmLink,
.lmBack {
	text-decoration: none;
}

.lmOffTab {
	opacity: 0.5;
}

#lmd mark {
	background: #60593e;
	color: inherit;
	padding: 0 2px;
}

summary a.loc {
	display: inline-block;
}

.lmFindText {
	margin: 2px 0 0;
}

/* map list rows built by iconRow (map.js): the item link (icon inside it), then a note that wraps on its own */
.lmIconRow {
	display: flex;
	align-items: center;
	gap: 4px;
}
/* a long note (e.g. a trade's materials) wraps instead of running out of the panel; its links stay whole */
.lmIconRow,
.lmIconRow > span:not(.lmIconLink) {
	min-width: 0;
}
.lmIconRow .srcK {
	white-space: normal;
}
/* item links inside a note (a trade's materials): icon at the note's text size, on its line */
.lmIconRow .srcK .lmIconLink {
	gap: 2px;
	vertical-align: middle;
}
.lmIconRow .srcK .lmIc {
	width: 1.2em;
	height: 1.2em;
}
/* an item link with its icon inside (map.js hl): the icon centred on the name, the name wrapping beside it */
.lmIconLink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.lmIconLink > img {
	flex: none;
}
a.lmIconLink:hover {
	text-decoration: none; /* a flex box doesn't pass it on: the name below gets it */
}
a.lmIconLink:hover > span {
	text-decoration: underline dotted;
}

.lmIconRow small {
	color: var(--mut);
}

.scrollSources .si {
	margin-right: 2px;
}

#lma {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* ====================================================================== */
/* Item popup (#idp)                                                      */
/* ====================================================================== */

#idp,
#shp,
#spp {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 18;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px;
	box-sizing: border-box;
}

#md,
#shp,
#cmp,
#lmp,
#idp,
#spp {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

#idp .mb {
	width: min(560px, 100%);
	min-height: 0;
	max-height: min(90vh, 100%);
}

#idp .mh,
#shp .mh,
#spp .mh {
	padding-right: calc(3.3 * var(--vw) + 6px);
	background: none;
	margin-bottom: 0;
}

#idp .mh::before,
#shp .mh::before,
#spp .mh::before {
	content: "";
	bottom: calc(0.4vw);
	border-bottom: 1px solid var(--line2);
	width: calc(100% - 2vw);
	position: absolute;
	left: 1vw;
}

#idp .mb:before,
#shp .mb:before,
#spp .mb:before {
	background-image: url(../images/listBottom.png);
	transform: scaleY(-1);
	background-position: bottom center;
}

.idHead {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 18px;
}

.idHead .si,
.idHead .ci {
	height: 28px;
	width: 28px;
	margin: 0;
	object-fit: contain;
}

.idHead small {
	color: var(--mut);
	font-size: 13px;
}

#idx,
#shx,
#sppX {
	--dim: calc(3.3 * var(--vw) + 1px);
	position: absolute;
	top: 0;
	right: 0;
	height: var(--dim);
	width: var(--dim);
	padding: 0;
	text-align: center;
}

#idc {
	overflow: auto;
	padding: 6px calc(1.2 * var(--vw)) calc(1.2 * var(--vw));
	font-size: 15px;
}

.idStats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0 8px;
}

.idStats span {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 52px;
	padding: 3px 6px;
	border: 2px solid #39484f;
	background: #192d34;
}

.idStats small {
	color: var(--mut);
	font-size: 11px;
}

/* class / mount growths in the popup: the tables' small-screen cells, side by side */
.idGrowth {
	display: grid;
	margin: 4px 0 8px;
	grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
	border: 0;
}
.idGrowth span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 3px 1px;
	font-size: 14px;
	line-height: 115%;
}

.idGrowth small {
	color: var(--mut);
	font-size: 11px;
}

/* class picker: weapon tabs (the Classes comparison tabs) between the title and the search; the header wraps when they don't fit */
#md .mh {
	flex-wrap: wrap;
}
#mtb {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	justify-content: center;
	flex: 1 1 auto;
}
#mtb:empty {
	display: none;
}
#mtb a.pk {
	cursor: pointer;
	user-select: none;
}
@media screen and (max-width: 700px) {
	#mtb .pk.tabIc .tabT {
		display: none;
	}
	#mtb .pk.tabIc .si {
		height: 1.4em;
		width: 1.4em;
		margin-left: 0;
	}
}

/* ====================================================================== */
/* Screenshot share page (share.js)                                       */
/* ====================================================================== */

/* the skill screenshot page (share.js, /share-screenshots/): the skill list to tick, the screenshots and the Turnstile check */
#shp[hidden] {
	display: none;
}
#shp .mb {
	width: min(1100px, 100%);
	min-height: 0;
	max-height: min(90vh, 100%);
}
#shp #shq {
	margin-left: auto;
}
/* only the list scrolls: the intro above it and the send box below it stay in place */
#shp .mb {
	height: min(90vh, 100%);
}
#shc {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 4px calc(1 * var(--vw)) calc(1 * var(--vw));
}
#shl {
	flex: 1;
	min-height: 0;
	overflow: auto;
	border-bottom: 1px solid var(--line2);
}
.shIntro {
	margin: 6px 0 10px;
	max-width: 70em;
}
.shList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 4px 12px;
	margin: 6px 0 14px;
}
.shItem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 3px 4px;
	border-top: 1px solid var(--line);
	cursor: pointer;
	text-align: left;
}
.shItem input[type="checkbox"] {
	flex: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.shItem span {
	flex: 1;
	align-items: flex-start;
	overflow: hidden;
}
.shItem small {
	max-width: 100%;
}
.shItem b {
	font-weight: normal;
}
.shItem:hover {
	background: rgba(255, 255, 255, 0.04);
}
.shItem span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.shItem small {
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shItem .si {
	margin: 0;
	flex: none;
}
#shf {
	flex: none;
	padding: 8px 0 0;
}
.shRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 4px 0;
}
#sht:empty {
	display: none;
}
/* Add screenshots / Send: the game's button (the selected tab's end caps and middle, the right cap the left one mirrored) */
.pk.shBtn {
	--capW: 18px;
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	min-width: 120px;
	padding: 0 calc(var(--capW) + 8px);
	border: 0;
	color: #fff4d9;
	font-size: 16px;
	letter-spacing: 0.04em;
	cursor: pointer;
	background:
		url(../images/buttonLeft.png) left top / var(--capW) 100% no-repeat,
		url(../images/buttonCenter.png) center / calc(100% - 2 * var(--capW) + 2px)
			100% no-repeat;
}
.pk.shBtn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--capW);
	background: url(../images/buttonLeft.png) 0 0 / 100% 100% no-repeat;
	transform: scaleX(-1);
	z-index: -1;
	pointer-events: none;
}
.pk.shBtn:hover:not(:disabled),
.pk.shBtn:focus-visible {
	text-shadow: var(--glow);
	filter: brightness(1.12);
}
.pk.shSend {
	min-width: 160px;
	font-size: 17px;
}
.pk.shBtn:disabled {
	filter: grayscale(0.7) brightness(0.7);
	opacity: 0.7;
	cursor: default;
}
.shOk {
	color: #9fd49f;
}
.shBad {
	color: #e5484d;
}

@media screen and (max-width: 550px) {
	.idGrowth span {
		font-size: 12px;
	}
	.idGrowth small {
		font-size: 10px;
	}
}

.idReq {
	margin: 4px 0;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.idReq small {
	color: var(--mut);
	margin-right: 4px;
}

.idText {
	margin: 6px 0;
	white-space: normal;
}

.idSec {
	margin: 10px 0 0;
}

/* the section a link opened the popup for (data-focus): a glow that fades out */
.idSec.idFlash {
	animation: idFlash 1.8s ease-out;
}
@keyframes idFlash {
	0%,
	25% {
		background: rgba(255, 213, 154, 0.16);
		box-shadow:
			0 0 0 4px rgba(255, 213, 154, 0.16),
			0 0 14px rgba(255, 213, 154, 0.35);
	}
	100% {
		background: transparent;
		box-shadow:
			0 0 0 4px transparent,
			0 0 14px transparent;
	}
}
@media (prefers-reduced-motion: reduce) {
	.idSec.idFlash {
		animation-duration: 3s;
		animation-timing-function: steps(1, end);
	}
}

.idSec h3 {
	font-size: 14px;
	font-weight: normal;
	color: var(--mut);
	margin: 0 0 4px;
	border-bottom: 1px solid var(--line2);
}

.idArea {
	font-family: monospace;
	line-height: 1.1;
	margin: 4px 0;
}

.idChip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 2px 10px 2px 0;
}

a.lmItem {
	text-decoration: none;
}

a.lmItem:hover {
	text-decoration: underline dotted;
}

/* ====================================================================== */
/* Responsive: main breakpoints (1250px down to 500px)                    */
/* ====================================================================== */

@media screen and (max-width: 1250px) {
	.fv {
		display: none;
	}

	.sv {
		display: inline-block;
	}

	#disclaimer {
		display: none;
	}
}

@media screen and (max-width: 1000px) and (max-aspect-ratio: 210 / 100) {
	/* Move the entire page to the left so it fits on the screen even as the right side starts getting cut off*/
	.wrapper {
		transform: scale(1.06);
		transform-origin: left center;
	}

	.wrap {
		transform-origin: left top;
		left: calc(-3.5 * var(--vw) * var(--scale));
	}

	.gsSearch {
		top: calc(var(--vw) * 1.5);
		left: 5%;
	}
}

@media screen and (max-width: 1000px) and (min-aspect-ratio: 210 / 100) {
	#shc {
		flex-direction: row;
	}

	#shc > * {
		box-sizing: border-box;
		flex-basis: 33%;
	}

	.wrapper {
		--wrapperScale: 1.15;
		transform: scale(var(--wrapperScale));
		--wrapperLeft: calc(16px * 6 / var(--wrapperScale));
		padding-left: calc(
			var(--wrapperLeft) + calc(50 * var(--vw)) * (var(--wrapperScale) - 1)
		);
		margin-top: calc(-1.2 * var(--vw));
		transform-origin: center;
	}

	section {
		padding-right: 4%;
	}

	.wrap {
		/*left: calc((100vw / 100vh - (185 / 100)) * 16px * 3.5 * 1.083 / var(--scale));*/ /* Center the wrapper as we are aligning left*/
		transform-origin: left top;
	}

	.gsSearch {
		left: calc(-1 * var(--wrapperLeft) / var(--scale) + 7px);
		top: calc(var(--vw) * 5.8);
		width: calc(
			var(--wrapperLeft) / var(--scale) + calc(2 * var(--vw) + 3.3vw) - 12px
		);
	}

	.compareButtons {
		left: calc(-1 * var(--wrapperLeft) / var(--scale) + 7px);
		width: calc(
			var(--wrapperLeft) / var(--scale) + calc(2 * var(--vw) + 3.3vw) - 12px
		);
		flex-direction: column;
		height: 90%;
		gap: 8px;
		top: calc(var(--vw) * 5);
	}

	.compareButtons::before {
		content: "";
		min-height: 30px;
		flex-shrink: 0;
	}
	.compareButtons::after {
		content: "";
		flex: 1 1 0; /* Can grow, and can shrink all the way to 0 if space is needed */
		max-height: 30px;
	}

	.compareButtons > .pk {
		font-size: calc(13px / var(--scale));
		border: 0 !important;
		background: #192d34;
		max-height: 2em;
		line-height: 2em;
		background: url(../images/buttonInactiveBG5.png) !important;
		background-size: 100% 100% !important;
		text-shadow: none;
		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 120));
		text-align: left;
		padding-left: 22%;
		line-height: 2em;
	}

	.compareButtons > .pk:hover,
	.compareButtons > .pk:focus {
		text-shadow: var(--glow);
	}
}

/*@media screen and (max-width: 1280px) {
  :is(#cmn, #mtb) .pk.tabIc .tabT { display: none; }
  :is(#cmn, #mtb) .pk.tabIc .si { 
    height: 1.4em; width: 1.4em; object-fit: contain; 
      margin-left: 0;
  }
}*/

@media screen and (max-width: 1100px) {
	#cmc .itemDesc {
		display: none;
	}

	.pathSfx {
		display: none;
	}

	.mh {
		background: url(../images/divider.png);
		background-repeat: no-repeat;
		background-size: calc(100% - 2vw);
		background-position: bottom;
		margin-bottom: 0;
	}
	:is(#cmn, #mtb) .pk.tabIc {
		padding-left: 4px;
		padding-right: 4px;
	}

	.mb:before {
		background-image: url(../images/listBottom.png);
		transform: scaleY(-1);
		background-position: bottom center;
	}

	#cmc thead {
		display: none;
	}
	#sortBar:not(:empty) {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		justify-content: flex-end;
	}

	#cmp.modalgrowths .growthCol {
		min-height: 48px;
	}

	#cmc tr {
		display: grid;
		grid-template-columns: repeat(48, 1fr);
		align-items: center;
	}

	.collapseEmpty:empty {
		display: none;
	}

	#cmc thead > tr {
		padding-bottom: 0.7vw;
	}

	#cmc th:not(:empty):before {
		height: calc(100% - 0.55vw);
	}

	#cmc th {
		padding-bottom: 4px;
	}

	/* rows are grids here, so the cells are blocks: the fixed header height would cut the text (a table cell only grows) */
	#cmc tbody th {
		height: auto;
	}

	#cmc tr > * {
		grid-column: span 6;
		max-width: none !important;
		width: auto !important;
	}

	#cmc tr > *.characterName {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.weightedCol {
		display: none !important;
	}

	#cmc tr {
		border-bottom: 1px solid var(--line2);
	}

	#cmc tr > .weaponTrait {
		grid-column: span 4;
	}

	.classModal tr {
		display: flex;
		flex-wrap: wrap;
	}

	.classModal td {
		flex-basis: max(33.3%, min(50%, 200px));
	}

	.classModal td:empty {
		display: none;
	}

	#cmc tr:last-child {
		border-bottom-width: 0;
	}

	#cmc tr > td {
		border-width: 0;
		box-sizing: border-box;
	}
	#cmc tr > td:empty {
		padding: 0;
	}

	#cmc thead {
		position: relative;
	}

	#cmc tr > .col1 {
		grid-column: span 3;
	}

	#cmc tr > .col1plus {
		grid-column: span 4;
	}

	#cmc tr > .cols5 {
		grid-column: span 5;
	}

	#cmc tr > .col2 {
		grid-column: span 6;
	}

	#cmc tr > .col3 {
		grid-column: span 9;
	}

	#cmc tr > .cols10 {
		grid-column: span 10;
	}

	#cmc tr > .cols11 {
		grid-column: span 11;
	}

	#cmc tr > .col4 {
		grid-column: span 12;
	}

	#cmc tr > .col5 {
		grid-column: span 15;
	}

	#cmc tr > .col6 {
		grid-column: span 18;
	}

	#cmc tr > .cols19 {
		grid-column: span 19;
	}

	#cmc tr > .cols20 {
		grid-column: span 20;
	}

	#cmc tr > .col7 {
		grid-column: span 21;
	}

	#cmc tr > .col8 {
		grid-column: span 24;
	}

	#cmc tr > .col9 {
		grid-column: span 27;
	}

	#cmc tr > .col10 {
		grid-column: span 30;
	}

	#cmc tr > .col42 {
		grid-column: span 42;
	}

	#cmc tr > .newRow {
		grid-column: 1 / 7;
	}

	#cmc tr > .colHalf {
		grid-column: span 12;
	}

	#cmc tr > .colRow {
		grid-column: span 24;
	}

	#cmc tr > .colThirdRow {
		grid-column: span 36;
	}

	#cmc tr > .newRow.colHalf {
		grid-column: 1 / 13;
	}

	#cmc tr > .colRowFull {
		grid-column: span 48;
	}

	#cmc tr > .newRow.colRow {
		grid-column: 1 / 25;
	}

	#cmc tr > .newRow.colThirdRow {
		grid-column: 1 / 37;
	}

	#cmc .dmgT {
		display: none;
	}

	.tableSv .sv {
		display: inline-block;
	}
	#cmc tr .tableSv:not(.inline) {
		display: block;
	}
	#cmc tr .tableSv.inline {
		display: inline;
	}

	#cmc tr.halfRow {
		grid-template-columns: repeat(36, 1fr);
		width: 50%;
		display: inline-grid;
	}

	#cmp.modalWg tr {
		grid-template-columns: repeat(84, 1fr);
	}

	#cmc tr > .class-growth {
		grid-column: span 4;
	}

	#cmc tr > .class-total {
		grid-column: span 5;
	}

	#cmp.modalWg.modalabilities .col8 {
		grid-column: span 28;
	}

	#cmp.modalWc tr,
	#cmp.modalWm tr {
		grid-template-columns: repeat(60, 1fr);
	}

	#cmc .class-requirements {
		grid-column: 46 / 61 !important;
		grid-row: 1 !important;
	}

	#cmc tr > .mount-abilities {
		grid-column: span 24;
	}

	#cmc .mount-location {
		grid-column: 37 / 61 !important;
		grid-row: 1 !important;
	}

	#cmc tr > .art-trait {
		grid-column: span 4;
		padding-left: 2px;
		padding-right: 2px;
	}
	#cmc tr > .art-name {
		grid-column: span 16;
	}

	#cmc tr > .art-skill {
		grid-column: span 6;
		padding-left: 2px;
		padding-right: 2px;
	}

	#cmc table {
		overflow: hidden;
	}
}

@media screen and (max-width: 1100px) and (min-width: 700px) {
	#cmp tr > .combatArt {
		grid-column: span 36;
	}

	#cmc tr > .nameField {
		grid-column: span 14;
	}

	#cmc tr > .skill {
		grid-column: span 6;
		padding-left: 2px;
		padding-right: 2px;
	}

	#cmc tr > .eff {
		grid-column: span 4 !important;
	}
}

/*@media screen and (min-width: 900px) {
  .grid2,
  #lt {
    scrollbar-gutter: stable;
    overflow: auto;
  }
}*/

@media screen and (max-width: 900px) {
	#mainWrapper::before {
		content: "";
		background-image: url(../images/bgLineCover.png);
		background-size: 100%;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: absolute;
	}
}

@media screen and (max-width: 700px) {
	.recruitContainer > span {
		max-width: none;
		flex-basis: max(15em, 50% - 5px);
		width: auto;
	}

	#cmc tr {
		grid-template-columns: repeat(36, 1fr);
	}

	#cmc tr > .colRow,
	#cmc tr > .colThirdRow,
	#cmc tr > .colRowFull {
		grid-column: span 36;
	}

	#cmc tr > .newRow.colHalf {
		grid-column: 1 / 19;
	}

	#cmc tr > .newRow.colRow,
	#cmc tr > .newRow.colThirdRow {
		grid-column: 1 / 37;
	}

	#cmc tr.halfRow {
		width: 100%;
	}

	#cmp.modalWg tr {
		grid-template-columns: repeat(42, 1fr);
	}

	#cmp.modalWg.modalabilities .col8 {
		grid-column: span 42;
	}

	#cmp.modalWc tr {
		grid-template-columns: repeat(30, 1fr);
	}

	/* weapons & magic and scrolls: 32 columns, so the traits (4 columns each, Might too: it starts the row) fill whole rows
       (8 weapon traits = 32) */
	#cmp.modalWw tr,
	#cmp.modalscrolls tr {
		grid-template-columns: repeat(32, 1fr);
	}
	#cmp.modalWw tr > .newRow.weaponTrait,
	#cmp.modalscrolls tr > .newRow.weaponTrait {
		grid-column: 1 / 5;
	}
	/* items with a flavor (fish, meat, vegetables, ...): name and flavor on one row, 27 + 9 = 36 */
	#cmc tr:has(> .itemFlavor) > .col10 {
		grid-column: span 27;
	}

	/* name, effective and skill requirement on one row: 20 + 4 + 8 = 32 (the 36 column spans were 18 + 6 + 12) */
	#cmp.modalWw tr > .nameField {
		grid-column: span 20;
	}
	#cmp.modalWw tr > .eff {
		grid-column: span 4;
	}
	#cmp.modalWw tr > .skill {
		grid-column: span 8;
	}
	#cmp.modalWw tr > .colRow,
	#cmp.modalWw tr > .colThirdRow,
	#cmp.modalWw tr > .colRowFull,
	#cmp.modalscrolls tr > .colRow,
	#cmp.modalscrolls tr > .colThirdRow,
	#cmp.modalscrolls tr > .colRowFull {
		grid-column: span 32;
	}
	#cmp.modalWw tr > .newRow.colHalf,
	#cmp.modalscrolls tr > .newRow.colHalf {
		grid-column: 1 / 17;
	}
	#cmp.modalWw tr > .newRow.colRow,
	#cmp.modalWw tr > .newRow.colThirdRow,
	#cmp.modalscrolls tr > .newRow.colRow,
	#cmp.modalscrolls tr > .newRow.colThirdRow {
		grid-column: 1 / 33;
	}

	#cmp.modalWm tr {
		grid-template-columns: repeat(27, 1fr);
	}

	#cmp.modalWm tr > .col3 {
		grid-column: span 7;
	}

	#cmp.modalWm tr > td.col3 {
		padding: 4px 2px;
	}

	#cmp.modalWm tr > .col5 {
		grid-column: span 10;
	}

	#cmc .mount-location {
		grid-column: span 14 !important;
		grid-row: auto !important;
	}

	#cmc tr > .mount-abilities {
		grid-column: span 13;
	}

	#cmc tr > .class-growth {
		grid-column: span 3;
	}

	#cmc tr > td.class-growth {
		grid-column: span 3;
		font-size: 12px;
		line-height: 100%;
	}

	#cmc tr > .class-mov {
		grid-column: span 4;
	}

	#cmc tr > td.class-mov {
		font-size: 14px;
		line-height: 130%;
	}

	#cmc .class-requirements {
		grid-column: span 15 !important;
		grid-row: auto !important;
	}

	#cmc tr > .class-skillList {
		grid-column: span 27;
	}

	#cmc tr > .blaze-name {
		grid-column: span 19;
	}

	#cmc tr > .blaze-effect {
		grid-column: span 36;
	}

	#cmc tr > .blaze-unlock {
		grid-column: span 21;
	}

	#cmc tr > .blaze-character {
		grid-column: 1 / 15 !important;
		grid-row: 4;
		text-align: right;
		padding: 0;
	}

	#cmc tr > .blaze-kind {
		grid-column: 23 / 37 !important;
		grid-row: 1 !important;
	}

	#cmc tr > .art-trait {
		grid-column: span 6;
	}

	#cmc tr > .art-name {
		grid-column: span 24;
	}
}

@media screen and (max-width: 700px) and (orientation: portrait) {
	.wrapper {
		transform: scale(1.22);
		transform-origin: left center;
	}

	#mainWrapper::before {
		display: none;
	}

	section {
		padding-right: 14.8%;
	}

	.cardButtons {
		width: calc(61% - max(0px, var(--minW) - 100vw));
		justify-content: flex-start;
	}
}

@media screen and (max-width: 550px) and (orientation: portrait) and (max-aspect-ratio: 3 / 5) {
	.gsSearch {
		left: 35%;
		top: calc(var(--vw) * 7.5);
		width: 37.5%;
	}

	.lineCover {
		display: none;
	}

	#gsr {
		left: auto;
		right: 0;
	}

	.mainWrapper {
		padding-top: calc(var(--vw) * 5);
	}

	.wrapper {
		transform: scale(1.45);
	}

	.wrap {
		left: calc(-5.5 * var(--vw) * var(--scale));
		top: 53%;
	}

	.tabContainer {
		margin-left: calc(30 * var(--vw));
		width: calc(100% - 30 * var(--vw));
	}

	.grid2 {
		margin-top: calc(var(--vw) * 25);
	}
	.grid2 > *:first-child {
		padding-top: 0;
	}

	section {
		background-image: url(../images/background-4-3.webp);
		padding-right: 26%;
		padding-top: calc(6.7 * var(--vw));
		aspect-ratio: 1 / 1;
		padding-left: 5%;
	}

	.cardButtons {
		left: 21.5%;
		top: calc(2.2 * var(--vw));
		width: 52%;
		margin-top: 0;
	}

	.cardButtons > .pk {
		height: 1.5em;
		line-height: 1.5em;
	}

	#lt > .sk:first-child {
		margin-top: 6px;
	}

	.compareButtons {
		gap: 8px;
		transform: translateY(-87%);
		flex-wrap: wrap-reverse;
		left: 6%;
		width: 68%;
		top: calc(-0.8 * var(--vw));
	}

	.compareButtons > .pk {
		font-size: 16px;
		border: 0 !important;
		background: url(../images/buttonInactiveBG5.png) !important;
		background-size: 100% 100% !important;
		text-shadow: none;
		line-height: 1.7em;
		padding: 0;
		flex-grow: 0;
		aspect-ratio: 4.4 / 1;
		height: 1.7em;
		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 120));
		padding-left: 1.7em;
		text-align: left;
	}

	.compareButtons > .pk:hover,
	.compareButtons > .pk:focus {
		text-shadow: var(--glow);
	}
}

@media screen and (max-width: 500px) {
	.recruitContainer > span {
		flex-basis: 100%;
	}
} /* drag and drop on the screenshot page: a dashed frame and a label over the box while files are dragged over it */
.shDrop {
	display: none;
}
#shp .mb.shOver .shDrop {
	display: flex;
	position: absolute;
	inset: 8px;
	z-index: 5;
	align-items: center;
	justify-content: center;
	border: 2px dashed #d2c6af;
	background: rgba(20, 35, 36, 0.85);
	color: #fff4d9;
	font-size: 22px;
	letter-spacing: 0.04em;
	pointer-events: none;
}
/* the class / mount popup's Select button (the game button, .shBtn) */
.idSelect {
	margin: 2px 0 8px;
}

/* ====================================================================== */
/* Spoiler blur & Part II / III question                                  */
/* ====================================================================== */

/* Part II / III spoilers (app.js tagSpoilers): blurred until that part is enabled; not inside an item popup a link opened */
/* the blur is an overlay inside the element (backdrop-filter), so it stays within its box; a row is blurred cell by cell */
html:not(.sp2) [data-spoil="2"]:not(tr),
html:not(.sp3) [data-spoil="3"]:not(tr) {
	position: relative;
	cursor: pointer;
}
/* a row: blurred as one, clipped to the row (clip-path cuts what the blur spreads past its edges) */
html:not(.sp2) tr[data-spoil="2"],
html:not(.sp3) tr[data-spoil="3"] {
	filter: blur(6px);
	clip-path: inset(0);
	cursor: pointer;
}
/* a character's row (recruiting, growths, the support list): like the character icons */
html:not(.sp2) tr[data-spoil="2"][data-spoil-ch],
html:not(.sp3) tr[data-spoil="3"][data-spoil-ch] {
	filter: blur(8px) grayscale(0.8);
}
html:not(.sp2) [data-spoil="2"]:not(tr)::after,
html:not(.sp3) [data-spoil="3"]:not(tr)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
tr[data-spoil] [data-spoil]::after {
	display: none;
} /* the row's cells already cover it */
/* character icons: stronger, the face gives it away */
html:not(.sp2) .lr[data-spoil="2"]::after,
html:not(.sp3) .lr[data-spoil="3"]::after,
html:not(.sp2) .tilech[data-spoil="2"]::after,
html:not(.sp3) .tilech[data-spoil="3"]::after,
html:not(.sp2) .gsChars [data-spoil="2"]::after,
html:not(.sp3) .gsChars [data-spoil="3"]::after,
html:not(.sp2) #cmp.modalWr .rc[data-spoil="2"]::after,
html:not(.sp3) #cmp.modalWr .rc[data-spoil="3"]::after {
	-webkit-backdrop-filter: blur(8px) grayscale(0.8);
	backdrop-filter: blur(10px) grayscale(0.8);
}
/* the character select screen: the tiles are big portraits, so stronger still */
html:not(.sp2) #md .tilech[data-spoil="2"]::after,
html:not(.sp3) #md .tilech[data-spoil="3"]::after {
	-webkit-backdrop-filter: blur(16px) grayscale(0.8);
	backdrop-filter: blur(16px) grayscale(0.8);
}
.spoilOpen [data-spoil]::after {
	display: none;
}
.spoilOpen tr[data-spoil] {
	filter: none;
	clip-path: none;
}

/* the Part II / III question (app.js askSpoilers): the item popup's look (#idp rules above), tab buttons */
#spp {
	z-index: 1000;
}
#spp[hidden] {
	display: none;
}
#spp .mb {
	width: min(480px, 100%);
	min-height: 0;
	max-height: min(90vh, 100%);
}
#spp .sppC {
	overflow: auto;
	padding: 6px calc(1.2 * var(--vw)) calc(1.2 * var(--vw));
	font-size: 15px;
	text-align: center;
}
#spp .sppC p {
	margin: 4px 0 12px;
	line-height: 1.45;
}
#spp .sppB {
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: flex-end;
}
/* the selected-tab look (the caps and centre above): the caps scale with the button height, as --tabH does on a tab */
#sppY {
	--tabH: 3em;
	--capW: calc(var(--tabH) * 18 / 36);
	cursor: pointer;
	width: 250px;
	height: var(--tabH);
	margin: 0 auto;
	padding-left: var(--capW);
	padding-right: var(--capW);
	background-color: transparent;
	color: #fff4d9;
	text-shadow: inherit;
	text-align: center;
	border: 2px transparent solid;
}

#sppY:hover,
#sppY:focus-visible {
	text-shadow: var(--glow);
	outline: none;
}