:root {
  --night: #060b14;
  --fog: #0b1424;
  --moon: #cfe0f7;
  --steel: #7f97b8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--moon);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

canvas { display: block; width: 100%; height: 100%; }

#surface {
  position: fixed;
  inset: 0;
  display: none;
  touch-action: none;
  z-index: 5;
}

/* ---------- yükleme ---------- */
#loading, #start {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(120% 90% at 50% 40%, #101c31 0%, var(--night) 70%);
  text-align: center;
  padding: 24px;
}

#start { display: none; cursor: pointer; }

#track {
  width: min(260px, 60vw);
  height: 2px;
  background: rgba(127, 151, 184, 0.22);
}

#bar {
  height: 100%;
  width: 0%;
  background: var(--moon);
  transition: width 0.2s linear;
}

#loadingText {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--steel);
}

#start h1 {
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--moon);
}

#start p {
  font-size: 14px;
  color: var(--steel);
  max-width: 30ch;
  line-height: 1.6;
}

/* ---------- joystick ---------- */
#stick {
  position: fixed;
  display: none;
  width: 132px;
  height: 132px;
  margin-left: -66px;
  margin-top: -66px;
  border: 1px solid rgba(207, 224, 247, 0.28);
  border-radius: 50%;
  z-index: 8;
  pointer-events: none;
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(207, 224, 247, 0.16);
  border: 1px solid rgba(207, 224, 247, 0.4);
  transform: translate(-50%, -50%);
}

/* ---------- zıplama ---------- */
#jump {
  position: fixed;
  right: 28px;
  bottom: 34px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(207, 224, 247, 0.32);
  background: rgba(11, 20, 36, 0.35);
  color: var(--moon);
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9;
  touch-action: none;
}

#jump:active { background: rgba(207, 224, 247, 0.16); }

/* ---------- performans ---------- */
#statsToggle {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(207, 224, 247, 0.25);
  background: transparent;
  z-index: 10;
}

#stats {
  position: fixed;
  top: 46px;
  right: 12px;
  display: none;
  font-size: 11px;
  line-height: 1.7;
  color: var(--steel);
  text-align: right;
  white-space: pre;
  z-index: 10;
}

/* ---------- dikey uyarısı ---------- */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--night);
  color: var(--steel);
  font-size: 15px;
}

@media (orientation: portrait) {
  #rotate { display: flex; }
}


#errorBox {
  display: none;
  max-width: min(520px, 88vw);
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(180, 120, 120, 0.4);
  border-radius: 10px;
  background: rgba(40, 18, 18, 0.5);
  color: #e8bdbd;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}