:root {
  color-scheme: dark;
  --bg-deep: #0a1520;
  --bg-sand: #4f2e12;
  --panel: rgba(8, 17, 28, 0.84);
  --panel-edge: rgba(255, 198, 84, 0.45);
  --text-main: #f9f1dd;
  --text-soft: #d7cdb8;
  --accent: #ffc654;
  --accent-2: #57d5ff;
  --shadow: rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Avenir Next Condensed", "Trebuchet MS", "Verdana", sans-serif;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 198, 84, 0.16), transparent 24%),
    linear-gradient(180deg, #0f2133 0%, #09121c 46%, #1b1209 100%);
  color: var(--text-main);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10%, transparent 10% 20%, rgba(255, 255, 255, 0.05) 20% 30%, transparent 30% 40%, rgba(255, 255, 255, 0.04) 40% 50%, transparent 50% 60%, rgba(255, 255, 255, 0.03) 60% 70%, transparent 70% 100%);
  background-size: 140px 140px;
}

.page-shell {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6px + env(safe-area-inset-top)) 6px calc(6px + env(safe-area-inset-bottom)) 6px;
}

.hero {
  display: none;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.subhead {
  width: min(760px, calc(100vw - 48px));
  margin: 12px auto 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.35;
}

.game-panel {
  position: relative;
  width: min(calc(100vw - 12px), 430px);
  height: min(calc(100vh - 12px), 932px);
  height: min(calc(100svh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 932px);
  border: 2px solid rgba(255, 198, 84, 0.52);
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(19, 43, 65, 0.96) 0%, rgba(8, 17, 28, 0.98) 100%);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 8px rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.game-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 198, 84, 0.1), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(87, 213, 255, 0.12), transparent 24%);
}

#game-container {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#game-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.controls {
  display: none;
}

@media (max-width: 640px), (pointer: coarse) {
  .page-shell {
    width: 100vw;
    width: 100svw;
    height: 100vh;
    height: 100svh;
    padding: 0;
  }

  .game-panel {
    width: 100vw;
    width: 100svw;
    max-width: none;
    height: 100vh;
    height: 100svh;
    max-height: none;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #081522;
  }

  .game-panel::before {
    display: none;
  }
}