* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0b1a26;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color: #eef6f8; user-select: none; -webkit-user-select: none;
}
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.panel {
  position: fixed; z-index: 10;
  background: rgba(10, 24, 34, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
button {
  font: inherit; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px; padding: 5px 10px;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: rgba(255, 255, 255, 0.18); }
button.active { background: rgba(64, 200, 210, 0.38); border-color: rgba(120, 240, 240, 0.8); }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 4px; margin-right: 6px;
  font: 600 11px/1.5 ui-monospace, Menlo, Consolas, monospace; text-align: center;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 2px; border-radius: 4px; color: #fff;
}

/* mode bar */
#topbar { top: 14px; left: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#topbar .brand { font-weight: 700; letter-spacing: 0.04em; font-size: 15px; color: #bff4ef; }
#modes { display: flex; gap: 6px; }
#modes button { padding: 6px 10px; font-size: 13px; }

/* time panel */
#timepanel { top: 14px; right: 14px; width: 330px; padding: 12px 14px 12px; font-size: 13px; }
#timepanel .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#timepanel .head .label { font-weight: 600; color: #bff4ef; letter-spacing: 0.03em; }
#clock { font: 700 20px/1 ui-monospace, Menlo, Consolas, monospace; }
#timepanel .sub { color: #b8ccd4; margin-top: 2px; font-size: 12px; }
.sliderwrap { position: relative; margin: 10px 2px 22px; }
#timeSlider {
  width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 6px; outline: none;
  background: linear-gradient(90deg, #3a3f6e 0%, #f2a36b 7%, #9fd4f2 16%, #7cc3f0 37%, #9fd0ee 58%,
                              #f6a45c 68%, #e0603a 72%, #5a3a6a 77%, #1b2248 84%, #0a0f24 100%);
}
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff7d6; border: 2px solid #33414d; box-shadow: 0 0 10px rgba(255, 230, 150, 0.9); cursor: pointer;
}
#timeSlider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff7d6; border: 2px solid #33414d; cursor: pointer;
}
.ticks { position: absolute; left: 9px; right: 9px; top: 14px; height: 14px; font-size: 10.5px; color: #9fb4bd; }
.ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
#timepanel .buttons { justify-content: flex-start; flex-wrap: wrap; }
#timepanel .buttons button { padding: 4px 8px; font-size: 12px; }

/* controls panel */
#controls { left: 14px; bottom: 14px; padding: 10px 14px 12px; font-size: 12.5px; max-width: 360px; }
#controls .title { font-weight: 600; color: #bff4ef; margin-bottom: 6px; }
#controls .hint { font-weight: 400; color: #8fa6ae; font-size: 11px; margin-left: 6px; }
#controlsList { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
#controlsList .k { white-space: nowrap; text-align: right; }
#controlsList .k kbd { margin-right: 2px; }
#controlsList .d { color: #d8e6ea; }
#controlsList .sep { grid-column: 1 / -1; height: 1px; background: rgba(255, 255, 255, 0.12); margin: 4px 0; }
#controls.hidden #controlsList { display: none; }
#controls.hidden .title { margin-bottom: 0; }

/* HUD */
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; z-index: 5;
  border-radius: 50%; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#prompt {
  position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 6px 14px; border-radius: 16px; background: rgba(10, 24, 34, 0.6); font-size: 14px;
  opacity: 0; transition: opacity 0.2s;
}
#prompt.show { opacity: 1; }
#status {
  position: fixed; right: 14px; bottom: 14px; z-index: 6; pointer-events: none;
  padding: 8px 12px; border-radius: 10px; background: rgba(10, 24, 34, 0.5);
  font: 600 13px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #d9f3f3; text-align: right;
  white-space: pre;
}
#status:empty { display: none; }
#lockHint {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  font-size: 12.5px; color: #e7f3f5; background: rgba(10, 24, 34, 0.5); padding: 6px 12px; border-radius: 14px;
  transition: opacity 0.3s;
}
#lockHint.hide { opacity: 0; }

#loading {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; background: radial-gradient(circle at 50% 40%, #1d5b73, #0a1a26 70%);
  transition: opacity 0.6s;
}
#loading .ltitle { font-size: 30px; font-weight: 700; letter-spacing: 0.06em; color: #c8fbf3; }
#loading #loadmsg { color: #a9c6cf; font-size: 14px; }
#loading .bar { width: 260px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0%; background: #6fe3d8; transition: width 0.2s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading.error #loadmsg { color: #ffb4a0; max-width: 80vw; text-align: center; white-space: pre-wrap; }

@media (max-width: 900px) {
  #timepanel { width: 280px; }
  #controls { max-width: 300px; font-size: 11.5px; }
}