/* Fleetlancer HUD look (the game's own panels: dark glass, cyan hairlines, clipped corners).
   Design only — the content is ordinary WordPress blocks; these classes go on blocks ("Additional CSS class(es)"):
   fl-panel (HUD panel) · fl-label (amber section label) · fl-hero (the hero cover) · fl-kicker / fl-tagline (hero texts) ·
   fl-btn-primary / fl-btn-ghost (buttons) · fl-section · fl-features + fl-feature · fl-shipdeck > fl-ships > fl-ship
   (fl-ship-name, fl-ship-cls) · fl-cta · fl-404 (templates/404.html: lost-signal nav panel). */
body { background: #05070d radial-gradient(ellipse at 50% 0%, rgba(79,209,232,0.06), transparent 60%) fixed; }
::selection { background: rgba(79,209,232,0.35); }
.fl-page { padding-top: 0 !important; margin-top: 0 !important; }

/* panel: clipped corners + hairline */
.fl-panel { position: relative; background: rgba(10,18,34,0.82); border: 1px solid rgba(79,209,232,0.32);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.fl-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-left: 2px solid #4fd1e8; border-top: 2px solid #4fd1e8; transform: translate(-1px, -1px); pointer-events: none; }

/* section label: small caps line like the HUD's section headers */
.fl-label { color: #e8c34f; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.85rem; display: flex; align-items: center; gap: 12px; }
.fl-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,195,79,0.5), transparent); }
.fl-section { padding-top: 90px; padding-bottom: 40px; }

/* header */
.fl-header { background: rgba(5,7,13,0.85); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(79,209,232,0.25); position: sticky; top: 0; z-index: 50; }
.fl-header .wp-block-site-title a { color: #4fd1e8; letter-spacing: 0.35em; text-decoration: none; font-weight: 500; }
.fl-header .wp-block-navigation a { color: #c8d8e8; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.9rem; text-decoration: none; }
.fl-header .wp-block-navigation a:hover { color: #4fd1e8; }

/* hero: the background video (the ship cruising, always dead centre in the frame) sits with the ship at ~30 % height,
   the title block centred underneath — nothing off-centre (user 2026-10-13) */
.fl-hero { min-height: 92vh; overflow: hidden; }
.fl-hero video.wp-block-cover__video-background { height: 140% !important; top: -40% !important; object-fit: cover; object-position: 50% 50%; }
.fl-hero .wp-block-cover__inner-container { padding-top: 34vh; }
.fl-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(5,7,13,0.15) 0%, rgba(5,7,13,0.55) 55%, #05070d 100%) !important; opacity: 1 !important; }
.fl-hero h1 { letter-spacing: 0.35em; text-shadow: 0 0 24px rgba(79,209,232,0.45); margin: 0; }
.fl-kicker { color: #e8c34f; letter-spacing: 0.4em; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.4em; }
.fl-tagline { color: #e8eef4; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 1.25rem; text-shadow: 0 1px 8px #000; }
.fl-hero-buttons { margin-top: 36px !important; }
.fl-btn-primary .wp-block-button__link { padding: 0.9em 2.6em; font-size: 1.1rem; box-shadow: 0 0 18px rgba(79,209,232,0.25); }
.fl-btn-ghost .wp-block-button__link { background: transparent !important; border-color: rgba(200,216,232,0.4) !important; color: #c8d8e8 !important; padding: 0.9em 2.6em; font-size: 1.1rem; }

/* feature cards */
.fl-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 1000px) { .fl-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fl-features { grid-template-columns: 1fr; } }
.fl-features > *, .fl-ships > * { margin: 0 !important; }
.fl-feature { padding: 26px 24px; height: 100%; box-sizing: border-box; }
.fl-feature .wp-block-image { margin: 0; }
.fl-feature .wp-block-image img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(79,209,232,0.4)); }
.fl-feature h3 { font-size: 1.25rem; margin: 14px 0 8px; }
.fl-feature p { color: #aebccc; margin: 0; font-size: 1.02rem; }

/* ship gallery: 16 per page (assets/js/ships.js adds ‹ ›), 8 × 2 on desktop; every card the same height (2 lines for the
   name and the class) so flipping pages never jumps */
.fl-ships { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-top: 24px; align-content: start; }
.fl-ship { text-align: center; padding: 12px 6px; }
.fl-ship[hidden] { display: none; }
.fl-ship .wp-block-image { margin: 0 auto; }
.fl-ship .wp-block-image img { width: 72px; height: 72px; }
.fl-ship .fl-ship-name { min-height: 2.6em; display: flex; align-items: center; justify-content: center; line-height: 1.3; font-size: 0.85rem; letter-spacing: 0.1em; color: #c8d8e8; text-transform: uppercase; margin: 6px 0 0; }
.fl-ship .fl-ship-cls { min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; line-height: 1.2; color: #e8c34f; letter-spacing: 0.15em; font-size: 0.7rem; text-transform: uppercase; margin: 0; }
.fl-pager { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.fl-paged .fl-pager { display: flex; }
.fl-pager button { background: rgba(79,209,232,0.1); color: #4fd1e8; border: 1px solid rgba(79,209,232,0.5); width: 46px; height: 40px; font-size: 1.6rem; line-height: 1; cursor: pointer; font-family: inherit; }
.fl-pager button:hover:not(:disabled) { background: rgba(79,209,232,0.28); color: #fff; }
.fl-pager button:disabled { opacity: 0.25; cursor: default; }
.fl-pg-info { color: #c8d8e8; letter-spacing: 0.25em; min-width: 60px; text-align: center; }
@media (max-width: 1100px) { .fl-ships { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .fl-ships { grid-template-columns: repeat(2, 1fr); } }

/* call to action */
.fl-cta { padding: 48px 32px !important; margin-top: 40px !important; margin-bottom: 80px !important; }

/* footer */
.fl-footer { border-top: 1px solid rgba(79,209,232,0.2); color: #7f93a8; font-size: 0.9rem; }
.fl-footer a { color: #7f93a8; }

/* 404 (templates/404.html): "sector uncharted" — nav panel over the dreadnought still, radar without contacts */
.fl-404 { min-height: calc(100vh - 180px); display: flex; flex-direction: column; justify-content: center; padding: 70px 20px !important; margin-top: 0 !important;
	background: linear-gradient(180deg, rgba(5,7,13,0.55) 0%, rgba(5,7,13,0.78) 60%, #05070d 100%), url(/wp-content/uploads/2026/10/fleetlancer-hero-liberty-dreadnought.jpg) center 40% / cover no-repeat; }
.fl-404-panel { text-align: center; padding: 40px 36px 36px !important; backdrop-filter: blur(3px); }
.fl-404-panel > * { margin-left: auto !important; margin-right: auto !important; }
.fl-404-radar { position: relative; width: 132px; height: 132px; border-radius: 50%; margin-bottom: 26px !important; overflow: hidden;
	border: 1px solid rgba(79,209,232,0.55); box-shadow: 0 0 22px rgba(79,209,232,0.18), inset 0 0 20px rgba(79,209,232,0.12);
	background: radial-gradient(circle, transparent 0 32%, rgba(79,209,232,0.28) 32.5% 33.5%, transparent 34% 65%, rgba(79,209,232,0.22) 65.5% 66.5%, transparent 67%),
		linear-gradient(rgba(79,209,232,0.18), rgba(79,209,232,0.18)) center / 1px 100% no-repeat, linear-gradient(rgba(79,209,232,0.18), rgba(79,209,232,0.18)) center / 100% 1px no-repeat, rgba(5,12,24,0.7); }
.fl-404-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(79,209,232,0.45), rgba(79,209,232,0) 70deg, transparent 360deg); animation: fl-404-sweep 3.2s linear infinite; }
.fl-404-radar::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e8c34f; font-size: 2.2rem; font-weight: 600; text-shadow: 0 0 10px rgba(232,195,79,0.7); animation: fl-404-blink 1.6s steps(2, start) infinite; }
@keyframes fl-404-sweep { to { transform: rotate(360deg); } }
@keyframes fl-404-blink { 50% { opacity: 0.25; } }
.fl-404-title { font-size: clamp(2.2rem, 6vw, 3.6rem) !important; letter-spacing: 0.3em; text-transform: uppercase; color: #4fd1e8; text-shadow: 0 0 24px rgba(79,209,232,0.45); margin: 6px 0 18px !important; line-height: 1.1; }
.fl-404-comm { color: #e8eef4; font-size: 1.15rem; max-width: 520px; line-height: 1.5; }
.fl-404-comm strong { color: #4de87a; letter-spacing: 0.1em; font-weight: 500; }
.fl-404-readout { display: inline-block; text-align: left; margin-top: 22px !important; padding: 12px 18px; border-left: 2px solid #e8c34f; background: rgba(232,195,79,0.06); color: #c8d8e8; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.9; }
.fl-404-readout span { display: inline-block; min-width: 170px; color: #e8c34f; }
.fl-404-buttons { margin-top: 30px !important; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .fl-404-radar::before, .fl-404-radar::after { animation: none; } }

@media (max-width: 781px) {
	.fl-hero video.wp-block-cover__video-background { height: 56% !important; top: 0 !important; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
	.fl-hero .wp-block-cover__inner-container { padding-top: 40vh; }
	.fl-hero h1 { letter-spacing: 0.2em; }
	.fl-section { padding-top: 60px; }
	.fl-404-panel { padding: 30px 18px 26px !important; }
	.fl-404-title { letter-spacing: 0.15em; }
	.fl-404-readout span { min-width: 0; display: block; }
}