/* trialsofterror.com: the approved landing page (LandingVision14/updated-page.png). ONE composition on every screen (the user,
   2026-10-24, on the moto: phones keep the layout made on the PC): everything is laid out at the approved 1086 px and the body
   is zoomed to the screen's width by --z (site-scale.js). Pictures keep the desktop framing. Where the scaled size would be too
   small to read or tap, max(desktop, calc(real-minimum / var(--z))) keeps the real minimum: text 12-13 px, tap targets 44 px.
   Nothing opens a window: reveals open in place, full width below their row (site.js). What isn't set up yet is greyed out and
   not clickable (.off): a quieter version of the same element, never "soon" wording. */
:root{--z:1;--bg:#0c1217;--text:#eee7da;--muted:#aab0b2;--gold:#e7c98d;--gold-soft:#e5ce98;--line:#b99a6633;
 --tap:max(44px,calc(44px / var(--z)));--gutter:38px;
 /* the site's quiet hairline (the user likes "the grey/gold outline"): gold-grey, fading at both ends, at least 1 real pixel */
 --hair-w:max(1px,calc(.75px / var(--z)));--hair-c:#c3a46f55}
/* Cinzel, self-hosted (SIL Open Font License, assets/cinzel-OFL.txt): the section headings */
@font-face{font-family:'Cinzel';src:url(assets/cinzel-latin.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
/* Gelasio, self-hosted (SIL Open Font License, assets/gelasio-OFL.txt; WEBSITE-GELASIO-FONT-20261026): Georgia's metric twin,
   listed after Georgia, so screens with Georgia keep the approved look and never fetch it; Android and Linux get Georgia's
   widths instead of the wider Noto Serif. Latin only, like Google's latin subset */
@font-face{font-family:'Gelasio';src:url(assets/gelasio-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gelasio';src:url(assets/gelasio-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:max(84px,calc(56px / var(--z)))}
/* an explicit 100% width: a percentage resolves before the zoom, so the zoomed page fills the screen (auto would shrink it twice) */
body{margin:0;zoom:var(--z);width:100%;background:var(--bg);color:var(--text);font-family:Georgia,'Gelasio','Times New Roman',serif}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-weight:400}
a:focus-visible,button:focus-visible{outline:max(2px,calc(2px / var(--z))) solid #f3d9a4;outline-offset:4px}
[hidden]{display:none!important}
/* an invisible tap area of at least 44 real px around a control drawn smaller (phones keep the design's proportions) */
.tap-pad{position:relative}
.tap-pad::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-200px;z-index:40;min-height:var(--tap);padding:14px;background:#31271a;color:#f3e3c2;font:max(15px,calc(14px / var(--z))) Arial,sans-serif}
.skip:focus{top:12px}
.preview-band{position:relative;z-index:30;margin:0;padding:8px;background:#7a1f1f;color:#fff;font:700 max(13px,calc(12px / var(--z))) Arial,sans-serif;text-align:center;letter-spacing:1px}

/* The header: over the hero art; a bar with a compact Play once the main Play has scrolled away */
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;margin:0 auto;width:min(1086px,calc(100vw / var(--z)));height:max(76px,calc(30px / var(--z)));
 display:flex;align-items:center;justify-content:flex-end;padding:0 var(--gutter);transition:background .2s,box-shadow .2s}
.site-header nav{display:flex;align-items:center;gap:max(12px,calc(6px / var(--z)))}
/* the header keeps the design's scale on phones (the user: it took up a lot of room): small text; only the live link needs a
   44 px target, and gets it invisibly (.tap-pad) */
.nav-item{position:relative;display:inline-flex;align-items:center;min-height:44px;color:#e5e0d5;font:max(16px,calc(10px / var(--z))) Georgia,'Gelasio',serif;
 text-decoration:none;text-shadow:0 1px 5px #000}
a.nav-item:hover{color:#f8d38b}
/* navigation: text links with a small gold diamond between them; the live link's thin gold underline slides in on hover or focus */
.nav-group{display:flex;align-items:center;gap:max(12px,calc(6px / var(--z)))}
.nav-sep{color:#d9b878;font-size:max(8px,calc(5px / var(--z)));opacity:.9}
.nav-item.live::after{content:'';position:absolute;left:0;right:0;bottom:calc(50% - .85em);height:max(1px,calc(1px / var(--z)));
 background:#d9b878;transform:scaleX(0);transform-origin:left;transition:transform .25s ease-out}
.nav-item.live:hover::after,.nav-item.live:focus-visible::after{transform:scaleX(1)}
/* account: Log In as text, Sign Up as a small outlined gold pill (dimmed and unclickable while accounts aren't set up) */
.nav-item.pill{min-height:0;padding:.28em .95em;border:max(1px,calc(1px / var(--z))) solid #d9b878;border-radius:999px;color:var(--gold);line-height:1.2}
.account-links{display:flex;align-items:center;gap:max(20px,calc(9px / var(--z)))}
.site-header nav{position:relative;isolation:isolate}
.site-header nav::before{content:'';position:absolute;z-index:-1;inset:-18px -64px;pointer-events:none;border-radius:50%;
 background:radial-gradient(closest-side,#05080cd9 0%,#05080ca6 55%,transparent);transition:opacity .2s}
.site-header.solid nav::before,.site-header.scrolled nav::before{opacity:0}
.nav-item.off{opacity:.45;cursor:default}
.mini-play{display:none}
.site-header.solid,.site-header.scrolled{background:#0b1015;box-shadow:0 1px #ad865d44}
/* on a big screen (.wide) the header's links stay over the column, and its bar runs the full width of the screen */
.wide .site-header.solid,.wide .site-header.scrolled{background:none;box-shadow:none}
.wide .site-header.solid::before,.wide .site-header.scrolled::before{content:'';position:absolute;z-index:-1;inset:0 -100vmax;
 background:#0b1015;box-shadow:0 1px #ad865d44;pointer-events:none}
.scrolled .mini-play{position:relative;display:flex;margin-left:max(13px,calc(4px / var(--z)));align-items:center;min-height:max(44px,calc(24px / var(--z)));padding:0 20px;border:1px solid #c29c5e;background:#31271a;color:#f3e3c2;
 font:700 max(13px,calc(10px / var(--z))) Georgia,'Gelasio',serif;letter-spacing:1px;text-decoration:none}
.scrolled .mini-play:hover{background:#45361f}
/* the compact PLAY NOW in the hero plate's carved gold, so the two read as one button */
.scrolled .mini-play{border-color:#2a1503;border-radius:2px;color:#1e0f03;text-shadow:0 1px 0 #ffe9b099;
 background:linear-gradient(180deg,#fff8c0 0%,#ffeb86 18%,#ffd866 40%,#f2b846 62%,#d4912c 84%,#ab6c1c 100%);
 box-shadow:inset 0 1px 0 #fffbe0,inset 0 0 0 1px #ffe6a066,inset 0 -2px 0 #5a2c0899,0 1px 0 #1a0c03}
.scrolled .mini-play:hover{background:linear-gradient(180deg,#fff8c0 0%,#ffeb86 18%,#ffd866 40%,#f2b846 62%,#d4912c 84%,#ab6c1c 100%);filter:brightness(1.06)}
/* the wordmark (WEBSITE-V10-PICKS-20261026): the painted title, small, in the title's warm gold, at the bar's left once the
   big title has gone under the bar (site.js); it fades in and leads back to the top */
.site-header{gap:max(10px,calc(6px / var(--z)))}
.wordmark{position:relative;flex:none;display:flex;align-items:center;margin-right:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.past-title .wordmark{opacity:1;visibility:visible}
.wordmark img{width:auto;height:max(48px,calc(22px / var(--z)));
 filter:sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(1) contrast(1.15) drop-shadow(0 1px 0 #1a0c03)}
.wordmark:hover img{filter:sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(1.16) contrast(1.15) drop-shadow(0 1px 0 #1a0c03)}
/* on a phone held upright the bar's links are 12 px (the readable minimum) and the scrolled bar's gaps a little tighter, so
   the links and the compact PLAY NOW stay on one line down to 360 px; nothing wraps. That leaves no room for the wordmark
   there (at 360 px the links and PLAY NOW take 331 of the bar's 335 px), so it shows on PC and phones held sideways only */
.site-header nav *{white-space:nowrap}
.fit .wordmark{display:none}
/* without the wordmark the scrolled bar's links and PLAY NOW sit centred, the same room at both ends (right-packed, a 390 phone
   left about 43 px empty at the left against 14 at the right: it read as a missing logo); at 360 they fill the bar */
.fit .site-header.scrolled{justify-content:center}
.fit .nav-item,.fit .scrolled .mini-play{font-size:calc(12px / var(--z))}
/* the bar's 44 px tap areas start at the screen's top edge instead of reaching past it (the bar is 30 px tall on a phone) */
.fit .site-header .tap-pad::before{top:calc(50% - 15px / var(--z));transform:translateX(-50%)}
/* the title layer's faint edge pixels (invisible over the hero's sky) are clipped off on the bar */
.wordmark img{clip-path:inset(3% 2% 0 0)}
.fit .site-header.scrolled nav,.fit .scrolled .nav-group{gap:calc(4px / var(--z))}
.fit .scrolled .account-links{gap:calc(6px / var(--z))}
/* PLAY NOW's label 6 px inside its pill (the v14 review: about 5 at 360) */
.fit .scrolled .mini-play{margin-left:calc(3px / var(--z));padding:0 calc(6px / var(--z))}
/* PLAY NOW sits 3 px down the bar inside a 1 px border, so its pad is lifted by both to start at the screen's top edge too
   (centred on the button it began 0.7 px above the screen, leaving 43.3 px to tap) */
.fit .scrolled .mini-play.tap-pad::before{top:calc(-3px / var(--z) - 1px)}

main{width:min(1086px,100%);margin:0 auto;background:var(--bg)}

/* The hero: the whole approved painting, its title painted in */
.hero{position:relative;aspect-ratio:1086/724;background:url(assets/hero.webp) center top/100% 100% no-repeat}
/* a big screen (.wide, B): the hero stays the approved 1086 x 724 box in the column, and BRAIN's widened painting
   (assets/hero-wide.webp: the original, pixel-identical, at its centre, with painted side scenery) runs out past the
   column on both sides to the screen's edges (--side, from site-scale.js), at most its own 326.7 px a side (2460 / 1536 of
   the box), so nothing reaches past the screen. The side scenery needs the user's OK before it goes live
   (WEBSITE-BIG-SCREEN-B-AND-POLISH-20261025; fallback A). Only that picture loads on a big screen. */
.wide body{overflow-x:clip}
.wide .hero{--reach:calc(-1 * min(326.67px, var(--side)));background-image:none;isolation:isolate}
.wide .hero::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:var(--reach);right:var(--reach);pointer-events:none;
 background:url(assets/hero-wide.webp) center top/1739.33px 724px no-repeat}
.wide .hero::after{left:var(--reach);right:var(--reach)}
/* the hero's foot fades into the page: 64 px, eased, so the painting's foreground stays (the v9 review: 90 px buried it; the
   fade is the same share of the hero at every size) */
.hero::after{content:'';position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(transparent,#0c121799 50%,var(--bg));pointer-events:none}
/* the hero block keeps the design's own size on every screen, left of the Warrior (the user: PLAY NOW hid him), 10 px left of
   the design so its tagline and labels clear his shield and the plate lines up with "OF";
   PLAY NOW stays easy to tap through its invisible 44 px area */
.hero-actions{position:absolute;z-index:2;left:58px;top:330px;width:260px;display:flex;flex-direction:column;align-items:center;text-align:center}
.main-play{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;flex:none;width:260px;
 height:83px;border:1px solid #f3db9a;border-radius:2px;background:linear-gradient(145deg,#e0c78d,#b78e45);
 color:#211a10;text-decoration:none;box-shadow:inset 0 0 0 3px #73501c33,0 5px 18px #0009;transition:filter .16s,transform .1s}
.main-play:hover{filter:brightness(1.12)}
.main-play:active{transform:translateY(2px);filter:brightness(.96)}
.main-play:focus-visible{outline-offset:5px}
.play-label{font:700 max(24px,calc(9px / var(--z))) Georgia,'Gelasio',serif;letter-spacing:.07em;line-height:1}
.play-context{font:max(13px,calc(6px / var(--z))) Arial,sans-serif;letter-spacing:.3px;line-height:1}
.adventure-line{margin:20px 0 15px;color:#eadfc9;font:19px Georgia,'Gelasio',serif;white-space:nowrap;text-shadow:0 2px 5px #000}
.platforms{display:flex;justify-content:center;gap:28px}
.platforms li{display:flex;flex-direction:column;align-items:center;gap:6px;color:#c8c5bd;font:12px Arial,sans-serif;text-shadow:0 1px 5px #000}
.platforms svg{width:27px;height:27px;fill:none;stroke:#d1c3a7;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #000)}

/* THE HERO POLISH (the user kept all six, 2026-10-25), layout and positions unchanged */
/* PLAY NOW as a forged gold plate; an ember glow only on hover, focus or press (sleek, never pulsing) */
/* the plate in the title's carved gold (WEBSITE-BIG-SCREEN-B-AND-POLISH-20261025): the title's warm, saturated faces, a dark
   carved rim like the letters' edge, a bright bevel along the top; the label pressed in, dark on the light gold */
.main-play{border:1px solid #2a1503;letter-spacing:.02em;
 background:linear-gradient(180deg,#fff8c0 0%,#ffeb86 18%,#ffd866 40%,#f2b846 62%,#d4912c 84%,#ab6c1c 100%);
 box-shadow:inset 0 1px 0 #fffbe0,inset 0 0 0 1px #ffe6a066,inset 0 0 0 2px #7a420e55,inset 0 -2px 0 #5a2c0899,
  0 2px 0 #1a0c03,0 0 2px #000,0 6px 18px #000a;
 transition:box-shadow .2s,filter .16s,transform .1s}
.main-play .play-label{color:#1e0f03;letter-spacing:.1em;text-shadow:0 1px 0 #ffe9b099}
.main-play:hover,.main-play:focus-visible,.main-play:active{filter:brightness(1.06);
 box-shadow:inset 0 1px 0 #fffbe0,inset 0 0 0 1px #ffe6a066,inset 0 0 0 2px #7a420e55,inset 0 -2px 0 #5a2c0899,
  0 2px 0 #1a0c03,0 0 2px #000,0 6px 18px #000a,0 0 22px #ff9a3c66}
/* "In your browser" in dark bronze small caps */
.main-play .play-context{color:#3d2006;font-family:Georgia,'Gelasio',serif;font-variant:small-caps;letter-spacing:.08em;text-shadow:0 1px 0 #ffe2a066}
/* the tagline in a warm parchment italic serif between two short fading gold hairlines */
.adventure-line{display:flex;align-items:center;justify-content:center;gap:5px;color:#ecdcb9;font-style:italic}
.adventure-line::before,.adventure-line::after{content:'';flex:none;width:11px;height:var(--hair-w)}
/* off the phone the tagline is 18 px with 9 px hairlines, so its end keeps about 24 design px from the Warrior's shield (35 screen px
   at 1920, 47 at 3440; the v9 review: 19 px came within about 18) */
:root:not(.fit) .adventure-line{font-size:18px}
:root:not(.fit) .adventure-line::before,:root:not(.fit) .adventure-line::after{width:9px}
.adventure-line::before{background:linear-gradient(90deg,transparent,#d9b878)}
.adventure-line::after{background:linear-gradient(90deg,#d9b878,transparent)}
/* the platform icons: BRAIN's cut-gold set (the user's pick, WEBSITE-ICONS-02-CUT-GOLD-20261026), solid gold shapes with the
   screens and buttons cut out, evenly spaced, hairlines between, small-caps parchment labels */
.platforms{gap:0}
.platforms li{padding:0 14px;color:#e3d3b0;font-family:Georgia,'Gelasio',serif;font-variant:small-caps;letter-spacing:.08em}
.platforms li+li{border-left:var(--hair-w) solid;border-image:linear-gradient(transparent,#d9b87866 20%,#d9b87866 80%,transparent) 1}
.platforms svg{fill:url(#cut-gold);fill-rule:evenodd;stroke:#e4c68c;stroke-width:.35;stroke-linejoin:miter}
/* the title lifted off the red sky: a soft dark halo behind the letters */
.hero-halo{display:block;position:absolute;left:2%;top:13%;width:46%;height:32%;pointer-events:none;
 background:radial-gradient(ellipse at 48% 52%,#05080cb0 0%,#05080c66 45%,transparent 72%)}
/* THE TITLE leads the page (the user): BRAIN's painted letters in gold-warm faces with a deep carved edge; ember cracks glow
   through them, masked by the letters' own alpha; TERROR (the lower half) is the hottest; and a ready-made glow layer behind
   breathes slowly (9 s, opacity only), stronger than the heading's */
.hero-title,.title-glow,.title-cracks,.title-heat{display:block;position:absolute;left:5.014%;top:16.5%;width:38.67%;pointer-events:none}
.hero-title,.title-glow{height:auto}
.hero-title{filter:sepia(1) saturate(2.4) hue-rotate(-6deg) brightness(1.04) contrast(1.18) drop-shadow(0 2px 0 #1a0c03) drop-shadow(0 0 2px #000)}
.title-glow{filter:brightness(0) drop-shadow(0 0 10px #ff3b1a) drop-shadow(0 0 26px #c0200f);opacity:.35;animation:titlebreath 9s ease-in-out infinite}
@keyframes titlebreath{0%,100%{opacity:.3}50%{opacity:.9}}
.title-cracks,.title-heat{aspect-ratio:594/262;-webkit-mask:url(assets/title.webp) 0 0/100% 100% no-repeat;mask:url(assets/title.webp) 0 0/100% 100% no-repeat}
.title-cracks{background:url(assets/heading-cracks.svg) 0 0/130px 39px repeat;opacity:.55}
.title-cracks.hot{clip-path:inset(50% 0 0 0);opacity:.9;background-position:40px 12px}
.title-heat{background:linear-gradient(180deg,transparent 48%,#ff6a2a40 60%,#ff8a3a55 100%)}
/* blood drops (the user: in sync with the pulse, "not very often and very subtle"): three tiny drops at real bottom edges of
   TERROR (the T's foot, the first R's leg, the last R's tail, from title.webp's alpha). Each runs on a 72 s cycle, eight of
   the title's 9 s breaths: it swells at the edge as the breath rises, lets go at the peak, falls ~20-25 px stretching a
   little, and fades. The delays put them on breaths 1, 4 and 6 (one drop every two or three breaths, never two at once).
   Transform and opacity only; none with reduced motion. */
.title-drops{position:absolute;left:5.014%;top:16.5%;width:38.67%;aspect-ratio:594/262;pointer-events:none}
.drop{position:absolute;width:max(5px,calc(4px / var(--z)));height:max(7px,calc(5.6px / var(--z)));margin-left:calc(max(5px,calc(4px / var(--z))) / -2);border-radius:50% 50% 50% 50%/40% 40% 60% 60%;opacity:0;
 background:radial-gradient(circle at 35% 30%,#d04a3a 0,#7a1210 32%,#4a0707 100%);transform-origin:50% 0;
 animation:drip 72s linear infinite}
.drop.d1{left:26.9%;top:96.4%;--fall:20px;animation-delay:1.5s}
.drop.d2{left:72.05%;top:90.2%;--fall:25px;animation-delay:28.5s}
.drop.d3{left:98.3%;top:95.2%;--fall:24px;animation-delay:46.5s}
@keyframes drip{0%{opacity:0;transform:translateY(0) scale(.2)}
 .4%{opacity:.75;transform:translateY(0) scale(.35)}
 4.1%{opacity:.85;transform:translateY(1px) scale(1,1.1)}
 4.9%{opacity:.6;transform:translateY(calc(var(--fall) * .7)) scale(.85,1.35)}
 5.4%{opacity:0;transform:translateY(var(--fall)) scale(.8,1.3)}
 100%{opacity:0;transform:translateY(var(--fall)) scale(.8,1.3)}}
/* a quiet dark scrim behind the whole cluster: a gradient only, no box */
.hero-actions::before{content:'';position:absolute;z-index:-1;left:-70px;right:-70px;top:-60px;bottom:-50px;pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,#05080c8c 0%,#05080c4d 50%,transparent 72%)}

/* Who faces the terror? Five cards in one row; a tapped card's details open full width under the row */
/* clip at the page edge: the row arrows' invisible tap areas reach into the gutters and must never cause a sideways scroll */
.champions{padding:12px var(--gutter) 25px;overflow-x:clip}
/* the heading (the user's pick, "flashy and cool"): Cinzel capitals in a gold fill cracked with ember-red hairlines, a dark
   engraved edge, TERROR glowing, and a very slow 7 s glow "breath" (no flicker; none with reduced motion); framed by fading
   hairlines: — WHO FACES THE TERROR? — */
.champions h2{display:flex;align-items:center;justify-content:center;gap:14px;margin:5px 0 12px;
 font:500 max(36px,calc(20px / var(--z)))/1.15 'Cinzel',Georgia,'Gelasio',serif;letter-spacing:.06em;text-transform:uppercase;
 filter:drop-shadow(0 1px 0 #000d) drop-shadow(0 0 1px #000a) drop-shadow(0 0 7px #b0200f66);animation:breath 7s ease-in-out infinite}
@keyframes breath{0%,100%{filter:drop-shadow(0 1px 0 #000d) drop-shadow(0 0 1px #000a) drop-shadow(0 0 6px #b0200f55)}
 50%{filter:drop-shadow(0 1px 0 #000d) drop-shadow(0 0 1px #000a) drop-shadow(0 0 12px #d2301a88)}}
.champions h2::before,.champions h2::after{content:'';flex:none;width:64px;height:var(--hair-w)}
.champions h2::before{background:linear-gradient(90deg,transparent,#d9b878)}
.champions h2::after{background:linear-gradient(90deg,#d9b878,transparent)}
.champions h2 .words{white-space:pre}
.champions h2 .gold{background:url(assets/heading-cracks.svg) 0 4px/110px 33px repeat,
 linear-gradient(180deg,#f6e2b0 0%,#d9b06a 44%,#a87a3a 62%,#e3c58e 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.champions h2 .terror{filter:drop-shadow(0 0 5px #ff3b1a88) drop-shadow(0 -1px .5px #ffbe7a99)}
/* the subtitle: ONE line of gold small caps with diamond separators (the user), sized by the design so it never wraps */
.champions-goal{margin:0 auto 26px;color:var(--gold-soft);font:19px/1.5 Georgia,'Gelasio',serif;font-variant:small-caps;letter-spacing:.1em;
 white-space:nowrap;text-align:center}
.champions-goal .sep{margin:0 .9em;color:#d9b878;font-size:.62em;vertical-align:.18em}
.champions-goal .br{display:none}
.row{position:relative}
/* the ring: clipped at the row's edges; a sideways thumb turns it, up and down stays the page's scroll; while it turns, the
   cards are placed absolutely and moved by transform only (site.js) */
.squad{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-height:380px;overflow-x:clip;touch-action:pan-y}
.squad.ring .card{position:absolute;margin:0;flex:none}
/* a card open on a screen too short for the row and the whole panel: the five cards shrink in place, keeping their shapes
   (--row-s from site.js); the panel below keeps its size */
.champions.compact .squad{justify-content:center;min-height:calc(380px * var(--row-s))}
.champions.compact .card{flex:0 0 calc(192px * var(--row-s));height:calc(315px * var(--row-s))}
.champions.compact .card:nth-child(2),.champions.compact .card:nth-child(4){height:calc(345px * var(--row-s))}
.champions.compact .card:nth-child(3){flex:0 0 calc(231px * var(--row-s));height:calc(380px * var(--row-s))}
.champions.compact .row-arrow{top:calc(190px * var(--row-s))}
/* the arrows keep their place beside the outer cards (the v9 review: they floated far off once the row shrank): the row is
   1010 px and the shrunk cards 999 px x --row-s, centred */
.champions.compact .row-arrow.prev{left:calc((1010px - 999px * var(--row-s)) / 2 - 34px)}
.champions.compact .row-arrow.next{right:calc((1010px - 999px * var(--row-s)) / 2 - 34px)}
.squad .card,.squad img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* ‹ ›: slim gold-line arrows in the gutters beside the row, clear of the cards; an invisible 44 px tap area each */
.row-arrow{position:absolute;top:190px;z-index:4;width:26px;height:64px;padding:0;border:0;background:none;transform:translateY(-50%);color:#d9b878}
.row-arrow.prev{left:-34px}
.row-arrow.next{right:-34px}
.row-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #000)}
.row-arrow:hover{color:#fff1d0}
/* a phone held upright: the row arrows in the gutters beside the cards, as on the PC (the v9 review: they overlapped the
   outer cards), on a faint dark backing (v14: the darker one read as a smudge); about 11 x 36 px with a bolder, brighter line (the
   v10 review: at 9 x 26 they were barely visible). Their tap areas stay 44 px */
.fit .row-arrow{width:calc(11px / var(--z));height:calc(36px / var(--z));border-radius:40%;color:#ecca86;
 background:radial-gradient(closest-side,#05080c4d,transparent)}
.fit .row-arrow svg{stroke-width:2.6}
/* v13 (the v12 review: 2-3 px from the screen's edge and the cards): each arrow about 8 px from the screen's edge and 8 px
   from the cards, the row drawn in by 11 px a side to make the room */
.fit .row-arrow.prev{left:calc(6.9px / var(--z) - var(--gutter))}
.fit .row-arrow.next{right:calc(6.9px / var(--z) - var(--gutter))}
.fit .squad{margin:0 calc(11.2px / var(--z))}
.card{position:relative;flex:1;min-width:0;height:315px;overflow:hidden;background:#121c24;border:1px solid #6c5d4144}
.card:nth-child(2),.card:nth-child(4){height:345px}
/* the centre slot (the Warrior's at first): a selected Champion glides into it (site.js) */
.card:nth-child(3){flex:1.2;height:380px;z-index:2;border-color:#c6a663;box-shadow:0 0 40px #000}

.card.selected{z-index:3;border-color:#e9c97e;box-shadow:0 0 0 max(1px,calc(1px / var(--z))) #e9c97e,0 0 30px #e9c97e40}
.card-open{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;text-align:center}
.card-open:focus-visible{outline-offset:-6px}
/* the portrait brightens a touch and zooms 3.5% inside its card on hover (PC) or press (phone); the card itself never grows */
.card img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s ease-out,filter .4s ease-out}
.card.pressed img{transform:scale(1.035);filter:brightness(1.12)}
@media (hover:hover){.card-open:hover img{transform:scale(1.035);filter:brightness(1.12)}}
.card.selected img{filter:brightness(1.12)}
.caption{position:absolute;inset:auto 0 0;display:block;padding:38px 8px 12px;background:linear-gradient(transparent,#090d12 40%)}
.caption .name{display:block;font-size:max(23px,calc(11px / var(--z)));line-height:1.15}
.state{display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:8px;color:#b6b0a4;font:max(12px,calc(9.5px / var(--z))) Arial,sans-serif}
.lock{width:.95em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.5}
.state.unlocked{color:#e9c97e}

/* A reveal: grows in place in about 150 ms (site.js), full width below its row */
.reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .15s ease-out,opacity .15s ease-out}
.reveal.open{grid-template-rows:1fr;opacity:1}
.reveal-inner{min-height:0;overflow:hidden}
.panel{padding:18px 22px;border:1px solid #c6a66355;border-top:max(2px,calc(2px / var(--z))) solid #e9c97e;background:linear-gradient(#1a232b,#11181f);
 font:max(15px,calc(13px / var(--z)))/1.5 Arial,sans-serif;color:#d7d2c7}
/* The chosen Champion: an art-backed card like the news cards, in the hairline frame; the portrait fades into the dark */
.champion-info{flex:0 0 100%;margin-top:16px}
.ci-card{position:relative;isolation:isolate;min-height:290px;overflow:hidden;border:var(--hair-w) solid var(--hair-c);
 background:radial-gradient(ellipse at 78% 30%,#24303a,#0e151b 70%)}
/* the open card's portrait shows the WHOLE champion, head to feet, with a little room above the head, on every screen
   (one design): the card's own picture, uncropped (285 x 490), with the same room above the head and under the feet
   (5% of the panel each). The user, 2026-10-25:
   the wide PC crop looked "very, very zoomed in" on a widescreen; they want to see the whole champion.
   Framed on purpose like a card of the row (the v9 review: feathered, its painted backdrop read as a brown box): the gold
   hairline of the chosen card and a soft shadow, no fading edges.
   The picture sits on a dark mat inside the frame, like a framed print, so the hair and the sandals get room (the v10
   review: they touched the frame; v11's blurred bands smeared): 7% of the width above and below, 4% at the sides (the
   frame's shape is the picture's plus that mat; in the frame's height, 4.07% above and below), with a faint gold line at the picture's own edge */
.ci-art{position:absolute;z-index:-1;top:5%;right:calc(max(36px,calc(22px / var(--z))) + 36px);height:90%;aspect-ratio:5808/10000;overflow:hidden;
 background:#0a0f13;border:max(1px,calc(1px / var(--z))) solid #c6a663aa;box-shadow:0 0 0 max(1px,calc(1px / var(--z))) #0e151b,0 6px 26px #000c}
.ci-art img{position:absolute;left:4%;top:4.07%;width:92%;height:auto;aspect-ratio:285/490;outline:max(1px,calc(1px / var(--z))) solid #c6a66340}
/* on a phone the portrait sits under the close button with room between them */
.fit .ci-art{top:calc(44px / var(--z));height:calc(95% - 44px / var(--z));right:calc(10px / var(--z))}
.ci-close{position:absolute;z-index:1;top:10px;right:12px;width:max(36px,calc(22px / var(--z)));height:max(36px,calc(22px / var(--z)));padding:0;
 border:1px solid #c6a66366;border-radius:50%;background:#0e151bcc;color:#e9c97e;font:max(20px,calc(14px / var(--z)))/1 Arial,sans-serif}
.ci-close:hover{background:#31271a;color:#fff1d3}
.ci-body{display:flex;flex-direction:column;align-items:flex-start;width:64%;padding:26px 30px 28px}
.ci-body p{margin:0}
.ci-badge{display:inline-flex;align-items:center;gap:.45em;padding:.3em .75em;border:1px solid #c6a66388;background:#31271a99;
 color:#e9c97e;font:max(12px,calc(10px / var(--z))) Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.ci-body h3{margin:14px 0 4px;color:#eee9df;font-size:max(36px,calc(20px / var(--z)));line-height:1.1}
.ci-role{color:var(--gold-soft);font:max(18px,calc(12px / var(--z))) Georgia,'Gelasio',serif;font-variant:small-caps;letter-spacing:.08em}
.ci-desc{margin-top:14px!important;color:#d4d6d5;font:max(16px,calc(13px / var(--z)))/1.55 Arial,sans-serif}
.ci-rule{margin-top:14px!important;color:#aab0b2;font:max(15px,calc(12px / var(--z)))/1.5 Arial,sans-serif}
.ci-play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;margin-top:20px;
 width:max(220px,calc(108px / var(--z)));height:max(70px,calc(46px / var(--z)));border:1px solid #2a1503;border-radius:2px;
 background:linear-gradient(180deg,#fff8c0 0%,#ffeb86 18%,#ffd866 40%,#f2b846 62%,#d4912c 84%,#ab6c1c 100%);color:#1e0f03;text-decoration:none;
 box-shadow:inset 0 1px 0 #fffbe0,inset 0 0 0 1px #ffe6a066,inset 0 0 0 2px #7a420e55,inset 0 -2px 0 #5a2c0899,0 2px 0 #1a0c03,0 0 2px #000,0 6px 18px #000a}
/* the panel's PLAY NOW is the same carved-gold plate as the hero's */
.ci-play .play-label{font-size:max(21px,calc(13px / var(--z)));letter-spacing:.1em;text-shadow:0 1px 0 #ffe9b099}
.ci-play .play-context{color:#3d2006;font-family:Georgia,'Gelasio',serif;font-variant:small-caps;letter-spacing:.08em;text-shadow:0 1px 0 #ffe2a066}
.ci-play:hover{filter:brightness(1.06)}

/* Terror awaits: three pictures in one row */
/* a hairline between the Champions and Terror awaits: the two sections share one dark ground */
.gameplay{position:relative;padding:28px var(--gutter) 25px}
.gameplay::before,.news::before,.site-footer::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:var(--hair-w);
 background:linear-gradient(90deg,transparent,var(--hair-c) 14%,var(--hair-c) 86%,transparent)}
/* the section label: centred gold small caps between two short fading hairlines (the user: — TERROR AWAITS —) */
.gameplay h2{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 16px;color:var(--gold);text-shadow:0 0 6px #b0200f66;
 font:500 max(16px,calc(10.5px / var(--z))) 'Cinzel',Georgia,'Gelasio',serif;text-transform:uppercase;letter-spacing:.22em}
.gameplay h2::before,.gameplay h2::after{content:'';width:56px;height:var(--hair-w)}
.gameplay h2::before{background:linear-gradient(90deg,transparent,#d9b878)}
.gameplay h2::after{background:linear-gradient(90deg,#d9b878,transparent)}
/* a quiet hairline between the three, fading at its ends (the user: "a vague border that kinda separates them") */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px}
.teasers li{position:relative;min-width:0}
.teasers li+li::before{content:'';position:absolute;top:0;bottom:0;left:calc(-18px - var(--hair-w) / 2);width:var(--hair-w);
 background:linear-gradient(transparent,var(--hair-c) 14%,var(--hair-c) 86%,transparent)}
/* each picture in its frame: on hover (PC) or press (phone) it brightens a touch and zooms in its frame, then eases back */
/* the three the same width, each framed by a faint gold hairline so a dark picture's edge doesn't fade into the page (the v13
   review) */
.teaser-frame{position:relative;height:190px;overflow:hidden;background:#1a252b;box-shadow:0 0 0 var(--hair-w) #c3a46f40}
.teasers img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out,filter .4s ease-out}
.teasers li.pressed img{transform:scale(1.035);filter:brightness(1.08)}
@media (hover:hover){.teasers li:hover img{transform:scale(1.035);filter:brightness(1.08)}}
/* THE CAPTIONS sit inside their pictures (the user: part of their teasers): Cinzel capitals over a dark fade, lit by each
   scene's own light (ember red, cold blue, warm gold) with the key word brightest; calmer than the heading: no cracks, no breath.
   Each sits on the same soft dark band, so it reads the same on any picture (the v13 review: per-tile halos read unevenly) */
.teaser-frame::after{content:'';position:absolute;inset:auto 0 0;height:62%;pointer-events:none;
 background:linear-gradient(transparent,#06090cd9 78%,#06090cf2)}
.teasers h3{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;padding:1.4em 12px max(10px,calc(4px / var(--z)));
 background:linear-gradient(#06090c00,#06090ca6 38%,#06090cc7);
 font:600 max(19px,calc(9.5px / var(--z)))/1.15 'Cinzel',Georgia,'Gelasio',serif;letter-spacing:.06em;text-transform:uppercase;
 color:var(--tone-soft);text-shadow:0 1px 2px #000}
.teasers h3 b{font-weight:700;color:var(--tone);text-shadow:0 1px 2px #000,0 0 10px var(--tone-glow)}
.teasers .ember{--tone:#ffb38a;--tone-soft:#f0cdb6;--tone-glow:#ff4a1a99}
.teasers .cold{--tone:#d8eeff;--tone-soft:#c3d6e6;--tone-glow:#4aa8ff99}
.teasers .gold{--tone:#ffe2a0;--tone-soft:#ecdcb4;--tone-glow:#ffb43a99}

/* Patch notes and Dev updates: two cards side by side; "Read update" opens full width below them */
/* the user: the same gold line above Patch notes and Dev updates, spaced like the one above TERROR AWAITS */
.news{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:28px 30px 28px}
/* slimmer bands (the user: a lot of empty art height), framed on each painting's subject */
.news-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:230px;
 padding:20px 27px 16px;border:1px solid #bea16e28;background:#161b1e}
/* the art on its own layer, so it can brighten and zoom 3.5% in the frame on hover or press like the other pictures */
.news-art{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transition:transform .4s ease-out,filter .4s ease-out}
.news-card.pressed .news-art{transform:scale(1.035);filter:brightness(1.08)}
@media (hover:hover){.news-card:hover .news-art{transform:scale(1.035);filter:brightness(1.08)}}
.news-card.patch .news-art{background-image:url(assets/news-patch.webp);background-position:center 42%}
.news-card.dev .news-art{background-image:url(assets/news-dev.webp);background-position:center 62%}
.news-card.selected{border-color:#e9c97e}
/* the arrival highlight (the user): after the Updates link lands, the live card's gold outline glows once and fades; a
   ready-made layer whose opacity alone animates (rise ~200 ms, gone by ~1.5 s) */
.news-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
 border:max(1.5px,calc(1.2px / var(--z))) solid #e9c97e;box-shadow:inset 0 0 26px #e9c97e55,inset 0 0 6px #f6e2b088}
.news-card.arrive::after{animation:arrive 1.5s ease-out}
@keyframes arrive{0%{opacity:0}13%{opacity:1}100%{opacity:0}}
.news-card.off{filter:saturate(.55) brightness(.62)}
.news-card::before{content:'';position:absolute;inset:0;z-index:-1;
 background:linear-gradient(90deg,#080d12b8,transparent 95%),linear-gradient(#080d1255,transparent 65%,#080d12b8)}
.news-card h2{margin:0 0 13px;color:#eee9df;font-size:max(30px,calc(15px / var(--z)))}
.tag{padding:.35em .8em;background:#303b44dc;color:#e1e4e4;font:max(14px,calc(10.5px / var(--z)))/1.5 Arial,sans-serif}
.news-card h3{margin:12px 0;color:#f2ece1;font-size:max(27px,calc(14px / var(--z)))}
.read{display:flex;align-items:center;gap:.8em;min-height:44px;margin-top:auto;padding:0;border:0;border-bottom:1px solid #c5a56c77;
 background:none;color:#f2d49e;font:max(16px,calc(13px / var(--z))) Arial,sans-serif}
.read:hover:enabled{color:#fff1d3;border-color:#fff1d3}
.read:disabled{cursor:default}
.news-more{grid-column:1/-1}
.more-state{margin:0 0 6px;color:#bba472;font-size:.9em}
.notes{margin:0 0 6px;color:#e2e4e2}
.notes li{position:relative;margin:.45em 0;padding-left:1.2em}
.notes li::before{content:'';position:absolute;left:0;top:.6em;width:.4em;height:.4em;background:#d0af70;transform:rotate(45deg)}
.post{margin:0 0 14px}
.post h4{margin:0;color:#eee9df;font:1.4em Georgia,'Gelasio',serif}
.post .date{margin:.2em 0 0;color:#bba472;font-size:.85em}
details{margin:8px 0 0;border-top:1px solid #b5955c40;padding-top:6px}
summary{min-height:var(--tap);display:flex;align-items:center;color:var(--gold);cursor:pointer}

/* the footer: a slim band on every screen, one line, nothing below it but the phone's safe area (the user: "a ton of room") */
.site-footer{position:relative;width:min(1086px,100%);margin:0 auto;padding:6px var(--gutter) max(8px,calc(env(safe-area-inset-bottom) / var(--z)));
 background:var(--bg);color:var(--muted);font:max(13px,calc(12px / var(--z))) Arial,sans-serif}
.footer-row{display:flex;align-items:center;justify-content:space-between}
.site-footer nav{display:flex;gap:24px}
.site-footer nav button{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;
 color:#c2c5c4;font:max(14px,calc(12.5px / var(--z))) Arial,sans-serif}
.site-footer nav button:hover,.site-footer [aria-expanded=true]{color:#ebc98c}
.footer-info{margin:4px 0 6px}
.footer-info p{margin:0}
.footer-info a{color:var(--gold)}

/* A phone held upright fills the width with the approved spacing (the user rejected both the squeeze and the side bars);
   height comes back from compact headings and slimmer news cards, and the rest scrolls a little. */
/* phones: the small text gets readable floors (text minimums may adapt; the layout doesn't). The subtitle takes two
   lines, UNLOCK EVERY CHAMPION ◆ CONQUER EVERY TRIAL / RACE TO RESET THE LADDER: no diamond starts or ends a line (the
   separator at the break keeps only its hidden full stop) */
.fit .champions h2::before,.fit .champions h2::after{width:20px}
.fit .champions h2{gap:16px;letter-spacing:.03em}
.fit .champions-goal{font-size:max(19px,calc(12px / var(--z)));letter-spacing:.06em;line-height:1.45}
.fit .champions-goal .br{display:block}
.fit .champions-goal .sep.at-br{margin:0}
.fit .champions-goal .sep.at-br [aria-hidden]{display:none}
/* the hero's text on a phone is version C (WEBSITE-PHONE-TEXT-C-20261026): the fewest words, the largest text, in the same
   composition. PLAY NOW without "In your browser" (both plates), the platform icons without their words (the list keeps its
   spoken label), and an 11 px tagline on two lines, "Your adventure." over "Your way." between its fading hairlines (12 px
   came within 5 px of the Warrior's shield). The cluster sits 10 design px higher than on the PC and its plate is a little
   slimmer, so the tagline and the plate's corner clear the shield; the T's drop then hangs without falling (it would land
   behind the plate) */
.fit .hero-actions{top:320px}
.fit .drop.d1{--fall:0px}
/* the plate a little shorter with a little air under the title, and its label 12.5 px with 6 px a side at 360. Where 260 design
   px is too narrow for that it grows to the right only, so its left edge keeps the PC's place 7 design px left of the title's
   "OF" (the v14 review: it stood out 19 at 360) */
.fit .main-play{z-index:1;align-self:flex-start;width:max(260px,calc(88px / var(--z)));height:calc(34px / var(--z))}
.fit .main-play .play-label{font-size:calc(12.5px / var(--z));letter-spacing:.02em;white-space:nowrap}
.fit .main-play .play-context,.fit .ci-play .play-context{display:none}
.fit .ci-play .play-label{font-size:calc(13px / var(--z));white-space:nowrap}
/* the tagline sits 9 design px left of the plate's centre (about 3 real px) and a touch tighter, for more
   room from the shield (the v10 review: about 9 px) */
.fit .adventure-line{position:relative;left:-9px;display:block;margin:calc(5px / var(--z)) auto calc(5px / var(--z));font-size:calc(11px / var(--z));
 line-height:1.3;letter-spacing:-.01em;white-space:normal;text-align:center}
/* its fading hairlines reach out to the block's own edges, as they close the whole line on the PC: "Your adventure." sets the
   width and the hairlines run from its ends in to "Your way." (the v14 review: short hairlines beside "Your way." alone read as
   a wrap accident; hairlines outside the block would touch the Warrior's shield at 360) */
.fit .adventure-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:calc(4px / var(--z))}
.fit .adventure-line span{display:block;white-space:nowrap}
.fit .adventure-line span:first-child{grid-column:1 / 4;grid-row:1}
.fit .adventure-line span+span{grid-column:2;grid-row:2}
.fit .adventure-line::before,.fit .adventure-line::after{grid-row:2;width:auto;height:calc(1px / var(--z))}
.fit .adventure-line::before{grid-column:1}
.fit .adventure-line::after{grid-column:3}
/* the icons at 16 px with a stroke that stays over 1 real px (the v10 review: at 14 px and 0.5 px they read faint) */
.fit .platforms li{gap:0;padding:0 calc(5px / var(--z));font-size:0;letter-spacing:0}
.fit .platforms svg{width:calc(16px / var(--z));height:calc(16px / var(--z))}
/* the cards' captions and the opened card's text at the readable minimums, 12-13 px (ONE-DESIGN-EVERY-SCREEN-20261025) */
/* the names at 12 px, a little tighter, and the Unlocked line too */
.fit .caption{padding-left:0;padding-right:0}
.fit .caption .name{font-size:calc(12px / var(--z));letter-spacing:-.05em}
/* E (decided for the user under ONE-DESIGN-EVERY-SCREEN, 2026-10-26): on a phone held upright five 12 px names can't all have
   room (at 360 px a side card is about 60 px; Oathkeeper is 56 in Georgia and in Gelasio, its stand-in), so the four
   side cards show only their portrait and lock and the centre card its name and Locked/Unlocked line; a name appears as its
   card settles in the centre. Each card's button keeps its name in its label. PC and phones held sideways show every name */
.fit .card:not(:nth-child(3)) .caption .name{display:none}
.fit .card:not(:nth-child(3)) .caption .state{font-size:0;gap:0}
.fit .caption .state{gap:.1em;letter-spacing:-.03em;margin-top:calc(3px / var(--z));font-size:calc(12px / var(--z))}
/* the lock a little smaller and closer, so the centre card's "Unlocked" keeps 6 px a side at 360 (the v14 review: about 4) and
   6 px below it; the side cards' locks the same size */
.fit .caption{padding-bottom:calc(6px / var(--z))}
.fit .caption .lock{width:calc(9.2px / var(--z));height:calc(10.7px / var(--z))}
.fit .ci-badge{font-size:calc(12px / var(--z));letter-spacing:.1em}
.fit .ci-role{font-size:calc(13px / var(--z))}
.fit .ci-rule{color:#c2c7c8;font-size:calc(13px / var(--z))}
/* the close X 9 px in from the card's corner, so its 44 px tap area fits inside the card (which clips) */
.fit .ci-close{top:calc(9px / var(--z));right:calc(9px / var(--z));width:calc(28px / var(--z));height:calc(28px / var(--z));font-size:calc(18px / var(--z))}
/* the opened card sits 14 px under the row, like the PC's air (16 design px was 6 px on a phone) */
.fit .champion-info{margin-top:calc(14px / var(--z))}
/* the phone's remaining small text at 12 px: the subtitle, TERROR AWAITS, the picture captions and the patch notes' tag */
.fit .gameplay h2,.fit .teasers h3,.fit .tag{font-size:calc(12px / var(--z))}
/* the tiles' captions with real side room on a phone: 8 px a side and less tracking (the v13 review: CORRUPTION nearly filled
   its tile at 360) */
.fit .teasers h3{padding-left:calc(8px / var(--z));padding-right:calc(8px / var(--z));letter-spacing:0}
/* TERROR AWAITS's flanking dashes a whole pixel tall on a phone: at .75 px the 390 px page dropped them (the v12 review) */
.fit .gameplay h2::before,.fit .gameplay h2::after{flex:none;height:calc(1px / var(--z))}
/* the Read update tap area rises from the card's bottom edge instead of past it (the card clips) */
.fit .news-card .read.tap-pad::before{top:auto;bottom:-15px;transform:translateX(-50%)}
/* the row arrows' 44 px tap areas start at the screen's edges (the row clips there) and reach in over the outer cards' edge */
.fit .row-arrow.prev::before{left:calc(-1px / var(--z));transform:translateY(-50%)}
.fit .row-arrow.next::before{left:auto;right:calc(-1px / var(--z));transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.title-glow{animation:none;opacity:.55}.title-drops{display:none}.news-card.arrive::after{animation:none;opacity:1}.champions h2{animation:none}.teasers li img,.card img,.news-art{transform:none!important}}