/* pwa/games/jump-run.css */

/* ── Stage ───────────────────────────────────────────── */
.jr-stage {
  display: flex; flex-direction: column;
  height: 100vh; min-height: 100vh;
  position: relative;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-tertiary) 60%, var(--bg-secondary) 100%);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}

/* ── HUD ─────────────────────────────────────────────── */
.jr-hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--border-bronze);
  flex-shrink: 0;
}
.jr-hearts { color: var(--accent-red); letter-spacing: 2px; font-size: 15px; }
.jr-score  { color: var(--accent-gold); font-weight: 700; font-size: 15px; }
.jr-ep-title { color: var(--text-secondary); font-size: 12px; }
.jr-quit {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px; font-family: inherit;
}

/* ── Target bar ──────────────────────────────────────── */
.jr-target-bar {
  padding: 5px 14px;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.15em; text-transform: uppercase;
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.jr-target-label { color: var(--text-muted); margin-right: 2px; }
.jr-target-word { display: inline-block; margin: 0 4px; }

/* ── Hint bar (auto-hides after 5s) ─────────────────────── */
.jr-hint-bar {
  padding: 3px 14px;
  font-size: 11px; color: var(--accent-gold);
  text-align: center; opacity: 0.75;
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.jr-target-word.done { text-decoration: line-through; color: var(--accent-gold); }

/* ── Game field ──────────────────────────────────────── */
.jr-field {
  flex: 1; position: relative; overflow: hidden; touch-action: none;
}
.jr-world {
  position: absolute; top: 0; left: 0;
  width: 2200px; height: 100%;
}

/* ── Ground & platforms ──────────────────────────────── */
.jr-ground {
  position: absolute; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, #3a6a25 0%, var(--accent-deep-green) 100%);
  border-top: 2px solid rgba(139,105,20,0.5);
}
.jr-platform {
  position: absolute;
  height: 12px;
  background: linear-gradient(180deg, #5a8a3a 0%, var(--accent-deep-green) 100%);
  border-radius: 4px;
  border: 1px solid rgba(139,105,20,0.4);
}

/* ── Vocabulary word cards ───────────────────────────── */
.jr-word {
  position: absolute;
  min-width: 64px; padding: 4px 8px;
  border-radius: 6px; border: 2px solid;
  font-size: 12px; font-weight: 700;
  text-align: center; white-space: nowrap;
  pointer-events: none;
  transform-origin: top left;
}
.jr-word.correct {
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.55);
  color: var(--accent-gold);
}
.jr-word.wrong {
  background: rgba(231,76,60,0.12);
  border-color: rgba(231,76,60,0.5);
  color: var(--accent-red);
}

/* ── Pixel-Link character ────────────────────────────── */
.jr-jo {
  position: absolute; width: 16px;
  transform-origin: 8px 19px; /* scaleX only — Y-pivot für mögliche spätere Effekte */
  will-change: transform;
}
.jr-jo-hat {
  width: 18px; height: 8px; margin-left: -1px;
  background: #3a8a3a; border: 1px solid #2a6a2a;
  border-radius: 3px 3px 0 0;
}
.jr-jo-head {
  width: 14px; height: 10px; margin: 0 auto;
  background: #f5c88a; border: 1px solid #c8a060;
  position: relative;
}
.jr-jo-head::before, .jr-jo-head::after {
  content: ""; position: absolute; top: 4px;
  width: 2px; height: 2px; background: #1a1a1a;
}
.jr-jo-head::before { left: 3px; }
.jr-jo-head::after  { right: 3px; }
.jr-jo-body {
  width: 14px; height: 12px; margin: 0 auto;
  background: #3a8a3a; border: 1px solid #2a6a2a;
}
.jr-jo-legs {
  display: flex; gap: 2px; justify-content: center;
}
.jr-leg {
  width: 5px; height: 8px;
  background: #8b4513; border: 1px solid #5a2d0c;
  transition: none;
}
.jr-jo.run .jr-leg:nth-child(odd)  { animation: jr-leg-a 0.14s steps(1) infinite; }
.jr-jo.run .jr-leg:nth-child(even) { animation: jr-leg-b 0.14s steps(1) infinite; }
@keyframes jr-leg-a { 0%{height:8px;margin-top:0} 50%{height:5px;margin-top:3px} }
@keyframes jr-leg-b { 0%{height:5px;margin-top:3px} 50%{height:8px;margin-top:0} }
.jr-jo.jump .jr-leg { height: 5px; margin-top: 3px; }

/* ── Castle (level end marker) ───────────────────────── */
.jr-castle {
  position: absolute; font-size: 36px;
  pointer-events: none;
}

/* ── D-Pad ───────────────────────────────────────────── */
.jr-dpad {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 8px 14px 12px;
  background: rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.jr-btn {
  width: 52px; height: 52px;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 8px;
  color: var(--accent-gold); font-size: 22px;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.jr-btn:active { background: rgba(255,215,0,0.3); }

/* ── Overlay (win / game over) ───────────────────────── */
.jr-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(5,12,2,0.85);
  z-index: 10;
}
.jr-overlay h2 {
  font-family: var(--font-title);
  background: var(--title-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 32px;
}
.jr-overlay .jr-final-score { color: var(--accent-gold); font-size: 22px; font-weight: 700; }
.jr-overlay .jr-newhigh { color: var(--accent-gold); font-size: 14px; }
.jr-overlay .jr-muted { color: var(--text-muted); font-size: 13px; }

/* ── Flash animations ────────────────────────────────── */
@keyframes jr-flash-hit  { 0%,100%{filter:none} 50%{filter:brightness(2) saturate(3)} }
@keyframes jr-flash-miss { 0%,100%{filter:none} 50%{filter:brightness(0.3) sepia(1) hue-rotate(300deg)} }
.jr-jo.flash-hit  { animation: jr-flash-hit  0.3s ease; }
.jr-jo.flash-miss { animation: jr-flash-miss 0.3s ease; }