:root{
  --hud-bg: rgba(10,18,33,.62);
  --hud-text: #f4fbff;
  --accent: #8de2ff;
  --control-glow: rgba(70,150,255,.45);
}

/* ================= BASE ================= */
html, body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:#0b1827;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial;
}

#app{
  position:fixed;
  inset:0;
}

canvas{
  display:block;
  width:100%;
  height:100%;
}

/* ================= HUD ================= */
.hud{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:10px;
  pointer-events:none;            /* HUD neblokuje kliky */
  z-index:90000;
}

.topbar{
  pointer-events:auto;
  justify-self:center;
  padding:8px 12px;
  border-radius:18px;
  background:var(--hud-bg);
  color:var(--hud-text);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  gap:14px;
  min-width:200px;
}

.topbar__level{
  font-weight:600;
  font-size:14px;
  letter-spacing:.35px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}

.topbar__level span{
  padding:4px 12px;
  border-radius:999px;
  background:rgba(127,208,255,.18);
  color:var(--accent);
  font-size:20px;
  font-weight:700;
}

.topbar__distance{
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.topbar__distanceLabel{
  font-size:13px;
  text-transform:uppercase;
  opacity:.8;
}

.topbar__distanceValue{
  font-size:clamp(24px,5vw,44px);
  font-weight:700;
}

.topbar__distanceValue span{
  color:var(--accent);
}

@media (max-width:1280px) and (max-height:720px){
  .topbar{
    padding:6px 10px;
    border-radius:16px;
    gap:10px;
  }
  .topbar__level{
    font-size:12px;
  }
  .topbar__level span{
    padding:3px 10px;
    font-size:18px;
  }
  .topbar__distanceLabel{
    font-size:11px;
  }
  .topbar__distanceValue{
    font-size:clamp(20px,4.2vw,36px);
  }
}

/* ================= MESSAGE ================= */
.msg{
  pointer-events:none;
  justify-self:center;
  align-self:center;
  text-align:center;
  color:#e9f7ff;
  text-shadow:0 4px 18px rgba(0,0,0,.6);
  z-index:95000;
}

.msg h1{
  font-size:clamp(26px,5vw,52px);
  margin:6px 0 4px;
  letter-spacing:.08em;
}

/* ================= CONTROLS ================= */
#btnLeft,
#btnRight{
  position:absolute;
  bottom:84px;
  width:96px;
  height:96px;
  border:none;
  border-radius:50%;
  background:var(--hud-bg);
  color:var(--hud-text);
  font-size:50px;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  z-index:90001;
}

#btnLeft{ left:60px; }
#btnRight{ right:60px; }

/* ================= EXIT (X) ================= */
#btnExit{
  position:absolute;
  top:12px;
  right:14px;
  width:52px;
  height:52px;
  font-size:30px;
  background:var(--hud-bg);
  color:var(--hud-text);
  border:none;
  border-radius:14px;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:90002;
}

/* ================= PAUSE ================= */
#btnPause{
  position:absolute;
  top:12px;
  left:14px;
  width:52px;
  height:52px;
  background:var(--hud-bg);
  border:none;
  border-radius:14px;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  color:transparent;
  z-index:90002;
}

#btnPause::before,
#btnPause::after{
  content:"";
  position:absolute;
  top:15px;
  width:6px;
  height:22px;
  background:var(--hud-text);
  border-radius:3px;
}

#btnPause::before{ left:18px; }
#btnPause::after{ left:28px; }

#btnPause[data-state="paused"]::before{
  top:14px;
  left:20px;
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid var(--hud-text);
  background:none;
}

#btnPause[data-state="paused"]::after{
  display:none;
}

/* ================= EXIT DIALOG ================= */
/* 🔴 TOTO JE KRITICKÁ ČASŤ */
.exitDialog{
  display:none;
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  justify-content:center;
  align-items:center;
  pointer-events:auto;          /* MUSÍ brať kliky */
  z-index:100000;               /* NAD VŠETKÝM */
}

.exitBox{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--hud-bg);
  color:var(--hud-text);
  padding:26px;
  border-radius:20px;
  text-align:center;
  min-width:260px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  pointer-events:auto;
  position:relative;
  z-index:100001;
}

.exitButtons{
  display:flex;
  gap:12px;
  justify-content:center;
}

.exitBox button{
  padding:12px 20px;
  border:none;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  pointer-events:auto;
}

#btnYes{
  background:var(--accent);
  color:#012;
}

#btnNo{
  background:#2a4258;
  color:#eaf6ff;
}

#btnBackMenu{
  background:#ffffff;
  color:#0a1622;
  pointer-events:auto;
  z-index:100002; /* úplne navrchu */
}

/* ================= MOBILE ================= */
@media (max-width:820px){
  #btnLeft,
  #btnRight{
    width:86px;
    height:86px;
    font-size:44px;
  }
  #btnLeft{ left:28px; }
  #btnRight{ right:28px; }
}