/* ═════════ PLAY ═════════ */

.screen--play {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: stretch;
  align-items: stretch;
  padding: 0;
  touch-action: none;              /* the whole screen is the slide surface */
  cursor: grab;
}
.screen--play:active { cursor: grabbing; }

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding:
    calc(var(--safe-t) + var(--u) * 60)
    calc(var(--safe-r) + var(--gutter))
    0
    calc(var(--safe-l) + var(--gutter));
}
.hud__logo { height: calc(var(--u) * 113); width: auto; flex: none; }
[lang='ar'] .hud__logo { height: calc(var(--u) * 120); margin-block: calc(var(--u) * -3.5); }

.timer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
  min-width: calc(var(--u) * 313);
  height: max(calc(var(--u) * 75), 30px);
  padding: 0 calc(var(--u) * 26);
  border: max(calc(var(--u) * 3), 1.5px) solid var(--c-white);
  border-radius: 999px;
  background: var(--c-blue);
  color: var(--c-white);
  font-weight: 800;
  font-size: max(calc(var(--u) * 39), 13px);
  line-height: 1;
  white-space: nowrap;
}
.timer__icon { width: max(calc(var(--u) * 43), 15px); height: auto; }
.timer__value { min-width: 2.35em; font-variant-numeric: tabular-nums; }
.timer.is-warning { box-shadow: 0 0 0 calc(var(--u) * 7) rgba(41, 171, 226, .22); }

.hud__hint {
  margin-top: calc(var(--u) * 36);
  padding: 0 var(--gutter);
  color: var(--c-teal);
  font-weight: 500;
  font-size: max(calc(var(--u) * 28), 11px);
  line-height: 1.3;
  text-align: center;
}

.field {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--u) * 20);
}

.word-layer, .fx-layer { position: absolute; inset: 0; pointer-events: none; }
.fx-layer { z-index: 3; }

/* Falling value pill — styled after the supplied word artwork. */
.word {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.38em;
  min-width: 7.19em;
  padding: 0 1.05em;
  border-radius: 999px;
  background: var(--c-pill);
  color: var(--c-teal);
  font-weight: 700;
  font-size: max(calc(var(--u) * 37), 13px);
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.word.is-collected {
  background: var(--collect, var(--c-blue));
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.word.is-hit {
  background: var(--c-alert-soft);
  color: var(--c-alert);
  box-shadow: 0 0 0 2px var(--c-alert) inset;
}

/* Catcher: arrows + emblem travel together. */
.catcher-rig {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 26);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  pointer-events: none;
  will-change: transform;
}

.catcher {
  position: relative;
  flex: none;
  width: max(calc(var(--u) * 168), 62px);
  aspect-ratio: 149 / 208;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 80%;
}
.catcher__inner { position: absolute; inset: 0; }
.catcher__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .22s ease;
}
.catcher__frame.is-current { opacity: 1; }
.catcher__glow {
  position: absolute;
  inset: 10% -40% -5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(41, 171, 226, .5), rgba(41, 171, 226, 0));
  opacity: 0;
}
.catcher__fallback {
  display: none;
  position: absolute;
  inset: 30% 0 auto;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--c-blue);
}
.catcher.has-fallback .catcher__fallback { display: block; }

.rig-arrow {
  flex: none;
  width: max(calc(var(--u) * 84), 26px);
  height: auto;
  transition: opacity .35s ease;
}
.rig-arrow--left { animation: nudge-left 1.2s ease-in-out infinite; }
.rig-arrow--right { animation: nudge-right 1.2s ease-in-out infinite; }
.has-moved .rig-arrow { animation: none; opacity: 0; transition-duration: .5s; }
.no-guide-arrows .rig-arrow { display: none; }
.catcher-rig[data-edge='left'] .rig-arrow--left,
.catcher-rig[data-edge='right'] .rig-arrow--right { opacity: 0; }

@keyframes nudge-left { 50% { transform: translateX(calc(var(--u) * -10)); } }
@keyframes nudge-right { 50% { transform: translateX(calc(var(--u) * 10)); } }

.move-hint {
  padding:
    calc(var(--u) * 12)
    var(--gutter)
    calc(var(--safe-b) + var(--u) * 60);
  font-weight: 700;
  font-size: max(calc(var(--u) * 28), 11px);
  line-height: 1.2;
  text-align: center;
}

/* Effects */
.fx-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: max(calc(var(--u) * 15), 5px);
  height: max(calc(var(--u) * 30), 10px);
  margin: max(calc(var(--u) * -15), -5px) 0 0 max(calc(var(--u) * -7.5), -2.5px);
  border-radius: 3px;
  opacity: 0;
  will-change: transform, opacity;
}
.fx-float {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-blue);
  font-weight: 800;
  font-size: max(calc(var(--u) * 52), 17px);
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 1px 0 var(--c-white), 0 0 6px var(--c-bg);
  will-change: transform, opacity;
}
.fx-float[data-kind='negative'] { color: var(--c-alert); }

.countdown {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  color: var(--c-blue);
  font-weight: 800;
  font-size: calc(var(--u) * 254);
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hit-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 calc(var(--u) * 140) calc(var(--u) * 16) rgba(214, 69, 80, .42);
}

.paused-veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(235, 248, 253, .82);
  font-weight: 800;
  font-size: max(calc(var(--u) * 64), 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.paused-veil.is-visible { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }