/* touch.css — nakładka sterowania dotykowego + „obróć telefon". Reużywa tokenów
   motywu z style.css (--accent, --panel, --line, --txt, --danger). */

#touch {
  position: fixed;
  inset: 0;
  z-index: 15;                 /* nad canvasem/HUD, POD pauzą (z-index:20) i toastem (30) */
  display: none;
  pointer-events: none;       /* kontener przezroczysty dla dotyku; łapią tylko strefy/przyciski */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#touch.show { display: block; }

/* ── strefy skrętu: ogromne niewidzialne hit-area w dolnych ćwiartkach ───────── */
#touch .dr-zone {
  position: absolute;
  bottom: 0;
  height: 62%;
  width: 50%;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;                 /* glyph przy krawędzi, w pionie na środku strefy */
}
#touch .dr-zone.left { left: 0; justify-content: flex-start; padding-left: calc(env(safe-area-inset-left, 0px) + 7%); }
#touch .dr-zone.right { right: 0; justify-content: flex-end; padding-right: calc(env(safe-area-inset-right, 0px) + 7%); }
/* delikatne podświetlenie strefy podczas dotyku (feedback) */
#touch .dr-zone.left.on { background: radial-gradient(55% 80% at 16% 50%, rgba(255,212,59,.14), transparent 70%); }
#touch .dr-zone.right.on { background: radial-gradient(55% 80% at 84% 50%, rgba(255,212,59,.14), transparent 70%); }

#touch .dr-glyph {
  font-size: 54px;
  line-height: 1;
  color: #fff;
  opacity: .26;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  transition: opacity .08s ease, transform .08s ease;
}
#touch .dr-zone.on .dr-glyph { opacity: .72; }
#touch .dr-zone.on .dr-glyph { transform: scale(1.12); }

/* ── przyciski (hamulec / auto-gaz / pełny ekran) ────────────────────────────── */
#touch .dr-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel, rgba(24,30,18,.92));
  border: 1px solid var(--line, rgba(255,255,255,.14));
  color: var(--txt, #e8efe0);
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  font-weight: 800;
  letter-spacing: .5px;
  user-select: none;
}

/* HAMULEC — dolny prawy róg (pod kciukiem), poniżej kolumny HUD (minimapa/prędkość) */
#touch .dr-btn.brake {
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  width: 84px; height: 84px;
  font-size: 12px;
  color: var(--danger, #ff5a4d);
  border-color: rgba(255,90,77,.5);
  background: rgba(46,18,16,.86);
}
#touch .dr-btn.brake.on { background: rgba(120,26,22,.92); border-color: var(--danger, #ff5a4d); box-shadow: 0 0 22px rgba(255,90,77,.55); transform: scale(.96); }

/* Auto-gaz — mały toggle na lewo od hamulca, też w dolnym pasie */
#touch .dr-btn.autogas {
  right: calc(env(safe-area-inset-right, 0px) + 112px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  width: 56px; height: 56px;
  font-size: 11px;
  gap: 1px;
  opacity: .85;
}
#touch .dr-btn.autogas .st { font-size: 9px; color: var(--muted, #9fb08f); letter-spacing: 1px; }
#touch .dr-btn.autogas.active { border-color: var(--accent, #ffd43b); color: var(--accent, #ffd43b); background: rgba(40,36,10,.9); opacity: 1; }
#touch .dr-btn.autogas.active .st { color: var(--accent2, #7bd83b); }

/* Pełny ekran — top-left (kciuki tam nie sięgają, tap jednorazowy) */
#touch .dr-btn.full {
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: 46px; height: 46px;
  border-radius: 12px;
  font-size: 20px;
  opacity: .8;
}
#touch .dr-btn.full:active { transform: scale(.94); }

/* ── nakładka „obróć telefon" (portrait w trakcie wyścigu) ───────────────────── */
#dr-rotate {
  position: fixed;
  inset: 0;
  z-index: 45;                 /* nad sterowaniem; blokuje wejście gdy pionowo */
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(6,8,5,.94);
  color: var(--txt, #e8efe0);
  pointer-events: auto;
  padding: 24px;
}
#dr-rotate .rot-ico { font-size: 72px; margin-bottom: 14px; animation: dr-rot-wobble 1.8s ease-in-out infinite; }
#dr-rotate .rot-t { font-size: 22px; font-weight: 800; }
#dr-rotate .rot-s { font-size: 14px; color: var(--muted, #9fb08f); margin-top: 8px; }
@keyframes dr-rot-wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Pokaż komunikat tylko gdy: dotyk aktywny w wyścigu ORAZ orientacja pionowa. */
@media (orientation: portrait) {
  body.dr-touch-race #dr-rotate { display: flex; }
}

/* Niskie telefony w poziomie: mniejsze glyphy i hamulec, by nie kolidować z HUD. */
@media (max-height: 430px) {
  #touch .dr-glyph { font-size: 44px; }
  #touch .dr-btn.brake { width: 76px; height: 76px; }
  #touch .dr-btn.autogas { width: 50px; height: 50px; right: calc(env(safe-area-inset-right, 0px) + 100px); }
}