/* fusionfall.org/ultra. FusionFall blue structure with a gold Ultra accent.
   Plates, plate heads, titles, buttons and badges copy NF/FusionFallExactTheme's wiki.css (.ff-plate, .ff-plate-head,
   .ff-title, .ff-btn, .ff-btn-blue/-green, .ff-badge); the page itself sits in .ff-game from nf_ff_game.less.
   Gold follows the in-game ULTRA tab: #FFF0A0 -> #F6C33A -> #B0740E, edge #7A4C06, text #FFD54A. */
@font-face { font-family: FFUDisplay; src: url('/styles/nf/fusionfall_exact/reborn/fonts/Jefferies.ttf') format('truetype'); font-display: swap; }

.ffu {
	--ff-abyss: #02131a; --ff-deep: #041c25; --ff-navy: #0d3a56; --ff-cyan: #39c4ee; --ff-glow: #7fe4ff; --ff-ice: #d6f4ff;
	--ff-green: #7ee000;
	--g-hi: #fff0a0; --g: #f6c33a; --g-lo: #b0740e; --g-edge: #7a4c06; --g-text: #ffd54a; --g-ink: #3a2200;
	--ffu-display: FFRebornDisplay, FFUDisplay, 'Jefferies', 'Trebuchet MS', sans-serif;
	display: flex; flex-direction: column; gap: 12px;
}
.ffu *, .ffu *::before, .ffu *::after { box-sizing: border-box; }
.ffu p { margin: 0; }

/* ---- Plates (wiki.css .ff-plate / .ff-plate-head / .ff-title) ---- */
.ffu .ff-plate { position: relative; border: 1px solid rgba(57, 196, 238, .75); border-radius: 10px;
	background: linear-gradient(rgba(13, 58, 86, .95), rgba(6, 30, 45, .95) 55%, rgba(4, 22, 34, .97));
	box-shadow: inset 0 1px rgba(190, 240, 255, .28), inset 0 0 26px rgba(20, 120, 180, .22), 0 0 0 1px rgba(2, 16, 24, .9), 0 8px 26px -10px rgba(0, 0, 0, .95); }
.ffu .ff-title { font-family: var(--ffu-display) !important; text-transform: uppercase; letter-spacing: .02em; color: #fff;
	text-shadow: 0 2px rgba(3, 30, 46, .9), 0 0 14px rgba(127, 228, 255, .35); }
.ffu .ff-plate-head { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	min-height: 3.2rem; padding: .45rem .9rem .45rem 1.5rem; border-bottom: 1px solid rgba(8, 74, 110, .75); border-radius: 9px 9px 0 0;
	background: linear-gradient(#fff 0, #f2fbff 30%, #d8f1fd 55%, #a9dcf3 82%, #7cc4e4);
	box-shadow: inset 0 1px rgba(255, 255, 255, .95), inset 0 -3px 7px rgba(26, 110, 155, .28); }
.ffu .ff-plate-head::before, .ffu .ff-plate-head::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; }
.ffu .ff-plate-head::before { z-index: 1; width: 9px; clip-path: polygon(0 0, 100% 7px, 100% calc(100% - 7px), 0 100%);
	background: linear-gradient(#7fe4ff, #23a6dd 55%, #0f6f9e); filter: drop-shadow(0 0 .6px #156ba5) drop-shadow(0 0 1.4px rgba(21, 107, 165, .85)); }
.ffu .ff-plate-head::after { width: 30%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(120, 220, 255, .4), transparent);
	animation: ffu-sweep 6s linear infinite; }
.ffu .ff-plate-head > * { position: relative; z-index: 1; }
.ffu .ff-plate-head .ff-title { margin: 0; font-size: 20px; line-height: 1.2; text-shadow: none; color: transparent;
	-webkit-text-stroke: .7px #156ba5; paint-order: stroke fill; filter: drop-shadow(0 1px rgba(255, 255, 255, .55)) drop-shadow(0 0 4px rgba(60, 190, 240, .35));
	background-image: linear-gradient(#6fdcff 0, #2fb8ec 38%, #0e9ad4 66%, #0b81b8); -webkit-background-clip: text; background-clip: text; }

/* ---- Gold accent: rim, header bar, sparkles, glint ---- */
.ffu .ffu-gold-rim { border-color: rgba(246, 195, 58, .9);
	box-shadow: inset 0 1px rgba(255, 240, 160, .35), inset 0 0 26px rgba(246, 195, 58, .1), 0 0 0 1px rgba(40, 24, 0, .9),
		0 0 20px -6px rgba(246, 195, 58, .55), 0 8px 26px -10px rgba(0, 0, 0, .95); }
.ffu .ffu-gold-head { border-bottom-color: var(--g-edge);
	background: linear-gradient(#fffbe6 0, var(--g-hi) 24%, var(--g) 58%, #d99a1c 80%, var(--g-lo));
	box-shadow: inset 0 1px rgba(255, 255, 240, .95), inset 0 -3px 7px rgba(122, 76, 6, .38); }
.ffu .ffu-gold-head::before { background: linear-gradient(var(--g-hi), #d99a1c 55%, var(--g-edge)); filter: drop-shadow(0 0 .6px var(--g-edge)); }
.ffu .ffu-gold-head::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 235, .7), transparent); }
.ffu .ffu-gold-head .ff-title { color: #4a2a00; background: none; -webkit-text-stroke: 0; filter: none; text-shadow: 0 1px rgba(255, 246, 200, .8); }
.ffu .ffu-headNote { font: 13px Arial, Helvetica, sans-serif; color: #5e3800; text-shadow: 0 1px rgba(255, 246, 200, .7); }
.ffu .ffu-fx, .ffu .ffu-glint { position: absolute; pointer-events: none; z-index: 0; }
.ffu .ffu-fx { inset: 0; overflow: hidden; }
.ffu .ffu-glint { top: 0; bottom: 0; left: 0; width: 70px; opacity: 0;
	background: linear-gradient(105deg, transparent 0, rgba(255, 255, 230, .55) 50%, transparent 100%);
	animation: ffu-glint var(--gp, 5s) linear var(--gd, .4s) infinite; }
.ffu-star { position: absolute; left: 0; top: 0; pointer-events: none; animation: ffu-drift var(--dd) linear var(--dl) infinite; }
.ffu-star i { display: block; width: 100%; height: 100%; mix-blend-mode: screen;
	background: radial-gradient(circle, #fffbe6 0, #ffe9a0 30%, rgba(255, 204, 77, .75) 50%, rgba(255, 224, 115, 0) 78%);
	animation: ffu-twinkle var(--tw) ease-in-out var(--tl) infinite; }
.ffu-star.c i { clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.ffu-star.f i { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-name: ffu-twinkle, ffu-spin; }

/* ---- Buttons (wiki.css .ff-btn family) ---- */
.ffu .ff-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 0; padding: 12px 26px; border-radius: 4px; transform: skew(-12deg); cursor: pointer; text-decoration: none !important;
	font: 16px/24px var(--ffu-display) !important; letter-spacing: .05em; text-transform: uppercase;
	transition: filter .14s, transform .14s, box-shadow .2s; }
.ffu .ff-btn > span:not(.ffu-fx):not(.ffu-glint) { position: relative; z-index: 1; display: inline-block; transform: skew(12deg); }
.ffu .ff-btn:hover { filter: brightness(1.15); transform: skew(-12deg) translateY(-2px); }
.ffu .ff-btn:focus-visible { outline: 2px solid #86fce6; outline-offset: 4px; }
.ffu .ffu-btn-blue { color: #fff !important; text-shadow: 0 1px rgba(4, 40, 60, .9); border: 1px solid rgba(160, 235, 255, .9);
	background: linear-gradient(#4cc4ee, #1a83b9 52%, #0c4f73); box-shadow: inset 0 1px rgba(220, 250, 255, .4); }
.ffu .ffu-btn-green { color: #10330a !important; text-shadow: 0 1px rgba(230, 255, 200, .6); border: 1px solid rgba(214, 255, 140, .9);
	background: linear-gradient(#b6f53c, #5dc400 48%, #2f8c00); box-shadow: inset 0 1px rgba(240, 255, 210, .75), 0 0 18px -4px rgba(126, 224, 0, .75); }

/* The theme forces Arial on buttons; Ultra buttons, prices and chips keep the display face. */
html.ff-exact-theme body.nf-ff-exact .ffu .ff-btn, html.ff-exact-theme body.nf-ff-exact .ffu .ff-btn span,
html.ff-exact-theme body.nf-ff-exact .ffu .ffu-price strong, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-buyLabel, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-chip { font-family: var(--ffu-display) !important; }
html.ff-exact-theme body.nf-ff-exact .ffu .ffu-buy, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-buyLabel, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-gold, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-gold span { color: var(--g-ink) !important; text-shadow: 0 1px rgba(255, 246, 200, .8) !important; }
html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-blue, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-blue span { color: #fff !important; text-shadow: 0 1px rgba(4, 40, 60, .9) !important; }
html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-green, html.ff-exact-theme body.nf-ff-exact .ffu .ffu-btn-green span { color: #10330a !important; text-shadow: 0 1px rgba(230, 255, 200, .6) !important; }

/* ---- Chips (wiki.css .ff-badge shape) ---- */
.ffu .ffu-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .65rem; border-radius: 999px;
	font: .68rem/1.3 var(--ffu-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ffu .ffu-chip--keep { color: var(--g-ink); text-shadow: 0 1px rgba(255, 246, 200, .7); border: 1px solid var(--g-edge);
	background: linear-gradient(var(--g-hi), var(--g) 50%, var(--g-lo)); box-shadow: inset 0 1px rgba(255, 255, 240, .9), 0 0 12px -4px rgba(246, 195, 58, .9); }
.ffu .ffu-chip--sub { color: #0b4f72; text-shadow: 0 1px rgba(255, 255, 255, .7); border: 1px solid rgba(8, 74, 110, .75);
	background: linear-gradient(#f2fbff, #d8f6ff 40%, #67c9ef); box-shadow: inset 0 1px #fff, 0 0 12px -4px rgba(57, 196, 238, .9); }

/* ---- Hero: copy on the left, the gold-framed video poster on the right ---- */
.ffu .ffu-hero { overflow: hidden; }
.ffu .ffu-heroBody { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); gap: 22px; align-items: center;
	padding: 22px 24px 22px 28px; border-radius: 0 0 9px 9px;
	background: radial-gradient(55% 90% at 82% 50%, rgba(246, 195, 58, .18), transparent 65%),
		radial-gradient(70% 120% at 10% 0, rgba(57, 196, 238, .16), transparent 60%),
		url('/styles/nf/fusionfall_exact/bg_media_bluelines.gif') top center repeat,
		linear-gradient(#05263a, #021018); }
.ffu .ffu-heroBody--solo { grid-template-columns: 1fr; }
/* Site page: the copy column fills the hero next to the video: it starts at the top with the video, and the price and BUY ULTRA
   sit at the bottom, level with the thumbnails, so no empty band opens above the title or below the button. */
.ffu:not(.ffu--launcher) .ffu-heroBody:not(.ffu-heroBody--solo) { align-items: stretch; }
.ffu:not(.ffu--launcher) .ffu-heroMedia { align-self: start; }
.ffu:not(.ffu--launcher) .ffu-heroCopy { display: flex; flex-direction: column; }
.ffu:not(.ffu--launcher) .ffu-heroCopy > .ffu-price { margin-top: auto !important; padding-top: 10px; }
/* Wide heroes on the site (about 1600 px windows and up) have room for a short list of what Ultra gives, and larger
   type. The launcher window keeps its centred hero. */
.ffu .ffu-highlights { display: none; margin: 16px 0 6px; padding: 0; list-style: none; }
.ffu .ffu-highlights li { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: #e2f4ff; }
.ffu .ffu-highlights .ffu-phStar { flex: none; width: 15px; height: 15px; transform: translateY(2px); }
.ffu .ffu-highlights b { color: var(--g-text); font-weight: 700; }
@container (min-width: 950px) {
	.ffu:not(.ffu--launcher) .ffu-highlights { display: block; }
	.ffu:not(.ffu--launcher) .ffu-heroBody { grid-template-columns: minmax(0, 1fr) minmax(0, 55%); }
	.ffu:not(.ffu--launcher) .ffu-price strong { font-size: 62px; }
	.ffu:not(.ffu--launcher) .ffu-btn-gold { padding: 22px 30px; font-size: 30px !important; }
}

/* ---- Price and the gold BUY ULTRA button (launcher v2 style) ---- */
.ffu .ffu-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 12px !important; }
.ffu .ffu-price strong { font: 54px/1 var(--ffu-display); color: var(--g-text);
	background: linear-gradient(#fffbe0, var(--g-hi) 30%, var(--g) 62%, #c98a14); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 0 #2a1800) drop-shadow(0 0 10px rgba(246, 195, 58, .35)); }
.ffu .ffu-price span { color: #c4dde6; font-size: 17px; }
/* Slanted glossy gold, with a subtle glint every ~3 s, a breathing glow, twinkling stars and a hover lift / press. */
.ffu .ffu-btn-gold { flex: none; white-space: nowrap; width: 100%; max-width: 440px; padding: 20px 28px; font-size: 28px !important; color: var(--g-ink) !important; text-shadow: 0 1px rgba(255, 246, 200, .75);
	border: 1px solid var(--g-edge); background: linear-gradient(#fffbe0 0, var(--g-hi) 18%, var(--g) 52%, var(--g-lo));
	box-shadow: inset 0 1px rgba(255, 255, 240, .95), inset 0 -2px 5px rgba(122, 76, 6, .4), 0 0 18px -4px rgba(246, 195, 58, .7);
	animation: ffu-breathe 2.6s ease-in-out infinite; }
.ffu .ffu-btn-gold::after { content: ''; position: absolute; z-index: 0; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 240, .8), transparent); transform: translateX(-160%);
	animation: ffu-buyglint 3s ease-in-out infinite; }
.ffu .ffu-btn-gold .ffu-glint { display: none; }
.ffu .ffu-btn-gold:hover { filter: brightness(1.1); transform: skew(-12deg) translateY(-2px); }
.ffu .ffu-btn-gold:active { transform: skew(-12deg) translateY(1px); box-shadow: inset 0 2px 7px rgba(122, 76, 6, .6), 0 0 10px -4px rgba(246, 195, 58, .7); }

/* The phone sticky bar's full-width gold button. */
.ffu .ffu-buy { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px;
	padding: 0 14px; border: 2px solid var(--g-edge); border-radius: 10px; cursor: pointer; text-decoration: none !important;
	background: linear-gradient(#fffbe0 0, var(--g-hi) 16%, var(--g) 50%, #d99a1c 76%, var(--g-lo));
	box-shadow: inset 0 2px rgba(255, 255, 240, .95), inset 0 -3px 6px rgba(122, 76, 6, .45), 0 0 16px rgba(246, 195, 58, .5); }
.ffu .ffu-buy:active { transform: translateY(1px); }
.ffu .ffu-buyLabel { font: 15px/1.1 var(--ffu-display); white-space: nowrap; letter-spacing: .03em; text-transform: uppercase; }
.ffu .ffu-buyLabel em { font-style: normal; font-size: .82em; }

/* Phones: a compact BUY ULTRA bar slides in once the hero has scrolled away. */
.ffu .ffu-sticky { display: none; }
.ffu .ffu-heroCopy { position: relative; z-index: 1; min-width: 0; }
.ffu .ffu-heroCopy h1 { overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none; margin: 6px 0 10px; font-size: clamp(26px, 4cqw, 40px); line-height: 1.1; color: #f0fcff; text-shadow: 0 2px #031e2e, 0 0 18px rgba(127, 228, 255, .3); }
.ffu .ffu-heroCopy > p { color: #c4dde6; font-size: 17px; line-height: 1.5; max-width: 34em; }
.ffu .ffu-cta .ffu-btn-blue { flex: none; white-space: nowrap; padding: 10px 16px; font-size: 15px !important; }
.ffu .ffu-cta { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 14px; margin: 0; padding-left: 6px; }
.ffu .ffu-note { margin-top: 0 !important; font-size: 11.5px; color: #86afc3; }
.ffu .ffu-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px !important; color: #e7f6ff; font-size: 13px; }
/* "Checkout opens shortly" (checkout not connected yet): a small gold-rimmed panel, as a modal on /ultra and as the
   page /ultra/buy, with the cyan Notify me button. */
.ffu .ffu-modal.ffu-modal--soon { width: min(460px, 92vw); }
.ffu .ffu-soon .ff-plate-head .ff-title { font-size: 15px; }
.ffu .ffu-soonBody { padding: 16px 20px 18px; }
.ffu .ffu-soonBody > p:first-child { color: #e7f6ff; font-size: 14px; line-height: 1.55; }
.ffu .ffu-soon .ffu-notify { margin-top: 14px !important; }
.ffu .ffu-soonBack { margin-top: 10px !important; }
.ffu .ffu-textBtn { display: inline-flex; align-items: center; min-height: 44px; color: var(--ff-glow) !important; font: 13px var(--ffu-display);
	letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; }
.ffu-soonPage .ffu-soon { width: 100%; max-width: 520px; margin: 24px auto; }
.ffu--launcher.ffu-soonPage { min-height: calc(100vh - 26px); justify-content: center; }
.ffu--launcher.ffu-soonPage .ffu-soon { margin: 0 auto; }
.ffu .ffu-notify { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0 !important; padding-left: 6px; }
.ffu .ffu-notify .ff-btn { flex: none; max-width: 100%; white-space: nowrap; padding: 11px 12px; font-size: 13px !important; letter-spacing: .03em; }
.ffu .ffu-notify--on { padding-left: 0; color: #c4dde6; font-size: 13px; }
.ffu .ffu-notify--on .ffu-chip { font-size: .75rem; padding: .3rem .8rem; }

/* Video poster (opens the modal player) and up to two small extra posters */
.ffu .ffu-heroMedia { min-width: 0; }
/* Video carousel: one gold-framed poster per slide; arrows, swipe, thumbnails and a gentle auto-advance (ultra.js). */
.ffu .ffu-slides { position: relative; overflow: hidden; border-radius: 8px; }
.ffu .ffu-track { display: flex; touch-action: pan-y; transition: transform .45s ease; }
.ffu .ffu-track > .ffu-poster { flex: 0 0 100%; }
.ffu .ffu-arrow { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--g-edge); background: rgba(2, 16, 24, .72); box-shadow: 0 0 10px rgba(0, 0, 0, .6); transition: background .15s, transform .15s; }
.ffu .ffu-arrow::after { content: ''; position: absolute; top: 11px; width: 10px; height: 10px; border: solid var(--g-text); border-width: 3px 3px 0 0; }
.ffu .ffu-arrow--prev { left: 8px; }
.ffu .ffu-arrow--prev::after { left: 13px; transform: rotate(-135deg); }
.ffu .ffu-arrow--next { right: 8px; }
.ffu .ffu-arrow--next::after { left: 9px; transform: rotate(45deg); }
.ffu .ffu-arrow:hover { background: rgba(122, 76, 6, .85); transform: scale(1.08); }
.ffu .ffu-arrow:focus-visible, .ffu .ffu-thumb:focus-visible { outline: 2px solid #86fce6; outline-offset: 2px; }
/* The arrows would sit on the poster art, so they only show while the pointer is over the video (or on keyboard focus).
   Touch screens swipe or tap the thumbnails instead. */
.ffu .ffu-arrow { opacity: 0; }
.ffu .ffu-slides:hover .ffu-arrow, .ffu .ffu-arrow:focus-visible { opacity: 1; }
@media (pointer: coarse) { .ffu .ffu-arrow { display: none; } }
.ffu .ffu-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.ffu .ffu-thumb { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
.ffu .ffu-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; border: 2px solid rgba(127, 228, 255, .35);
	opacity: .7; transition: opacity .15s, border-color .15s, box-shadow .15s; }
.ffu .ffu-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #a9c8d6; }
.ffu .ffu-thumb:hover img { opacity: 1; }
.ffu .ffu-thumb.is-active img { opacity: 1; border-color: var(--g); box-shadow: 0 0 10px -2px rgba(246, 195, 58, .9); }
.ffu .ffu-thumb.is-active span { color: var(--g-text); }
.ffu .ffu-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; padding: 3px;
	background: linear-gradient(#fffbe0, var(--g-hi) 20%, var(--g) 55%, var(--g-lo)); text-decoration: none !important;
	box-shadow: 0 0 0 1px var(--g-edge), 0 0 22px -6px rgba(246, 195, 58, .8), 0 10px 22px -10px #000; }
.ffu .ffu-poster img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ffu .ffu-play { position: absolute; right: 12px; bottom: 12px; width: 56px; height: 56px; border-radius: 50%;
	border: 2px solid var(--g-edge); background: linear-gradient(var(--g-hi), var(--g) 55%, var(--g-lo));
	box-shadow: inset 0 1px rgba(255, 255, 240, .95), 0 0 24px rgba(246, 195, 58, .7), 0 4px 10px rgba(0, 0, 0, .6); transition: transform .15s; }
.ffu .ffu-play::after { content: ''; position: absolute; left: 21px; top: 15px; border-style: solid; border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent var(--g-ink); }
.ffu .ffu-poster:hover .ffu-play, .ffu .ffu-poster:focus-visible .ffu-play { transform: scale(1.08); }
.ffu .ffu-poster:focus-visible { outline: 2px solid #86fce6; outline-offset: 3px; }
.ffu .ffu-posterTitle { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 14px 76px 8px 10px; border-radius: 0 0 6px 6px; font-size: 12px;
	background: linear-gradient(transparent, rgba(2, 16, 24, .85)); }

/* Modal player */
.ffu .ffu-modal { width: min(960px, 94vw); max-width: none; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.ffu .ffu-modal::backdrop { background: rgba(1, 8, 12, .84); }
.ffu .ffu-modalBox { overflow: hidden; }
.ffu .ffu-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border-radius: 0 0 9px 9px; }
.ffu .ffu-close { width: 32px; height: 32px; border: 1px solid var(--g-edge); border-radius: 50%; cursor: pointer; font: 16px/1 Arial, sans-serif;
	color: var(--g-ink); background: linear-gradient(#fffbe0, var(--g) 60%, var(--g-lo)); box-shadow: inset 0 1px #fff; }
.ffu .ffu-close:focus-visible { outline: 2px solid #86fce6; outline-offset: 2px; }

/* ---- Perks (COPY v2): three plainly headed groups; each perk is a picture, a short name and one line ---- */
.ffu .ffu-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 16px 14px; }
.ffu .ffu-group { min-width: 0; padding: 14px 16px 18px; border-radius: 10px; border: 1px solid rgba(246, 195, 58, .55);
	background: linear-gradient(rgba(122, 76, 6, .22), rgba(4, 22, 34, .6)); box-shadow: inset 0 1px rgba(255, 240, 160, .15); }
.ffu .ffu-group--active { grid-column: 1 / -1; border-color: rgba(57, 196, 238, .5); background: linear-gradient(rgba(13, 58, 86, .55), rgba(4, 22, 34, .6));
	box-shadow: inset 0 1px rgba(190, 240, 255, .18); }
.ffu .ffu-groupTitle { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; line-height: 1.2; color: var(--g-text);
	text-shadow: 0 2px #1a0e00, 0 0 12px rgba(246, 195, 58, .35); }
.ffu .ffu-group--active .ffu-groupTitle { color: #fff; text-shadow: 0 2px rgba(3, 30, 46, .9), 0 0 14px rgba(127, 228, 255, .45); }
.ffu .ffu-groupTitle .ffu-phStar { flex: none; width: 24px; height: 24px; }
.ffu .ffu-groupSummary { margin: 4px 0 14px !important; font-size: 16px; color: #c4dde6 !important; }
.ffu .ffu-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin: 0; padding: 0; list-style: none; }
.ffu .ffu-perk:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
.ffu .ffu-perk { position: relative; min-width: 0; outline: none; text-align: center; cursor: zoom-in; }
.ffu .ffu-perk .ffu-cardImg { aspect-ratio: 16 / 9; border-radius: 8px; border: 2px solid rgba(246, 195, 58, .65);
	box-shadow: 0 6px 14px -8px #000; transition: box-shadow .15s, transform .15s; }
.ffu .ffu-group--active .ffu-perk .ffu-cardImg { border-color: rgba(127, 228, 255, .6); }
.ffu .ffu-perk:hover .ffu-cardImg, .ffu .ffu-perk:focus-visible .ffu-cardImg { transform: translateY(-2px); box-shadow: 0 0 16px -4px rgba(246, 195, 58, .8), 0 8px 16px -8px #000; }
.ffu .ffu-perk h4 { margin: 10px 0 4px; font-size: 20px; line-height: 1.2; letter-spacing: .01em; color: #fff; }
html.ff-exact-theme body.nf-ff-exact .ffu .ffu-perk h4 { font-family: var(--ffu-display) !important; font-weight: 400; font-size: 20px; }
.ffu .ffu-perk > p { font-size: 16px; line-height: 1.4; color: rgba(214, 244, 255, .85) !important; }
.ffu .ffu-cardImg { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 42%, #145c85, #062a3d 60%, #041c25); }
.ffu .ffu-cardImg > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ffu .ffu-ph { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; border-radius: 5px;
	border: 1px solid rgba(246, 195, 58, .35); box-shadow: inset 0 0 18px rgba(246, 195, 58, .12); }
.ffu .ffu-phStar { display: block; width: 40px; height: 40px; background: linear-gradient(#fffbe0, var(--g-hi) 25%, var(--g) 60%, var(--g-lo));
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	filter: drop-shadow(0 0 6px rgba(246, 195, 58, .8)); }
.ffu .ffu-cardImg.is-missing > img { display: none; }
/* The framed star only stands in for a picture that is really missing (not while one is still loading). */
.ffu .ffu-cardImg:not(.is-missing) > .ffu-ph { display: none; }
/* A click or tap on a perk opens it big in the lightbox (ultra.js), detail text included; a magnifier marks the tiles. */
.ffu .ffu-tileMore { display: none; }
.ffu .ffu-cardImg::after { content: ''; position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%; pointer-events: none;
	border: 1px solid rgba(246, 195, 58, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); opacity: .9; transition: opacity .15s, transform .15s;
	background: rgba(2, 16, 24, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd54a' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5.5 5.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ffu .ffu-cardImg.is-missing::after { display: none; }
.ffu .ffu-cardImg > img { transition: transform .2s; }
.ffu .ffu-perk:hover .ffu-cardImg > img, .ffu .ffu-perk:focus-visible .ffu-cardImg > img { transform: scale(1.03); }
.ffu .ffu-perk:hover .ffu-cardImg::after, .ffu .ffu-perk:focus-visible .ffu-cardImg::after { opacity: 1; transform: scale(1.08); }
.ffu .ffu-perk:focus-visible { outline: 2px solid #86fce6; outline-offset: 4px; border-radius: 8px; }
.ffu .ffu-also { margin: 0 !important; padding: 4px 16px 16px; text-align: center; font-size: 16px; color: #c4dde6 !important; }

/* Perk window, like the launcher's perk detail: the picture on the left, then the group (in the gold bar), the name, the
   line and the detail; Previous / Next between perks. Clicking the picture shows it full size (ultra.js). */
.ffu .ffu-modal.ffu-modal--zoom { width: min(980px, 94vw); }
.ffu .ffu-zoomCount { margin-left: auto; white-space: nowrap; font: 13px Arial, Helvetica, sans-serif; color: #5e3800; }
.ffu .ffu-modal--zoom .ffu-close { flex: none; width: 44px; height: 44px; }
.ffu .ffu-perkWin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 24px 8px; }
.ffu .ffu-perkPic { display: block; width: 100%; padding: 0; border: 1px solid rgba(61, 233, 255, .4); border-radius: 8px; overflow: hidden;
	background: #021018; cursor: zoom-in; box-shadow: 0 8px 18px -8px #000; touch-action: pan-y; }
.ffu .ffu-perkPic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.ffu .ffu-perkPic:focus-visible { outline: 2px solid #86fce6; outline-offset: 3px; }
.ffu .ffu-perkName { margin: 2px 0 10px; font-size: 26px; line-height: 1.15; color: #fff; text-shadow: 0 2px rgba(3, 30, 46, .9), 0 0 14px rgba(127, 228, 255, .45); }
.ffu .ffu-zoomLine { color: #fff !important; font-size: 18px; line-height: 1.4; }
.ffu .ffu-zoomMore { margin-top: 10px !important; color: #e2f4ff !important; font-size: 16px; line-height: 1.55; }
.ffu .ffu-perkNav { display: flex; justify-content: space-between; gap: 12px; padding: 10px 24px 20px; }
.ffu .ffu-perkStep { min-height: 44px; padding: 0 16px; border: 1px solid rgba(160, 235, 255, .55); border-radius: 4px; cursor: pointer; color: #d6f4ff;
	background: linear-gradient(rgba(14, 62, 90, .75), rgba(4, 22, 34, .85)); font: 14px var(--ffu-display); letter-spacing: .05em; text-transform: uppercase; }
.ffu .ffu-perkStep span { font-size: 1.3em; line-height: 0; }
.ffu .ffu-perkStep:hover { border-color: rgba(246, 195, 58, .85); color: var(--g-text); }
.ffu .ffu-perkStep:focus-visible { outline: 2px solid #86fce6; outline-offset: 2px; }
/* Full-size view of the picture: everything else steps aside; a click on the picture, or Esc, goes back. */
.ffu .ffu-modal--zoom.is-full .ffu-perkWin { display: block; padding: 0; }
.ffu .ffu-modal--zoom.is-full .ffu-perkText, .ffu .ffu-modal--zoom.is-full .ffu-perkNav { display: none; }
.ffu .ffu-modal--zoom.is-full .ffu-perkPic { border: 0; border-radius: 0 0 9px 9px; cursor: zoom-out; }
.ffu .ffu-modal--zoom.is-full .ffu-perkPic img { max-height: calc(100vh - 110px); }

/* ---- FAQ ---- */
.ffu .ffu-faq details { margin: 0 16px; border-bottom: 1px solid rgba(57, 196, 238, .2); padding: 4px 2px; }
.ffu .ffu-faq details:first-of-type { margin-top: 4px; }
.ffu .ffu-faq summary { cursor: pointer; padding: 10px 0; color: var(--ff-glow); font: 16px var(--ffu-display); letter-spacing: .04em; text-transform: uppercase; }
.ffu .ffu-faq details p { margin: 2px 0 12px !important; font-size: 16px; line-height: 1.55; }
.ffu .ffu-foot { padding: 10px 16px 14px; font-size: 14px; color: #86afc3; }

/* ---- Thanks ---- */
.ffu .ffu-heroArt { position: relative; align-self: end; display: flex; align-items: flex-end; justify-content: center; margin: -18px -20px -18px 0; }
.ffu .ffu-heroArt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(246, 195, 58, .25)); }
.ffu .ffu-wait { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%;
	border: 3px solid rgba(127, 228, 255, .25); border-top-color: var(--ff-glow); animation: ffu-spin 1s linear infinite; }
.ffu-thanks .ffu-heroCopy .ffu-cta { margin-top: 16px; }
.ffu--launcher.ffu-thanks { min-height: calc(100vh - 26px); justify-content: center; }
.ffu--launcher.ffu-thanks .ffu-heroBody { min-height: 340px; }

/* ---- Launcher window (?launcher=1): same components, no site chrome, about 1000x700 ---- */
html.ffu-launcher body.nf-ff-exact { margin: 0; padding: 12px 14px 14px; }
/* No page art behind the launcher window: the plain FusionFall ground only. */
html.ffu-launcher.ff-exact-theme body.nf-ff-exact { background: radial-gradient(circle at 50% -10%, rgba(0, 145, 199, .16), transparent 40%),
	url('/styles/nf/fusionfall_exact/bg_media_bluelines.gif') top center repeat, #02080d !important; }
.ffu--launcher { max-width: 1060px; margin: 0 auto; gap: 12px; }
.ffu--launcher .ffu-heroBody { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); padding: 18px 20px 18px 24px; }

@media (max-width: 650px) {
	.ffu .ffu-heroBody, .ffu--launcher .ffu-heroBody { grid-template-columns: 1fr; padding: 16px; }
	.ffu .ffu-heroCopy h1 { font-size: 30px; }
	.ffu .ffu-heroCopy > p { font-size: 16px; }
	.ffu .ffu-modal--zoom .ff-plate-head .ff-title { font-size: 16px; }
	.ffu .ffu-perkWin { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 14px 4px; }
	.ffu .ffu-perkName { font-size: 22px; }
	.ffu .ffu-perkNav { padding: 8px 14px 14px; }
	.ffu .ffu-groupTitle { font-size: 21px; }
	.ffu .ffu-perk > p { font-size: 15px; }
	.ffu .ffu-cta { flex-wrap: wrap; }
	.ffu .ffu-cta .ff-btn, .ffu .ffu-notify .ff-btn { flex: 1 1 auto; }
	.ffu .ffu-btn-gold { min-width: 0; width: 100%; max-width: none; padding: 18px 20px; font-size: 24px !important; }
	/* "Notify me when Ultra opens" is wider than a phone column at 13px: let it take two balanced lines. */
	.ffu .ffu-notify .ff-btn { white-space: normal; line-height: 1.3 !important; padding: 9px 14px; }
	.ffu .ffu-notify .ff-btn > span { text-wrap: balance; }
	.ffu .ffu-groups { padding: 10px; }
	.ffu .ffu-perks { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.ffu .ffu-perk:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
	.ffu .ffu-headNote { display: none; }
	/* Page end: the theme already pads the footer; drop our extra 20px. */
	.ffu:not(.ffu--launcher) { padding-bottom: 0; }
	.ffu .ffu-heroArt { margin: 0 -16px -16px; }
	html.ffu-launcher body.nf-ff-exact { padding: 8px; }
}
/* Upright phones: a compact BUY ULTRA bar once the hero's buy button has scrolled away (ultra.js). Not on phones held
   sideways: there it would take about a sixth of a ~340 px screen and cover the carousel thumbnails (tested at
   844x390), while the hero's own button is one short scroll down. */
@media (max-width: 650px) {
	.ffu .ffu-sticky { display: block; position: fixed; z-index: 400; left: 0; right: 0; bottom: 0;
		padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		background: rgba(2, 16, 24, .95); border-top: 1px solid var(--g-edge); box-shadow: 0 -8px 20px rgba(0, 0, 0, .6);
		transform: translateY(110%); visibility: hidden; transition: transform .2s, visibility .2s; }
	.ffu .ffu-sticky.is-shown { transform: none; visibility: visible; }
}

/* Narrow content column (tablet, phone held sideways, or a small window next to the site sidebar): the hero stacks so the
   340px buy button never runs under the video. Measured on the hero itself, so the launcher window is untouched. */
.ffu .ffu-hero { container-type: inline-size; }
@container (max-width: 760px) {
	.ffu .ffu-heroBody { grid-template-columns: 1fr; padding: 16px; }
	.ffu .ffu-cta { flex-wrap: wrap; }
	.ffu .ffu-cta .ff-btn, .ffu .ffu-notify .ff-btn { flex: 1 1 auto; }
	.ffu .ffu-btn-gold { min-width: 0; width: 100%; max-width: none; padding: 18px 20px; font-size: 24px !important; }
}

/* Touch screens (any width, including a phone held sideways): 44px tap targets and body text of at least 12px. */
@media (pointer: coarse) {
	.ffu .ffu-arrow { width: 44px; height: 44px; margin-top: -22px; }
	.ffu .ffu-arrow::after { top: 16px; }
	.ffu .ffu-arrow--prev::after { left: 18px; }
	.ffu .ffu-arrow--next::after { left: 14px; }
	.ffu .ffu-close { width: 44px; height: 44px; }
	.ffu .ffu-faq summary { padding: 13px 0; }
	.ffu .ffu-faq details { padding: 0 2px; }
	.ffu .ffu-foot a { display: inline-block; padding: 14px 6px; }
	.ffu .ffu-foot { padding: 0 10px; font-size: 12.5px; }
	.ffu .ffu-note, .ffu .ff-gameEyebrow { font-size: 12.5px; }
}

@keyframes ffu-sweep { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateX(420%); } }
@keyframes ffu-glint { 0% { opacity: 1; transform: translateX(-100px); } 30% { opacity: 1; transform: translateX(var(--gw, 900px)); } 30.01%, 100% { opacity: 0; transform: translateX(var(--gw, 900px)); } }
@keyframes ffu-drift { from { transform: translate(var(--x0), var(--y)); } to { transform: translate(var(--x1), var(--y)); } }
@keyframes ffu-twinkle { 0%, 100% { opacity: .35; transform: scale(.55); } 45% { opacity: 1; transform: scale(1.15); } 60% { opacity: .6; transform: scale(.8); } }
@keyframes ffu-spin { to { rotate: 360deg; } }
@keyframes ffu-breathe { 0%, 100% { box-shadow: inset 0 1px rgba(255, 255, 240, .95), inset 0 -2px 5px rgba(122, 76, 6, .4), 0 0 14px -4px rgba(246, 195, 58, .55); }
	50% { box-shadow: inset 0 1px rgba(255, 255, 240, .95), inset 0 -2px 5px rgba(122, 76, 6, .4), 0 0 26px 2px rgba(255, 213, 74, .8); } }
@keyframes ffu-buyglint { 0%, 55% { transform: translateX(-160%); } 85%, 100% { transform: translateX(420%); } }

@media (prefers-reduced-motion: reduce) {
	.ffu *, .ffu *::before, .ffu *::after { animation: none !important; transition: none !important; }
	.ffu .ffu-glint { display: none; }
	.ffu-star { transform: translate(var(--xs, 0), var(--y)); }
}
html.ff-motion-off .ffu *, html.ff-motion-off .ffu *::before, html.ff-motion-off .ffu *::after { animation: none !important; }
html.ff-motion-off .ffu .ffu-glint { display: none; }
html.ff-motion-off .ffu-star { transform: translate(var(--xs, 0), var(--y)); }