* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a1a; font-family: 'Segoe UI', system-ui, sans-serif; color: #e0e0f0; overscroll-behavior: none; }

canvas { display: block; }

#ui-wrapper { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
#ui-wrapper * { pointer-events: auto; }

.hidden { display: none !important; }

.menu {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; min-width: 320px;
  background: rgba(10, 10, 30, 0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(100, 100, 200, 0.25); border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.menu h1 { font-size: 2rem; font-weight: 700; margin-bottom: 4px; background: linear-gradient(135deg, #6a5acd, #4a90d9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.menu h2 { font-size: 1.4rem; margin-bottom: 20px; color: #aaa; }
.menu .subtitle { font-size: 0.9rem; color: #888; margin-bottom: 24px; }

.btn {
  display: block; width: 100%; padding: 12px 20px; margin: 8px 0;
  background: linear-gradient(135deg, #4a3a8a, #3a6ab5); border: none; border-radius: 8px;
  color: #fff; font-size: 1rem; cursor: pointer; transition: all 0.2s;
}
.btn:hover { background: linear-gradient(135deg, #5a4a9a, #4a7ac5); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74, 58, 138, 0.4); }
.btn:active { transform: translateY(0); }

.setting { display: flex; align-items: center; gap: 12px; margin: 12px 0; text-align: left; }
.setting label { flex: 1; font-size: 0.9rem; color: #bbb; }
.setting input[type="range"] { flex: 1; accent-color: #6a5acd; }
.setting input[type="checkbox"] { width: 18px; height: 18px; accent-color: #6a5acd; }
.setting span { min-width: 30px; text-align: right; color: #ddd; font-size: 0.9rem; }

.controls-list { text-align: left; margin: 16px 0; }
.controls-list div { margin: 8px 0; font-size: 0.9rem; color: #aaa; }
.controls-list kbd { display: inline-block; padding: 2px 8px; background: rgba(100, 100, 200, 0.15); border: 1px solid rgba(100, 100, 200, 0.3); border-radius: 4px; font-family: inherit; font-size: 0.85rem; color: #ddd; margin-right: 6px; }

#hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; }
.ch-line { position: absolute; background: rgba(200, 200, 255, 0.6); border-radius: 1px; }
.ch-h { width: 20px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ch-v { width: 1.5px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ch-dot { position: absolute; width: 3px; height: 3px; background: rgba(200, 200, 255, 0.8); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#hud-info {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  text-align: center; font-size: 0.8rem; color: rgba(200, 200, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#hud-info > div { margin: 2px 0; }
#hud-state { font-size: 0.9rem; font-weight: 600; color: rgba(200, 200, 255, 0.9); }
#hud-horizon { font-weight: 600; }
#hud-hint { margin-top: 8px; font-size: 0.75rem; color: rgba(200, 200, 255, 0.5); }

#toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 150; padding: 10px 20px; border-radius: 8px;
  background: rgba(20, 20, 40, 0.9); border: 1px solid rgba(100, 120, 255, 0.4);
  color: #c8d0ff; font-size: 0.9rem; pointer-events: none;
}

#touch-controls {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#touch-controls .tzone { position: absolute; top: 0; bottom: 0; touch-action: none; pointer-events: auto; }
#joystick-zone { left: 0; width: 50%; }
#look-zone { right: 0; width: 50%; }

#joystick {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(200, 200, 255, 0.35);
  transform: translate(-50%, -50%); pointer-events: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(200, 200, 255, 0.4);
  transform: translate(-50%, -50%);
}

#touch-buttons {
  position: absolute; right: 18px; bottom: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.tbtn {
  pointer-events: auto; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid rgba(200, 200, 255, 0.35); background: rgba(30, 30, 60, 0.6);
  color: #dfe8f5; font-size: 1.1rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(2px);
}
.tbtn:active { background: rgba(90, 80, 200, 0.75); }
.tbtn-build {
  width: 72px; height: 72px; font-size: 1.5rem;
  background: rgba(46, 204, 113, 0.4); border-color: rgba(46, 204, 113, 0.85);
}
.tbtn-build:active { background: rgba(46, 204, 113, 0.7); }
.tbtn-delete { background: rgba(200, 60, 60, 0.4); border-color: rgba(230, 120, 120, 0.8); }
.tbtn-pause { position: fixed; top: 16px; right: 16px; width: 50px; height: 50px; }
#touch-angle-controls {
  display: grid; grid-template-columns: repeat(2, auto); gap: 8px;
  padding: 8px; border-radius: 14px;
  background: rgba(20, 20, 45, 0.5); border: 1px solid rgba(100, 100, 200, 0.25);
}
#touch-angle-controls .tbtn { width: 46px; height: 46px; font-size: 1rem; }

@media (pointer: coarse) {
  #hud-info { bottom: 140px; max-width: 92vw; }
  #hud-hint { display: none; }
}

@media (max-width: 600px) {
  .menu { min-width: auto; width: 90%; padding: 24px; }
  .menu h1 { font-size: 1.5rem; }
  .tbtn { width: 48px; height: 48px; }
  .tbtn-build { width: 64px; height: 64px; }
  #touch-angle-controls .tbtn { width: 42px; height: 42px; }
  #touch-buttons { right: 12px; bottom: 16px; gap: 8px; }
}

#saves-list { width: 100%; max-height: 40vh; overflow-y: auto; margin-bottom: 16px; }
.save-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.save-info { text-align: left; min-width: 0; }
.save-name { color: #dfe8f5; font-size: 0.95rem; word-break: break-word; }
.save-time { color: #888; font-size: 0.75rem; }
.save-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-sm { padding: 6px 12px; font-size: 0.75rem; }
.saves-empty { color: #888; padding: 12px 0; }
#save-new { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
#save-name {
  flex: 1; max-width: 260px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(100, 120, 255, 0.4); background: rgba(20, 20, 40, 0.7);
  color: #dfe8f5; font-size: 0.9rem; outline: none;
}