:root {
  --amber: #ffc53d;
  --ink: #f3f4f7;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #0b0d11;
  color: var(--ink);
  font: 500 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
}

/* ---------- HUD ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));
}

#stars {
  position: absolute;
  left: calc(14px + var(--safe-l));
  top: calc(12px + var(--safe-t));
  font-size: 20px;
  letter-spacing: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.star {
  color: rgba(255, 255, 255, 0.18);
}

.star.on {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 197, 61, 0.7);
}

#hud-right {
  position: absolute;
  right: calc(14px + var(--safe-r));
  top: calc(12px + var(--safe-t));
  display: flex;
  gap: 6px;
}

.chip {
  padding: 4px 9px;
  border-radius: 9px;
  background: rgba(10, 12, 16, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}

.chip b {
  color: var(--amber);
  font-weight: 700;
}

#health {
  position: absolute;
  left: calc(14px + var(--safe-l));
  top: calc(44px + var(--safe-t));
  width: 132px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

#health-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #5cd07a, #a8e063);
  transition: width 0.15s linear, background 0.3s;
}

#speed {
  position: absolute;
  left: calc(14px + var(--safe-l));
  top: calc(58px + var(--safe-t));
  font: 700 12px/1 -apple-system, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ---------- управление ---------- */

#controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#stick {
  position: absolute;
  left: calc(22px + var(--safe-l));
  bottom: calc(24px + var(--safe-b));
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
}

#stick::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #b9bcc6 55%, #6d717d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  transition: transform 0.06s linear;
}

#stick.active #knob {
  background: radial-gradient(circle at 40% 35%, #ffe9a8, var(--amber) 55%, #b8860b);
}

#right-pad {
  position: absolute;
  right: calc(20px + var(--safe-r));
  bottom: calc(26px + var(--safe-b));
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.btn {
  pointer-events: auto;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  background: rgba(30, 32, 38, 0.55);
  color: var(--ink);
  font: 700 12px/1.1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.06s ease, background 0.06s ease;
}

.btn small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.65;
}

.btn-action {
  width: 96px;
  height: 96px;
  background: rgba(255, 197, 61, 0.16);
  border-color: rgba(255, 197, 61, 0.5);
}

.btn-brake {
  width: 78px;
  height: 78px;
  font-size: 11px;
}

.btn.down {
  transform: scale(0.93);
  background: rgba(255, 197, 61, 0.85);
  color: #17181c;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- экраны ---------- */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 197, 61, 0.12), rgba(6, 8, 12, 0.92) 55%),
    rgba(6, 8, 12, 0.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 20;
}

.screen[hidden] {
  display: none;
}

.panel {
  width: min(420px, 100%);
  text-align: center;
  padding: 26px 22px;
  border-radius: 22px;
  background: rgba(14, 17, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.panel h1 {
  font: 800 40px/0.92 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.panel h1 span {
  color: var(--amber);
}

.panel h2 {
  font: 800 26px/1.1 -apple-system, system-ui, sans-serif;
  margin-bottom: 18px;
}

.lead {
  margin: 16px 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(243, 244, 247, 0.72);
}

.hints {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 13px;
  color: rgba(243, 244, 247, 0.66);
  text-align: left;
}

.hints b {
  color: var(--amber);
}

.cta {
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd166, var(--amber));
  color: #16171b;
  font: 800 16px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(255, 197, 61, 0.3);
  cursor: pointer;
}

.cta:active {
  transform: translateY(1px) scale(0.99);
}

.result {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 22px;
}

.result div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result b {
  font: 800 28px/1 -apple-system, system-ui, sans-serif;
  color: var(--amber);
}

.result span {
  font-size: 12px;
  color: rgba(243, 244, 247, 0.6);
}