/* SkyFyre page – the game box itself is in css/game-stage.css */

.stage {
  /* Shown at the sides/top if the screen isn't 16:9 (the playfield itself is always 16:9) */
  background: #120c2e;
}

/* While playing, the Fyre is your mouse pointer, so the normal arrow is hidden */
.stage.is-playing canvas {
  cursor: none;
}

/* ----- Health, score and gold ----- */

.sf-hud {
  position: absolute;
  top: calc(0.7rem + var(--safe-top));
  left: calc(4rem + var(--safe-left));       /* room for the pause button */
  right: calc(4rem + var(--safe-right));     /* room for the fullscreen button */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  pointer-events: none;
}

/* Dark labels, so the text is easy to read on the white paper */
.sf-health,
.sf-gold,
.sf-hud strong,
.sf-boss {
  padding: 0.15rem 0.6rem;
  color: var(--text);
  background: rgba(14, 10, 36, 0.78);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);   /* angled ends, like the site */
}

.sf-health {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.sf-hud strong {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--yellow);
}

.sf-gold {
  font-size: 0.85rem;
}

.sf-gold b {
  color: var(--yellow);
}

.sf-bar {
  width: clamp(5rem, 16vw, 11rem);
  height: 0.7rem;
  background: #3a2f63;
  border: 1px solid var(--text-muted);
}

.sf-fill {
  width: 100%;
  height: 100%;
  background: var(--magenta);
  transition: width 0.15s;
}

.sf-health.is-low .sf-fill {
  animation: sf-blink 0.5s steps(2) infinite;
}

@keyframes sf-blink {
  50% { background: var(--yellow); }
}

/* ----- Boss health at the bottom ----- */

.sf-boss {
  position: absolute;
  left: 50%;
  bottom: calc(0.8rem + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-style: italic;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  pointer-events: none;
}

.sf-boss .sf-bar {
  width: clamp(8rem, 34vw, 22rem);
}

.sf-boss .sf-fill {
  background: var(--cyan);
}

/* ----- Big texts: "STEG 1", "BOSS!" ... ----- */

.sf-banner {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  text-transform: uppercase;
  color: var(--magenta);
  -webkit-text-stroke: 2px #fff;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
}

.sf-banner.show {
  animation: sf-banner 2.2s ease-out;
}

@keyframes sf-banner {
  0% { opacity: 0; transform: scale(1.4) rotate(-4deg); }
  12% { opacity: 1; transform: scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: scale(0.95) rotate(-2deg); }
}

/* The result screen lists several lines */
#overlay-text {
  white-space: pre-line;
}

/* Phones held upright: a tip to turn the phone (the game is wide) */
.sf-turn-tip {
  display: none;
  color: var(--text-muted);
}

@media (orientation: portrait) and (max-width: 700px) {
  .sf-turn-tip {
    display: block;
  }

  .sf-hud {
    font-size: 0.75rem;
  }
}