:root {
  color-scheme: dark;
  --ink: #1c1c1a;
  --muted: #706c65;
  --orange: #e98645;
  --ground: #ece9e3;
  --line: rgba(28, 28, 26, .18);
}

@font-face {
  font-family: "Manrope";
  src: url("Fonts/Manrope-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Manrope";
  src: url("Fonts/Manrope-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Manrope";
  src: url("Fonts/Manrope-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Manrope";
  src: url("Fonts/Manrope-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Manrope";
  src: url("Fonts/Manrope-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; }
html, body, #app-shell, #unity-container, #unity-canvas { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: "Manrope", Arial, Helvetica, sans-serif;
}

#app-shell { position: relative; }
#unity-container { position: fixed; inset: 0; background: #10100f; }
#unity-canvas { display: block; background: #10100f; outline: none; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  align-items: center;
  padding: clamp(32px, 7vw, 128px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 14%, rgba(233, 134, 69, .16), transparent 34%),
    linear-gradient(118deg, #dedbd4 0%, var(--ground) 53%, #f3f1ed 100%);
  transition: opacity 360ms ease, visibility 360ms ease;
}

#preloader::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(32px, 7vw, 128px);
  width: 4px;
  height: 72px;
  background: var(--orange);
}

#preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.16), transparent 55%);
}

#preloader.is-done { pointer-events: none; visibility: hidden; opacity: 0; }

/* The page must remain product-agnostic until Unity has loaded the actual model. */
.ambient, .artifact { display: none; }

.loader-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 650px);
  gap: clamp(42px, 8vh, 96px);
  width: min(100%, 1180px);
}

.brand-block { max-width: 650px; }

.brand-logo {
  display: block;
  width: clamp(130px, 17vw, 215px);
  height: auto;
  margin: 0 0 28px;
}

h1 {
  margin: 0;
  max-width: 13ch;
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-size: clamp(2.85rem, 6.4vw, 6.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.06em;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.load-panel { width: min(100%, 530px); }
.load-copy, .load-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.load-copy { margin-bottom: 14px; font-size: .92rem; font-weight: 700; }
#load-percent { color: var(--orange); font-family: "Manrope", Arial, sans-serif; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.progress-track { height: 7px; overflow: hidden; background: rgba(245,243,238,.2); }
#progress-fill { width: 100%; height: 100%; transform: scaleX(.03); transform-origin: left center; background: var(--orange); transition: transform 260ms ease; }
.load-meta { margin-top: 11px; color: var(--muted); font-size: .73rem; }

#unity-warning { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 50%; z-index: 20; display: none; width: min(92vw, 720px); transform: translateX(-50%); gap: 8px; }
.banner { padding: 12px 14px; color: #111; font-weight: 700; }
.banner-warning { background: #ffd052; }
.banner-error { background: #f06b55; }

@media (max-width: 720px) {
  #preloader { padding: 28px 24px; }
  .loader-stage { gap: 48px; }
  h1 { max-width: 11ch; font-size: clamp(2.65rem, 14vw, 4.6rem); }
  .load-copy, .load-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; }
}