:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020806;
  color: #f2f0df;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(24, 91, 64, 0.34), transparent 58%),
    #020806;
}

button { font: inherit; }

#game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#unity-canvas {
  display: block;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  background: #061712;
  opacity: 0;
  outline: none;
  transition: opacity 180ms ease-out;
}

#unity-canvas.ready { opacity: 1; }

#loading,
#error-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84vw, 28rem);
  transform: translate(-50%, -50%);
  text-align: center;
}

.brand {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  font: 800 clamp(4rem, 12vw, 7rem)/1 Georgia, serif;
  letter-spacing: -0.12em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.brand span:last-child { color: #d6c78d; }

h1, h2 { margin: 0.4rem 0; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0.65rem 0 1rem; color: #b9c9bf; }

#progress-track {
  height: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 223, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
}

#progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2f0df, #d6c78d);
  transition: width 120ms linear;
}

#fullscreen-button,
#error-panel button {
  border: 1px solid rgba(242, 240, 223, 0.4);
  border-radius: 0.45rem;
  background: rgba(2, 8, 6, 0.82);
  color: #f2f0df;
  cursor: pointer;
}

#fullscreen-button {
  position: fixed;
  right: max(0.8rem, env(safe-area-inset-right));
  bottom: max(0.8rem, env(safe-area-inset-bottom));
  padding: 0.55rem 0.8rem;
  opacity: 0.72;
}

#fullscreen-button:hover,
#fullscreen-button:focus-visible { opacity: 1; border-color: #d6c78d; }

#error-panel {
  padding: 1.5rem;
  border: 1px solid rgba(217, 92, 72, 0.7);
  border-radius: 0.7rem;
  background: rgba(10, 18, 15, 0.96);
}

#error-panel button { padding: 0.65rem 1rem; }

#unity-warning {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: max(0.75rem, env(safe-area-inset-top));
  width: min(90vw, 48rem);
  transform: translateX(-50%);
}

.banner {
  margin-bottom: 0.45rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.4rem;
  background: rgba(242, 240, 223, 0.94);
  color: #111;
  text-align: center;
}

.banner.error { background: #a82f24; color: white; }
.banner.warning { background: #d6c78d; }

[hidden] { display: none !important; }

@media (pointer: coarse), (max-width: 760px) {
  #fullscreen-button { display: none; }
}