/* ═══════════════════════════════════════════════════════════════════════════
   MAGIC WAR LEGENDS — Landing Page Stylesheet
   Mobile-first, vanilla CSS3 with custom properties.

   MARKETING TEAM: All brand values are defined in the :root block below.
   Update colours, fonts, and button styles there — changes propagate globally.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   Replace these values to re-brand the page.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand Colours ── */
  --color-primary:   #7B2FBE;   /* Main purple — used on primary CTA */
  --color-secondary: #F5A623;   /* Gold — used on glow animation */
  --color-accent:    #E84393;   /* Pink — used as glow accent */
  --color-dark:      #0d0d1a;   /* Deep navy background */

  /* ── Typography ── */
  --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;

  /* ── CTA Buttons ── */
  --cta-bg:          var(--color-primary);
  --cta-text:        #ffffff;
  --cta-radius:      14px;
  --cta-padding:     14px 32px;
  --cta-font-size:   1.1rem;
  --cta-font-weight: 700;

  /* ── Store Button (Download/Continue) ── */
  --cta-store-bg:    #00C853;   /* Google Play green */
  --cta-store-text:  #ffffff;

  /* ── Overlays ── */
  --overlay-bg:      rgba(0, 0, 0, 0.75);
  --modal-bg:        #1a1a2e;
  --modal-radius:    22px;
  --modal-padding:   36px 28px;
  --modal-max-width: 360px;

  /* ── Blur ── */
  --playable-blur:        10px;   /* Landing state */
  --playable-blur-overlay: 8px;   /* Fail state */
  --playable-blur-win:    18px;   /* Win state — heavier, game's native buttons must be fully obscured */

  /* ── Footer ── */
  --footer-opacity:  0.45;
  --footer-font-size: 0.68rem;

  /* ── Transitions ── */
  --transition-overlay: opacity 0.3s ease;
  --transition-btn:     transform 0.15s ease, box-shadow 0.15s ease;
}


/* ───────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;           /* Prevent scroll — page is a full-screen canvas */
  background: var(--color-dark);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. APP SHELL (#app)
   Fills the full viewport; hosts the playable container and all overlays.
   ─────────────────────────────────────────────────────────────────────────── */
#app {
  position: relative;
  width: 100%;
  height: 100dvh;             /* dvh = dynamic viewport height (handles mobile chrome) */
  overflow: hidden;
}


/* ───────────────────────────────────────────────────────────────────────────
   4. PLAYABLE CONTAINER & IFRAME
   ─────────────────────────────────────────────────────────────────────────── */
#playable-container {
  position: absolute;
  inset: 0;                   /* top: 0; right: 0; bottom: 0; left: 0 */
  width: 100%;
  height: 100%;
  transition: filter 0.4s ease;
}

#playable-container.blurred {
  filter: blur(var(--playable-blur));
  pointer-events: none;       /* Block all touch/click on iframe while blurred */
}

/* Fail state — moderate blur, game's native UI obscured */
#playable-container.blurred-overlay {
  filter: blur(var(--playable-blur-overlay));
  pointer-events: none;
}

/* Win state — heavy blur, game's native buttons must not be readable */
#playable-container.blurred-win {
  filter: blur(var(--playable-blur-win));
  pointer-events: none;
}

#playable-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--color-dark);
}

/* Tablet / wide-mobile portrait — cap to a phone-sized frame */
@media (min-width: 600px) and (orientation: portrait) {
  #playable-container {
    max-width: 430px;
    max-height: 932px;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(123, 47, 190, 0.4);
  }
}

/* Desktop / landscape — fill the full viewport for the landscape playable */
@media (min-width: 600px) and (orientation: landscape) {
  #playable-container {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   5. OVERLAY SYSTEM
   All four states share .overlay base styles.
   Visibility is controlled by toggling .is-active via app.js.
   ─────────────────────────────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-overlay);
  z-index: 100;
}

.overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}


/* ───────────────────────────────────────────────────────────────────────────
   6. MODAL CARD (shared by all overlays)
   ─────────────────────────────────────────────────────────────────────────── */
.modal {
  position: relative;
  background: url('../assets/modal_background@2x.png') center / 100% 100% no-repeat;
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  max-width: var(--modal-max-width);
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.modal-illustration {
  width: 100%;
  max-width: 304px;
  height: auto;
  display: block;
  /* Negative margin pulls the character up into the frame's top border area,
     creating a natural "hero sits inside the frame" composition. */
  margin-top: -8px;
  margin-bottom: -4px;
}

.modal__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
}

.modal__subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  max-width: 260px;
}


/* ───────────────────────────────────────────────────────────────────────────
   7. BUTTONS
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--cta-padding);
  border: none;
  border-radius: var(--cta-radius);
  font-family: var(--font-main);
  font-size: var(--cta-font-size);
  font-weight: var(--cta-font-weight);
  cursor: pointer;
  transition: var(--transition-btn);
  text-decoration: none;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Primary CTA — "Tap to Play" */
/* Store CTAs — "Download Game" / "Continue" */
/* Both use the gold fantasy button skin. */
.btn--primary,
.btn--store {
  background: url('../assets/button_default.png') center / 100% 100% no-repeat;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  height: 76px;        /* 151px asset ÷ 2 for retina */
  box-shadow: none;
  margin-top: 4px;
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--store:hover,
.btn--store:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: none;
}

.btn--primary:active,
.btn--store:active {
  background-image: url('../assets/button_pressed.png');
  filter: none;
  transform: translateY(1px);
}

/* Secondary — "Try Again" — blue steel button skin */
.btn--secondary {
  background: url('../assets/button_default_restart.png') center / 100% 100% no-repeat;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  height: 76px;
  border: none;
  box-shadow: none;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.btn--secondary:active {
  background-image: url('../assets/button_pressed_restart.png');
  filter: none;
  transform: translateY(1px);
}

/* Hide the Try Again button when retry limit is reached (toggled by app.js) */
.btn--hidden {
  display: none;
}

/* Focus ring for keyboard accessibility */
.btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}


/* ───────────────────────────────────────────────────────────────────────────
   8. STATE-SPECIFIC OVERLAY STYLES
   ─────────────────────────────────────────────────────────────────────────── */

/* Landing overlay — subtle gradient backdrop */
.overlay--landing {
  background: linear-gradient(
    160deg,
    rgba(13, 13, 26, 0.82) 0%,
    rgba(123, 47, 190, 0.45) 100%
  );
}

/* Fail overlay — dark red tint */
.overlay--fail {
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(120, 20, 20, 0.82) 100%
  );
}

/* Fail illustration entrance — subtle droop-in on the character image */
.overlay--fail.is-active .modal-illustration {
  animation: failDroop 0.5s ease-out;
}

@keyframes failDroop {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Win overlay — gold tint */
.overlay--win {
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(245, 166, 35, 0.3) 100%
  );
}


/* ───────────────────────────────────────────────────────────────────────────
   9. WIN STATE — GLOW ANIMATION
   Applied to .modal__title--glow in the win overlay.
   ─────────────────────────────────────────────────────────────────────────── */
.modal__title--glow {
  animation: glowPulse 1.6s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from {
    text-shadow:
      0 0 8px  var(--color-secondary),
      0 0 16px var(--color-secondary);
  }
  to {
    text-shadow:
      0 0 20px var(--color-secondary),
      0 0 40px var(--color-secondary),
      0 0 70px var(--color-accent);
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   10. WIN STATE — CSS PARTICLE BURST
   8 <span> children of .particles each animate outward from the modal centre.
   --tx / --ty drive direction; nth-child sets unique values per particle.
   ─────────────────────────────────────────────────────────────────────────── */
.particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.particles span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* Trigger particle burst when the win overlay becomes active */
.overlay--win.is-active .particles span {
  animation: particleBurst 0.9s ease-out forwards;
}

/* Each particle gets a unique direction (--tx, --ty), colour, and delay */
.particles span:nth-child(1) { --tx: -90px; --ty: -80px; background: var(--color-secondary); animation-delay: 0.05s; }
.particles span:nth-child(2) { --tx:   0px; --ty: -110px; background: var(--color-accent);   animation-delay: 0.10s; }
.particles span:nth-child(3) { --tx:  90px; --ty: -80px;  background: #00C853;               animation-delay: 0.02s; }
.particles span:nth-child(4) { --tx: 110px; --ty:   0px;  background: var(--color-secondary); animation-delay: 0.08s; }
.particles span:nth-child(5) { --tx:  85px; --ty:  90px;  background: #29b6f6;               animation-delay: 0.12s; }
.particles span:nth-child(6) { --tx:   0px; --ty: 110px;  background: var(--color-accent);   animation-delay: 0.04s; }
.particles span:nth-child(7) { --tx: -85px; --ty:  90px;  background: #00C853;               animation-delay: 0.09s; }
.particles span:nth-child(8) { --tx: -110px; --ty:  0px;  background: #29b6f6;               animation-delay: 0.06s; }

@keyframes particleBurst {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + var(--tx)),
      calc(-50% + var(--ty))
    ) scale(0.2);
    opacity: 0;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   11. SITE FOOTER
   Fixed to bottom, low opacity, does not distract from main CTA.
   ─────────────────────────────────────────────────────────────────────────── */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  text-align: center;
  padding: 6px 16px;
  padding-bottom: max(6px, env(safe-area-inset-bottom)); /* iPhone notch support */
  opacity: var(--footer-opacity);
  pointer-events: auto;
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.site-footer__link {
  font-size: var(--footer-font-size);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.site-footer__link:hover {
  text-decoration: underline;
}

.site-footer__sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--footer-font-size);
}

.site-footer__copy {
  display: block;
  font-size: var(--footer-font-size);
  color: rgba(255, 255, 255, 0.5);
}


/* ───────────────────────────────────────────────────────────────────────────
   12. RESPONSIVE — Larger viewports
   On tablet/desktop the playable is capped to a phone-sized frame (see #4),
   so overlays are also constrained to that frame.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .modal {
    padding: 44px 36px;
  }

  .modal__title {
    font-size: 2rem;
  }

  .overlay {
    /* Slight upward offset on portrait tablet to clear the footer */
    padding-bottom: 24px;
  }
}

@media (min-width: 600px) and (orientation: landscape) {
  .overlay {
    /* No offset on landscape — centre perfectly in the viewport */
    padding-bottom: 0;
  }
}