/* The game takes the whole browser window on a desktop too: no margin, no footer (landscape only, owner decision of 12 October 2026).
   The page has the colour of the game while it loads. The game menu has its own fullscreen button. */
html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; background: #231F20 }
#unity-container { position: fixed; left: 0; top: 0; width: 100%; height: 100% }
#unity-fullscreen-container { position: relative; width: 100%; height: 100% }
#unity-canvas { position: absolute; width: 100%; height: 100%; background: #231F20 }
#unity-loading-container { position: absolute; width: 100%; height: 100%; backdrop-filter: blur(5px); display: none; }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* ---- Nivyx: the game takes every finger (all devices) ------------------------------------------------------------ */
#unity-fullscreen-container, #unity-canvas { touch-action: none; -webkit-tap-highlight-color: transparent }

/* ---- Nivyx: phone and tablet. nivyx-shell.js puts nx-mobile on <html> and measures the visible screen. ---------- */
/* The page is fixed and cannot scroll, bounce, refresh or select; the browser keeps no gesture for itself. */
html.nx-mobile, html.nx-mobile body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #231F20;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html.nx-mobile body { position: fixed; inset: 0 }
html.nx-mobile input, html.nx-mobile textarea { -webkit-user-select: text; user-select: text }
html.nx-mobile #unity-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; transform: none; touch-action: none }
html.nx-mobile #unity-fullscreen-container { width: 100%; height: 100% }
/* Before the script measures: the dynamic viewport follows the browser bars. */
@supports (height: 100dvh) {
  html.nx-mobile #unity-container { width: 100dvw; height: 100dvh }
}
/* After: the size of the visual viewport, in whole pixels, applied after the browser stopped moving it. */
html.nx-mobile.nx-sized #unity-container { left: var(--nx-x, 0px); top: var(--nx-y, 0px); width: var(--nx-w); height: var(--nx-h) }

/* ---- Nivyx: messages over the canvas (paper, ink, magenta and turquoise of the art bible) ------------------------ */
.nx-overlay {
  --nx-ink: #141A1F; --nx-paper: #F6EFD9; --nx-magenta: #E0338A; --nx-turquoise: #1FB5A8;
  position: absolute; inset: 0; z-index: 30;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7em;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background-color: var(--nx-ink); color: var(--nx-paper);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25; text-align: center;
  touch-action: none; cursor: default;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.nx-overlay[hidden], #nx-home-hint[hidden] { display: none }
#nx-resume { z-index: 40 }
#nx-load-error { z-index: 50 }
.nx-overlay h2 { margin: 0; font-size: clamp(28px, 8vmin, 60px); font-weight: 800 }
.nx-overlay p { margin: 0; max-width: 26em; font-size: clamp(17px, 3.6vmin, 26px) }
.nx-nowrap { white-space: nowrap }
.nx-overlay p.nx-detail { max-width: 40em; font-size: clamp(12px, 2.2vmin, 16px); opacity: 0.75; overflow-wrap: anywhere; user-select: text }
.nx-detail:empty { display: none }
/* Read by a screen reader, not drawn: the name of the loading bar. */
.nx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
.nx-for-tablet { display: none }
html.nx-tablet .nx-for-phone { display: none }
html.nx-tablet .nx-for-tablet { display: inline }

.nx-rotate-icon { width: clamp(72px, 24vmin, 140px); height: auto; color: var(--nx-paper); overflow: visible }
.nx-rotate-icon .nx-phone { transform-origin: 75px 75px; animation: nx-turn 2.6s ease-in-out infinite }
.nx-rotate-icon .nx-arrow { color: var(--nx-magenta) }
@keyframes nx-turn { 0%, 20% { transform: rotate(0deg) } 60%, 100% { transform: rotate(-90deg) } }

.nx-button {
  min-height: 56px; min-width: 176px; margin-top: 0.4em; padding: 0 28px;
  font: 800 clamp(20px, 4vmin, 28px)/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #141A1F; background: #F6EFD9;
  border: 5px solid #E0338A; border-radius: 14px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.nx-button:focus-visible { outline: 4px solid #1FB5A8; outline-offset: 4px }
.nx-button:active { transform: translateY(2px) }

/* The hint card sits at the top, inside the safe area, and never covers the middle of the game. */
#nx-home-hint {
  position: absolute; z-index: 25; box-sizing: border-box;
  top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  max-width: 620px; margin: 0 auto; padding: 10px 12px 10px 16px;
  display: flex; align-items: center; gap: 14px;
  background-color: #F6EFD9; color: #141A1F;
  border: 3px solid #141A1F; border-bottom-width: 6px; border-right-width: 6px; border-radius: 14px;
  font: 600 clamp(15px, 2.6vmin, 18px)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#nx-home-hint p { flex: 1; margin: 0 }
#nx-home-hint .nx-button { min-width: 96px; min-height: 48px; margin: 0; padding: 0 16px; font-size: 17px; border-width: 4px }
.nx-share-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em }

@media (prefers-reduced-motion: reduce) {
  .nx-rotate-icon .nx-phone { animation: none; transform: rotate(-90deg) }
}
@media (forced-colors: active) {
  .nx-overlay, #nx-home-hint { border: 3px solid CanvasText }
  .nx-button { border-color: ButtonText }
}