:root {
  --line: rgba(255, 255, 255, 0.16);
  --panel: rgba(22, 23, 26, 0.62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a0b0c;
  color: #eceef1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#hint {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: 0;
  right: 0;
  padding: 0 64px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: #8a8d94;
  pointer-events: none;
  z-index: 3;
  animation: hintOut 1.2s ease 8s forwards;
}

#hint .pc { display: none; }

@media (pointer: fine) {
  #hint .touch { display: none; }
  #hint .pc { display: inline; }
  #stick, #jump { display: none; }
}

@keyframes hintOut {
  to { opacity: 0; }
}

#online {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: max(14px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: #b9bdc4;
  font-size: 12px;
  letter-spacing: 0.2px;
  z-index: 4;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6a6f77;
  transition: background 0.3s ease;
}

#dot.on { background: #7dbb90; }

#reset {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: max(14px, env(safe-area-inset-right, 0px));
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: #d7d9dd;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  z-index: 4;
  touch-action: manipulation;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#reset:active { transform: scale(0.94); }

#chatBtn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 50px);
  left: max(14px, env(safe-area-inset-left, 0px));
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: #d7d9dd;
  z-index: 5;
  touch-action: manipulation;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#chatBtn svg { width: 19px; height: 19px; fill: currentColor; display: block; }

#chatBtn:active { transform: scale(0.94); }

#chatBtn.on {
  background: rgba(236, 239, 243, 0.15);
  color: #ffffff;
}

#chatBar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 50px);
  left: calc(max(14px, env(safe-area-inset-left, 0px)) + 46px);
  width: min(250px, calc(100vw - 84px));
  height: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 12px;
  border-radius: 19px;
  border: 1px solid var(--line);
  background: rgba(20, 21, 24, 0.9);
  z-index: 6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#chatBar[hidden] { display: none; }

#chatInput {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: #eceef1;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

#chatInput::placeholder { color: #7f848c; }

#chatSend {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.12);
  color: #eceef1;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

#chatSend:active { transform: scale(0.92); }

#chatSend:disabled { opacity: 0.45; }

#controls { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

#stick {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), rgba(10, 11, 13, 0.34) 72%);
  border: 1.5px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfbfc, #d2d4d8 58%, #a4a8af);
  pointer-events: none;
}

#jump {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(46px, calc(env(safe-area-inset-bottom, 0px) + 32px));
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), rgba(16, 17, 20, 0.4));
  color: #e8eaee;
  font-size: 26px;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#jump:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.14); }