/* ==========================================================================
   Mythiq.net — Mods database
   Loaded only on /mods/* (browse, game landing, mod page, submit/edit, manage).

   Built entirely on the tokens already declared in style.css:
   --bg-color / --card-bg / --text-white / --text-light / --text-muted /
   --mythiq-blue / --mythiq-hover-blue / --shadow-glow / --header-height /
   --header-offset / --font-heading. No new colours and no new type sizes — the
   catalogue has to read as the same site as the newsroom and the help centre
   sitting either side of it. The banded hero, the pill buttons and the status
   chips are all shapes support.css already established; the horizontal rails
   are the one new pattern, and they exist because a catalogue this shape is
   browsed by shelf rather than by page.

   Breakpoints match the rest of the design system: 1024px and 768px.

   Sections, in page order:
     Shared bits (+ breadcrumbs) -> Masthead -> Rails -> Games picker ->
     Results grid -> Mod card -> Mod page chips -> Keep browsing ->
     Game band + category sidebar -> Pagination -> Empty state ->
     Mod detail -> Ratings -> Comments -> Forms -> Manage list -> Responsive
   ========================================================================== */

/* --- Shared bits --------------------------------------------------------- */

/* The 87x3px blue rule the legal and support pages use as their section device. */
.mods-rule {
	display: block;
	width: 87px;
	height: 3px;
	background-color: var(--mythiq-blue);
	margin-bottom: 24px;
}

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

.mods-muted { color: var(--text-muted); font-size: 17px; line-height: 26px; }
.mods-muted a { color: var(--mythiq-hover-blue); }


/* A submit button that has to read as a link (delete-your-own-comment). */
.mods-link-btn {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-muted);
	cursor: pointer;
	text-decoration: underline;
}
.mods-link-btn:hover { color: #f87171; }

/* The way back, on every page below /mods/ that has one obvious parent.
   A bordered pill rather than a bare underlined arrow-and-text: as plain text
   under a hero it read as a stray caption, and where it sat above the blue
   .mods-rule the rule looked like its underline. It is a control, so it is
   shaped like one and has a target big enough to hit.

   Translucent with a blur because on the mod page it sits directly on the
   cover art, which we do not control and cannot assume is dark. */
.mods-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 9px 17px 9px 13px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(16, 16, 18, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-light);
	text-decoration: none;
	margin-bottom: 20px;
	transition: color var(--transition-speed), border-color var(--transition-speed), background-color var(--transition-speed);
}
.mods-back:hover {
	border-color: var(--mythiq-blue);
	background-color: var(--mythiq-blue);
	color: #fff;
}
.mods-back:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 3px; }

/* The arrow leads, and leans further out on hover — the same device the "View
   all" links on the catalogue rails use, mirrored. */
.mods-back i {
	flex: 0 0 auto;
	font-size: 12px;
	transition: transform var(--transition-speed);
}
.mods-back:hover i { transform: translateX(-3px); }

/* A parent's name can be long ("The Elder Scrolls Online"); the button must
   stay a button rather than growing into a headline. */
.mods-back span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Breadcrumbs ------------------------------------------------------------
   Used by every page below /mods/. A single "← back" link names one
   destination and says nothing about how deep you are; the trail says both.
   It scrolls sideways rather than wrapping — a breadcrumb that takes two lines
   stops reading as chrome and starts reading as content.
   ------------------------------------------------------------------------ */

.mods-crumbs {
	margin-bottom: 22px;
	overflow-x: auto;
	scrollbar-width: none;
	/* Cancels the container padding on the scroller only, so the trail can run
	   to the page edge on a narrow screen without losing its alignment. */
	-webkit-overflow-scrolling: touch;
}
.mods-crumbs::-webkit-scrollbar { display: none; }

.mods-crumbs ol {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	white-space: nowrap;
}
.mods-crumbs li { display: inline-flex; align-items: center; }

.mods-crumbs li + li::before {
	content: "\f054";                       /* fa-chevron-right */
	font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', sans-serif;
	font-weight: 900;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.28);
	margin: 0 12px;
}

.mods-crumbs a {
	font-size: 14px;
	line-height: 20px;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-crumbs a:hover { color: var(--mythiq-hover-blue); }
.mods-crumbs a:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 3px; border-radius: var(--radius-sm); }

/* The current page. Named in full and weighted, because on a mod page this is
   the only place the trail is completed. */
.mods-crumbs [aria-current="page"] {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-light);
	max-width: 40ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Game label on a card and above a mod title. */
.mods-chip {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-white);
	background-color: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	padding: 7px 14px;
}

/* Status pills. Functional signal only — never decoration. */
.mods-status {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	line-height: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
}
.mods-status-approved { background-color: rgba(5, 150, 105, 0.16);  border-color: rgba(52, 211, 153, 0.32); color: #6fe0b4; }
.mods-status-pending  { background-color: rgba(217, 119, 6, 0.16);  border-color: rgba(251, 191, 36, 0.32); color: #fbbf24; }
.mods-status-rejected { background-color: rgba(180, 35, 24, 0.18);  border-color: rgba(248, 113, 113, 0.32); color: #f8a7a0; }
.mods-status-draft    { background-color: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: var(--text-light); }

.mods-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 17px;
	line-height: 26px;
	padding: 16px 20px;
	border-radius: var(--radius-md);
	margin-bottom: 24px;
}
.mods-alert a { color: inherit; text-decoration: underline; }
.mods-alert-error { background-color: rgba(180, 35, 24, 0.16); border: 1px solid rgba(248, 113, 113, 0.34); color: #f8a7a0; }
.mods-alert-ok    { background-color: rgba(5, 150, 105, 0.14); border: 1px solid rgba(52, 211, 153, 0.32); color: #6fe0b4; }
.mods-alert-warn  { background-color: rgba(217, 119, 6, 0.14); border: 1px solid rgba(251, 191, 36, 0.32); color: #fbbf24; }

/* Honeypot. Left in the DOM and hidden with CSS on purpose. */
.mods-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Masthead -----------------------------------------------------------
   A search band, not a billboard. The headline and standfirst that used to sit
   here told a reader who can already see the page what page they are on, and
   pushed the shelves — the actual content — below the fold. What is left is the
   one control that matters plus a quiet line of proof underneath it.
   ------------------------------------------------------------------------ */

/* Must clear the floating header explicitly: it is a 66px pill inset 16px. */
.mods-mast {
	position: relative;
	padding: calc(var(--header-offset) + var(--header-height) + 96px) 0 52px;
	background-color: var(--bg-color);
	text-align: center;
	overflow: hidden;
}

.mods-mast-img {
	position: absolute;
	inset: 0;
	background-image: url('../img/uploads/2019/10/planets_wallpaper-min.jpg');
	background-size: cover;
	background-position: center 30%;
	opacity: 0.42;
	/* Pushes the photo back so it reads as depth rather than as content. */
	filter: saturate(0.75);
}

.mods-mast-scrim {
	position: absolute;
	inset: 0;
	background:
		/* Reaches solid canvas at 92%, not 100%: a gradient landing exactly on
		   the element's edge dithers against the photo and leaves a seam. */
		linear-gradient(180deg,
			rgba(32, 33, 37, 0.55) 0%,
			rgba(32, 33, 37, 0.72) 45%,
			rgba(32, 33, 37, 0.94) 80%,
			var(--bg-color) 92%,
			var(--bg-color) 100%);
}

/* A single soft brand-blue bloom behind the title. It is what stops the band
   reading as a grey photo with text on it. */
.mods-mast-glow {
	position: absolute;
	left: 50%;
	top: 46%;
	width: min(820px, 92vw);
	height: 340px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, var(--shadow-glow) 0%, color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 100%);
	opacity: 0.30;
	pointer-events: none;
}

/* The layers above are absolute, so content needs its own stacking context. */
.mods-mast-inner { position: relative; z-index: 1; }

/* Search bar — the primary control, so it gets the width and the weight. */
.mods-searchbar {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 800px;
	margin: 0 auto 22px;
	background-color: rgba(10, 11, 13, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	padding: 7px 7px 7px 10px;
	backdrop-filter: blur(6px);
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.mods-searchbar:focus-within {
	border-color: var(--mythiq-hover-blue);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mythiq-blue) 18%, transparent);
}
.mods-searchbar > i { color: var(--text-muted); flex: 0 0 auto; font-size: 16px; }
.mods-searchbar input {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 26px;
	padding: 12px 0;
}
.mods-searchbar input:focus { outline: none; }
.mods-searchbar input::placeholder { color: var(--text-muted); }
.mods-searchbar .btn { flex: 0 0 auto; }

/* Scope selector, sitting inside the pill on the left. Styled to read as part
   of the field rather than as a control bolted onto it — no border, no chrome,
   just the caret. */
.mods-searchbar-scope { position: relative; flex: 0 0 auto; display: flex; }
.mods-searchbar-scope select {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: var(--radius-md);
	color: var(--text-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	/* Right padding leaves room for the caret drawn by ::after. */
	padding: 13px 30px 13px 16px;
	cursor: pointer;
	max-width: 210px;
	text-overflow: ellipsis;
}
.mods-searchbar-scope select:focus { outline: none; }
.mods-searchbar-scope:focus-within { background-color: rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); }
/* The native caret cannot be styled, so it is replaced. pointer-events:none
   keeps clicks falling through to the select underneath. */
.mods-searchbar-scope::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--text-muted);
	border-bottom: 2px solid var(--text-muted);
	transform: rotate(45deg);
	pointer-events: none;
}
/* Options render in the OS menu, which does not inherit the dark canvas. */
.mods-searchbar-scope select option { background-color: var(--card-bg); color: var(--text-white); }

.mods-searchbar-div {
	flex: 0 0 auto;
	width: 1px;
	height: 26px;
	background-color: rgba(255, 255, 255, 0.16);
	margin: 0 4px 0 2px;
}

/* Proof line. Small, quiet, and the last thing read. */
.mods-mast-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: 15px;
	color: var(--text-muted);
}
.mods-fact strong { color: var(--text-white); font-family: var(--font-heading); font-weight: 700; }
.mods-fact-sep { width: 4px; height: 4px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.22); }

.mods-mast-upload {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-white);
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-mast-upload:hover { color: var(--mythiq-hover-blue); }

/* How many mods the viewer owns, on the "Your mods" link. A count is the whole
   reason to look, so it is carried on the link rather than left to the strip
   further down the page — in results mode the strip is not rendered at all. */
.mods-mast-count {
	display: inline-block;
	min-width: 20px;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	padding: 4px 7px;
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--mythiq-blue) 28%, transparent);
	border: 1px solid color-mix(in srgb, var(--mythiq-blue) 50%, transparent);
	color: var(--text-white);
}

/* --- Rails --------------------------------------------------------------
   Horizontal shelves, the way a streaming catalogue is presented. They are
   plain scroll containers: touch, trackpad and keyboard all work without any
   script, and the arrow buttons are added by JS only on rails that overflow.
   ------------------------------------------------------------------------ */

.mods-row { padding: 52px 0 0; }
.mods-row:last-of-type { padding-bottom: 100px; }
.mods-row-games { padding-top: 46px; }

.mods-row-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}
.mods-row-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 27px;
	line-height: 34px;
	color: var(--text-white);
}
.mods-row-sub { font-size: 15px; line-height: 22px; color: var(--text-muted); margin-top: 4px; }

.mods-row-more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-light);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-speed);
}
.mods-row-more:hover { color: var(--mythiq-hover-blue); }
.mods-row-more i { font-size: 11px; transition: transform var(--transition-speed); }
.mods-row-more:hover i { transform: translateX(3px); }

/* --rail-gutter tracks .container's own padding at each breakpoint. The rail
   pulls itself out to the container's edges with a negative margin and pays the
   same amount back as padding, so the cards still line up with the section
   heading while the SCROLLER extends to the page edge. */
.mods-rail-wrap {
	position: relative;
	--rail-gutter: 75px;
}

.mods-rail {
	display: grid;
	grid-auto-flow: column;
	/* A FIXED card width, not minmax(…, 1fr). With 1fr a shelf holding two or
	   three mods stretches them to half the viewport each and stops looking
	   like the same component as the shelf above it — which is exactly what a
	   game with few mods, or the related rail on a mod page, produces. */
	grid-auto-columns: 284px;
	gap: 20px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--rail-gutter);
	scrollbar-width: none;

	/* A scroll container clips on BOTH axes — there is no overflow-x:auto with
	   overflow-y:visible in CSS. .game-box lifts 8px and throws a shadow that
	   reaches ~11px sideways and ~55px below, so without this the glow is
	   sliced off along the rail's edges. Padding makes the room; the matching
	   negative margin keeps the shelf's own spacing unchanged. */
	padding: 14px var(--rail-gutter) 64px;
	margin: -14px calc(var(--rail-gutter) * -1) -58px;

	/* Cards leaving the shelf fade out instead of being guillotined at the
	   edge. The fade runs exactly across the gutter, so a card is at full
	   opacity for as long as it is inside the content column. */
	-webkit-mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--rail-gutter),
		#000 calc(100% - var(--rail-gutter)),
		transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--rail-gutter),
		#000 calc(100% - var(--rail-gutter)),
		transparent 100%);
}
.mods-rail::-webkit-scrollbar { display: none; }
.mods-rail > li { scroll-snap-align: start; min-width: 0; }

/* The games shelf is the same rail with smaller tiles and less room reserved
   underneath: a game tile lifts 4px and throws a 36px shadow, where a mod card
   lifts 8px and throws 55px. Everything else — the gutters, the edge fade, the
   snapping, the arrows — is inherited rather than restated, so the two shelves
   scroll identically and only ever have to be fixed once. */
.mods-rail.is-games {
	/* Narrower than a mod card because the tile is now portrait: at 190px the
	   box stands 285px tall, which is about the height of one mod card and
	   keeps the two kinds of shelf reading as one system. */
	grid-auto-columns: 190px;
	padding-bottom: 40px;
	margin-bottom: -34px;
}

.mods-rail-nav {
	position: absolute;
	top: calc(50% - 18px);
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(10, 11, 13, 0.82);
	color: var(--text-white);
	font-size: 15px;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed);
}
.mods-rail-nav:hover { background-color: var(--mythiq-blue); border-color: var(--mythiq-blue); transform: translateY(-50%) scale(1.06); }
.mods-rail-nav:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 3px; }
/* Inset, not outset: `left`/`right` resolve against the container's padding
   box, so a negative offset drops the button off-screen the moment the
   viewport is no wider than the container. Overlaying the rail edge is also
   what every streaming UI does. */
.mods-rail-nav.is-prev { left: 6px; }
.mods-rail-nav.is-next { right: 6px; }
.mods-rail-nav[hidden] { display: none; }

/* --- Game tiles ---------------------------------------------------------
   Key art and a name. Nothing else.

   The shelf on /mods/ carried mod counts, download totals and category quick
   links once; every one of them was information the reader could not act on
   yet, and together they turned a picker into a second content block competing
   with the mod rails below it. The numbers live on the game's own hub, and on
   /mods/games/, where choosing between games is the only thing the page does.

   ONE TILE, TWO CONTAINERS. On /mods/ it rides the rail above — one row of the
   page whatever the catalogue holds. On /mods/games/ the same tile fills the
   grid below, which is where a shelf that grows a row per four games belongs:
   a page whose whole job is to be long.
   ------------------------------------------------------------------------ */

.mods-gameboxes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 30px 22px;
}

.mods-gamebox { display: block; text-decoration: none; }
.mods-gamebox.is-quiet { opacity: 0.5; }
.mods-gamebox.is-quiet:hover { opacity: 1; }

.mods-gamebox-art {
	position: relative;
	display: block;
	/* 2:3 — a box on a shelf, not a widescreen still. It is the shape the
	   artwork itself comes in: Steam's vertical library capsule and
	   CurseForge's box art are both composed portrait, with the title
	   treatment at the top and the subject filling the height. A 16:9 crop of
	   either threw most of that away. */
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #101012;
	transition: border-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.mods-gamebox-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mods-gamebox:hover .mods-gamebox-art {
	border-color: var(--mythiq-blue);
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.mods-gamebox:focus-visible .mods-gamebox-art { border-color: var(--mythiq-hover-blue); }
.mods-gamebox:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 4px; border-radius: var(--radius-md); }

/* No key art: a designed brand plate rather than an empty box. We do not
   invent artwork for a game we do not have art for. */
.mods-gamebox-mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(130% 130% at 20% 0%, color-mix(in srgb, var(--mythiq-blue) 42%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 62%),
		linear-gradient(145deg, #23252b 0%, #16171a 100%);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 40px;
	color: rgba(255, 255, 255, 0.28);
}

/* Below the art, not on it: a name printed over key art has to fight it, and
   the whole point of this shelf is that the art is doing the work. */
.mods-gamebox-name {
	display: block;
	margin-top: 13px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--text-white);
	text-align: center;
	/* TWO LINES, and the room for both is reserved whether they are used or
	   not — so every tile on the shelf is the same height and the artwork all
	   lines up. One line was right when the tile was 224px of landscape; on a
	   190px box "World of Warcraft Classic" became "World of Warcraft C…". */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 44px;
	overflow: hidden;
	transition: color var(--transition-speed);
}
.mods-gamebox:hover .mods-gamebox-name { color: var(--mythiq-hover-blue); }

/* The count, on /mods/games/ only — see the note at the top of this block and
   the $gameTileCount flag in _gamebox.php. */
.mods-gamebox-count {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 18px;
	color: var(--text-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The tile that ends the games rail and leads to the rest of them. It is a
   tile rather than a link under the shelf because the shelf scrolls: a control
   parked at the start would be behind the reader by the time they wanted it. */
.mods-gamebox-all .mods-gamebox-art {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.16);
	background:
		radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--mythiq-blue) 20%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 66%),
		linear-gradient(145deg, #1d1f24 0%, #141519 100%);
}
.mods-gamebox-all:hover .mods-gamebox-art { border-style: solid; }
.mods-gamebox-allmark {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--text-light);
}
.mods-gamebox-allmark i {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 14px;
	transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.mods-gamebox-all:hover .mods-gamebox-allmark i { background-color: var(--mythiq-blue); border-color: var(--mythiq-blue); color: #fff; }

/* --- Results grid -------------------------------------------------------- */

.mods-listing { padding: 44px 0 100px; }

.mods-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mods-toolbar-count { font-size: 17px; color: var(--text-light); }
.mods-toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.mods-select select {
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 13px 16px;
	cursor: pointer;
}
.mods-select select:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }

.mods-clear { font-size: 15px; color: var(--text-muted); text-decoration: underline; }
.mods-clear:hover { color: var(--mythiq-hover-blue); }

.mods-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
}

/* --- Mod card -----------------------------------------------------------
   There is no mod-card component. Mods use the site's existing `.game-box`
   (assets/css/style.css) — the same card the homepage tools use — so the two
   cannot drift apart. See app/views/mods/_card.php for the two mod-specific
   bits, both of which are handled in the markup rather than here.

   Only the star row below is local, and it belongs to the mod page's rating
   panel rather than to any card.
   ------------------------------------------------------------------------ */

.mods-stars { display: inline-flex; align-items: center; gap: 3px; color: #fbbf24; font-size: 13px; }
.mods-stars .is-empty { color: rgba(255, 255, 255, 0.16); }
.mods-stars-count { margin-left: 6px; color: var(--text-muted); }
.mods-stars-lg { font-size: 18px; gap: 4px; }

/* Rating and downloads, sitting at the top of the card's art. .game-box-art
   already lays a dark gradient over its top 30%, which is what holds these
   legible on a bright cover. z-index 4: above the title plate (3), below the
   accent ring (5). */
.mods-badges {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: flex;
	gap: 6px;
	pointer-events: none;
}

.mods-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background-color: rgba(10, 10, 12, 0.62);
	backdrop-filter: blur(6px);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	line-height: 12px;
	color: var(--text-white);
	white-space: nowrap;
}
.mods-badge i { font-size: 10px; color: var(--text-muted); }
.mods-badge-rating i { color: #fbbf24; }

/* --- Mod page chips ------------------------------------------------------ */

.mods-chips { display: flex; flex-wrap: wrap; gap: 8px; }
a.mods-chip { text-decoration: none; transition: background-color var(--transition-speed); }
a.mods-chip:hover { background-color: rgba(255, 255, 255, 0.20); }
.mods-chip-cat {
	background-color: color-mix(in srgb, var(--mythiq-blue) 20%, transparent);
	color: var(--mythiq-hover-blue);
}
a.mods-chip-cat:hover { background-color: color-mix(in srgb, var(--mythiq-blue) 34%, transparent); }

/* .mods-chip-ext ("Off-site download · host") was here and is deliberately gone.
   The chip row is navigation — everything else in it is somewhere you can go —
   and a dead pill naming a CDN hostname read as one more link while being the
   only item that was not. The download button, the note under it and the leaving
   interstitial all still say it, which is where it changes what someone does. */

/* --- Keep browsing ------------------------------------------------------
   The bottom of a mod page. A mod reached from a search used to be a
   cul-de-sac — one link out, in the band at the top, which is off screen by
   the time anyone has finished reading. The rail answers "what else is like
   this"; the strip under it answers "take me back up", at all three levels.
   ------------------------------------------------------------------------ */

.mods-related { padding-top: 8px; }
.mods-related.mods-row:last-of-type { padding-bottom: 40px; }

.mods-onward {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 26px 0 90px;
}
.mods-onward-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.mods-onward-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: 8px;
}
.mods-onward-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-color: rgba(255, 255, 255, 0.03);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-light);
	text-decoration: none;
	transition: border-color var(--transition-speed), color var(--transition-speed), background-color var(--transition-speed);
}
.mods-onward-link:hover {
	border-color: var(--mythiq-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	color: var(--mythiq-hover-blue);
}
.mods-onward-link:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 3px; }

/* --- Detail tabs --------------------------------------------------------
   The panels are a stacked document until JS promotes them to a tablist, so
   everything here styles the enhanced state; the un-enhanced state needs
   nothing beyond the existing heading rules.
   ------------------------------------------------------------------------ */

.mods-tabs {
	margin-bottom: 30px;
	/* The site header is a floating 66px pill inset 16px; without this an
	   anchor jump parks the tablist underneath it. */
	scroll-margin-top: calc(var(--header-offset) + var(--header-height) + 20px);
}
.mods-tabs[hidden] { display: none; }

.mods-tablist {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.mods-tablist::-webkit-scrollbar { display: none; }

.mods-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 14px 18px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--transition-speed), border-color var(--transition-speed);
}
.mods-tab:hover { color: var(--text-white); }
.mods-tab[aria-selected="true"] { color: var(--text-white); border-bottom-color: var(--mythiq-blue); }
.mods-tab:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: -2px; }

.mods-tab-count {
	font-size: 12px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.09);
	color: var(--text-light);
}
.mods-tab[aria-selected="true"] .mods-tab-count { background-color: var(--mythiq-blue); color: #fff; }

/* Once the tabs are live the panel's own <h2> just repeats the tab label, so it
   is hidden — but only then. Without JS the tablist keeps its [hidden] and
   these headings are what a reader (and a crawler) navigates the stacked
   document by. Each panel is aria-labelledby its tab either way. */
.mods-tabs:not([hidden]) ~ .mods-panel-doc > .mods-h2 { display: none; }
.mods-tabs:not([hidden]) ~ .mods-panel-doc { padding-top: 4px; }
.mods-panel-doc[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Media tab — the screenshot grid, and the viewer it opens.
   --------------------------------------------------------------------------- */

/* auto-fill, not auto-fit: with auto-fit a mod holding two screenshots stretches
   them across the full column, and a 640px-wide thumbnail of a 16:9 screenshot
   next to nothing reads as a layout accident. auto-fill keeps the track width
   the same whether there are two shots or twelve, which is the same argument
   the rails settled with their fixed grid-auto-columns. */
.mods-shots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 18px;
}
.mods-shot { min-width: 0; }

.mods-shot-btn {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #101216;
	cursor: zoom-in;
	transition: border-color var(--transition-speed), transform var(--transition-speed);
}
.mods-shot-btn img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The thumbnail is a crop of somebody's screenshot; a slow fade on hover
	   would fight the zoom cursor's promise that clicking does something. */
	display: block;
}
.mods-shot-btn:hover,
.mods-shot-btn:focus-visible { border-color: var(--mythiq-blue); }
.mods-shot-btn:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 2px; }

.mods-shot-cap {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--text-muted);
}

/* --- Viewer ---------------------------------------------------------------
   Fixed, above everything, and its own click target: the backdrop closes and
   the picture does not, which the script enforces by testing the event target.
   -------------------------------------------------------------------------- */
.mods-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 72px 20px 64px;
	background-color: rgba(6, 7, 10, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.mods-lightbox[hidden] { display: none; }

/* The page behind must not scroll while the viewer is open, or dragging on the
   backdrop moves the article the reader cannot see. */
body.mods-lightbox-open { overflow: hidden; }

.mods-lightbox-figure {
	margin: 0;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
/* Both caps are needed. Without max-height a tall screenshot pushes its own
   caption off the bottom of the screen; without max-width a wide one overruns
   the arrows. */
.mods-lightbox-figure img {
	max-width: 100%;
	max-height: calc(100vh - 190px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.mods-lightbox-cap {
	margin: 0;
	max-width: 720px;
	text-align: center;
	font-size: 15px;
	line-height: 23px;
	color: var(--text-light);
}

.mods-lightbox-close,
.mods-lightbox-nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-white);
	font-size: 17px;
	cursor: pointer;
	transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.mods-lightbox-close:hover,
.mods-lightbox-nav:hover { background-color: rgba(255, 255, 255, 0.14); border-color: var(--mythiq-blue); }
.mods-lightbox-close:focus-visible,
.mods-lightbox-nav:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 2px; }
.mods-lightbox-close { position: absolute; top: 18px; right: 20px; }
.mods-lightbox-nav[hidden] { display: none; }

.mods-lightbox-count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	margin: 0;
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
}

@media (max-width: 640px) {
	.mods-shots { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

	/* The arrows stop flanking the picture and sit under it — at this width a
	   44px control either side leaves the screenshot about 180px wide. */
	.mods-lightbox { padding: 64px 12px 78px; }
	.mods-lightbox-nav { position: absolute; bottom: 18px; }
	.mods-lightbox-nav.is-prev { left: 24px; }
	.mods-lightbox-nav.is-next { right: 24px; }
	.mods-lightbox-figure img { max-height: calc(100vh - 200px); }
	.mods-lightbox-count { bottom: 32px; }
}

.mods-install-hint {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	padding: 14px 18px;
	font-size: 15px;
	line-height: 24px;
	color: var(--text-light);
	background-color: color-mix(in srgb, var(--mythiq-blue) 9%, transparent);
	border-left: 3px solid var(--mythiq-blue);
	border-radius: var(--radius-sm);
}

.mods-version-latest {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6fe0b4;
	background-color: rgba(5, 150, 105, 0.18);
	border: 1px solid rgba(52, 211, 153, 0.32);
	border-radius: var(--radius-pill);
	padding: 5px 10px;
}

/* --- Compatibility ------------------------------------------------------
   The game builds a mod runs on and the DLC it needs. Two colours, and they
   mean two different things: blue is a fact about the mod (which build), violet
   is a demand on the reader (something to own). Never the amber the off-site
   chip and the pending pill use — that colour means "read this before you act"
   on this site and a supported version list is not a warning.

   A tag is deliberately NOT the pill .mods-chip is: same family, but a lower
   weight and no letter-spacing, because these carry version numbers and product
   names that have to stay readable rather than shout a one-word label.
   ------------------------------------------------------------------------ */

.mods-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: middle;
}

.mods-tag {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	/* Version strings run long ("1.50.2.6s") and DLC names longer; a tag wraps
	   inside itself rather than pushing the row sideways. */
	overflow-wrap: anywhere;
}
.mods-tag-ver {
	color: var(--mythiq-hover-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 16%, transparent);
	border-color: color-mix(in srgb, var(--mythiq-blue) 30%, transparent);
}
.mods-tag-dlc {
	color: #c9b6f6;
	background-color: rgba(139, 92, 246, 0.15);
	border-color: rgba(139, 92, 246, 0.30);
}

/* The block at the top of the Requirements tab. Term on the left, tags on the
   right, collapsing to stacked rows on a phone. */
.mods-spec {
	margin: 0 0 28px;
	padding: 20px 24px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
}
.mods-spec-row {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.mods-spec-row + .mods-spec-row {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mods-spec dt {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 28px;
	color: var(--text-muted);
}
.mods-spec dt i { margin-right: 8px; opacity: 0.75; }
.mods-spec dd { margin: 0; }
.mods-spec-note { font-size: 14px; line-height: 22px; color: var(--text-muted); margin-top: 9px; }

/* One release's own compatibility, in the version history and in the author's
   own release list. Inline, quiet, and only present on the rows where it
   differs from the mod — see the note in app/views/mods/view.php. */
.mods-compat-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
}
.mods-compat-key {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mods-compat-key:not(:first-child) { margin-left: 8px; }

/* Under the download button. The one place a reader sees this without opening
   a tab, so it is separated from the size line by a rule rather than just
   spacing — it is a different kind of statement about the same file. */
.mods-panel-compat {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mods-panel-compat-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.mods-panel-compat-row + .mods-panel-compat-row { margin-top: 10px; }
.mods-panel-compat-key {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	flex: 0 0 100%;
}
.mods-panel-compat-more {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.mods-panel-compat-more:hover { color: var(--mythiq-hover-blue); border-bottom-color: var(--mythiq-hover-blue); }

/* --- Report form --------------------------------------------------------- */

.mods-report-intro { max-width: 620px; margin-bottom: 22px; }

.mods-report-form {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 26px 28px 24px;
	position: relative;   /* anchors the absolutely-positioned honeypot */
}

.mods-report-reasons { border: 0; padding: 0; margin: 0 0 22px; }
.mods-report-reasons legend {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-white);
	margin-bottom: 12px;
}

.mods-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 8px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius-sm);
	font-size: 16px;
	color: var(--text-light);
	cursor: pointer;
	transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.mods-radio:hover { border-color: rgba(255, 255, 255, 0.22); }
.mods-radio input { accent-color: var(--mythiq-blue); flex: 0 0 auto; }
.mods-radio:has(input:checked) {
	border-color: var(--mythiq-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 10%, transparent);
	color: var(--text-white);
}
.mods-radio:focus-within { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }

/* Quiet by design: reporting should be findable, not inviting. */
.mods-side-report { text-align: center; font-size: 14px; }
.mods-side-report a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-side-report a:hover { color: #f87171; }

/* --- Game band + category sidebar ---------------------------------------
   The game pages. One model, and none of it moves between the game's own
   listing and one of its categories:

     .mods-gamehead  the GAME, identically on every page underneath it.
     .mods-side      every category, vertical and all visible at once — and
                     the way back, since "All mods" heads the same list.
     .mods-main      the slice being looked at, its count and its sort.

   This replaced a stack of three navigation strips (breadcrumb, back button
   and a sticky chip bar that scrolled sideways). The chip bar is the part
   worth not repeating: a game with seven categories hid most of them past
   the right edge, so the one control that showed what a game contained was
   the one you could not read.
   ------------------------------------------------------------------------ */

.mods-gamehead {
	position: relative;
	/* Must clear the floating header explicitly: a 66px pill inset 16px. */
	padding: calc(var(--header-offset) + var(--header-height) + 44px) 0 34px;
	background-color: var(--bg-color);
	overflow: hidden;
	margin-bottom: 44px;
}
.mods-gamehead-inner { position: relative; z-index: 1; }

.mods-gamehead-main { display: flex; align-items: center; gap: 24px; }

.mods-gamehead-art {
	flex: 0 0 auto;
	position: relative;
	display: block;
	/* The same box as the shelf, at the size a heading can stand beside — the
	   game's identity should not change shape between the shelf you picked it
	   from and the page you land on. */
	width: 104px;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-color: #101012;
}
.mods-gamehead-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mods-gamehead-mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(130% 130% at 20% 0%, color-mix(in srgb, var(--mythiq-blue) 42%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 62%),
		linear-gradient(145deg, #23252b 0%, #16171a 100%);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 34px;
	color: rgba(255, 255, 255, 0.28);
}

.mods-gamehead-text { min-width: 0; flex: 1 1 auto; }

/* Renders as an h1 on the game's own page and as a link inside a category —
   same type either way, because it is the same thing either way. */
.mods-gamehead-name {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--text-white);
	text-decoration: none;
	margin-bottom: 10px;
	transition: color var(--transition-speed);
}
a.mods-gamehead-name:hover { color: var(--mythiq-hover-blue); }

.mods-gamehead-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 15px;
	color: var(--text-muted);
}
.mods-gamehead-facts strong { color: var(--text-light); font-family: var(--font-heading); font-weight: 700; }
/* The separator trails its own fact rather than leading the next one. When
   the line wraps — which it does on a phone — a leading dot starts the second
   line with punctuation; a trailing one just ends the first. */
.mods-gamehead-facts span:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.24);
	vertical-align: middle;
	margin-left: 14px;
}

.mods-gamehead-cta { flex: 0 0 auto; }

/* The two columns ------------------------------------------------------- */

.mods-gamebody {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 52px;
	padding-bottom: 100px;
}

.mods-side {
	/* Follows the reader down a long grid, so switching category never means
	   scrolling back up first. */
	position: sticky;
	top: calc(var(--header-offset) + var(--header-height) + 24px);
	align-self: start;
}

.mods-sidenav ul { list-style: none; }

.mods-sidenav-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0 14px;
	margin-bottom: 12px;
}

.mods-sidenav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	/* Drawn inside so switching to the active state cannot shift the list. */
	box-shadow: inset 3px 0 0 transparent;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 21px;
	color: var(--text-light);
	text-decoration: none;
	transition: background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
}
.mods-sidenav-link:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-white); }
.mods-sidenav-link:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: -2px; }

.mods-sidenav-link.is-active {
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	box-shadow: inset 3px 0 0 var(--mythiq-blue);
	color: var(--text-white);
}

/* A category nobody has published into is shown — what a game is filed under
   is honest information — but never at the weight of one that leads somewhere. */
.mods-sidenav-link.is-empty { color: var(--text-muted); }
.mods-sidenav-link.is-empty:hover { color: var(--text-light); }

.mods-sidenav-n {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted);
}
.mods-sidenav-link.is-active .mods-sidenav-n { color: var(--mythiq-hover-blue); }

.mods-sidenav-out {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 20px 0 0 14px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 14px;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-sidenav-out:hover { color: var(--mythiq-hover-blue); }
.mods-sidenav-out i { font-size: 11px; transition: transform var(--transition-speed); }
.mods-sidenav-out:hover i { transform: translateX(-3px); }

/* Main column ----------------------------------------------------------- */

.mods-main-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mods-main-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: var(--text-white);
}
.mods-main-count { font-size: 15px; color: var(--text-muted); margin-top: 5px; }

.mods-sort { display: flex; align-items: center; gap: 10px; }
.mods-sort-field { display: inline-flex; align-items: center; gap: 10px; }
.mods-sort-field > span {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mods-sort select {
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 11px 14px;
	cursor: pointer;
}
.mods-sort select:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }
.mods-sort select option { background-color: var(--card-bg); color: var(--text-white); }
/* Hidden by mods-browse.js once the select submits on its own. */
.mods-sort [hidden] { display: none; }

/* Sub-page band: the masthead device at a smaller size, used by the mod page,
   the submit/edit form and the member's own list. */
.mods-page-top {
	position: relative;
	padding: calc(var(--header-offset) + var(--header-height) + 52px) 0 30px;
	background-color: var(--bg-color);
	margin-bottom: 44px;
	overflow: hidden;
}
.mods-page-top .container { position: relative; z-index: 1; }
.mods-page-top .mods-hero-img { opacity: 0.30; }

/* On a game page --cover is that game's BOX, and a box is mostly title
   treatment. Stretched across a 1440px band it put a legible fragment of the
   wordmark behind the heading — "der Scrolls V" sitting across the page — which
   reads as a mistake rather than as a backdrop. Blurred, the same picture is
   what it is meant to be here: that game's colours behind its own name. The
   scale crops off the transparent rim a blur samples in at the edges. */
.mods-gamehead .mods-hero-img {
	filter: saturate(0.9) blur(34px);
	transform: scale(1.12);
}

/* The art and scrim layers, shared with every band that carries key art. */
.mods-hero-img {
	position: absolute;
	inset: 0;
	background-image: var(--cover, url('../img/uploads/2019/10/planets_wallpaper-min.jpg'));
	background-size: cover;
	background-position: center 35%;
	opacity: 0.34;
	filter: saturate(0.8);
}
.mods-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(32, 33, 37, 0.55) 0%,
		rgba(32, 33, 37, 0.74) 45%,
		rgba(32, 33, 37, 0.94) 80%,
		var(--bg-color) 92%,
		var(--bg-color) 100%);
}

.mods-page-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--text-white);
	margin-bottom: 12px;
}
.mods-page-sub { font-size: 18px; line-height: 28px; color: var(--text-light); max-width: 640px; }

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

.mods-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 48px;
	font-size: 16px;
}
.mods-pagination a { color: var(--mythiq-hover-blue); text-decoration: none; }
.mods-pagination a:hover { text-decoration: underline; }
.mods-pagination-disabled { color: var(--text-muted); }
.mods-pagination-info { color: var(--text-light); }

/* --- Empty state --------------------------------------------------------- */

.mods-empty {
	text-align: center;
	padding: 64px 24px;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
}
.mods-empty-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: var(--text-white);
	margin-bottom: 10px;
}
.mods-empty-text { font-size: 17px; line-height: 26px; color: var(--text-muted); margin-bottom: 22px; }

/* --- Mod detail ---------------------------------------------------------- */

.mods-detail-head { position: relative; z-index: 1; }

/* The back button stacks ABOVE the trail on the mod page and on a category, so
   it needs less air under it than when it stands alone over a page title. */
.mods-detail-head .mods-back,
.mods-gamehead-inner .mods-back { margin-bottom: 14px; }

.mods-detail-title-row { display: flex; align-items: flex-start; gap: 26px; }

/* The cover column: the artwork, and under it the way into the gallery.
   The 220px that used to be on the image itself lives on the wrapper now, so the
   "Show more" link below is the same width as the picture it belongs to. */
.mods-detail-coverwrap { flex: 0 0 auto; width: 220px; }

.mods-detail-cover-zoom {
	display: block;
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: zoom-in;
}
.mods-detail-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* The affordance. Covers are photographic and a border change is invisible on
   them, so this is a real overlay — hidden until hover or keyboard focus, which
   keeps the hero clean for the majority who never click it. */
.mods-detail-cover-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	background-color: rgba(6, 7, 10, 0.55);
	opacity: 0;
	transition: opacity var(--transition-speed);
}
.mods-detail-cover-zoom:hover .mods-detail-cover-hint,
.mods-detail-cover-zoom:focus-visible .mods-detail-cover-hint { opacity: 1; }
.mods-detail-cover-zoom:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 3px; }

/* Reads as a control, not a caption. It sits on hero artwork we do not control,
   so it is translucent with a blur behind it — the same device .mods-back uses
   a few lines up the page, for the same reason. */
.mods-detail-cover-more {
	display: block;
	margin-top: 8px;
	padding: 7px 10px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(10, 12, 16, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: var(--text-white);
	transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.mods-detail-cover-more:hover {
	background-color: color-mix(in srgb, var(--mythiq-blue) 28%, transparent);
	border-color: var(--mythiq-blue);
	color: #fff;
}
.mods-detail-cover-more:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 2px; }
.mods-detail-title-text { min-width: 0; }

.mods-detail-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 46px;
	line-height: 54px;
	color: var(--text-white);
	margin: 12px 0 8px;
}
.mods-detail-byline { font-size: 16px; color: var(--text-light); margin-bottom: 12px; }

/* The "keep browsing" band below carries the page's bottom margin now. */
.mods-detail-body { padding-bottom: 56px; }

.mods-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 44px;
	align-items: start;
}

.mods-detail-main { min-width: 0; }

/* The download panel follows the reader down the page. It is the one thing on a
   mod page somebody came here to press, and the body above it is tabbed prose
   that can run for screens — having to scroll back up to download what you just
   finished reading about was the whole problem.

   The WHOLE aside is sticky, not the download panel alone. A sticky first child
   keeps its place in flow, so as it stuck it would slide down over the rating
   panel beneath it; making the aside the sticky unit takes both together and
   nothing overlaps.

   The max-height is not decoration: the aside is ~740px, which does not fit the
   viewport of a 1366x768 laptop, and a sticky element taller than the screen
   pins its top and puts its bottom permanently out of reach. Capping it and
   letting it scroll internally means the rating panel is always reachable; on a
   tall screen the cap never binds and no scrollbar appears. */
/* The download and rating panels, pinned beside the reading column.

   THE WHOLE ASIDE IS THE STICKY UNIT, not .mods-panel-download alone: a sticky
   first child keeps its place in flow, so as it stuck it would slide down over
   the rating panel beneath it.

   IT DOES NOT SCROLL INSIDE ITSELF. An earlier version carried max-height +
   overflow-y: auto to cope with an aside taller than the viewport, and the cure
   was worse: the panels scrolled away inside their own box while the page
   scrolled behind them, so the Download button could disappear without the page
   having moved. A widget you have pinned in order to keep it visible must not
   then hide itself.

   The case that cap existed for is handled by NOT STICKING instead — see
   .mods-detail-side.is-tall, which view.php's script applies when the aside is
   taller than the space it has. Falling back to normal flow means everything is
   reachable by scrolling the page, which is where the reader's attention
   already is. Without JS the aside is plain sticky, which is correct on any
   viewport tall enough to hold it and is the overwhelming majority. */
.mods-detail-side {
	min-width: 0;
	position: sticky;
	top: calc(var(--header-offset) + var(--header-height) + 24px);
	align-self: start;
}
.mods-detail-side.is-tall { position: static; }

.mods-detail-lead { font-size: 21px; line-height: 32px; color: var(--text-white); margin-bottom: 24px; }

/* Member-written prose. Whitespace is preserved by nl2br() at render, so this
   only has to set the reading rhythm. */
.mods-prose {
	font-size: 18px;
	line-height: 30px;
	color: var(--text-light);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Rich text written by a member.
   Only the tags in MODS_RICH_TAGS can ever appear here (app/mods.php), so this
   is the whole list — there is no ruleset below for something the sanitizer
   would have stripped. Descendant selectors on purpose: the markup is nested
   (a <strong> inside an <li> inside a <ul>) and the author does not get to add
   a class to anything.
   --------------------------------------------------------------------------- */
.mods-prose > :first-child { margin-top: 0; }
.mods-prose > :last-child { margin-bottom: 0; }
.mods-prose p { margin: 0 0 18px; }
.mods-prose h3,
.mods-prose h4 {
	font-family: var(--font-heading);
	color: var(--text-white);
	margin: 32px 0 12px;
}
.mods-prose h3 { font-size: 21px; line-height: 28px; font-weight: 700; }
.mods-prose h4 { font-size: 18px; line-height: 26px; font-weight: 600; }
.mods-prose ul,
.mods-prose ol { margin: 0 0 18px; padding-left: 24px; }
.mods-prose ul { list-style: disc; }
.mods-prose ol { list-style: decimal; }
.mods-prose li { margin-bottom: 8px; }
.mods-prose li > ul,
.mods-prose li > ol { margin: 8px 0 0; }
.mods-prose strong, .mods-prose b { color: var(--text-white); font-weight: 700; }
.mods-prose em, .mods-prose i { font-style: italic; }
.mods-prose blockquote {
	margin: 0 0 18px;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--mythiq-blue);
	color: var(--text-muted);
}
.mods-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	background-color: rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
}
/* The one place horizontal scrolling is right: a config line must not be
   re-wrapped, because where it breaks changes what it means. */
.mods-prose pre {
	margin: 0 0 18px;
	padding: 14px 16px;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	overflow-x: auto;
}
.mods-prose pre code { background: none; padding: 0; font-size: 14px; line-height: 22px; }
.mods-prose hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 28px 0; }
.mods-prose a { color: var(--mythiq-blue); text-decoration: underline; }
.mods-prose a:hover { color: var(--mythiq-hover-blue); }

.mods-h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 32px;
	color: var(--text-white);
	margin: 48px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	scroll-margin-top: calc(var(--header-offset) + var(--header-height) + 16px);
}

/* Releases */
.mods-versions { list-style: none; margin: 0; padding: 0; }

.mods-version {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-left: 3px solid var(--mythiq-blue);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	margin-bottom: 14px;
}
/* An unreviewed release is visible only to its owner and to staff, so it is
   marked rather than hidden — they need to see what is waiting. */
.mods-version.is-unreviewed { border-left-color: #fbbf24; background-color: rgba(217, 119, 6, 0.07); }

.mods-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mods-version-label { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--text-white); }
.mods-version-meta { font-size: 15px; color: var(--text-muted); }
.mods-version-head .btn { margin-left: auto; }

.mods-version-changelog { font-size: 16px; line-height: 26px; color: var(--text-light); margin-top: 12px; overflow-wrap: anywhere; }

.mods-version-hash { margin-top: 10px; }
.mods-version-hash code {
	font-size: 12px;
	color: var(--text-muted);
	word-break: break-all;
	background-color: rgba(255, 255, 255, 0.03);
	border-radius: var(--radius-sm);
	padding: 3px 7px;
}

/* Sidebar panels */
.mods-panel {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 24px 24px 20px;
	margin-bottom: 20px;
}
.mods-panel-download { border-color: color-mix(in srgb, var(--mythiq-blue) 28%, transparent); }

.mods-panel-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: var(--text-white);
	margin-bottom: 16px;
}
.mods-panel-note { font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 18px; }

/* Off-site download notice, directly under the button in the download panel.
   Two lines, two colours, and they are not interchangeable: the amber one is
   what we CANNOT vouch for, the green one is the single thing we can. Keeping
   them visually apart stops the reassurance from being read as covering the
   file, which it does not. Left-aligned against the centred .mods-panel-note
   above it, because this is prose to read rather than a caption to glance at. */
.mods-ext-note {
	margin: 0 0 16px;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.mods-ext-line {
	display: flex;
	gap: 9px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 21px;
	color: var(--text-light);
	text-align: left;
	background-color: rgba(217, 119, 6, 0.10);
	border-left: 3px solid #f59e0b;
}
.mods-ext-line i { flex: none; margin-top: 4px; font-size: 13px; color: #fbbf24; }
.mods-ext-line strong { color: var(--text-white); }

.mods-ext-line.is-checked {
	margin-top: 2px;
	background-color: rgba(5, 150, 105, 0.10);
	border-left-color: #34d399;
}
.mods-ext-line.is-checked i { color: #6fe0b4; }

.mods-panel-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	text-align: center;
}
.mods-panel-stats dt {
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 5px;
}
.mods-panel-stats dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--text-white); }

/* --- Ratings ------------------------------------------------------------- */

.mods-rating-summary { text-align: center; margin-bottom: 20px; }
.mods-rating-avg {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 44px;
	line-height: 48px;
	color: var(--text-white);
}
.mods-rating-count { display: block; font-size: 14px; color: var(--text-muted); margin-top: 6px; }

.mods-dist { list-style: none; margin: 0 0 20px; padding: 0; }
.mods-dist li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
.mods-dist-label { flex: 0 0 26px; }
.mods-dist-bar { flex: 1 1 auto; height: 7px; background-color: rgba(255, 255, 255, 0.07); border-radius: var(--radius-pill); overflow: hidden; }
.mods-dist-bar span { display: block; height: 100%; background-color: var(--mythiq-blue); border-radius: var(--radius-pill); }
.mods-dist-n { flex: 0 0 28px; text-align: right; }

/* Star picker. The radios are rendered 5..1 so the ~ sibling combinator can
   fill every star to the LEFT of the hovered/checked one — CSS has no
   preceding-sibling selector, so the DOM order carries that instead. */
.mods-rate-form { margin-top: 4px; }

.mods-rate-stars { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; }
.mods-rate-stars legend { float: left; width: 100%; font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 10px; }
.mods-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mods-rate-stars label { font-size: 26px; color: rgba(255, 255, 255, 0.16); cursor: pointer; transition: color var(--transition-speed); }
.mods-rate-stars label:hover,
.mods-rate-stars label:hover ~ label,
.mods-rate-stars input:checked ~ label { color: #fbbf24; }
.mods-rate-stars input:focus-visible + label { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }

/* --- Comments ------------------------------------------------------------ */

.mods-comments { list-style: none; margin: 0 0 28px; padding: 0; }

.mods-comment {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	margin-bottom: 12px;
}
.mods-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mods-comment-author { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--text-white); }
.mods-comment-date { font-size: 14px; color: var(--text-muted); }
.mods-comment-delete { margin-left: auto; }
.mods-comment-body { font-size: 17px; line-height: 27px; color: var(--text-light); overflow-wrap: anywhere; }

.mods-comment-form { margin-top: 8px; }

/* --- Forms --------------------------------------------------------------- */

.mods-form-wrap,
.mods-manage-wrap { padding-bottom: 100px; }

.mods-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 44px;
	align-items: start;
}

.mods-form {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 32px 36px 30px;
	margin-bottom: 24px;
	position: relative;   /* anchors the absolutely-positioned honeypot */
	/* The stepper scrolls here when a step change would otherwise leave the
	   form's top off screen. Clears the floating 66px header inset 16px. */
	scroll-margin-top: calc(var(--header-offset) + var(--header-height) + 20px);
}

.mods-form-legend {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--text-white);
	margin-bottom: 20px;
}
.mods-form-legend:not(:first-child) {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mods-form-legend:focus { outline: none; }   /* moved to by the stepper, not clicked */

/* --- Steps ---------------------------------------------------------------
   Submitting a mod is three questions, and the form now looks like three
   questions whether or not the script that shows them one at a time is
   running. Un-stepped they are sections with a rule between them; stepped,
   .is-stepped drops the rules because only one is on screen at a time.
   ------------------------------------------------------------------------ */

.mods-step[hidden] { display: none; }
.mods-step + .mods-step {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mods-form.is-stepped .mods-step + .mods-step { margin-top: 0; padding-top: 0; border-top: 0; }

.mods-step .mods-form-legend { margin-bottom: 6px; }
.mods-step-sub { font-size: 15px; line-height: 24px; color: var(--text-muted); margin-bottom: 24px; }

.mods-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-right: 12px;
	vertical-align: 2px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--mythiq-blue) 16%, transparent);
	color: var(--mythiq-hover-blue);
	font-size: 15px;
	line-height: 1;
}
/* Stacked, this badge is the only thing numbering the sections. Stepped, the
   rail two inches above it is already showing the same digit highlighted, and
   two circles reading "3" in one column is noise. */
.mods-form.is-stepped .mods-step-n { display: none; }

/* The rail. Hidden in the markup and revealed by mods-form.js: with the script
   blocked there are no steps, so there is no position to be shown. */
.mods-steplist {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0 0 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mods-steplist[hidden] { display: none; }

.mods-steplist-item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-muted);
	transition: color var(--transition-speed);
}
.mods-steplist-n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	color: var(--text-light);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
}
.mods-steplist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mods-steplist-item.is-current { color: var(--text-white); }
.mods-steplist-item.is-current .mods-steplist-n {
	background-color: var(--mythiq-blue);
	border-color: var(--mythiq-blue);
	color: #fff;
}

/* A finished step is the only one worth clicking, so it is the only one that
   says so — the rail never offers a jump forward past a step's validation. */
.mods-steplist-item.is-done { color: var(--text-light); cursor: pointer; }
.mods-steplist-item.is-done .mods-steplist-n {
	background-color: color-mix(in srgb, var(--mythiq-blue) 20%, transparent);
	border-color: color-mix(in srgb, var(--mythiq-blue) 45%, transparent);
	color: var(--mythiq-hover-blue);
}
.mods-steplist-item.is-done:hover { color: var(--text-white); }

.mods-field { display: block; margin-bottom: 20px; }
/* The label is a <span> inside a wrapping <label> on most fields, and a real
   <label for> on the rich-text ones — a <label> must not wrap an editor, or a
   click anywhere inside it bounces focus back to the hidden textarea. Both
   spellings get the same heading treatment. */
.mods-field > label:first-child,
.mods-field > span:first-child {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-white);
	margin-bottom: 8px;
}
.mods-field em { font-style: normal; font-weight: 400; color: var(--text-muted); }

/* Existing screenshots on the edit form.
   ROWS, not the grid the public Media tab uses: each one carries a caption
   input and a remove checkbox, and a thumbnail grid with two controls under
   every tile turns into a wall at four items. A row reads as "this picture,
   these settings". */
.mods-shotedit { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.mods-shotedit-item {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.02);
}
.mods-shotedit-img {
	width: 132px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
	background-color: #101216;
}
.mods-shotedit-fields { display: grid; gap: 8px; min-width: 0; }
.mods-shotedit-cap { display: block; margin: 0; }
/* The hint doubles as this input's label, so it must not keep the 8px bottom
   margin it has when it follows a field. */
.mods-shotedit-cap .mods-hint { margin: 0 0 4px; }
.mods-shotedit-rm {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-muted);
	cursor: pointer;
}
/* A row staged for deletion should look like one before the save, or a mis-tick
   is only discovered afterwards. :has() is the whole reason this can be CSS —
   without it this needs a script to put a class on the row. */
.mods-shotedit-item:has(input[name="remove_media[]"]:checked) {
	border-color: rgba(214, 77, 77, 0.55);
	background-color: rgba(214, 77, 77, 0.06);
}
.mods-shotedit-item:has(input[name="remove_media[]"]:checked) .mods-shotedit-img { opacity: 0.4; }

@media (max-width: 560px) {
	.mods-shotedit-item { grid-template-columns: 1fr; }
	.mods-shotedit-img { width: 100%; }
}

/* Every text-ish input type, not just [type="text"] — an input this list forgets
   falls back to the platform widget, which on macOS is a small grey box that
   looks broken next to the styled fields above it. `url` and `number` are the
   two that got missed. Listed explicitly rather than as input:not([type=radio])
   so that adding a control type is a deliberate act: checkboxes, radios and the
   file input all want different treatment. */
.mods-field input[type="text"],
.mods-field input[type="url"],
.mods-field input[type="email"],
.mods-field input[type="number"],
.mods-field input[type="search"],
.mods-field input[type="password"],
.mods-field input[type="file"],
.mods-field select,
.mods-field textarea {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	color: var(--text-white);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 26px;
	padding: 13px 16px;
}
.mods-field textarea { resize: vertical; min-height: 120px; }

/* Safari keeps drawing its own inset field over the border and background
   above unless the native appearance is dropped. NOT applied to the file
   input, whose button is a native part we still want. */
.mods-field input[type="text"],
.mods-field input[type="url"],
.mods-field input[type="email"],
.mods-field input[type="number"],
.mods-field input[type="search"],
.mods-field input[type="password"],
.mods-field select { -webkit-appearance: none; appearance: none; }

/* A number field is not a text field the width of the page: it holds three
   digits. The spinners go with it — they are a 12px hit target that changes a
   value by 1, and the unit here is megabytes. */
.mods-field input[type="number"] { width: 190px; max-width: 100%; -moz-appearance: textfield; }
.mods-field input[type="number"]::-webkit-outer-spin-button,
.mods-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* select loses its arrow to appearance:none, so one is drawn back on. */
.mods-field select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237A7A7A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 44px;
}
.mods-field select:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 1; }
.mods-field input:focus,
.mods-field select:focus,
.mods-field textarea:focus { outline: none; border-color: var(--mythiq-hover-blue); }
.mods-field input::placeholder,
.mods-field textarea::placeholder { color: var(--text-muted); }

.mods-hint { display: block; font-size: 14px; line-height: 22px; color: var(--text-muted); margin-top: 7px; }

/* --- Compatibility inputs -----------------------------------------------
   The two comma-separated fields, and the chip editor assets/js/mods-tags.js
   lays over them. Without the script these are ordinary text inputs already
   styled by the block above, and this section applies to nothing.
   ------------------------------------------------------------------------ */

/* The chip editor hides the real input with the `hidden` attribute rather than
   removing or disabling it — a disabled field does not post and a removed one
   takes its name with it. Restated here because the width/padding rules above
   are more specific than the UA's [hidden] and would otherwise draw it. */
.mods-field input[hidden] { display: none; }

/* The pair reads as one question with two halves. Side by side where there is
   room, because "1.50" and "Heavy Cargo Pack" are both short answers and a
   full-width field for each implies a paragraph. */
.mods-compat-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 24px;
}

.mods-tagbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 54px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	cursor: text;
}
.mods-tagbox:focus-within { border-color: var(--mythiq-hover-blue); }
.mods-tagbox-list { display: contents; }

.mods-tagbox-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: var(--text-white);
	background-color: color-mix(in srgb, var(--mythiq-blue) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--mythiq-blue) 34%, transparent);
	border-radius: var(--radius-sm);
	padding: 4px 6px 4px 11px;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.mods-tagbox-remove {
	background: none;
	border: 0;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	/* A 24px square, not the 12px the glyph occupies: this is the control that
	   destroys something, and it sits inside a row of them. */
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color var(--transition-speed), background-color var(--transition-speed);
}
.mods-tagbox-remove:hover { color: var(--text-white); background-color: rgba(255, 255, 255, 0.10); }
.mods-tagbox-remove:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 1px; }

/* The field the next tag is typed into. It is not a box inside a box — the
   border belongs to .mods-tagbox, and this just takes whatever width is left
   on the row, with a floor so it never shrinks to an unclickable sliver. */
.mods-field .mods-tagbox-input {
	flex: 1 1 8ch;
	width: auto;
	min-width: 8ch;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 4px 2px;
	font-size: 17px;
	line-height: 26px;
	color: var(--text-white);
}
.mods-field .mods-tagbox-input:focus { outline: none; border-color: transparent; }
.mods-field .mods-tagbox-input:disabled { display: none; }   /* the list is full */

.mods-tagbox-count:not(:empty) {
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: var(--text-muted);
	margin-top: 7px;
}

/* What choosing "link to a download" actually means, shown above the fields
   rather than as a hint under them: it is a decision, not a formatting note,
   and the member should read it before pasting rather than after submitting. */
.mods-callout {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--text-light);
	border-radius: var(--radius-sm);
}
.mods-callout i { flex: none; margin-top: 4px; }
.mods-callout strong { color: var(--text-white); }

.mods-callout-ext {
	background-color: rgba(217, 119, 6, 0.10);
	border-left: 3px solid #f59e0b;
}
.mods-callout-ext i { color: #fbbf24; }
.mods-hint a { color: var(--mythiq-hover-blue); }

.mods-file-error { display: block; font-size: 14px; line-height: 22px; color: #f8a7a0; margin-top: 7px; }
/* display:block above outranks the UA's [hidden] rule — without this the
   empty slot keeps its margin on screen even when "hidden". */
.mods-file-error[hidden] { display: none; }

/* The chosen archive, echoed back as text. Safari clears its input label the
   moment a file is picked and shows nothing after, so on a large transfer
   there is otherwise no on-page answer to "what am I uploading". */
.mods-file-name {
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: var(--text-light);
	margin-top: 7px;
	overflow-wrap: anywhere;
}
.mods-file-name[hidden] { display: none; }

/* The native file-picker button restyled into the design system. Left alone
   it is an OS widget sitting inside a styled field — same treatment
   support.css gives its own upload fields. The field's own padding is eased
   to match, since it now wraps a real button rather than bare text. */
.mods-field input[type="file"] { padding: 9px 12px; }
.mods-field input[type="file"]::file-selector-button {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-white);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	margin-right: 12px;
	cursor: pointer;
	transition: background-color var(--transition-speed);
}
.mods-field input[type="file"]::file-selector-button:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

/* Release delivery picker — upload the file, or link to it when it is over the
   site's cap. Two cards rather than a bare radio pair, because the choice has
   consequences the member needs to read before making it. */
.mods-release-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.mods-release-mode {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.02);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mods-release-mode:hover { border-color: var(--mythiq-hover-blue); }

/* :has() lets the whole card react to its own radio. Browsers without it simply
   show an unhighlighted-but-working radio group, which is why the input itself
   is never hidden. */
.mods-release-mode:has(input:checked) {
	border-color: var(--mythiq-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 12%, transparent);
}

.mods-release-mode input { margin-top: 4px; flex: none; }
.mods-release-mode span { display: block; }

/* The same :has() trick doing real work: only the chosen side's fields are on
   screen, driven by the radio itself rather than by script. This is what makes
   "Link to a download" usable with JavaScript off — the blocks used to be
   hidden with an attribute only the uploader could move, so the radio changed
   nothing for a no-JS visitor. mods-upload.js still hides AND disables the
   inactive side; disabling is what keeps it out of the POST, and no stylesheet
   can do that. A browser without :has() shows both, which is the state the
   form is already built to survive — neither side is `required` in the markup
   for exactly this reason. */
.mods-release:has(input[name="archive_mode"][value="upload"]:checked) [data-mods-external-block],
.mods-release:has(input[name="archive_mode"][value="external"]:checked) [data-mods-upload-block] { display: none; }
.mods-release-side[hidden] { display: none; }
.mods-release-mode strong { display: block; font-size: 16px; line-height: 24px; color: var(--text-white); }
.mods-release-mode em { display: block; font-style: normal; font-size: 14px; line-height: 21px; color: var(--text-muted); margin-top: 2px; }

/* Chunked upload progress. Hidden until the first byte moves. */
.mods-progress { margin: -6px 0 20px; }

.mods-progress-track {
	height: 8px;
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.mods-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--mythiq-blue);
	transition: width 0.2s ease;
}

.mods-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 7px;
}

.mods-progress-text { font-size: 14px; line-height: 22px; color: var(--text-muted); }

.mods-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* .btn sets display:inline-flex, which outranks the UA's [hidden] rule —
   without this the stepper's hidden buttons stay on screen. */
.btn[hidden] { display: none; }
/* Stepped, the row is "leave" on the left and "go on" on the right, and it
   stays that way on all three steps — a Continue that moves between steps is
   a button the hand has to find again each time. Only when stepping: an
   ordinary form's actions stay where they have always been. */
.mods-form.is-stepped .mods-form-actions { justify-content: flex-end; }
.mods-form.is-stepped .mods-form-actions .btn:first-child { margin-right: auto; }

.mods-form-aside .mods-panel p { font-size: 16px; line-height: 25px; color: var(--text-light); margin-bottom: 14px; }

.mods-tips { list-style: none; margin: 0; padding: 0; }
.mods-tips li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 25px;
	color: var(--text-light);
	margin-bottom: 12px;
}
.mods-tips li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--mythiq-blue); }

/* --- Leaving-the-site interstitial --------------------------------------- */

.mods-leaving-wrap { padding: 40px 0 80px; }
.mods-leaving-card { max-width: 640px; margin: 0 auto; }

.mods-leaving-dest {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 14px;
}
.mods-leaving-label { font-size: 14px; color: var(--text-muted); }
.mods-leaving-dest strong { font-size: 18px; color: var(--text-white); }
.mods-leaving-size { font-size: 14px; color: var(--text-muted); }

/* A gigabyte-long share URL must wrap rather than push the card sideways. */
.mods-leaving-url { margin-bottom: 22px; }
.mods-leaving-url code {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.04);
	font-size: 13px;
	line-height: 20px;
	color: var(--text-light);
	word-break: break-all;
}

/* What we did check, immediately above what we did not. Same shape as the warning
   below it so the pair reads as one statement in two halves. */
.mods-leaving-checked {
	margin-top: 22px;
	padding: 14px 16px;
	border-left: 3px solid #34d399;
	background-color: rgba(5, 150, 105, 0.09);
	font-size: 15px;
	line-height: 24px;
	color: var(--text-light);
}
.mods-leaving-checked i { color: #6fe0b4; margin-right: 6px; }

.mods-leaving-warn {
	margin-top: 22px;
	padding: 14px 16px;
	border-left: 3px solid #f59e0b;
	background-color: rgba(245, 158, 11, 0.08);
	font-size: 15px;
	line-height: 24px;
	color: var(--text-light);
}
.mods-leaving-warn i { color: #f59e0b; margin-right: 6px; }

.mods-leaving-report { margin-top: 18px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.mods-leaving-report a { color: var(--mythiq-hover-blue); }

/* --- "Your mods" strip ---------------------------------------------------
   The author's own shelf on /mods/, above the games picker. It is the only
   block on that page about the visitor rather than the catalogue, so it reads
   as a panel rather than a rail. See app/views/mods/index.php for why it is
   not built out of the public mod card.

   Each item is a VERTICAL card: key art with the status over it, then the
   title and where it lives, then either the three numbers an author comes back
   to check (downloads, rating, comments) or — when nobody can download it yet
   — what its state actually means. Actions sit on the floor of the card, on a
   row of their own, so they line up across the shelf whatever height the body
   takes.
   ------------------------------------------------------------------------ */

/* Fixed column counts, not auto-fit. The controller fetches exactly four, so
   auto-fit's honest answer at middling widths is three across and a lonely
   fourth wrapping underneath. Stepping 4 -> 2 -> 1 always leaves a complete
   row. */
.mods-mine-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
}
@media (max-width: 1200px) {
	.mods-mine-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mods-mine-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.mods-mine-item:hover {
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

/* Anything the author has to act on is marked on the card itself, not only in
   the summary line — the pill says WHAT the state is, this says it is theirs to
   move. Painted as an overlay rather than a border (which would shift the art
   in by 3px) or an inset shadow (which the cover image, being content, paints
   straight over — the bar then started below the artwork). */
.mods-mine-item.needs-you::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background-color: #fbbf24;
	z-index: 2;
	pointer-events: none;
}

/* A fixed band, not a ratio. The shelf steps 4 columns -> 2 -> 1, so a ratio
   would swing the art from ~190px tall to ~290px and back down purely on the
   column count, and the two-across layout ended up mostly artwork. A constant
   height keeps the card's proportions the reader's business rather than the
   breakpoint's. */
.mods-mine-art {
	position: relative;
	display: block;
	height: 176px;
	overflow: hidden;
	background-color: #101012;
}
.mods-mine-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The pill sits on artwork we do not control, so it gets its own ramp to sit
   on rather than trusting the image to be dark in that corner. */
.mods-mine-art-scrim {
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	background: linear-gradient(to top, rgba(16, 16, 18, 0.88) 0%, rgba(16, 16, 18, 0) 100%);
}
.mods-mine-item .mods-status {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font-size: 11px;
	line-height: 11px;
	padding: 6px 10px;
	backdrop-filter: blur(3px);
}

/* Same brand plate as the games picker uses. */
.mods-mine-mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(130% 130% at 20% 0%, color-mix(in srgb, var(--mythiq-blue) 42%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 62%),
		linear-gradient(145deg, #23252b 0%, #16171a 100%);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 40px;
	color: rgba(255, 255, 255, 0.28);
}

/* flex:1 so every card's action row lands on the same line across a shelf of
   cards whose titles and state lines run to different lengths. */
.mods-mine-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px 0;
}

.mods-mine-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.mods-mine-title a {
	color: var(--text-white);
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-mine-title a:hover { color: var(--mythiq-hover-blue); }

.mods-mine-where {
	font-size: 13px;
	line-height: 19px;
	color: var(--text-muted);
	margin-top: 4px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Downloads / rating / comments. Equal thirds so the numbers line up down the
   shelf, on a ruled strip that separates "what this is" from "how it is
   doing". */
.mods-mine-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mods-mine-stat { min-width: 0; }
.mods-mine-stat dt { font-size: 12px; color: var(--text-muted); }
.mods-mine-stat dd {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
	color: var(--text-white);
	margin: 2px 0 0;
	white-space: nowrap;
}
/* The vote count behind a rating: present, but never mistaken for the score. */
.mods-mine-stat-sub {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 5px;
}

/* Replaces the stat strip on anything unpublished. Same ruled position, so the
   card's rhythm does not change with its status. */
.mods-mine-state {
	font-size: 13px;
	line-height: 20px;
	color: var(--text-light);
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
/* A pending release under a published mod is an addition to the stats, not a
   replacement for them, so this one carries no rule. */
.mods-mine-state.is-waiting {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
	color: var(--text-muted);
}
.mods-mine-state.is-waiting i { color: #fbbf24; margin-right: 5px; }

.mods-mine-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 18px 18px;
}
.mods-mine-actions .btn { flex: 1 1 auto; }

.mods-mine-note {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	line-height: 22px;
	color: var(--text-muted);
	margin-top: 14px;
}
.mods-mine-note i { color: #fbbf24; }
.mods-mine-note a { color: var(--mythiq-hover-blue); }

/* --- /mods/manage/ — the author's dashboard -------------------------------
   Same information as the account area's Mods section, at full width and over
   every mod rather than a preview. Three bands: totals, what is waiting on
   whom, then the listing behind a status filter and a sort.
   ------------------------------------------------------------------------ */

/* The page head carries the primary action, so the old .mods-manage-head strip
   below the hero is gone — a lone button on its own line read as a leftover. */
.mods-page-top-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
.mods-page-top-cta { flex: 0 0 auto; }
/* Two controls in the slot one used to hold. They wrap together rather than
   stretching, so on a narrow screen they stack under the heading as a pair
   instead of becoming two full-width bars. */
.mods-page-top-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Totals. Always across every mod, never the current filter — see the view. */
.mods-dash-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}
.mods-dash-stat {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	min-width: 0;
}
.mods-dash-n {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	color: var(--text-white);
}
/* The denominator of a total ("/ 5", "/ 9"). Quiet enough that the eye still
   reads one number, present enough that the number means something. */
.mods-dash-n-sub {
	font-size: 17px;
	color: var(--text-muted);
	margin-left: 6px;
}
.mods-dash-k {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-muted);
}
.mods-dash-k i { margin-right: 6px; opacity: 0.75; }

/* Toolbar: chips filter, the select sorts. */
.mods-dash-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.mods-dash-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mods-dash-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	color: var(--text-light);
	text-decoration: none;
	padding: 10px 15px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: border-color var(--transition-speed), color var(--transition-speed), background-color var(--transition-speed);
}
.mods-dash-chip:hover { border-color: var(--mythiq-hover-blue); color: var(--mythiq-hover-blue); }
.mods-dash-chip.is-active {
	background-color: var(--mythiq-blue);
	border-color: var(--mythiq-blue);
	color: #fff;
}
.mods-dash-chip:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 3px; }
.mods-dash-chip-n { font-size: 13px; color: var(--text-muted); }
.mods-dash-chip.is-active .mods-dash-chip-n { color: rgba(255, 255, 255, 0.82); }
.mods-dash-chip:hover .mods-dash-chip-n { color: inherit; }

/* --- Manage list --------------------------------------------------------- */

.mods-manage-list { list-style: none; margin: 0; padding: 0; }

/* One row, four zones: identity, description, numbers, actions. The numbers
   sit in a fixed column so they line up down the page and a row reads as a
   share of the totals above rather than as free text. */
.mods-manage-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	margin-bottom: 14px;
	overflow: hidden;
	transition: border-color var(--transition-speed);
}
.mods-manage-item:hover { border-color: rgba(255, 255, 255, 0.16); }

/* Same amber edge as the catalogue strip, drawn the same way and for the same
   reason — see .mods-mine-item.needs-you. */
.mods-manage-item.needs-you::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background-color: #fbbf24;
	pointer-events: none;
}

.mods-manage-art {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: 116px;
	height: 66px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #101012;
}
.mods-manage-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mods-manage-mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(130% 130% at 20% 0%, color-mix(in srgb, var(--mythiq-blue) 42%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 62%),
		linear-gradient(145deg, #23252b 0%, #16171a 100%);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 26px;
	color: rgba(255, 255, 255, 0.28);
}

.mods-manage-item-main { flex: 1 1 280px; min-width: 0; }
.mods-manage-item-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 21px;
	line-height: 28px;
	color: var(--text-white);
	margin: 9px 0 4px;
}
.mods-manage-item-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-speed);
}
.mods-manage-item-title a:hover { color: var(--mythiq-hover-blue); }

/* Per-mod numbers, in the same order and wording as the page totals.
   FIXED column widths, not minmax(…, auto): the numbers have to land on the
   same x down the whole list, and auto sizes each row to its own content — a
   row with 6,310 downloads then printed its stats further right than one with
   52,481. The state line below claims the same total width for the same
   reason. */
.mods-manage-stats {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 96px);
	gap: 20px;
	margin: 0;
}
.mods-manage-stat dt {
	font-size: 12px;
	line-height: 16px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.mods-manage-stat dd {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	color: var(--text-white);
	margin: 3px 0 0;
	white-space: nowrap;
}
.mods-manage-stat dd span {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-muted);
}

/* Replaces the numbers on anything unpublished, in the same column, because a
   mod nobody can reach has no downloads, rating or comments to report. */
.mods-manage-state {
	flex: 0 0 auto;
	width: 328px; /* 3 x 96px + 2 x 20px gap — see .mods-manage-stats */
	font-size: 14px;
	line-height: 21px;
	color: var(--text-muted);
}
.mods-manage-item-meta { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.mods-manage-note {
	font-size: 14px;
	line-height: 22px;
	color: var(--text-light);
	margin-top: 11px;
	padding: 10px 14px;
	background-color: rgba(217, 119, 6, 0.10);
	border-left: 3px solid #fbbf24;
	border-radius: var(--radius-sm);
}
/* A fixed, right-aligned column. Unpublished rows carry only Edit, and letting
   the column shrink to fit let the flexible middle grow into the difference —
   which slid the stats and state text of those rows out of line with every
   other row's. */
.mods-manage-item-actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	min-width: 138px;
}

/* --- Exclusivity --------------------------------------------------------- */
/*
   "Only on Mythiq.net" gets ONE colour and it is a new one: violet.

   Every other state colour in this file is already spoken for and means
   something the reader has learned — green is approved, amber is waiting on
   you, red is refused, brand blue is a link or a category. Exclusivity is none
   of those: it is not a lifecycle state, not an instruction and not navigation,
   and dressing it in any of those four would make it read as one of them. It is
   the only thing in the section that is a *distinction*, so it gets the only
   hue nothing else uses.

   Everything below draws from --mods-ex-* so the mark cannot drift between the
   card, the mod page, the form and the dashboard — the same reason the badge
   markup lives in one PHP helper rather than in four templates.
*/
.mods-page {
	--mods-ex: #a78bfa;
	--mods-ex-dim: rgba(167, 139, 250, 0.16);
	--mods-ex-line: rgba(167, 139, 250, 0.34);
}

/* The card mark. TOP-LEFT, opposite the rating/downloads pills, because it is a
   claim rather than a measurement — see the note in _card.php. Same frosted
   plate as .mods-badge so the two corners read as one family. */
.mods-exclusive-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background-color: rgba(10, 10, 12, 0.62);
	border: 1px solid var(--mods-ex-line);
	backdrop-filter: blur(6px);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	line-height: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mods-ex);
	white-space: nowrap;
	pointer-events: none;
}
.mods-exclusive-badge i { font-size: 10px; }
.mods-exclusive-badge.is-compact { padding: 6px 8px; }

/* The mod page's mark, last in the byline meta line.

   No plate, no border and no background: it is one item in a middot-separated
   sentence and has to weigh what "updated 3 March" beside it weighs. The hue
   arrives on the gem alone, which is enough to find it in a grey line and not
   enough to make it the loudest thing under the title. Underline only on hover,
   like the author link at the other end of the same line. */
.mods-detail-only {
	color: var(--text-light);
	text-decoration: none;
	white-space: nowrap;
}
.mods-detail-only i { font-size: 12px; color: var(--mods-ex); }
.mods-detail-only:hover,
.mods-detail-only:focus-visible { color: var(--mods-ex); text-decoration: underline; }

/* The sentence, in the download panel. A footnote under the button: hairline
   above it for separation, muted body, and the only colour on the gem and the
   three-word lead. Left-aligned with .mods-ext-line rather than centred with
   .mods-panel-note, because it is prose to read and not a caption to glance
   at — and when a release IS off-site, the two stack into one column of notes
   about where the file comes from. */
.mods-panel-only {
	display: flex;
	gap: 9px;
	margin: 0 0 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 13px;
	line-height: 20px;
	color: var(--text-muted);
	text-align: left;
}
.mods-panel-only i { flex: none; margin-top: 4px; font-size: 12px; color: var(--mods-ex); }
.mods-panel-only strong { color: var(--mods-ex); font-weight: 700; }

/* The author-facing state pill, beside the review status on /mods/manage/.
   Same shape as .mods-status because it sits in the same row and is the same
   kind of object — a state, said in one word — even though the two lifecycles
   are independent. */
.mods-status-ex-verified {
	background-color: var(--mods-ex-dim);
	border-color: var(--mods-ex-line);
	color: var(--mods-ex);
}
.mods-status-ex-claimed {
	background-color: rgba(217, 119, 6, 0.16);
	border-color: rgba(251, 191, 36, 0.32);
	color: #fbbf24;
}
.mods-status-ex-declined {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--text-light);
}
.mods-status-ex-verified i,
.mods-status-ex-claimed i,
.mods-status-ex-declined i { font-size: 11px; margin-right: 5px; }

.mods-alert-exclusive {
	background-color: var(--mods-ex-dim);
	border: 1px solid var(--mods-ex-line);
	color: var(--text-light);
}
.mods-alert-exclusive i { color: var(--mods-ex); }
.mods-alert-exclusive strong { color: var(--mods-ex); }
.mods-alert-exclusive a { color: var(--mods-ex); }

/* The claim, on the upload/edit form.

   A PANEL and not a bare checkbox in the run of fields. What is being asked for
   is a statement about how the author distributes their work, it has
   consequences they should read before ticking, and a lone tickbox under
   "Screenshots" gets ticked without any of that happening. */
.mods-exclusive-field { margin-top: 6px; }
.mods-exclusive-box {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.10);
	background-color: rgba(255, 255, 255, 0.02);
	transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.mods-exclusive-box.is-live {
	border-color: var(--mods-ex-line);
	background-color: var(--mods-ex-dim);
}
.mods-exclusive-tick {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.mods-exclusive-tick input { margin-top: 5px; flex: 0 0 auto; accent-color: var(--mods-ex); }
.mods-exclusive-tick strong {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 25px;
	color: var(--text-white);
}
.mods-exclusive-tick strong i { color: var(--mods-ex); margin-right: 7px; }
.mods-exclusive-tick em {
	display: block;
	font-style: normal;
	font-size: 15px;
	line-height: 23px;
	color: var(--text-muted);
}
.mods-exclusive-hint { margin-top: 12px; }

/* The current state, and the reviewer's reason when there is one. Bordered on
   the left rather than boxed: it is a note ABOUT the control above it, and a
   second full panel would compete with the question. */
.mods-exclusive-state,
.mods-exclusive-conflict {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 11px 15px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	line-height: 23px;
	color: var(--text-light);
	background-color: rgba(255, 255, 255, 0.04);
	border-left: 3px solid rgba(255, 255, 255, 0.18);
}
.mods-exclusive-state i { margin-top: 4px; }
.mods-exclusive-state.is-verified { border-left-color: var(--mods-ex); background-color: var(--mods-ex-dim); }
.mods-exclusive-state.is-verified i,
.mods-exclusive-state.is-verified strong { color: var(--mods-ex); }
.mods-exclusive-state.is-claimed { border-left-color: #fbbf24; background-color: rgba(217, 119, 6, 0.10); }
.mods-exclusive-state.is-claimed i,
.mods-exclusive-state.is-claimed strong { color: #fbbf24; }
.mods-exclusive-state.is-declined { border-left-color: rgba(248, 113, 113, 0.5); background-color: rgba(180, 35, 24, 0.10); }
.mods-exclusive-state.is-declined i,
.mods-exclusive-state.is-declined strong { color: #f8a7a0; }
.mods-exclusive-reason { display: inline-block; margin-top: 4px; color: var(--text-white); }

.mods-exclusive-conflict {
	border-left-color: #fbbf24;
	background-color: rgba(217, 119, 6, 0.10);
}
.mods-exclusive-conflict i { margin-top: 4px; color: #fbbf24; }

/* The results toolbar's "Only on Mythiq.net" filter. Wears .mods-select so it sits
   level with the two dropdowns beside it, then overrides what a <select>
   wrapper assumes about its contents. */
.mods-select.mods-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	white-space: nowrap;
}
.mods-select.mods-check input { accent-color: var(--mods-ex); cursor: pointer; }
.mods-select.mods-check i { font-size: 12px; color: var(--text-muted); }
.mods-select.mods-check.is-on { border-color: var(--mods-ex-line); color: var(--mods-ex); }
.mods-select.mods-check.is-on i { color: var(--mods-ex); }

/* --- Author analytics: the 30-day chart ---------------------------------- */
/*
   Thirty server-rendered bars. No canvas, no library, no script: the height is
   a CSS custom property the template writes, so this prints, survives JS being
   off, and costs nothing to draw. Each bar carries its own date and figure —
   visually in a hover tip, and always in screen-reader text — because a shape
   with no numbers on it is decoration.
*/
.mods-dash-trend {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 20px 22px 18px;
	margin-bottom: 26px;
}
.mods-dash-trend-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.mods-dash-trend-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mods-dash-trend-sub {
	font-size: 16px;
	line-height: 24px;
	color: var(--text-light);
	margin-top: 6px;
}
.mods-dash-trend-sub strong {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--text-white);
}
.mods-dash-trend-link {
	font-size: 14px;
	color: var(--mythiq-hover-blue);
	text-decoration: none;
	white-space: nowrap;
}
.mods-dash-trend-link:hover { text-decoration: underline; }
.mods-dash-trend-empty { font-size: 15px; line-height: 23px; color: var(--text-muted); }

.mods-dash-chart {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 92px;
}
/* min-height, not height: a day with one download would otherwise be a
   sub-pixel sliver indistinguishable from a day with none, and the difference
   between "nobody" and "somebody" is the one this chart most has to show. */
/* .mods-dash-col, not .mods-dash-bar: that name already belongs to the filter
   toolbar above, and while both existed the toolbar <div> was painting itself
   with this gradient and turning purple on hover. */
.mods-dash-col {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var(--h, 0%);
	min-height: 3px;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: linear-gradient(180deg, var(--mythiq-hover-blue) 0%, var(--mythiq-blue) 100%);
	transition: background var(--transition-speed);
}
.mods-dash-col.is-zero { background: rgba(255, 255, 255, 0.08); }
.mods-dash-col:hover { background: var(--mods-ex); }

/* Hover tip. Pure CSS, positioned over the bar it belongs to and clipped to
   nothing until then — there are thirty of these and none of them may
   contribute to layout. */
.mods-dash-col-tip {
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background-color: rgba(10, 10, 12, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	line-height: 14px;
	color: var(--text-white);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-speed);
	z-index: 5;
}
.mods-dash-col:hover .mods-dash-col-tip { opacity: 1; visibility: visible; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.mods-detail-grid,
	.mods-form-grid { grid-template-columns: 1fr; gap: 32px; }

	/* One column here, so the sidebar is simply the next thing down the page.
	   Sticking it would pin a block to the top of the screen with the article
	   it belongs beside scrolling behind it. */
	.mods-detail-side { position: static; }

	.mods-mast { padding: calc(var(--header-offset) + var(--header-height) + 64px) 0 40px; }

	.mods-detail-title { font-size: 36px; line-height: 44px; }
	.mods-page-title { font-size: 36px; line-height: 44px; }
	.mods-form { padding: 28px 24px 26px; }

	.mods-row { padding-top: 44px; }
	.mods-rail-wrap { --rail-gutter: 40px; }
	.mods-rail { grid-auto-columns: 250px; }
	/* Restated because .mods-rail.is-games outranks .mods-rail — the
	   variant would otherwise hold its desktop width right down. */
	.mods-rail.is-games { grid-auto-columns: 172px; }

	/* The sidebar stops paying for its width here — 262px of nav against a
	   two-card grid. It becomes a band above the listing instead, and the
	   categories lay out as wrapping chips: still all visible at once, which
	   was the whole point of dropping the horizontal strip. */
	.mods-gamebody { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.mods-side { position: static; }
	.mods-sidenav-title { padding: 0; }
	.mods-sidenav ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.mods-sidenav-link {
		padding: 9px 15px;
		border-radius: var(--radius-pill);
		border: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: none;
		font-size: 14px;
		gap: 9px;
	}
	.mods-sidenav-link.is-active {
		background-color: var(--mythiq-blue);
		border-color: var(--mythiq-blue);
		box-shadow: none;
		color: #fff;
	}
	.mods-sidenav-link.is-active .mods-sidenav-n { color: rgba(255, 255, 255, 0.82); }
	/* The rule above this link separated it from a vertical list. Over a band
	   of chips it is a stray 150px dash, so it goes. */
	.mods-sidenav-out { margin: 16px 0 0; padding-top: 0; border-top: 0; }

	.mods-gamehead { padding-top: calc(var(--header-offset) + var(--header-height) + 34px); margin-bottom: 34px; }
	.mods-gamehead-art { width: 92px; }

	/* Two totals a row. Four across stops clearing the width a six-figure
	   download count needs before it wraps mid-number. */
	.mods-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The numbers drop under the title rather than holding a column beside it:
	   at this width the description and the stats were splitting ~500px three
	   ways. They keep their own ruled strip so the row still parses. */
	.mods-manage-item { align-items: flex-start; gap: 18px; }
	.mods-manage-item-main { flex: 1 1 200px; }
	.mods-manage-stats,
	.mods-manage-state {
		flex: 1 1 100%;
		width: auto;
		padding-top: 15px;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}
	.mods-manage-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.mods-manage-item-actions { flex: 1 1 100%; }

	/* The heading and the "sort by what is moving" link stop sharing a row —
	   the link is a whole sentence and was wrapping under a half-width
	   heading, which read as a caption rather than a control. */
	.mods-dash-trend-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 768px) {
	/* Thirty bars across a phone is ~7px each with the gap eating most of it.
	   Halve the gap and shorten the plot: the shape is still legible, and the
	   figures were never in the bars — they are in the tip and in the
	   screen-reader text. */
	.mods-dash-chart { gap: 2px; height: 68px; }
	.mods-dash-trend { padding: 16px 18px 14px; }

	/* The claim panel loses its inset at phone width; the form it sits in is
	   already padded and two nested boxes waste ~40px of a 360px screen. */
	.mods-exclusive-box { padding: 15px 16px; }

	.mods-mast { padding: calc(var(--header-offset) + var(--header-height) + 40px) 0 30px; }

	/* A 170px term column leaves under half the width for the tags themselves,
	   and "Game versions" wraps to two lines to buy it. Stack instead. */
	.mods-spec { padding: 18px; }
	.mods-spec-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.mods-spec dt { line-height: 20px; }

	/* Two mode cards side by side squeeze their descriptions to two words a
	   line at this width, so they stack instead. */
	.mods-release-modes { grid-template-columns: minmax(0, 1fr); }

	/* Three labels do not fit across a phone. The numbers do, and beside them
	   the CURRENT step keeps its label — which is the only one that answers
	   "where am I", the question the rail exists for. */
	.mods-steplist { gap: 12px; }
	.mods-steplist-item { flex: 0 0 auto; }
	.mods-steplist-item.is-current { flex: 1 1 auto; }
	.mods-steplist-item:not(.is-current) .mods-steplist-label { display: none; }
	.mods-step-n { width: 26px; height: 26px; margin-right: 10px; font-size: 14px; }

	/* Stacked and full width. Kept in DOM order rather than reversed: reversing
	   would lift "Save as draft" above "Submit for review" on the last step,
	   which is the wrong button to emphasise. */
	.mods-form.is-stepped .mods-form-actions { flex-direction: column; }
	.mods-form.is-stepped .mods-form-actions .btn { width: 100%; margin-right: 0; }

	/* The field and its button stop sharing a line comfortably well before
	   this, so the bar becomes a stacked block. */
	.mods-searchbar { flex-wrap: wrap; border-radius: var(--radius-lg); padding: 10px 12px 12px; gap: 6px; }
	.mods-searchbar > i { display: none; }
	.mods-searchbar-div { display: none; }
	.mods-searchbar-scope { flex: 1 1 100%; }
	.mods-searchbar-scope select {
		width: 100%;
		max-width: none;
		padding: 11px 30px 11px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 0;
	}
	.mods-searchbar input { flex: 1 1 100%; padding: 8px 4px 10px; }
	.mods-searchbar .btn { flex: 1 1 100%; }

	.mods-mast-facts { gap: 10px; font-size: 14px; }
	.mods-mast-upload { margin-left: 0; padding-left: 0; border-left: 0; flex: 1 1 100%; justify-content: center; margin-top: 8px; }

	.mods-page-top { padding: calc(var(--header-offset) + var(--header-height) + 36px) 0 26px; margin-bottom: 30px; }
	.mods-detail-title { font-size: 30px; line-height: 38px; }
	.mods-page-title { font-size: 30px; line-height: 38px; }

	.mods-row { padding-top: 36px; }
	.mods-row:last-of-type { padding-bottom: 72px; }
	.mods-row-head { align-items: flex-start; flex-direction: column; gap: 8px; }
	.mods-row-title { font-size: 22px; line-height: 28px; }

	/* Touch scrolling is the native gesture here; the arrows are redundant and
	   only cover content. */
	.mods-rail-nav { display: none; }
	.mods-rail-wrap { --rail-gutter: 20px; }
	.mods-rail { padding-bottom: 48px; margin-bottom: -44px; }
	.mods-rail { grid-auto-columns: minmax(240px, 78%); scroll-snap-type: x mandatory; }

	/* The trail is the one thing that must survive a small screen intact — it
	   is what tells a visitor arriving from search where they landed. It keeps
	   its own line and scrolls sideways rather than shrinking. */
	.mods-crumbs { margin-bottom: 16px; }
	.mods-crumbs li + li::before { margin: 0 8px; }
	.mods-crumbs [aria-current="page"] { max-width: 22ch; }

	.mods-detail-head .mods-back,
	.mods-gamehead-inner .mods-back { margin-bottom: 12px; }

	/* Three boxes a row rather than two: portrait art stays legible far
	   narrower than a 16:9 still does, and two would have made each one
	   almost half the screen tall. */
	.mods-gameboxes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; }
	/* On the rail the same tiles keep scrolling instead of wrapping, so
	   they only have to be narrow enough that a second one shows and the
	   shelf reads as scrollable. */
	.mods-rail.is-games { grid-auto-columns: 132px; }
	.mods-gamebox-name { font-size: 14px; line-height: 20px; margin-top: 10px; min-height: 40px; }
	.mods-gamebox-mark { font-size: 28px; }

	/* Art above the name, and the upload button on its own full-width line —
	   three things across is one too many at this width. */
	.mods-gamehead { padding-bottom: 26px; }
	.mods-gamehead-main { flex-wrap: wrap; gap: 16px; }
	.mods-gamehead-art { width: 80px; }
	.mods-gamehead-text { flex: 1 1 180px; }
	.mods-gamehead-cta { flex: 1 1 100%; justify-content: center; }
	.mods-gamehead-facts { font-size: 14px; }

	.mods-main-head { align-items: stretch; flex-direction: column; }
	.mods-main-title { font-size: 24px; line-height: 30px; }
	.mods-sort { justify-content: space-between; }
	.mods-sort select { flex: 1 1 auto; }

	.mods-onward { padding-bottom: 64px; }
	.mods-onward-label { flex: 1 1 100%; margin-right: 0; }
	.mods-onward-link { width: 100%; justify-content: center; }

	.mods-tab { padding: 12px 14px; font-size: 14px; }
	.mods-report-form { padding: 22px 20px 20px; }

	/* One column here, so the cover and its "Show more" go full width rather
	   than sitting as a 220px block against the left edge. */
	.mods-detail-title-row { flex-direction: column; gap: 18px; }
	.mods-detail-coverwrap { width: 100%; }

	.mods-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

	.mods-toolbar { flex-direction: column; align-items: stretch; }
	.mods-toolbar-controls { flex-wrap: wrap; }
	.mods-select,
	.mods-select select { width: 100%; }

	.mods-version-head { gap: 10px; }
	.mods-version-head .btn { margin-left: 0; width: 100%; }

	/* The thumbnail goes — at phone width it is competing with the mod's own
	   name, which is what is being scanned for — and the buttons go full width
	   so the two of them are a proper tap target each. */
	.mods-manage-art { display: none; }
	.mods-manage-item { padding: 16px 18px; gap: 14px; }
	.mods-manage-item-title { font-size: 19px; line-height: 25px; }
	.mods-manage-stats { gap: 10px; }
	.mods-manage-stat dd { font-size: 17px; line-height: 23px; }
	.mods-manage-item-actions .btn { flex: 1 1 auto; }

	.mods-dash-stats { gap: 10px; }
	.mods-dash-stat { padding: 16px 18px; }
	.mods-dash-n { font-size: 26px; line-height: 32px; }
	.mods-dash-k { font-size: 13px; }

	/* The filter is the page's primary control on a phone, so it gets the full
	   line and the sort sits under it. */
	.mods-dash-bar { align-items: stretch; flex-direction: column; gap: 12px; }

	.mods-page-top-row { align-items: stretch; }
	.mods-page-top-cta { justify-content: center; }

	/* One card per row, and the art band shortens again: four full-width cards
	   otherwise bury the catalogue under a screen and a half of the reader's
	   own uploads before "Browse by game" ever appears. */
	.mods-mine-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.mods-mine-art { height: 120px; }
	.mods-mine-mark { font-size: 30px; }
	.mods-mine-body { padding: 14px 16px 0; }
	.mods-mine-actions { padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	/* .game-box has its own reduced-motion block in style.css. */
	.mods-row-more i,
	.mods-gamebox-all .mods-gamebox-allmark i,
	.mods-gamebox-art,
	.mods-sidenav-out i { transition: none; }
	.mods-gamebox:hover .mods-gamebox-art { transform: none; }
	.mods-sidenav-out:hover i { transform: none; }
	.mods-rail { scroll-behavior: auto; }
}