/*
 * Hawks Arcade — Shared Brand CSS v2.0.0
 * {H}awks Arcade · https://the-hawks.net
 *
 * Loaded once on any page containing a Hawks Arcade shortcode.
 * All game stylesheets inherit these variables.
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

:root {
  /* ── Logo-accurate brand palette ─────────────── */
  --ha-gold:         #F5C828;
  --ha-gold-deep:    #F0A000;
  --ha-gold-hover:   #FFD040;
  --ha-orange:       #E87800;
  --ha-blue:         #7CDBF9;
  --ha-blue-deep:    #2B6EA8;
  --ha-navy:         #091A3A;
  --ha-navy-mid:     #122850;
  --ha-red:          #CC1400;
  --ha-yellow:       #FFEC5F;
  --ha-lime:         #78E050;
  --ha-brown:        #8C5028;
  --ha-cream:        #F0E0C8;

  /* ── UI semantic ──────────────────────────────── */
  --ha-bg:           #08090F;
  --ha-surface:      #0E1018;
  --ha-panel:        #161C2C;
  --ha-border:       #1E2A48;
  --ha-border-mid:   #2A3C64;
  --ha-text:         #EEF2FF;
  --ha-text-dim:     #5A6A8A;

  /* ── Glows ────────────────────────────────────── */
  --ha-glow-gold:    0 0 20px rgba(245,200,40,0.55);
  --ha-glow-blue:    0 0 18px rgba(124,219,249,0.45);
  --ha-glow-orange:  0 0 18px rgba(232,120,0,0.45);
  --ha-glow-red:     0 0 16px rgba(204,20,0,0.4);
  --ha-glow-lime:    0 0 16px rgba(120,224,80,0.4);

  /* ── Typography ───────────────────────────────── */
  --ha-font-display: 'Orbitron', monospace;
  --ha-font-body:    'Rajdhani', sans-serif;
}

/* ── Shared logo block used on every game start screen ── */
.ha-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 8px;
}

.ha-logo-img {
  width: 200px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(245,200,40,0.4));
  animation: ha-logo-float 3s ease-in-out infinite;
}

@keyframes ha-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}

/* ── Shared game wrapper base ─────────────────── */
.ha-game-wrap {
  font-family: var(--ha-font-body);
  background: var(--ha-bg);
  color: var(--ha-text);
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--ha-border);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(245,200,40,0.06),
    0 0 80px rgba(245,200,40,0.05);
}

/* ── Shared play button ───────────────────────── */
.ha-play-btn {
  width: 100%;
  padding: 15px;
  background: var(--ha-gold);
  color: #000;
  border: none !important;
  border-radius: 10px;
  font-family: var(--ha-font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.ha-play-btn:hover {
  background: var(--ha-gold-hover);
  box-shadow: var(--ha-glow-gold);
  transform: translateY(-2px);
}

/* ── Shared modal overlay ─────────────────────── */
.ha-modal {
  position: absolute;
  inset: 0;
  background: rgba(8,9,15,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: ha-modal-in 0.25s ease;
}

@keyframes ha-modal-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.ha-modal-box {
  background: var(--ha-panel);
  border: 2px solid var(--ha-gold);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 90%;
  max-width: 300px;
  box-shadow: var(--ha-glow-gold), 0 24px 60px rgba(0,0,0,0.6);
}

/* ── Shared confetti particle ─────────────────── */
.ha-confetti {
  position: fixed;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: ha-confetti-fall linear forwards;
}

@keyframes ha-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Utility: section label ───────────────────── */
.ha-section-label {
  font-family: var(--ha-font-display);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--ha-text-dim);
  align-self: flex-start;
}