/* ---------- Run Habib — game stage ---------- */
/* Wide/landscape by design (unlike Flappy Dragon's portrait stage) — a
   side-scroller reads best stretched across the screen, and this is the
   shape that makes sense fullscreen on a rotated phone too. */
.rh-stage-wrap {
  display: flex;
  justify-content: center;
}

.rh-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(220, 140, 40, 0.15);
  background: #1a1006;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Fullscreen drops the card chrome — the stage should fill the whole
   screen edge to edge, not float inside a rounded, bordered box. It does
   NOT force the canvas to stretch to the device's own screen ratio
   though (a phone's actual screen is rarely exactly 16:9 — an iPhone in
   landscape is closer to 19.5:9) — that's what was stretching the
   graphics out of shape on some devices. Instead the stage becomes a
   centering frame and the canvas keeps its own aspect ratio inside it,
   letterboxed (thin bars on whichever side is left over) rather than
   distorted. */
.rh-stage:fullscreen,
.rh-stage:-webkit-full-screen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
}

.rh-stage:fullscreen canvas,
.rh-stage:-webkit-full-screen canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.rh-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.75), rgba(10, 6, 4, 0));
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  pointer-events: none;
  z-index: 3;
}
.rh-hud-item strong { color: #ffd873; }
.rh-hud-right { margin-left: auto; color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.rh-hud-right strong { color: #fff; }

.rh-fullscreen-btn,
.rh-mute-btn,
.rh-pause-btn {
  position: absolute;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 6, 4, 0.55);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.rh-fullscreen-btn:hover,
.rh-mute-btn:hover,
.rh-pause-btn:hover { background: rgba(10, 6, 4, 0.8); }
.rh-fullscreen-btn { right: 10px; }
.rh-mute-btn { right: 50px; }
.rh-pause-btn { right: 90px; }

.rh-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: rgba(10, 6, 4, 0.78);
  backdrop-filter: blur(4px);
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  /* The stage is short on narrow phones (16:9 at ~340px wide is only
     ~190px tall) — if the panel's content is ever taller than that,
     scroll it into reach instead of letting `.rh-stage`'s overflow:hidden
     clip the start/resume button out of existence. */
  overflow-y: auto;
}
.rh-overlay[hidden] { display: none; }

/* A carved-stone/parchment tablet instead of a plain dark rectangle —
   matches the desert-kingdom theme rather than a generic modal. */
.rh-overlay-panel {
  max-width: 380px;
  padding: 30px 28px 26px;
  position: relative;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 200, 120, 0.14), transparent 55%),
    linear-gradient(180deg, #4a3018 0%, #2b1a0c 60%, #20130a 100%);
  border: 1px solid rgba(255, 210, 140, 0.4);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 220, 160, 0.15);
}
.rh-overlay-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 210, 140, 0.28);
  border-radius: 11px;
  pointer-events: none;
}

.rh-overlay-art {
  width: 84px;
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.rh-overlay-panel h3 {
  font-family: "Cinzel", var(--font-heading), serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  color: #ffd873;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 184, 77, 0.3);
  margin-bottom: 12px;
}

.rh-overlay-panel p {
  color: rgba(255, 232, 205, 0.82);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.rh-overlay-panel .dragon-store-open-btn {
  margin-top: 0;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 140, 0.55);
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.22), rgba(255, 170, 70, 0.1));
  color: #ffd873;
  font-family: "Cinzel", var(--font-heading), serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rh-overlay-panel .dragon-store-open-btn:hover {
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.34), rgba(255, 170, 70, 0.18));
  border-color: rgba(255, 210, 140, 0.85);
}
.rh-overlay-panel .dragon-store-open-btn:active { transform: scale(0.96); }

/* ---------- Touch controls (mobile only, toggled via JS — see IS_TOUCH) ---------- */
.rh-touch-controls {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 4;
}
.rh-stage.is-touch .rh-touch-controls { display: block; }

.rh-touch-dpad {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.rh-touch-dpad-row {
  display: flex;
  gap: 10px;
}

.rh-touch-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 6, 4, 0.5);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.rh-touch-btn:active { background: rgba(255, 255, 255, 0.25); }

.rh-touch-jump {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 74px;
  height: 74px;
  font-size: 1.6rem;
  pointer-events: auto;
  border-color: rgba(240, 193, 75, 0.6);
  background: rgba(240, 193, 75, 0.18);
}

@media (max-width: 640px) {
  .rh-hud { font-size: 0.75rem; gap: 10px; padding: 8px 10px; }
  .rh-touch-btn { width: 50px; height: 50px; }
  .rh-touch-jump { width: 64px; height: 64px; }
  .rh-overlay-panel { padding: 18px 18px 16px; }
  .rh-overlay-art { width: 56px; margin-bottom: 8px; }
  .rh-overlay-panel h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .rh-overlay-panel p { font-size: 0.82rem; line-height: 1.45; margin-bottom: 12px; }
  .rh-overlay-panel .dragon-store-open-btn { padding: 8px 20px; font-size: 0.85rem; }
}

/* Rotate-to-landscape support. This is a wide, landscape-shaped game, so a
   phone in landscape is exactly when someone wants to play it — but the
   normal page chrome (fixed header + a tall hero) eats the entire short
   viewport a landscape phone has, pushing the stage below the fold. On a
   short landscape viewport, drop the chrome and let the stage use the
   whole screen, height-first (aspect-ratio then derives the width) since
   height is what's actually scarce in landscape. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header, .page-hero, .site-footer, .page-watermark { display: none; }
  .request-form-section { padding: 0; }
  .request-form-section .container { padding: 0; max-width: 100%; }
  .rh-stage-wrap { padding: 0; }
  .rh-stage {
    width: auto;
    height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}