:root {
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Trebuchet MS", sans-serif;
  color: #fff5e6;
  background: #817b8c;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible { outline: 2px solid #d3947d; outline-offset: 5px; }
canvas { display: block; width: 100vw; height: 100dvh; outline: none; touch-action: none; }

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 35% 10%, #b9a1a0, #817b8c 70%);
  text-align: center;
}
.loading-content { width: min(270px, 80vw); }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .21em; margin: 0 0 19px; }
#loading { margin: 0 0 22px; font-size: 12px; color: #fff3e4cb; }
#loading-progress {
  display: block;
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #fff5e630;
  color: #fff5e6;
}
#loading-progress::-webkit-progress-bar { background: #fff5e630; }
#loading-progress::-webkit-progress-value { background: #fff5e6; transition: width .2s; }
#loading-progress::-moz-progress-bar { background: #fff5e6; }
#retry { margin: 24px auto 0; }

#hud { pointer-events: none; }
#objective, #hint {
  position: fixed;
  left: 50%;
  width: calc(100% - 48px);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  color: #fff5e6;
  font-weight: 500;
  text-shadow: 0 1px 3px #423b4b9e, 0 2px 14px #423b4b45;
  opacity: 0;
}
#objective { top: 30%; font-size: clamp(17px, 1.6vw, 24px); letter-spacing: .15em; }
#hint { bottom: max(8%, 28px); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .025em; }
.icon-button {
  position: fixed;
  top: 24px;
  right: 26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid #fff5e647;
  border-radius: 50%;
  color: #fff5e6;
  background: #655c7415;
  transition: background .2s;
}
.icon-button:hover { background: #655c7455; }
.icon-button svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

#pause-menu {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: #5953678f;
  backdrop-filter: blur(12px);
}
.pause-card {
  width: min(410px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 34px 36px 28px;
  border: 1px solid #fff9ef;
  border-radius: 22px;
  color: #55505c;
  background: #faf0e2;
  box-shadow: 0 24px 80px #3c344130;
}
.pause-card .eyebrow { color: #99848b; font-size: 9px; margin-bottom: 10px; }
.pause-card h1 { margin: 0 0 28px; font-size: 29px; letter-spacing: -.04em; font-weight: 500; }
.controls { display: grid; gap: 14px; }
.controls p { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; font-size: 12px; }
.controls p span { text-align: right; line-height: 1.5; }
kbd { font: 10px ui-rounded, "Avenir Next", sans-serif; letter-spacing: .04em; color: #766574; }
.climb-note { margin: 23px 0; font-size: 11px; line-height: 1.6; color: #96828b; }
.volume { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; font-size: 12px; }
.volume input { width: 126px; accent-color: #9d847f; }
.primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #8a777f;
  color: #fff5e6;
  font-size: 12px;
  font-weight: 500;
  transition: background .2s;
}
.primary:hover { background: #77656f; }
.primary span { font-size: 19px; }
.text-button { display: block; margin: 18px auto 0; padding: 4px; border: 0; background: none; color: #99848b; font-size: 11px; }
.text-button:hover { color: #655563; }

@media (max-height: 650px) {
  .pause-card { padding: 23px 30px; }
  .pause-card h1 { margin-bottom: 20px; }
  .controls { gap: 9px; }
  .climb-note { margin: 17px 0; }
  .volume { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  button, #loading-progress::-webkit-progress-value { transition: none; }
}