:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #090a0c;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 35%, #2a1710, #090a0c 65%); }

#unity-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #090a0c;
  touch-action: none;
}

#loading, #error {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: radial-gradient(circle at center, rgba(79, 43, 24, .96), rgba(9, 10, 12, .99));
  text-align: center;
}

#loading[hidden], #error[hidden], #brand[hidden] { display: none; }

#brand {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(circle at center, #2c1a10, #090a0c 70%);
  pointer-events: none;
  transition: opacity .7s ease;
}
#brand.out { opacity: 0; }
.jl { display: flex; gap: .06em; font: 700 clamp(72px, 22vmin, 180px)/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; }
.jl span {
  background: linear-gradient(170deg, #fff1cf 10%, #e8bf72 45%, #9a6526 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
  animation: jl-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.jl span:last-child { animation-delay: .12s; }
.jl-line { width: min(240px, 46vw); height: 2px; background: linear-gradient(90deg, transparent, #e8bf72, transparent); animation: jl-line 1s .25s ease both; }
@keyframes jl-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes jl-line { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
.mark { color: #d8ad64; font: 700 clamp(28px, 7vw, 56px)/1 serif; letter-spacing: .28em; }
.subtitle { color: #d8c7aa; letter-spacing: .12em; text-transform: uppercase; }
.track { width: min(420px, 72vw); height: 5px; overflow: hidden; border-radius: 9px; background: #241912; }
#progress { width: 0; height: 100%; background: linear-gradient(90deg, #8c5c24, #efcb82); transition: width .18s; }
#status { min-height: 1.4em; color: #b8aa98; }
#error h1 { color: #e8c982; margin: 0; }
#error p { max-width: 560px; color: #d7ccc0; }
#error button { border: 1px solid #c7974c; border-radius: 8px; padding: 10px 18px; color: #f5dfb7; background: #352315; }