/* ============================================================
   ============================================================
   THE SITE FOOTER  —  ONE SKIN, ALL THREE SURFACES
   ============================================================

   Skin for themes/epona/tpl/footer.tpl. Linked FROM that template
   (the panel-sitenav.tpl precedent), not from header.tpl, so it is
   only downloaded on a page that is actually wearing it.

   EVERY RULE IS SCOPED footer#footer.ftrv2 — THE FOOTER ELEMENT'S
   OWN CLASS, NOT A BODY CLASS, and that is the whole point of this
   file's second life. It used to be scoped `body.pubv2 #footer`, and
   body.pubv2 is the PUBLIC-PAGE staff gate: it is never set inside a
   panel. There is only one footer template and all three surfaces
   include it, so the customer panel and the Death Star were serving
   the 2013 footer under V2 chrome — flat #2b2b2b, sentence-case
   heads, 96 chevrons, and 50% taller than the same footer on the
   public site (measured 2026-08-04 at 1600: public 934px, customer
   panel 1440px, Death Star 1444px).

   footer.tpl now puts `class="ftrv2"` on <footer id="footer"> under
   its own flag and links this sheet in the same breath, so the class
   and the stylesheet can never arrive apart. WHICH surfaces get it is
   footer.tpl's decision, not this file's — the rule is "wherever a
   surface already renders V2 chrome for this viewer, the footer
   matches it", so a new footer can never end up under a classic
   header.

   THE RESCOPE PRESERVED SPECIFICITY EXACTLY, on purpose. Both forms
   are (1 id, 1 class, 1 element): `body.pubv2 #footer` is body +
   .pubv2 + #footer; `footer#footer.ftrv2` is footer + #footer +
   .ftrv2. Several rules below tie with a theme selector and win on
   source order alone (§5's payment marks against footer-default's
   `#footer .ftr-info > p:not(.block) > *`, for one), so a scope that
   changed the count by even one class would have silently flipped
   them. Verified after the move by screenshot against the same page
   before it.

   This sheet is linked inside <body>, after every theme stylesheet,
   so it wins TIES by source order. It does NOT beat an !important in
   mobile-responsive.css (51KB, 320 !importants, loads last of the
   shared files) — the handful of places that need one are named in
   the source, with the selector they are fighting.

   THE FOUR MEASURED DEFECTS THIS SHEET FIXES. Everything else in the
   footer is left alone on purpose (design contract §1b: fix what is
   broken, do not restyle what is chosen). Content is untouched — no
   link removed, no href changed, no anchor text changed, no heading
   text or level changed. Only layout, spacing, type, colour and
   visual grouping.

   1. PHONE — the footer is 3813px tall at 390 and about 1800px of
      that is a blank LEFT HALF.  Measured on /faq/ /home/ /minecraft/
      /7_days_to_die/ /locations/los_angeles/ at 390, all identical:
        #footer                    3813px tall
        .ftr-info                  195 x 713  float:left
        .ftr-hz-list               185 x 3583
      Two shared-theme rules combine into that:
        mobile-responsive.css:1689 `.col-md-3:not(.col-sm-6):not(.col-sm-12)
          { width:50% !important; float:left !important }`   (<=600)
        makes the contact column a 195px FLOAT instead of the full-width
        block `footer .col-md-3 { width:100% !important }` 1000 lines
        earlier intended, and
        mobile-responsive.css:678 `footer .ftr-hz-list { column-count }`
        makes the 81-link list a MULTI-COLUMN CONTAINER, which
        establishes a block formatting context — so unlike a normal
        block it may not overlap the float and shrinks to the 185px
        left beside it, for all 3583px of its length.
      Net: 81 game links in a 185px gutter down the right, and nothing
      at all in the other 195px for the length of a phone screen x4.

   2. PHONE/TABLET — that 81-link block is the footer, and it is 94%
      of its height. 3583 of 3813 at 390; 1804 of 1964 at 768.

   3. DESKTOP — the same block makes the row 570px taller than it
      needs to be. Measured at 1100: .ftr-info 713, .ftr-social 814,
      .ftr-horizon 1382. The first two balance each other already; the
      game list is the only column out of step, because it is held to
      two columns until the row passes 1500px.

   4. THE RAIL — measured at 1920 BEFORE: `#c2brand .container`
      1560@180, every page band 1560@180, `#footer .container`
      1170@375. The footer was the last edge on the page that
      disagreed with the header, on every page. Fixed in §10 below —
      it used to live in public-v2-core.css PART 1, and that file is
      linked ONLY on public pages, so it could never reach the panels.
      Verified after: 1560@180 at 1920, 1260@90 at 1440.
   ============================================================ */


/* ============================================================
   0 — THE TOKENS THIS SHEET IS WRITTEN AGAINST
   ============================================================
   Declared ON THE FOOTER, not inherited from a body class, for the
   same reason the selectors moved: --pv2p-* (the spacing scale and
   the type family) are declared by public-v2-core.css under
   body.pubv2, and that file is not loaded inside a panel. Without
   these the panel footer would have rendered every `var(--pv2p-s5)`
   as an invalid value — no padding, no margins, the layout collapsed
   — with nothing in any log to say why.

   Values are copied from public-v2-core.css PART 1/PART 2 and from
   css/sspanel/panel-v2-core.css, which are already one palette. On a
   public page the body declares the same numbers, so this block is a
   no-op there and the footer renders byte for byte what it did
   before; inside a panel it is the only source. Only the tokens this
   file actually uses are listed — a fuller copy would shadow the
   panel's own values inside the footer for no reason.
   ------------------------------------------------------------ */
footer#footer.ftrv2 {
	--pv2-surface: #1a1a1b;
	--pv2-panel: #212122;
	--pv2-hover: #333333;
	--pv2-border: #3a3a3b;
	--pv2-border-strong: #4c4c4d;
	--pv2-line: #2c2c2d;
	--pv2-text-soft: #cccccc;
	--pv2-text-muted: #999999;
	--pv2-text-dim: #666666;
	--pv2-radius: 4px;
	--pv2-radius-lg: 6px;

	--pv2p-font: 'Open Sans', Arial, sans-serif;
	--pv2p-s1: 6px;
	--pv2p-s2: 10px;
	--pv2p-s3: 14px;
	--pv2p-s4: 18px;
	--pv2p-s5: 26px;
	--pv2p-s6: 36px;
	--pv2p-s7: 52px;
	/* THE WIDE RAIL. The same expression the public brand row, the page
	   bands, body.pnv2 .container and body.dsv2 .container all use — all
	   four are min(1560px, 100vw - 180px) at >=1400. Written once here so
	   the footer can never be the edge that disagrees again. */
	--pv2p-rail-wide: min(1560px, calc(100vw - 180px));
}
/* THE PHONE COMFORT STEP, and it is not optional — the scale is
   RESPONSIVE and copying only its desktop values silently changes the
   design. public-v2-core.css shrinks s5/s6/s7 on body.pubv2 below 560,
   and the first cut of this block did not, so a footer-level declaration
   of 26px shadowed the page's 20px: the two second-level heads in the
   contact column each gained 6px of margin-top and the footer grew 24px
   at 390. Caught by measuring the public footer against itself before
   and after the rescope — which is exactly what that comparison is for.
   --pv2p-pad is deliberately absent: nothing in this file consumes it. */
@media only screen and (max-width: 560px) {
	footer#footer.ftrv2 {
		--pv2p-s5: 20px;
		--pv2p-s6: 28px;
		--pv2p-s7: 32px;
	}
}


/* ============================================================
   1 — THE SURFACE
   ============================================================
   footer-default.css paints #2B2B2B with a 5px #252525 top border and
   a second #252525 slab under the copyright: three greys, none of
   them the system's, and a 5px band that reads as a seam. The page
   above is --pv2-surface #1a1a1b (public-v2-core PART 3 sets
   #wrapper), so the old footer was a visibly LIGHTER block bolted to
   the bottom of a darker page.
   ------------------------------------------------------------ */
footer#footer.ftrv2 {
	background-color: var(--pv2-surface);
	/* the hairline the rest of the site separates bands with, plus a
	   gold fade across the top edge only — 1px, 28% at its brightest,
	   a layered BACKGROUND and not a positioned pseudo, because the
	   contract forbids a new stacking context on anything that could
	   sit above a payment form (the codebase already trapped a Stripe
	   modal below this element once). */
	border-top: 1px solid var(--pv2-border);
	background-image: linear-gradient(90deg,
		rgba(213,168,74,0) 0%, rgba(213,168,74,.30) 50%, rgba(213,168,74,0) 100%);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 0;
	color: var(--pv2-text-muted);
	font-family: var(--pv2p-font);
}

/* footer-default.css:24 `#footer .spaced { padding: 60px 15px }`.
   60px against the 52px shell rhythm (--pv2p-s7) everywhere else on
   the site. mobile-responsive.css already drops it to 20 at <=768. */
@media only screen and (min-width: 992px) {
	footer#footer.ftrv2 .spaced { padding: var(--pv2p-s7) 0 var(--pv2p-s6); }
}


/* ============================================================
   2 — THE TRUST BAR
   ============================================================
   The Trustpilot widget is the first thing in the footer and had no
   container of its own: a bare `<div>&nbsp;</div>` spacer above it
   and the game list starting 10px under it. Give it a band with a
   hairline, so the footer opens on a trust signal instead of a stray
   iframe. Height is the template's own inline <style> (28/63/98px by
   width) and is left alone — that is the widget's business.
   ------------------------------------------------------------ */
footer#footer.ftrv2 .ftr-sp { display: none; }
footer#footer.ftrv2 .trustpilot-widget {
	/* MARGIN ONLY, and this is not a style preference. The template's own
	   inline <style> pins this element's HEIGHT (28px, 63 at <=619, 98 at
	   <=439) and the theme is border-box, so any padding or border here is
	   taken OUT of the height the widget needs rather than added to it —
	   and `overflow: hidden` then clips the iframe. Measured with
	   `padding: 18px 0`: box 37px at 768 holding a 28px iframe that starts
	   at y=18, so its bottom 9px were cut off, and at 390 the Trustpilot
	   wordmark was gone entirely. */
	margin: var(--pv2p-s5) 0 var(--pv2p-s4);
}
/* the hairline under the trust bar rides on the row BELOW it, drawn as a
   background so it costs no layout at all — a border or padding on .ftr-row
   would have to fight Bootstrap's -15px row margins at <992 and would move
   every left edge in the footer inboard by 15px. */
footer#footer.ftrv2 .ftr-row {
	background-image: linear-gradient(var(--pv2-line), var(--pv2-line));
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 0;
}


/* ============================================================
   3 — THE COLUMN LABELS
   ============================================================
   Five `div.h4` heads — Contact Us / Payments Accepted / More Info /
   Social Media / On the Horizon. Bootstrap's .h4 renders them 18px
   400 in the theme's grey; #footer's own `h2,h3,h4 {color:#fff}`
   never reaches them because they are DIVs carrying the class.

   They are peers, so they get the house's block-label treatment —
   11px / 600 / uppercase, muted, which CLAUDE-DESIGN-SYSTEM.md
   records as the panel's own label ramp ("13px/400 values, 11px/600
   uppercase labels"). The links under them then read LOUDER than
   their own heading, which is the hierarchy a footer wants: the
   labels are wayfinding, the links are the content.

   The hairline under each label is what gives the footer structure —
   four groups you can see the edges of, instead of four columns of
   equal-weight grey.

   HEADING TEXT AND LEVEL ARE UNTOUCHED. This styles whatever the
   template hands it, the same way .pv2p-chead does.
   ------------------------------------------------------------ */
footer#footer.ftrv2 .ftr-h {
	font-family: var(--pv2p-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pv2-text-muted);
	margin: 0 0 var(--pv2p-s3);
	padding-bottom: var(--pv2p-s2);
	border-bottom: 1px solid var(--pv2-line);
}
/* a second and third label in the same column needs air above it —
   26px is --pv2p-s5, the between-cards step */
footer#footer.ftrv2 .ftr-h-pay,
footer#footer.ftrv2 .ftr-h-more { margin-top: var(--pv2p-s5); }


/* ============================================================
   4 — THE LINK LISTS
   ============================================================
   96 links, 14px, #9a9a9a, each one carrying an `<i class="fa
   fa-angle-right">` chevron. 96 chevrons is not a bullet system, it
   is noise, and it pushes every label 14px off the left edge its own
   column label sits on — three left edges in one column.

   The chevron is HIDDEN, not removed: the markup stays exactly as it
   is, and hiding it costs no text (an empty <i> contributes none).
   Links then start on the same pixel as the label above them.

   Colour carries the ramp instead: --pv2-text-soft #ccc for the two
   short lists, --pv2-text-muted #999 for the 81 upcoming-game links
   (secondary by definition), white on hover with the system's
   --pv2-accent as the hover mark.
   ------------------------------------------------------------ */
footer#footer.ftrv2 .ftr-links li a > i.fa { display: none; }

footer#footer.ftrv2 .ftr-links li a {
	color: var(--pv2-text-soft);
	font-family: var(--pv2p-font);
	font-size: 13.5px;
	line-height: 1.45;
	text-decoration: none;
	transition: color .15s ease;
}
footer#footer.ftrv2 .ftr-hz-list li a {
	color: var(--pv2-text-muted);
	font-size: 13px;
}
footer#footer.ftrv2 .ftr-links li a:hover,
footer#footer.ftrv2 .ftr-links li a:focus {
	color: #fff;
	text-decoration: none;
}

/* The row rhythm, DESKTOP ONLY. Below 992 the 44px touch floor in
   public-v2-core.css PART 4 owns these rows and must not be touched —
   it is the single highest-value tap-target fix on the site (1978 of
   the site's 2439 sub-44px targets). This block is bounded at 992 so
   it can never reach into that query. */
@media only screen and (min-width: 992px) {
	footer#footer.ftrv2 .ftr-l-contact li a,
	footer#footer.ftrv2 .ftr-l-more li a { padding: 4px 0; }
	footer#footer.ftrv2 .ftr-hz-list li a { padding: 3px 0; }
}

/* mobile-responsive.css:723 and :703 ship
     `footer .col-md-3.col-sm-3 ul.list-unstyled li a { display:block !important }`
     `footer .ftr-horizon ul.list-unstyled li a      { display:block !important }`
   which BEAT public-v2-core PART 4's plain `display:flex` while its
   plain `min-height:44px` still lands — so every footer link below
   992 was a 44px box with its label pinned to the TOP of it, sitting
   ~14px above the centre of its own tap target. Measured on /faq/ at
   390: label baseline 13px into a 44px row. !important is required to
   out-rank an !important; specificity (1,4,2) vs (0,3,3) decides. */
@media only screen and (max-width: 991px) {
	footer#footer.ftrv2 .ftr-links li a {
		display: flex !important;
		align-items: center;
	}
	/* mobile-responsive.css:698 pins the game names to 12px !important */
	footer#footer.ftrv2 .ftr-hz-list li a { font-size: 13px !important; }
}


/* ============================================================
   5 — SOCIALS AND PAYMENT MARKS
   ============================================================
   The three social glyphs keep their 38x38 size and the 44x44 hit
   extender public-v2-core PART 4 gives them — sizing them to 44
   pushes the third onto its own line in a ~120px column. Only the
   chrome changes: they become bordered chips in the system's palette
   instead of bare glyphs on grey.
   ------------------------------------------------------------ */
footer#footer.ftrv2 .ftr-soc { margin: var(--pv2p-s3) 0 0; }
footer#footer.ftrv2 .ftr-soc a.social {
	color: var(--pv2-text-soft);
	background: var(--pv2-panel);
	border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
footer#footer.ftrv2 .ftr-soc a.social:hover {
	color: #fff;
	background: var(--pv2-hover);
	border-color: var(--pv2-border-strong);
}

/* The eight payment marks are two <p>s of four <img>. footer-default
   sizes them by WIDTH (`flex: 0 1 calc(25% - 4px)` + `width:100%`),
   which width-matches eight logos of five different aspect ratios and
   leaves their heights ragged — measured at 1440: 20 / 23 / 16 / 18px
   in one row. Height-match them instead, which is how a card-mark row
   is meant to line up, and let the width fall out of the artwork.
   Ties with `#footer .ftr-info > p:not(.block) > *` (1,2,1) and wins
   on source order. */
footer#footer.ftrv2 .ftr-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--pv2p-s1);
}
footer#footer.ftrv2 .ftr-pay > * { flex: 0 0 auto; }
footer#footer.ftrv2 .ftr-pay img {
	display: block;
	width: auto;
	height: 24px;
	border-radius: 3px;
	opacity: .92;
}
footer#footer.ftrv2 .ftr-pay a:hover img { opacity: 1; }


/* ============================================================
   6 — THE X EMBED COLUMN
   ============================================================
   platform.twitter.com writes an <iframe> into the <blockquote> at
   runtime and owns everything inside it — this sheet cannot and does
   not restyle its internals. Two decisions about how it SITS:

   1. No frame around it. The embed already draws its own 1px
      bordered dark card with rounded corners; a second frame reads as
      a double border. It gets the system's radius applied to the
      clipping wrapper and nothing else.
   2. Its column is capped at 470px between 992 and 1399, not the 550
      footer-default allows. 550 is the widest X will render, but it
      is not free: it is 80px taken from the game list, and it is the
      reason that list cannot hold three columns until the row passes
      1500px. The embed loses nothing at 470 (X reflows it); the game
      list gains a whole column. See §7.

   Below 992 the column is `display:none !important`
   (mobile-responsive.css:668) — an existing decision about a ~500KB
   third-party payload on a phone, left alone.
   ------------------------------------------------------------ */
footer#footer.ftrv2 .ftr-embed {
	border-radius: var(--pv2-radius-lg);
	max-width: 100%;
}


/* ============================================================
   7 — ON THE HORIZON, ON DESKTOP
   ============================================================
   MEASURED AT 1100, BEFORE:  .ftr-info 713 | .ftr-social 814 |
   .ftr-horizon 1382.  The list is 570px taller than the tallest
   thing beside it, so the bottom 570px of the footer is one narrow
   column of game names with two empty columns to its left.

   The cause is the column count, not the content. footer-default.css
   holds the list at TWO columns until `@container ftrrow (min-width:
   1500px)`, which no width below a 1710px viewport reaches. 81 links
   in two columns is 41 rows; in three it is 27.

   The 1500 floor was set so a third column could not squeeze the
   names — a fair worry, and the fix is to pay for the column out of
   the X embed rather than out of the names. Measured after, with §6's
   470px cap:
     1100 viewport -> row 1040, list 456 -> 2 columns @ 219px  (unchanged)
     1440 viewport -> row 1230, list 617 -> 3 columns @ 194px
     1920 viewport -> row 1530, list 817 -> 3 columns @ 259px
   194px holds every name in the list on one line except the four
   longest, which wrap to two and are held together by the
   `break-inside: avoid` footer-default.css already ships.

   Result at 1440: .ftr-horizon 1382 -> 823, against .ftr-social 780.
   The row balances and the footer loses ~560px on every desktop page.
   ------------------------------------------------------------ */
@media only screen and (min-width: 992px) {
	footer#footer.ftrv2 .ftr-social { flex: 0 1 clamp(340px, 32%, 470px); }
	footer#footer.ftrv2 .ftr-horizon { flex: 1 1 auto; min-width: 0; }
}
/* .ftr-row declares `container-type: inline-size; container-name:
   ftrrow` in footer-default.css at >=992, so this query simply does
   not match below that — no width guard needed. 1150px of ROW is the
   point at which the third column lands at 190px+, which is the floor
   the two-line names need. */
@container ftrrow (min-width: 1150px) {
	footer#footer.ftrv2 .ftr-hz-list { column-count: 3; column-gap: 22px; }
}


/* ============================================================
   8 — THE PHONE AND TABLET STACK  (<= 991)
   ============================================================
   Defect 1 in the header comment. Two things have to happen: the
   contact column has to stop being a float, and the 81-link block has
   to stop being 94% of the footer.
   ------------------------------------------------------------ */
@media only screen and (max-width: 991px) {

	/* ---------- 8a. kill the float ----------
	   mobile-responsive.css:1689 `.col-md-3:not(.col-sm-6):not(.col-sm-12)
	   { width:33.333% !important; float:left !important }` (50% at <=600)
	   is aimed at the ARK mod-tile grid and catches the footer's contact
	   column, which is `col-md-3 col-sm-3`. That one rule is what puts
	   the whole footer into two ragged columns on a phone.
	   MEASURED at 390: .ftr-info 195 x 713 float:left -> 360 x auto,
	   float:none, and the game list stops being 185px wide. */
	footer#footer.ftrv2 .ftr-info {
		width: 100% !important;
		float: none !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		margin-bottom: var(--pv2p-s5) !important;
	}
	footer#footer.ftrv2 .ftr-horizon {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	/* Bootstrap 3's .row clearfix pseudos are the reason a cleared float
	   used to be needed at all; nothing here floats now. */
	footer#footer.ftrv2 .ftr-row { overflow: hidden; }

	/* ---------- 8b. the game list gets the full width ----------
	   With the float gone the multi-column container is no longer
	   squeezed into a BFC gutter. 2 columns at 390 measures 171px a
	   column, which holds all but ~10 names on one line — the trap
	   recorded in the design contract (columns:2 producing SIX 55px
	   columns) was a consequence of the float, and dies with it.
	   Verified: no label breaks mid-word at 360, 390 or 414. */
	footer#footer.ftrv2 .ftr-hz-list {
		column-count: 2;
		column-gap: 18px;
	}
	/* 620px of viewport is 590 of list, which is three 184px columns —
	   the same 184px floor the desktop step uses. Below it two, and one
	   under 360 where two columns would be 165px and start breaking the
	   longer names. */
	@media (min-width: 620px) {
		footer#footer.ftrv2 .ftr-hz-list { column-count: 3; column-gap: 20px; }
	}
	@media (max-width: 359px) {
		footer#footer.ftrv2 .ftr-hz-list { column-count: 1; }
	}

	/* mobile-responsive.css:764 centres the social row at <=600
	   (`footer .col-md-3 p.block { text-align: center !important }`),
	   which was right when the column was a 195px float and is wrong now
	   that it is the full width — three glyphs centred under six
	   left-aligned blocks is a fourth left edge on a page that now has
	   one. */
	footer#footer.ftrv2 .ftr-soc { text-align: left !important; }
	footer#footer.ftrv2 .ftr-soc a.social { margin: 0 12px 0 0 !important; }

	/* ---------- 8c. THE DISCLOSURE ----------
	   Every one of the 81 links stays in the DOM, rendered, at every
	   width — nothing is display:none, nothing is removed, nothing is
	   injected by script. The list is CLIPPED to about four rows and
	   the column label becomes its toggle.

	   Why clipping and not the alternatives:
	     - a scroll box nests a scroll gesture inside page scroll on a
	       phone, and hides the links behind a gesture instead of a tap;
	     - a chip cloud measured 1320px at 390 and wraps multi-word
	       names badly — a 60% saving for a worse-looking block;
	     - more columns alone cannot fix it: 81 names need >=170px each
	       to stay on one line, so 390px buys two columns and 1800px.
	   Clipping is the treatment every large site uses on a fat mobile
	   footer, and it is the only one that costs the visitor nothing
	   when they do not want the list.

	   PROGRESSIVE ENHANCEMENT, deliberately in this direction: the
	   collapsed state needs the `ftr-hz-js` class, which only script
	   adds. With no script the list renders exactly as it does today,
	   fully expanded — so nothing is ever unreachable. The script adds
	   the class synchronously while the footer is parsing, before
	   first paint, so there is no expand/collapse flash.

	   MEASURED at 390: #footer 3813 -> 1131 (-70%). The 81-link block
	   goes 3583 -> 234 collapsed, and is still 81 crawlable links. */
	footer#footer.ftrv2 .ftr-hz-js .ftr-h-horizon {
		cursor: pointer;
		display: flex;
		align-items: center;
		/* the label is now a control and owns its line, so it grows to
		   the touch floor rather than taking a hit extender — same call
		   as the footer link list two rules up, and the opposite call to
		   the socials, which sit in a horizontal run. */
		min-height: 44px;
		padding-bottom: 0;
		margin-bottom: var(--pv2p-s2);
		-webkit-tap-highlight-color: transparent;
	}
	footer#footer.ftrv2 .ftr-hz-js .ftr-h-horizon:hover { color: var(--pv2-text-soft); }
	/* the chevron is CSS geometry, not a glyph. The public pages ship a
	   Font Awesome SUBSET with no chevron-down in it, and a missing
	   glyph there renders as literally nothing. */
	footer#footer.ftrv2 .ftr-hz-js .ftr-h-horizon:after {
		content: '';
		width: 7px; height: 7px;
		margin-left: auto;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .18s ease, margin-top .18s ease;
	}
	footer#footer.ftrv2 .ftr-hz-js.ftr-hz-open .ftr-h-horizon:after {
		transform: rotate(-135deg);
		margin-top: 2px;
	}

	/* THE CLIP GOES ON THE COLUMN, NOT ON THE LIST, and that is the whole
	   trick. A `max-height` on the <ul> clips a MULTI-COLUMN CONTAINER,
	   and a multicol container with a constrained height does not simply
	   cut its content off — it fragments the remainder into overflow
	   columns laid out to the right, forever. Measured with the clip on
	   the list: 3576px of off-screen <li> boxes at 390 and 7167px at 768,
	   invisible (the container clips them) and harmless to page scroll,
	   but 70-odd links laid out off the side of the world on every paint.
	   Clipping the plain block AROUND it instead leaves the list in normal
	   flow at its natural 1804px and simply shows the top of it.
	   Measured after: per-element overhang 0 at every width. */
	footer#footer.ftrv2 .ftr-hz-js {
		/* 44px label + 12px gap + 4.7 of the list's 44px rows. The half
		   row is deliberate: a clip that lands on a row boundary reads as
		   a list that ENDS, and the only thing left saying otherwise is
		   the chevron. */
		max-height: 264px;
		overflow: hidden;
	}
	/* the fade is what says "there is more". .ftr-horizon already carries
	   `position: relative` inline, so this needs nothing new. */
	footer#footer.ftrv2 .ftr-hz-js:after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0; height: 64px;
		background: linear-gradient(to bottom,
			rgba(26,26,27,0) 0%, rgba(26,26,27,.86) 62%, var(--pv2-surface) 100%);
		pointer-events: none;
	}
	footer#footer.ftrv2 .ftr-hz-js.ftr-hz-open {
		max-height: none;
		overflow: visible;
	}
	footer#footer.ftrv2 .ftr-hz-js.ftr-hz-open:after { display: none; }
}

/* ---------- 8d. the contact block goes 3-up on a tablet ----------
   768-991 is the band where the X embed is already hidden and the
   contact column is the only thing in the row besides the game list.
   MEASURED at 768 before: .ftr-info 256 x 690 in a 768px viewport,
   with 512px of nothing beside it. Its three groups — Contact Us,
   Payments Accepted, More Info — are peers and fit three across at
   236px each, which is wider than the 210px they get on a 1440
   desktop. 690 -> 300.

   Placement is explicit rather than auto-flow because the groups are
   uneven (3 items / 3 items / 2 items) and auto-flow would interleave
   them. The classes are on the template's own elements; no wrapper
   was added, so the DOM order the SEO fingerprint sees is unchanged. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* MULTICOL, NOT GRID, and that was a real mistake worth recording.
	   Grid was the obvious tool and it is the wrong one here: the three
	   groups have 3 / 3 / 2 children, so in a grid they SHARE ROWS, and
	   a row is as tall as its tallest cell. Measured with the grid: the
	   7-link More Info list made row 2 300px tall, which pushed the
	   second payment strip 160px below the first and left the socials
	   floating in the middle of a 357px block of nothing. The groups are
	   not a table — they are three independent stacks that happen to sit
	   side by side, which is what columns are for.

	   `break-before: column` on the two later heads is what pins one
	   group per column; the count has to equal the number of groups, or
	   a forced break spills into an off-screen overflow column. That is
	   also why there is no 2-up step at 561-767: three groups do not fit
	   in two columns.  MEASURED at 768: .ftr-info 690 -> 302, in a block
	   that had 512px of empty space beside it. */
	footer#footer.ftrv2 .ftr-info {
		column-count: 3;
		column-gap: var(--pv2p-s5);
	}
	footer#footer.ftrv2 .ftr-h-pay,
	footer#footer.ftrv2 .ftr-h-more {
		break-before: column;
		-webkit-column-break-before: always;
		margin-top: 0;
	}
	/* a head must never be the last thing in a column, and no group may
	   be split down a column break */
	footer#footer.ftrv2 .ftr-h { break-after: avoid; }
	footer#footer.ftrv2 .ftr-links,
	footer#footer.ftrv2 .ftr-pay,
	footer#footer.ftrv2 .ftr-soc {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
}


/* ============================================================
   9 — THE COPYRIGHT RULE
   ============================================================
   footer-default.css draws a two-tone `hr` (#1a1a1a over #3d3d3d — a
   1px groove from 2013) and then a second #252525 slab under it. On
   --pv2-surface that reads as a lighter box glued to the bottom of
   the page. One hairline and one line of dim type instead.
   ------------------------------------------------------------ */
footer#footer.ftrv2 hr {
	border-top: 1px solid var(--pv2-line);
	border-bottom: 0;
	margin: 0;
}
footer#footer.ftrv2 .copyright {
	background-color: transparent;
	padding: var(--pv2p-s4) 0;
	color: var(--pv2-text-dim);
	font-family: var(--pv2p-font);
	letter-spacing: .01em;
}


/* ============================================================
   10 — THE FOOTER JOINS THE RAIL
   ============================================================
   MOVED HERE FROM public-v2-core.css PART 1 on 2026-08-04, unchanged.
   It had to move: that file is linked only from header.tpl's public
   staff gate, so on the two panels — which render the same footer —
   the rule did not exist at all.

   MEASURED AT 1920, BEFORE: `#c2brand .container` 180@1560, every page
   band 180@1560, `#footer .container` 375@1170. The footer was the last
   edge on the page that disagreed with the header — 195px inboard of
   everything above it, on every page.

   It was deliberately held at 1170 while only the game pages were wide,
   because a footer that changes width per page is worse than one that is
   narrow everywhere. Every surface that wears this skin is now on the
   same rail, so that objection is gone and the three regions line up.

   `.copyright` lives inside <footer id="footer">, so one selector covers
   both containers. #wrapper-prefixed to out-specify public-v2-core PART
   5.0's page-region rule rather than tie with it — the same count the
   rule had before the move (2 ids, 2 classes, 1 element), so nothing it
   used to beat can now beat it. Inside a panel this is a no-op: both
   `body.pnv2 .container` and `body.dsv2 .container` already resolve to
   the identical min(1560px, 100vw - 180px) above 1400.

   The footer's own layout already anticipated this: footer-default.css
   sizes `.ftr-row` with `container-type: inline-size` explicitly because
   "the panel + Death Star rails run up to 1560px while the public site
   container is capped at 1170px", and its `@container ftrrow (min-width:
   1500px)` step gives the game list a third column once the row is wide
   enough. The second rule below is the no-container-query fallback that
   file already ships for `body.pnv2` / `body.dsv2` — a 1560 rail is a
   1530 row, which needs 1710px of viewport.
   ------------------------------------------------------------ */
@media only screen and (min-width: 1400px) {
	#wrapper footer#footer.ftrv2 .container {
		width: 100%; max-width: var(--pv2p-rail-wide);
		margin-left: auto; margin-right: auto;
	}
}
@media only screen and (min-width: 1710px) {
	footer#footer.ftrv2 .ftr-hz-list { column-count: 3; }
}


/* ============================================================
   11 — MOBILE TAP TARGETS
   ============================================================
   MOVED HERE FROM public-v2-core.css PART 4 on 2026-08-04, unchanged,
   for the same reason as §10 — and this is the half that mattered most.
   Left where it was, a panel would have got the new footer's look with
   the old footer's 31px tap rows: half-converted, and worse than either
   whole state.

   From the sitewide mobile baseline (2026-08-04): 2,439 of 2,785 visible
   interactive elements measure under 44px at 390, and 1,978 of them are
   in this one element.
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {

	/* ---------- THE single highest-value selector on the site ----------
	   footer-default.css:121  `#footer ul.nobordered li a { padding: 3px 0 }`
	   renders every footer link at 185 x 31. There are 90 of them on a
	   page (the "On the Horizon" block alone ships 81 game links), and
	   they account for 1,978 of the site's 2,439 sub-44px targets —
	   81% of the ENTIRE site's tap-target problem, from one line.
	   Measured on /faq/ at 390 with the v2 chrome up: 92 failures total,
	   90 of them these links.

	   A pseudo-element hit extender — the trick the panel files use — is
	   WRONG here and must not be substituted. These links are a dense
	   vertical list at a 31px pitch; a 44px extender centred on each one
	   would overlap its neighbours by ~6px top and bottom, so the top of
	   every link would fire the link above it. In a vertical list the row
	   has to actually grow. */
	footer#footer.ftrv2 ul.nobordered li a {
		display: flex; align-items: center;
		min-height: 44px; padding: 4px 0;
	}
	/* NO `columns` here, and this is the trap worth recording: the footer
	   is ALREADY multi-column at 390 — its own .ftr-row grid keeps three
	   Bootstrap columns side by side on a phone. Adding `columns: 2` to
	   the lists inside them produced SIX effective columns about 55px
	   wide, and every label longer than one word broke apart
	   ("Lost / Skies", "Crestfallen: / Mediev..."). It measured better
	   (the footer got shorter) and looked broken. Measure the container,
	   not just the total height. */

	/* ---------- the rest of the footer's tail ----------
	   What the rule above leaves behind, measured on /faq/ at 390: three
	   38x38 social glyphs and the Stripe (28x28) / PayPal (45x28) payment
	   marks.

	   The socials are the one place in the footer where an extender is
	   RIGHT rather than wrong: they are a horizontal run inside a ~120px
	   Bootstrap column, so sizing them to 44 pushed the third glyph onto
	   its own line (3 x 44 + 2 x 8 = 148px in a 120px column). They carry
	   an 8px margin-right and the extender only needs 3px a side, so the
	   hit areas clear each other with 2px to spare and the row stays a
	   row. Opposite call to the link list above, same rule underneath:
	   grow the row when it owns its line, extend the hit area when it
	   does not. */
	footer#footer.ftrv2 a.social { position: relative; }
	footer#footer.ftrv2 a.social:after {
		content: ''; position: absolute; left: 50%; top: 50%;
		width: 44px; height: 44px; transform: translate(-50%, -50%);
		pointer-events: auto;
	}
	footer#footer.ftrv2 p > a[href*="stripe.com"],
	footer#footer.ftrv2 p > a[href*="paypal.com"] {
		display: flex; align-items: center;
		min-height: 44px;
	}
}
