/*
 * Game Pulse look: flyff (2.4). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="flyff"] and .is-game-flyff, then the game's own touches, all scoped to this game.
 *
 * Flyff Universe, "fly for fun": our own take on a bright fantasy sky. Pale sky panels with soft rounded frames and a
 * white top light, sky-blue pill tabs, sun-gold trims, a hero band drawn as a dusk sky with cloud banks and a low sun
 * (gradients only), rounded friendly titles. No game art except the bundled class crests; no web font (system stacks).
 * The dark scheme is the same sky after sunset: deep navy panels, starlight text, gold titles.
 */

[data-game="flyff"],
.is-game-flyff {
	--gp-surface: light-dark(#F4F9FF, #0F1C30);
	--gp-surface-2: light-dark(#FFFFFF, #15263F);
	--gp-surface-sunk: light-dark(#E3EEFA, #0A1424);
	--gp-ink: light-dark(#14243B, #E6EEF8);
	--gp-ink-muted: light-dark(#44566E, #A9BCD4);
	--gp-ink-strong: light-dark(#0A1628, #FFFFFF);
	--gp-accent: light-dark(#1D64B0, #8CC4FF);
	--gp-accent-ink: light-dark(#FFFFFF, #0A1628);
	--gp-accent-2: #E7A21A;
	--gp-title-ink: light-dark(#1A4F8C, #FFD27A);
	--gp-title-shadow: none;
	--gp-head-font: "Nunito", "Segoe UI Rounded", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: "Nunito", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
	--gp-frame-border: 1px solid light-dark(#BFD6EE, #2B4466);
	--gp-frame-radius: 16px;
	--gp-frame-shadow: inset 0 1px 0 light-dark(#FFFFFF, #23395A), 0 12px 28px -18px light-dark(#1D64B0, #000000);
	--gp-frame-image: none;
	--gp-tab-bg: light-dark(#DCEBFA, #13233A);
	--gp-tab-ink: light-dark(#14243B, #D3E3F7);
	--gp-tab-active-bg: light-dark(#1D64B0, #8CC4FF);
	--gp-tab-active-ink: light-dark(#FFFFFF, #0A1628);
	--gp-tab-shape: none;
	--gp-tabbar-bg: light-dark(#EAF3FD, #0D1A2D);
	--gp-tabbar-rule: light-dark(#BFD6EE, #2B4466);
	--gp-btn-bg: light-dark(#FFFFFF, #172A45);
	--gp-btn-ink: light-dark(#14243B, #E6EEF8);
	--gp-btn-border: 1px solid light-dark(#8FB6DF, #3A5A82);
	--gp-btn-hover-bg: light-dark(#E3F0FD, #1F3758);
	--gp-table-head-bg: light-dark(#1D64B0, #0F2747);
	--gp-table-head-ink: light-dark(#FFFFFF, #FFD27A);
	--gp-row-alt: light-dark(rgba(29, 100, 176, 0.05), rgba(140, 196, 255, 0.05));
	--gp-row-hover: light-dark(rgba(29, 100, 176, 0.1), rgba(140, 196, 255, 0.1));
	--gp-grid-line: light-dark(#D3E3F4, #24395A);
	--gp-good: light-dark(#1D6B34, #7BD88F);
	--gp-bad: light-dark(#B3261E, #FF9C8F);
	--gp-warn: light-dark(#8A5800, #F5C451);
	--gp-pop-bg: light-dark(#FFFFFF, #15263F);
	--gp-pop-border: 1px solid light-dark(#7FB2E5, #3A5A82);
	--gp-pop-shadow: 0 18px 40px -16px rgba(10, 22, 40, 0.55);
	--gp-radius-inner: 10px;
	--gp-bar: #E7A21A;
	--gp-bar-track: light-dark(#E3EEFA, #0A1424);
	--gp-bar-radius: 999px;
	--gp-series-1: light-dark(#1D64B0, #8CC4FF);
	--gp-series-2: #E7A21A;
	--gp-hero-bg:
		radial-gradient(22rem 7rem at 88% 108%, rgba(255, 255, 255, 0.13), transparent 70%),
		radial-gradient(16rem 5rem at 70% 112%, rgba(255, 255, 255, 0.1), transparent 70%),
		radial-gradient(28rem 12rem at 96% -10%, rgba(255, 196, 92, 0.28), transparent 65%),
		linear-gradient(180deg, #0E2A55 0%, #164A86 58%, #1C5797 100%);
	--gp-hero-title: #FFFFFF;
	--gp-hero-ink: #E2EEFB;
	--gp-hero-accent: #FFD27A;
	--gp-hero-rule: #FFD27A;
	--gp-hero-pill: rgba(255, 210, 122, 0.55);
	--gp-tabs-bg: light-dark(#EAF3FD, #0D1A2D);
	--gp-tabs-rule: light-dark(#BFD6EE, #2B4466);
	--gp-tabs-ink: light-dark(#14243B, #D3E3F7);
	--gp-tabs-active: light-dark(#1D64B0, #8CC4FF);
}

/* Titles: rounded and heavy, like a friendly game menu. */
:is([data-game="flyff"], .is-game-flyff) :is(.gp-panel__title, .gp-hero__title, .gp-door__title) {
	font-family: var(--gp-head-font);
	font-weight: 800;
	letter-spacing: 0.005em;
}

/* A panel title wears a small sun: two drawn circles, no image. */
:is(body.is-game-flyff, .gp-section.is-game-flyff) .gp-panel__title::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.45em;
	border-radius: 50%;
	vertical-align: 0.02em;
	background: radial-gradient(circle at 35% 35%, #FFE3A3 0 30%, #E7A21A 31% 100%);
	box-shadow: 0 0 0 0.14em light-dark(rgba(231, 162, 26, 0.22), rgba(231, 162, 26, 0.3));
}

/* Panels: the sky lightens toward the top edge, like daylight on a cloud. */
:is(body.is-game-flyff, .gp-section.is-game-flyff) .gp-panel {
	background:
		linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.9), rgba(140, 196, 255, 0.06)), transparent 7rem),
		var(--gp-surface);
}

/* The tabs are pills on a pale band. */
:is(body.is-game-flyff, .gp-subnav.is-game-flyff) .gp-subnav a {
	border-radius: 999px;
}

/* The hero's facts as cloud-white pills. */
.gp-hero.is-game-flyff .gp-hero__facts li {
	border-radius: 999px;
}

/* The "About this page" fold sits on the page, not on a panel: sky-blue text at 4.5:1 in either scheme. */
:is(body.is-game-flyff, [data-game="flyff"]) .gp-about > summary {
	color: light-dark(#1A4F8C, #8CC4FF);
}