/* Neravia – landing text (the <main class="nv-about"> generated by Assets/Vicus/Editor/SeoSite.cs, Docs/Design/Web/Landingpage.md).
   Game page (<body class="nv-game">): a normal section AFTER the full-viewport game container – below the fold. The first
   screen is the loading screen / hero (style.css); while the game downloads the page scrolls (the body is the scroller, so
   the phone URL bar never jumps) and the text follows under it. Once the game runs (body.loaded) style.css locks the page
   again and the page script makes the section inert. Same text for every visitor and every crawler.
   /en/ /fr/ /ar/: the same block as a normal page. No web fonts, no external files, every image in a fixed box → no
   layout shift. Mobile first: phones get no pictures at all (.nv-desktop-only – lazy images inside are never fetched).
   Dark tones, gold accents; text contrast ≥ 7:1 on the dark background (#ead9b4 / #f3e6c4 on #1a120b). */
.nv-about { box-sizing: border-box; color: #ead9b4; font-family: Georgia, "Times New Roman", serif; line-height: 1.55; font-size: 16px; }
.nv-about *, .nv-about *::before, .nv-about *::after { box-sizing: inherit; }
.nv-about[dir="rtl"], .nv-sticky[dir="rtl"] { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif; }

/* Game page while loading: the (fixed, full-viewport) body scrolls, the game container takes the first screen in the
   flow (same size as later, so the canvas does not resize at the switch), the loading screen lets a swipe through.
   No visible scrollbar on the loading screen – wheel, swipe and keyboard still reach the text. */
body.nv-game:not(.loaded) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; }
body.nv-game:not(.loaded)::-webkit-scrollbar { width: 0; height: 0; }
body.nv-game:not(.loaded) > #unity-container { position: relative; }
body.nv-game:not(.loaded) #unity-canvas { touch-action: pan-y; }

/* Game page: the section under the loading screen (starts exactly one screen down, never on the first screen). Not
   positioned and without paint containment (no content-visibility) on purpose: it never forms a layer above the game
   container. While the game runs the game container is fixed (out of the flow), so the section keeps its one-screen
   offset by a top margin – it stays under the fold, clipped by the locked body, never behind or over the canvas. */
#unity-container ~ .nv-about {
  padding: 40px max(16px, var(--vicus-sar, 0px)) calc(48px + var(--vicus-sab, 0px)) max(16px, var(--vicus-sal, 0px));
  background: linear-gradient(#1a120b, #140d08 480px); border-top: 1px solid rgba(201, 162, 39, .35);
}
body.nv-game.loaded > #unity-container ~ .nv-about { margin-top: 100vh; margin-top: 100dvh; }
#unity-container ~ .nv-about > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* Static language pages */
body.nv-page { margin: 0; background: #1a120b; }
body.nv-page .nv-about { max-width: 1112px; margin: 0 auto; padding: 16px 16px 48px; }

/* ---- type ---------------------------------------------------------------------------------------------------- */
.nv-about h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.15; color: #f0c64a; margin: 8px 0 10px; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.nv-about h2 { font-size: clamp(21px, 3.2vw, 28px); color: #e7c253; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 162, 39, .4); }
.nv-about h3 { font-size: 17px; margin: 0; color: #f3e6c4; line-height: 1.3; }
.nv-about h4 { font-size: 15px; margin: 10px 0 4px; color: #e7c253; }
.nv-about p { margin: 0 0 12px; }
.nv-about a { color: #f0c64a; }
.nv-about a:focus-visible, .nv-about summary:focus-visible, .nv-sticky a:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; border-radius: 4px; }
.nv-lead { font-size: 18px; max-width: 70ch; }
.nv-note, .nv-honest { color: #c8b58c; font-size: 14px; }
.nv-langbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; font-size: 14px; }
.nv-langbar a, .nv-langbar span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 8px; text-decoration: none; }
.nv-langbar span[aria-current] { color: #1a120b; background: #c9a227; font-weight: bold; }
.nv-about .nv-langbar-discord { padding: 0 14px; margin-inline-start: 6px; border: 1px solid #8b95f5; border-radius: 999px; background: #3b3f9e; color: #fff; }
.nv-kicker { margin: 0; color: #e7c253; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* ---- hero (static pages: the first screen; game page: the header under the loading screen) ------------------------ */
.nv-hero { display: grid; gap: 4px 32px; align-items: center; padding: 8px 0 8px; }
.nv-trust { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.nv-trust li { padding: 4px 12px; border: 1px solid rgba(201, 162, 39, .55); border-radius: 999px; background: rgba(58, 38, 23, .7); color: #f3e6c4; font-size: 14px; }
.nv-trust li::before { content: "✓ "; color: #e7c253; }
.nv-online { margin: 0 0 12px; color: #cfe8c0; font-size: 14px; }
.nv-online:empty { margin: 0; }
.nv-online.is-on::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: #5fce6b; box-shadow: 0 0 0 3px rgba(95, 206, 107, .2); }
.nv-keyart-frame { margin: 8px 0 0; }
.nv-keyart { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 800 / 437; border: 2px solid #c9a227; border-radius: 12px; background: #2a1c11; box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }

/* ---- calls to action ------------------------------------------------------------------------------------------ */
.nv-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 6px 0 12px; }
.nv-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px; background: linear-gradient(#b3302b, #8e1b1b); color: #fff8e6 !important; border: 2px solid #c9a227; border-radius: 12px; font-size: 18px; font-weight: bold; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.nv-cta:hover { filter: brightness(1.12); }
.nv-cta-alt { background: #3a2617; }
.nv-cta-note { font-size: 15px; color: #d9c79f; }
.nv-cta-end { justify-content: center; margin-top: 40px; text-align: center; }

/* ---- feature cards -------------------------------------------------------------------------------------------- */
.nv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.nv-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: linear-gradient(180deg, rgba(62, 41, 25, .85), rgba(38, 25, 15, .85)); border: 1px solid rgba(201, 162, 39, .35); border-radius: 12px; }
.nv-card-head { display: flex; align-items: center; gap: 12px; }
.nv-icon { flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: #e7c253; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nv-card > p { margin: 0; font-size: 15px; color: #e3d3ad; }
.nv-more { font-size: 15px; }
.nv-more summary, .nv-faq summary { cursor: pointer; color: #f0c64a; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.nv-more summary::marker, .nv-faq summary::marker { color: #c9a227; }
.nv-more p { margin: 4px 0 0; color: #d9c79f; font-size: 14px; }
.nv-more-link { margin: 0; font-size: 15px; }
.nv-more-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- patch notes ---------------------------------------------------------------------------------------------- */
.nv-news-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.nv-news-status { color: #c8b58c; font-style: italic; }
.nv-patch { padding: 14px 16px; background: rgba(42, 28, 17, .85); border: 1px solid rgba(201, 162, 39, .3); border-inline-start: 3px solid #c9a227; border-radius: 10px; }
.nv-patch-head { margin-bottom: 6px; }
.nv-patch-meta { margin: 2px 0 0; font-size: 13px; color: #b9a67f; }
.nv-patch ul { margin: 0 0 4px; padding-inline-start: 20px; font-size: 15px; }
.nv-patch li { margin-bottom: 2px; }
.nv-patch-fixed h4 { color: #9fd49a; }
.nv-patch-improved h4 { color: #9cc7ec; }

/* ---- classes, dungeons, bosses -------------------------------------------------------------------------------- */
.nv-classes, .nv-dungeons { margin: 0 0 12px; padding-inline-start: 20px; }
.nv-classes li, .nv-dungeons li { margin-bottom: 6px; }
.nv-bosses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.nv-bosses li { background: rgba(58, 38, 23, .6); border: 1px solid rgba(201, 162, 39, .3); border-radius: 999px; padding: 3px 12px; font-size: 14px; }

/* ---- gallery (desktop only) ----------------------------------------------------------------------------------- */
.nv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nv-gallery figure { margin: 0; padding: 8px; text-align: center; background: #2a1c11; border: 1px solid rgba(201, 162, 39, .35); border-radius: 10px; }
.nv-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.nv-gallery .nv-shot { grid-column: span 2; }
.nv-gallery .nv-shot img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.nv-gallery figcaption { margin-top: 6px; font-size: 14px; color: #d9c79f; }

/* ---- community ------------------------------------------------------------------------------------------------ */
.nv-community { padding: 4px 0; }
.nv-community-box { padding: 18px; border: 1px solid rgba(201, 162, 39, .4); border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, rgba(88, 101, 242, .18), rgba(42, 28, 17, .9) 60%); }
.nv-discord { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 12px; border: 2px solid #8b95f5; background: #3b3f9e; color: #fff !important; font-weight: bold; text-decoration: none; }
.nv-discord:hover { filter: brightness(1.12); }

/* ---- FAQ (compact: question = summary, answer opens) ----------------------------------------------------------- */
.nv-faq-item { border-bottom: 1px solid rgba(201, 162, 39, .25); }
.nv-faq summary { padding: 8px 0; }
.nv-faq summary h3 { display: inline; font-size: 16px; }
.nv-faq-item p { margin: 0 0 12px; padding-inline-start: 20px; color: #e3d3ad; }

/* ---- footer --------------------------------------------------------------------------------------------------- */
.nv-foot { margin-top: 32px; margin-bottom: 72px; padding-top: 12px; border-top: 1px solid rgba(201, 162, 39, .3); font-size: 15px; }
.nv-foot nav, .nv-foot p { margin-bottom: 8px; }
.nv-foot a { display: inline-block; padding: 4px 0; }

/* ---- sticky play bar (outside <main>; TemplateData/landing.js shows it once the hero's play button is off screen) ---- */
.nv-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; box-sizing: border-box; padding: 10px max(16px, var(--vicus-sar, 0px)) calc(10px + var(--vicus-sab, 0px)) max(16px, var(--vicus-sal, 0px)); background: rgba(20, 13, 8, .95); border-top: 1px solid rgba(201, 162, 39, .55); box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); color: #ead9b4; font-family: Georgia, "Times New Roman", serif; transition: transform .25s ease; }
.nv-js .nv-sticky:not(.is-on) { transform: translateY(115%); }
.nv-sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; }
.nv-sticky-text { font-size: 14px; color: #d9c79f; }
.nv-sticky .nv-cta { flex: 0 0 auto; }
.nv-sticky.is-ready .nv-sticky-text { color: #cfe8c0; font-weight: bold; }

/* ---- larger screens ------------------------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .nv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-news-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (min-width: 960px) {
  .nv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.nv-page .nv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 70vh; }
  body.nv-page .nv-hero > * { grid-column: 1; }
  body.nv-page .nv-hero > .nv-langbar { grid-column: 1 / span 2; }
  body.nv-page .nv-hero > .nv-keyart-frame { grid-column: 2; grid-row: 2 / span 9; align-self: center; }
}
/* Phones: no pictures (the key art and the gallery are decoration; the text around them stays). */
@media (max-width: 767px) {
  .nv-desktop-only { display: none; }
  .nv-lead { font-size: 16px; }
  .nv-about h2 { margin-top: 32px; }
  .nv-sticky-text { font-size: 13px; }
  .nv-sticky .nv-cta { padding: 8px 18px; font-size: 17px; }
}
@media (max-width: 340px) {
  .nv-sticky-in { flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .nv-cta, .nv-sticky { transition: none; } }