/* Shared in-game HUD for every game built with GS.kit (same look as the Mathe-Drohne). */
.gs-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
  zoom: var(--ui); /* smaller on touch screens and phones (style.css) */
}
.gs-hud.is-intro .gs-top,
.gs-hud.is-intro .gs-hint,
.gs-hud.is-over .gs-mid { visibility: hidden; }

.gs-top {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: var(--inset-l);
  right: var(--inset-r);
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); /* hearts and score never get squeezed */
  align-items: start;
  gap: 12px;
}

/* ---------- pixel hearts ---------- */
.gs-hearts { grid-column: 1; display: flex; gap: 6px; }
.gs-heart { position: relative; }
.gs-heart .full { position: absolute; inset: 0; }
.gs-heart .full.drop { animation: gs-heart-drop 1s steps(10) forwards; }
@keyframes gs-heart-drop {
  0% { transform: none; }
  20% { transform: scale(1.3); }
  100% { transform: translateY(260px) rotate(90deg) scale(0.6); opacity: 0; }
}

/* ---------- task: the numbers are the star, big and clean ---------- */
.gs-mid {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: min(calc(100vw - 400px), 1100px); /* kit.js makeHud sets the real cap and shrinks the task's font to fit it */
}
.gs-task {
  padding: 0.05em 0.55em;
  font-family: var(--num-font);
  font-weight: bold;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 1.2;
  white-space: nowrap;
  color: #1d2433;
}
.gs-task.mid { font-size: clamp(34px, 5.6vw, 72px); }
.gs-task.small { font-size: clamp(24px, 3.6vw, 50px); white-space: normal; text-align: center; }
.gs-task .op { display: inline-block; margin: 0 0.12em; transform: scaleX(1.3); }
.gs-task .op.dot {
  width: 0.2em;
  height: 0.2em;
  margin: 0 0.25em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  transform: none;
}
.gs-task .ans { display: inline-block; min-width: 1.1em; text-align: center; color: #ff7b00; }
.gs-task .ans.tight { min-width: 0; }
.gs-task .soft { opacity: 0.45; }
.gs-task.reveal .ans { color: #1fb75a; }
.gs-task.reveal.wrong .ans { color: #1fb75a; }
.gs-task .field {
  display: inline-block;
  min-width: 1.25em; /* fits two digits, so typing never shifts the task */
  text-align: center;
  border-bottom: 0.08em solid #c9d2de;
}
.gs-task .field.focus { color: #ff7b00; border-color: #ff7b00; animation: gs-field 0.8s steps(2) infinite; }
@keyframes gs-field {
  50% { border-color: transparent; }
}
.gs-task .bad { color: #ff4d4d; text-decoration: line-through; }
.gs-task.pop { animation: gs-pop 0.3s steps(4); }
.gs-task.shake { animation: gs-shake 0.5s steps(6); }
@keyframes gs-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes gs-shake {
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* small info row under the task (chips with an icon and a number) */
.gs-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
}
.gs-sub .px-box { gap: 10px; padding: 6px 12px; }
.gs-sub b {
  font-family: var(--num-font);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1;
}
.gs-chip.on { --edge: #1fb75a; }
.gs-chip.dim { opacity: 0.5; }

/* ---------- score ---------- */
.gs-score {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.gs-points {
  min-width: 1.2em;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  text-align: center;
}
.gs-points-frame.bump { animation: gs-pop 0.3s steps(4); }
.gs-best {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(18px, 2vw, 24px);
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

/* ---------- praise (pixel word) ---------- */
.gs-praise {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
}
.gs-praise.show { animation: gs-praise 1.1s steps(11) forwards; }
@keyframes gs-praise {
  0% { opacity: 0; transform: scale(0.4); }
  20% { opacity: 1; transform: scale(1.1); }
  35% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ---------- control hint ---------- */
.gs-hint {
  position: absolute;
  left: var(--inset-l);
  bottom: var(--inset-b);
}
.gs-hint .px-box,
.gs-controls span { gap: 6px; }
.gs-gap { display: inline-block; width: 12px; }
.gs-ctl-num { font-family: var(--num-font); font-size: 1.5em; line-height: 1; margin-left: 4px; }

/* ---------- overlays ---------- */
.gs-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: auto;
  background: rgba(36, 48, 74, 0.3);
}
.gs-overlay.intro {
  align-items: start;
  padding-top: max(18px, 5vh);
  background: none;
}
.gs-panel {
  flex-direction: column;
  gap: 26px;
  padding: clamp(22px, 4vw, 40px) clamp(26px, 5vw, 52px);
}
.gs-overlay > .px-frame { --step: 9px; animation: gs-pop 0.3s steps(4); }
.gs-title { max-width: 86vw; }
.gs-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 36px; }
.gs-controls span { display: inline-flex; align-items: center; }
.gs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.gs-record { animation: gs-blink-soft 0.6s steps(2) infinite; }
@keyframes gs-blink-soft {
  50% { opacity: 0.35; }
}
.gs-result {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(64px, 10vw, 110px);
  line-height: 1;
}
.gs-result-best {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -10px;
  font-size: clamp(22px, 2.6vw, 30px);
  opacity: 0.8;
}
.gs-big-icon { line-height: 0; }

/* ---------- a phone held sideways: the HUD is scaled by --ui (0.62), so these sizes are in that scaled space;
   the text gets smaller than the scale alone would make it ---------- */
@media (max-height: 500px) {
  .gs-top { top: max(14px, env(safe-area-inset-top)); gap: 10px; }
  .gs-mid { gap: 10px; }
  .gs-task { font-size: 54px; }
  .gs-task.mid { font-size: 42px; }
  .gs-task.small { font-size: 32px; }
  .gs-sub b { font-size: 26px; }
  .gs-points { font-size: 36px; }
  .gs-best { font-size: 20px; }
  .gs-score { gap: 10px; }
  .gs-panel { gap: 18px; padding: 18px 30px; }
  .gs-overlay.intro { padding-top: 14px; }
  .gs-result { font-size: 84px; }
  .gs-result-best { font-size: 24px; }
}