/* Safe-area insets as CSS variables: the game reads them (Plugins/WebGL/VicusViewport.jslib) to keep the login
   UI clear of the notch / home indicator. env() is only substituted here, getComputedStyle sees the px value. */
:root { --vicus-sat: env(safe-area-inset-top, 0px); --vicus-sar: env(safe-area-inset-right, 0px); --vicus-sab: env(safe-area-inset-bottom, 0px); --vicus-sal: env(safe-area-inset-left, 0px); }
/* 100dvh where supported: the page never sits behind the mobile URL bar (100vh bug); the canvas keeps touch-action: none. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: #1a120b; }
html { touch-action: manipulation; }
body { position: fixed; inset: 0; font-family: Georgia, "Times New Roman", serif; color: #ead9b4; -webkit-text-size-adjust: 100%; overscroll-behavior: none; touch-action: none; }
/* Unity's hidden keyboard input on phones: 16 px keeps iOS from zooming the page on focus. */
input, textarea, select { font-size: 16px !important; }

#unity-container { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; }
#unity-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; background: #1a120b; touch-action: none; outline: none; }

/* Loading screen = the game page's first screen (hero + real progress, TemplateData/loader.js, Docs/Design/Web/Landingpage.md).
   It covers the canvas only while the game loads: index.html enterGame() sets display none the moment the player enters,
   and the touch-after-reload block keeps it display none / pointer-events none on every pageshow after that – it can never
   stay as an invisible layer over the running game. Phones: text + button + progress only (no picture is ever requested). */
#unity-loading { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: max(10px, var(--vicus-sat)) max(16px, var(--vicus-sar)) max(10px, var(--vicus-sab)) max(16px, var(--vicus-sal)); color: #ead9b4; background: radial-gradient(130% 90% at 50% 0%, #3a2617 0%, #1d140c 55%, #120c07 100%); }
#unity-loading[dir="rtl"] { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif; }
.nv-consent-open #unity-loading { padding-bottom: calc(var(--nv-consent-h, 0px) + 12px); }

.nv-loader-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.nv-loader-logo { font-size: 22px; letter-spacing: .16em; text-transform: uppercase; color: #e7c253; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.nv-loader-langs { display: flex; gap: 2px; margin-inline-start: auto; font-size: 14px; }
.nv-loader-langs a, .nv-loader-langs span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: 8px; color: #ead9b4; text-decoration: none; }
.nv-loader-langs a:hover { background: rgba(201, 162, 39, .18); }
.nv-loader-langs span[aria-current] { color: #1a120b; background: #c9a227; font-weight: bold; }
.nv-discord-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #8b95f5; border-radius: 999px; color: #fff; background: #3b3f9e; font-size: 14px; text-decoration: none; }

.nv-loader-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 12px 0; }
.nv-loader-copy { width: 100%; max-width: 560px; }
.nv-loader-kicker { margin: 0 0 6px; color: #e7c253; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.nv-loader-title { margin: 0 0 10px; font-size: clamp(28px, 7.4vw, 48px); line-height: 1.12; color: #fff3d6; text-shadow: 0 3px 10px rgba(0, 0, 0, .7); }
.nv-loader-sub { margin: 0 0 14px; font-size: clamp(15px, 2.3vw, 18px); line-height: 1.5; color: #d9c79f; }
.nv-loader-actions { margin: 4px 0 0; }
.nv-play { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 10px 32px; font: inherit; font-size: 21px; font-weight: bold; color: #fff8e6; background: linear-gradient(#b3302b, #8e1b1b); border: 2px solid #c9a227; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .55); cursor: pointer; }
.nv-play:hover { filter: brightness(1.12); }
.nv-play:focus-visible, .nv-tip-next:focus-visible, .nv-loader a:focus-visible, .nv-notice a:focus-visible { outline: 3px solid #f3d27a; outline-offset: 3px; }
.nv-play.is-waiting { background: linear-gradient(#6b4a2a, #4a3120); font-size: 18px; }
.nv-loader.is-ready .nv-play { animation: nv-ready 1.6s ease-in-out 3; }
@keyframes nv-ready { 50% { box-shadow: 0 0 0 6px rgba(231, 194, 83, .35), 0 6px 20px rgba(0, 0, 0, .55); } }

.nv-progress { margin-top: 14px; }
#unity-progress-bar-empty { width: 100%; height: 14px; box-sizing: border-box; border: 1px solid #c9a227; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; }
#unity-progress-bar-full { width: 0%; height: 100%; background: linear-gradient(90deg, #8e1b1b, #c9a227); transition: width .25s; }
#unity-loading-hint { margin: 8px 0 0; min-height: 1.5em; font-size: 15px; color: #ead9b4; }
.nv-loader-cache { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #b9a67f; }
.nv-loader-cache:empty { margin: 0; }

/* Fallback (no WebGL 2 / WebAssembly) and load errors: the notice replaces button + progress, the rest stays. */
.nv-notice { display: none; margin-top: 14px; padding: 14px 16px; border: 1px solid #c9a227; border-inline-start: 4px solid #b3302b; border-radius: 10px; background: rgba(42, 28, 17, .92); outline: none; }
.nv-loader.is-error .nv-notice, .nv-loader.is-unsupported .nv-notice { display: block; }
.nv-loader.is-error .nv-progress, .nv-loader.is-unsupported .nv-progress, .nv-loader.is-error .nv-loader-actions, .nv-loader.is-unsupported .nv-loader-actions { display: none; }
.nv-notice-title { margin: 0 0 6px; font-size: 19px; font-weight: bold; color: #fff3d6; }
.nv-notice-text, .nv-notice-sub { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.nv-notice-sub { font-weight: bold; color: #e7c253; }
.nv-notice-list { margin: 0 0 10px; padding-inline-start: 20px; font-size: 14px; }
.nv-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.nv-notice-actions .nv-play { width: auto; min-height: 48px; font-size: 18px; }
.nv-notice-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #c9a227; border-radius: 10px; color: #f0c64a; text-decoration: none; }
.nv-notice-details { margin-top: 10px; font-size: 13px; }
.nv-notice-details pre { white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; padding: 8px; background: rgba(0, 0, 0, .4); border-radius: 6px; }

/* Rotating tips (real numbers from the game data; pause on hover/focus, "next" button). */
.nv-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px 8px 10px 12px; min-height: 66px; box-sizing: border-box; border-inline-start: 3px solid #c9a227; border-radius: 8px; background: rgba(58, 38, 23, .55); }
.nv-tip p { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; }
.nv-tip strong { color: #e7c253; }
#nv-tip { transition: opacity .18s; }
#nv-tip.is-changing { opacity: .15; }
.nv-tip-next { flex: 0 0 auto; width: 40px; height: 40px; font: inherit; font-size: 22px; line-height: 1; color: #e7c253; background: transparent; border: 1px solid rgba(201, 162, 39, .5); border-radius: 8px; cursor: pointer; }
[dir="rtl"] .nv-tip-next { transform: scaleX(-1); }

/* ---- Hero header with the loading progress (assembled by loader.js buildHero() from the block above, before the first paint):
   logo, tagline, headline and the real progress in one panel at the top – desktop with the key art behind it, phones with a
   drawn backdrop only (no picture). Calm on purpose: no flashing, nothing shakes; the only motion is the bar growing and a
   slow, faint sheen on it while something loads – both off with "reduce motion". Without loader.js the old layout stays. */
.nv-loader.has-hero .nv-loader-main { flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; width: 100%; max-width: 1200px; margin: 0 auto; }
.nv-loader.has-hero .nv-loader-copy { max-width: none; }
.nv-loader-hero { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; padding: 22px 18px 18px; border: 1px solid rgba(201, 162, 39, .55); border-radius: 16px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(201, 162, 39, .2), transparent 62%), radial-gradient(80% 60% at 0% 100%, rgba(142, 27, 27, .32), transparent 65%), linear-gradient(160deg, #3a2617 0%, #24180e 55%, #160e08 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(243, 210, 122, .15); }
/* Thin inner gold frame – the same double border as the "new version" card. */
.nv-loader-hero::after { content: ""; position: absolute; inset: 6px; z-index: 2; border: 1px solid rgba(201, 162, 39, .22); border-radius: 11px; pointer-events: none; }
.nv-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.nv-loader-hero .nv-loader-logo.nv-hero-mark { display: block; margin: 0 0 4px; font-size: clamp(34px, 10.5vw, 64px); line-height: 1.05; letter-spacing: .14em; color: #e7c253; text-shadow: 0 3px 12px rgba(0, 0, 0, .75); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nv-loader-hero .nv-loader-logo.nv-hero-mark { color: transparent; background: linear-gradient(180deg, #fff3d6 0%, #f3d27a 38%, #c9a227 70%, #8c6b14 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7)); }
}
.nv-loader-hero .nv-loader-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; }
.nv-loader-hero .nv-loader-kicker::before { content: ""; flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, transparent, #c9a227); }
[dir="rtl"] .nv-loader-hero .nv-loader-kicker::before { background: linear-gradient(-90deg, transparent, #c9a227); }
.nv-loader-hero .nv-loader-title { margin: 0 0 16px; font-size: clamp(24px, 6.4vw, 44px); }
.nv-loader-hero .nv-progress { margin-top: 0; padding: 12px 14px 10px; border: 1px solid rgba(201, 162, 39, .35); border-radius: 12px; background: rgba(18, 12, 7, .72); }
.nv-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.nv-stage { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #e7c253; }
.nv-stage:empty { display: none; }
.nv-stage::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #c9a227; box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); }
.nv-loader[data-stage="ready"] .nv-stage { color: #cfe8c0; }
.nv-loader[data-stage="ready"] .nv-stage::before { background: #9fd49a; box-shadow: 0 0 0 3px rgba(159, 212, 154, .2); }
.nv-percent { flex: 0 0 auto; font-size: clamp(26px, 7vw, 38px); line-height: 1; font-weight: bold; color: #fff3d6; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.nv-loader-hero #unity-progress-bar-empty { height: 12px; border-color: rgba(201, 162, 39, .8); background: rgba(0, 0, 0, .55); }
.nv-loader-hero #unity-progress-bar-full { position: relative; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, #8e1b1b, #c9a227 70%, #e7c253); transition: width .45s ease-out; }
[dir="rtl"] .nv-loader-hero #unity-progress-bar-full { background: linear-gradient(-90deg, #8e1b1b, #c9a227 70%, #e7c253); }
/* A faint light sweeping slowly over the filled part – only while something is happening, never at the end. */
.nv-loader-hero #unity-progress-bar-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 243, 214, .28) 50%, transparent 100%); transform: translateX(-100%); opacity: 0; }
.nv-loader.is-loading .nv-loader-hero #unity-progress-bar-full::after, .nv-loader.is-starting .nv-loader-hero #unity-progress-bar-full::after { opacity: 1; animation: nv-sheen 3.2s ease-in-out infinite; }
@keyframes nv-sheen { to { transform: translateX(100%); } }
.nv-loader-hero #unity-loading-hint { font-size: 14px; color: #d9c79f; }
.nv-loader.is-consent .nv-percent, .nv-loader.is-idle .nv-percent { display: none; }

/* Load error / unsupported browser: the notice carries "try again" + Discord – no sticky play bar over it (landing.js shows the bar
   whenever the hero's play button is off screen, and in these states that button is hidden). */
body:has(#unity-loading.is-error) #nv-sticky, body:has(#unity-loading.is-unsupported) #nv-sticky { display: none; }

.nv-loader-more { align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: #e7c253; font-size: 15px; text-decoration: none; }
.nv-loader-more::after { content: " ↓"; white-space: pre; }

/* Desktop: the key art (or the optional loop video) next to the text – a CSS background inside this media query only, so
   phones never download it. */
.nv-loader-art { display: none; }
@media (min-width: 900px) {
  .nv-loader-art { display: block; flex: 0 1 600px; aspect-ratio: 800 / 437; overflow: hidden; border: 2px solid #c9a227; border-radius: 14px; background: #2a1c11 url("seo/keyart-800.webp") center / cover no-repeat; box-shadow: 0 24px 64px rgba(0, 0, 0, .65); }
  .nv-loader-art video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .nv-loader-hero .nv-loader-art { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; left: auto; width: 66%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background-position: 60% 35%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
  [dir="rtl"] .nv-loader-hero .nv-loader-art { right: auto; left: 0; -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 38%); mask-image: linear-gradient(to left, transparent 0%, #000 38%); }
  .nv-loader-hero { display: flex; align-items: flex-end; min-height: clamp(360px, 50vh, 470px); padding: 36px 40px 32px; }
  .nv-hero-inner { width: 54%; max-width: 600px; }
  .nv-loader-hero .nv-loader-title { font-size: clamp(32px, 3.3vw, 46px); }
  /* The key art carries the big logo on desktop – the text mark becomes a quiet eyebrow above the tagline. */
  .nv-loader-hero .nv-loader-logo.nv-hero-mark { font-size: 30px; letter-spacing: .22em; margin-bottom: 8px; }
  .nv-loader.has-hero .nv-loader-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: start; padding: 0 8px; }
  .nv-loader.has-hero .nv-loader-copy > * { grid-column: 1; }
  .nv-loader.has-hero .nv-loader-copy > .nv-tip, .nv-loader.has-hero .nv-loader-copy > .nv-notice { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 0; }
  .nv-loader.has-hero.is-error .nv-tip, .nv-loader.has-hero.is-unsupported .nv-tip { display: none; }
  .nv-play { width: auto; }
  .nv-loader-bar { padding: 4px 8px 0; }
}
@media (max-width: 420px) {
  .nv-loader-logo { font-size: 17px; letter-spacing: .1em; }
  .nv-loader-langs a, .nv-loader-langs span { min-width: 30px; }
  .nv-discord-link { padding: 0 9px; font-size: 13px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .nv-loader-sub, .nv-tip { display: none; }
  .nv-loader-hero { padding: 14px 16px 12px; }
  .nv-loader-hero .nv-loader-logo.nv-hero-mark { font-size: 30px; }
  .nv-loader-hero .nv-loader-title { font-size: 22px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #unity-progress-bar-full, #nv-tip, .nv-loader-hero #unity-progress-bar-full { transition: none; }
  .nv-loader-hero #unity-progress-bar-full::after, .nv-loader.is-loading .nv-loader-hero #unity-progress-bar-full::after, .nv-loader.is-starting .nv-loader-hero #unity-progress-bar-full::after { animation: none; opacity: 0; }
  .nv-loader.is-ready .nv-play { animation: none; }
}

#unity-warning { position: absolute; left: 50%; top: 5%; z-index: 3; transform: translate(-50%); background: #3a2617; padding: 10px; display: none; border-radius: 6px; }