/* Everything that lives on top of the road while a race is running:
   HUD, speedometer, nitro, the question panel and the FX layer. */

#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#hud .pe { pointer-events: auto; }

.hud-top {
  position: absolute;
  top: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s3)) var(--s3) 0;
}
.chip {
  padding: var(--s2) var(--s3);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.chip b, .chip span { font-family: var(--fd); font-size: clamp(14px, 2.3vmin, 22px); font-weight: 900; color: #8ef7ff; }
.chip small { font-size: 12px; opacity: .75; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.chip.gold span { color: var(--gold); }

.racebar { flex: 1; min-width: 80px; }
.rb-track {
  position: relative;
  height: clamp(15px, 2.4vmin, 24px);
  border-radius: 99px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3));
  backdrop-filter: blur(8px);
  overflow: visible;
}
.rb-track:after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 99px;
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .09) 0 6px, transparent 6px 12px);
}
.rb-fill {
  position: absolute; top: 2px; bottom: 2px; right: 2px; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0, 229, 255, .25), rgba(0, 229, 255, .75));
  transition: width .12s linear;
}
.rb-mark {
  position: absolute; top: 50%;
  transform: translate(50%, -50%);
  font-size: clamp(13px, 2.1vmin, 20px);
  transition: right .12s linear;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  z-index: 2;
}
.rb-flag { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-size: clamp(13px, 2.1vmin, 20px); z-index: 1; }
.rb-labels { display: flex; justify-content: space-between; white-space: nowrap; font-size: 12px; font-weight: 800; opacity: .85; margin-top: var(--s1); padding: 0 var(--s1); }
#posText.lead { color: var(--lime); }
#posText.behind { color: var(--hot); }

/* speedometer */
.speedo {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s3));
  inset-inline-end: var(--s3);
  width: clamp(108px, 17vmin, 168px);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55));
}
.speedo svg { width: 100%; display: block; overflow: visible; }
#needle { transform-box: fill-box; transform-origin: 50% 97.6%; transition: transform .12s cubic-bezier(.3, 1.4, .5, 1); }
.spd-num { font-family: var(--fd); font-weight: 900; fill: #fff; }

/* nitro */
.nitro {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s3));
  inset-inline-start: var(--s3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  pointer-events: auto;
}
.nt-bar {
  width: clamp(15px, 2.4vmin, 24px);
  height: clamp(84px, 15vmin, 150px);
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.nt-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  border-radius: 99px;
  background: linear-gradient(0deg, #7c4dff, #00e5ff 60%, #b6ff3c);
  transition: height .25s;
  box-shadow: 0 0 18px rgba(0, 229, 255, .7);
}
.nt-bar.full { animation: ntPulse .7s infinite alternate; }
@keyframes ntPulse { to { box-shadow: 0 0 26px 6px rgba(182, 255, 60, .75); border-color: var(--lime); } }
.nt-lbl { font-family: var(--fd); font-size: 12px; font-weight: 900; opacity: .85; letter-spacing: 1px; }
.streak { font-size: clamp(12px, 1.9vmin, 17px); font-weight: 900; color: var(--gold); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

/* shield pip (C5.2) */
.shield-pip { font-size: 15px; filter: drop-shadow(0 0 8px rgba(0, 229, 255, .8)); }
.shield-pip.spent { opacity: .3; filter: grayscale(1); }

/* ------------------------------------------------------- question panel */
.qpanel {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s3));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 74vw);
  padding: var(--s3) var(--s4) var(--s4);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10, 18, 42, .72), rgba(4, 8, 22, .86));
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--line);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
  pointer-events: auto;
  z-index: 22;
}
@media (max-width: 760px) { .qpanel { width: min(560px, 90vw); } }

.q-top { display: flex; align-items: center; gap: var(--s2); }
.q-badge {
  font-size: 12px; font-weight: 800; padding: 3px var(--s2); border-radius: 99px;
  background: rgba(0, 229, 255, .18); border: 1px solid rgba(0, 229, 255, .4); white-space: nowrap;
}
.q-tm { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.q-tm i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #b6ff3c, #ffc63d); transform-origin: left center; }
.q-tm i.warn { background: linear-gradient(90deg, #ffc63d, #ff2d78); }

.q-expr {
  font-family: var(--fd);
  font-weight: 900;
  letter-spacing: 1px;
  margin: var(--s2) 0 var(--s3);
  font-size: clamp(30px, 6.4vmin, 58px);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 26px rgba(0, 229, 255, .5), 0 3px 0 rgba(0, 0, 0, .5);
}
.q-expr .eq { color: var(--gold); }

.q-ans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 560px) { .q-ans { grid-template-columns: repeat(2, 1fr); } }
.ans {
  position: relative;
  text-align: center;
  direction: ltr;
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(19px, 3.6vmin, 32px);
  color: #eaf7ff;
  padding: .5em .1em;
  min-height: var(--tap);
  border-radius: 15px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(6, 12, 30, .55));
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .1s, box-shadow .1s, background .2s;
}
@media (hover: hover) { .ans:hover { background: linear-gradient(180deg, rgba(0, 229, 255, .3), rgba(6, 12, 30, .55)); } }
.ans:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.ans .k { position: absolute; top: 3px; inset-inline-end: 6px; font-family: var(--f); font-size: 12px; opacity: .5; font-weight: 700; }
.ans.good { background: linear-gradient(180deg, #4dffa8, #12b46a); color: #03210f; animation: pop .3s; }
.ans.bad { background: linear-gradient(180deg, #ff8b96, #e01c30); color: #fff; animation: shake .3s; }
.ans.dim { opacity: .35; }
@keyframes pop { 0% { transform: scale(1) } 45% { transform: scale(1.14) } 100% { transform: scale(1) } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }

/* ------------------------------------------- numeric keypad (אלוף mode) */
.keypad { display: flex; flex-direction: column; gap: var(--s2); }
.kp-display {
  min-height: 42px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid var(--line);
  font-family: var(--fd);
  font-size: clamp(22px, 4.4vmin, 34px);
  font-weight: 900;
  color: #8ef7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
}
.kp-display:empty::before { content: '?'; opacity: .35; }
/* A numeric keypad reads left-to-right in every language — 1 2 3, like a phone. Inheriting the
   page's RTL here would put 3 2 1 on the top row, which no child expects. */
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); direction: ltr; }
.kp-key {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(18px, 3.4vmin, 26px);
  min-height: var(--tap);
  padding: var(--s2);
  border-radius: 14px;
  color: #eaf7ff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(6, 12, 30, .55));
  box-shadow: 0 5px 0 rgba(0, 0, 0, .45);
  transition: transform .1s, box-shadow .1s, background .2s;
}
.kp-key:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.kp-key.ok { background: linear-gradient(180deg, #4dffa8, #12b46a); color: #03210f; }
.kp-key.del { background: linear-gradient(180deg, rgba(255, 139, 150, .5), rgba(224, 28, 48, .4)); }

/* -------------------------------------------------------------- FX layer */
#fx { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; direction: ltr;
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(20px, 4vmin, 40px);
  animation: flyUp 1.05s ease-out forwards;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .75);
  white-space: nowrap;
}
@keyframes flyUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5) }
  22% { opacity: 1; transform: translate(-50%, -18px) scale(1.18) }
  100% { opacity: 0; transform: translate(-50%, -130px) scale(.95) }
}
.flash { position: absolute; inset: 0; opacity: 0; }
.flash.on { animation: fl .45s ease-out; }
@keyframes fl { 0% { opacity: .55 } 100% { opacity: 0 } }
.banner {
  position: absolute; top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(34px, 9vmin, 90px);
  letter-spacing: 3px;
  animation: bang .9s ease-out forwards;
  text-shadow: 0 0 40px currentColor, 0 6px 0 rgba(0, 0, 0, .5);
}
@keyframes bang {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg) }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg) }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) }
}

/* countdown */
#cd { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; pointer-events: none; }
#cdNum {
  font-family: var(--fd); font-weight: 900;
  font-size: clamp(90px, 26vmin, 260px);
  color: #fff;
  text-shadow: 0 0 60px var(--neon), 0 0 120px var(--neon2);
  animation: cdIn .85s ease-out;
}
#cdNum.go { font-size: clamp(52px, 15vmin, 150px); }
@keyframes cdIn { 0% { opacity: 0; transform: scale(2.6) } 35% { opacity: 1; transform: scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: scale(.8) } }

/* --------------------------- narrow screens: lift gauges above the panel */
@media (max-width: 700px) {
  .speedo {
    width: clamp(74px, 24vw, 104px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 27vh);
    inset-inline-end: var(--s2);
  }
  .nitro { bottom: calc(env(safe-area-inset-bottom, 0px) + 27vh); inset-inline-start: var(--s2); }
  .nt-bar { height: clamp(62px, 11vh, 96px); width: 15px; }
  .qpanel { width: min(560px, 96vw); }
  .q-expr { margin: var(--s1) 0 var(--s2); }
  #lapText { display: none; }
  .rb-labels { justify-content: flex-start; }
}
@media (max-height: 430px) {
  .speedo, .nitro { display: none; }
  .qpanel { width: min(520px, 62vw); }
}