/* ═══════════════════════════════════════════════════════════════════
   GGR PWA Banner — External CSS (CSP-compliant, no unsafe-inline)
   Extracted from pwa-banner.js V113 dynamic <style> injection
   ═══════════════════════════════════════════════════════════════════ */

/* ── Show/Hide utility classes (replaces inline style.display) ── */
#GGR_BANNER.pwa-shown,
#GGR_IOS_BANNER.pwa-shown { display: flex }
#GGR_FAB.pwa-shown { display: block }

/* ── Android/Chrome Install Banner ────────────────────────────── */
#GGR_BANNER {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(175deg, rgba(3,8,16,.98) 0%, rgba(1,5,12,.995) 100%);
  border-top: 1px solid rgba(212,175,55,.22);
  padding: 18px 22px max(18px, env(safe-area-inset-bottom, 18px));
  display: none; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 -8px 48px rgba(0,0,0,.6), 0 -2px 0 rgba(212,175,55,.06);
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
#GGR_BANNER.v { transform: translateY(0) }
#GGR_BANNER::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
}

#GGR_BANNER .gb-proof {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(7px, 1.9vw, 9px); font-weight: 800; letter-spacing: 2px;
  color: rgba(0,210,100,.6); text-transform: uppercase;
}
#GGR_BANNER .gb-proof span { color: rgba(0,210,100,.38) }

#GGR_BANNER .gb-row {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 380px;
}
#GGR_BANNER .gb-icon {
  font-size: clamp(34px, 9vw, 42px); flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.5));
  animation: gbrIconBob 3s ease-in-out infinite;
}
@keyframes gbrIconBob {
  0%, 100% { transform: translateY(0) rotate(-3deg) }
  50% { transform: translateY(-5px) rotate(3deg) }
}

#GGR_BANNER .gb-text { flex: 1; min-width: 0 }
#GGR_BANNER .gb-title {
  font-size: clamp(13px, 3.6vw, 16px); font-weight: 900; letter-spacing: 2px;
  color: #F5F0E8; line-height: 1.2; margin-bottom: 3px;
}
#GGR_BANNER .gb-sub {
  font-size: clamp(9px, 2.4vw, 11px); font-weight: 700; letter-spacing: 1px;
  color: rgba(212,175,55,.5); text-transform: uppercase; line-height: 1.4;
}

#GGR_BANNER .gb-install {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,120,70,.45), rgba(0,175,88,.32));
  border: 2px solid rgba(0,210,100,.8);
  color: rgba(0,228,108,.97);
  font-size: clamp(12px, 3.2vw, 14px); font-weight: 900; letter-spacing: 4px;
  text-transform: uppercase; padding: 15px 0;
  width: 100%; max-width: 380px; cursor: pointer;
  transition: transform .12s, background .12s, box-shadow .12s;
  box-shadow: 0 0 0 0 rgba(0,210,100,.4);
  animation: gbrBtnPulse 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes gbrBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,210,100,.35), 0 0 22px rgba(0,210,100,.1) }
  50% { box-shadow: 0 0 0 6px rgba(0,210,100,.0), 0 0 36px rgba(0,210,100,.18) }
}
#GGR_BANNER .gb-install::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: gbrShimmer 3s ease-in-out infinite 1.2s; pointer-events: none;
}
@keyframes gbrShimmer { 0% { left: -100% } 60%, 100% { left: 160% } }
#GGR_BANNER .gb-install:active {
  transform: scale(.96);
  background: rgba(0,140,70,.45);
  box-shadow: 0 0 32px rgba(0,210,100,.3);
  animation: none;
}

/* ── Ripple (CSS custom properties for dynamic position) ──────── */
.gb-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(0,210,100,.25);
  transform: scale(0); pointer-events: none;
  animation: gbrRipple .55s ease-out forwards;
  width: var(--rp-s); height: var(--rp-s);
  left: var(--rp-x); top: var(--rp-y);
}
@keyframes gbrRipple { to { transform: scale(4); opacity: 0 } }

#GGR_BANNER .gb-dismiss {
  background: none; border: none;
  color: rgba(245,240,232,.18);
  font-size: clamp(8px, 2.1vw, 9px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 3px 8px; cursor: pointer;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
#GGR_BANNER .gb-dismiss:active { color: rgba(245,240,232,.4) }

/* ── iOS Install Banner ───────────────────────────────────────── */
#GGR_IOS_BANNER {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(175deg, rgba(3,8,16,.98), rgba(1,5,12,.995));
  border-top: 1px solid rgba(212,175,55,.22);
  padding: 16px 20px max(16px, env(safe-area-inset-bottom, 16px));
  display: none; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 -8px 48px rgba(0,0,0,.6);
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
#GGR_IOS_BANNER::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
}
#GGR_IOS_BANNER.v { transform: translateY(0) }

#GGR_IOS_BANNER .gib-title {
  font-size: clamp(12px, 3.4vw, 15px); font-weight: 900; letter-spacing: 2px;
  color: #F5F0E8; text-align: center;
}
#GGR_IOS_BANNER .gib-steps {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
#GGR_IOS_BANNER .gib-step {
  font-size: clamp(9px, 2.3vw, 11px); font-weight: 700; letter-spacing: 1px;
  color: rgba(212,175,55,.65); text-align: center;
}
#GGR_IOS_BANNER .gib-step strong { color: rgba(212,175,55,.95); font-size: 1.15em }
#GGR_IOS_BANNER .gib-dismiss {
  background: none; border: none;
  color: rgba(245,240,232,.18);
  font-size: clamp(8px, 2.1vw, 9px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 4px 8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── FAB (Floating Action Button) ─────────────────────────────── */
#GGR_FAB {
  position: fixed;
  bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px));
  left: 50%; transform: translateX(-50%) translateY(22px);
  z-index: 199;
  background: linear-gradient(135deg, rgba(0,115,65,.93), rgba(0,168,82,.87));
  border: 2px solid rgba(0,210,100,.88);
  color: rgba(245,240,232,.97);
  font-size: clamp(10px, 2.8vw, 12px); font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase; padding: 13px 28px;
  cursor: pointer; white-space: nowrap; display: none;
  box-shadow: 0 8px 32px rgba(0,160,80,.45), 0 0 60px rgba(0,210,100,.08);
  opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1),
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
#GGR_FAB.v {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
  animation: fabWiggle 4.5s ease-in-out infinite 2.5s;
}
@keyframes fabWiggle {
  0%, 82%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg) }
  85% { transform: translateX(-50%) translateY(-4px) rotate(-1.5deg) }
  89% { transform: translateX(-50%) translateY(1px) rotate(1deg) }
  93% { transform: translateX(-50%) translateY(-2px) rotate(-.5deg) }
  97% { transform: translateX(-50%) translateY(0) rotate(0deg) }
}
#GGR_FAB:active {
  transform: translateX(-50%) translateY(0) scale(.93) !important;
  box-shadow: 0 4px 18px rgba(0,160,80,.5); animation: none;
}

/* ── Toast ─────────────────────────────────────────────────────── */
#GGR_TOAST2 {
  position: fixed;
  bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px));
  left: 50%; transform: translateX(-50%) translateY(22px);
  background: linear-gradient(135deg, rgba(0,120,60,.97), rgba(0,155,75,.97));
  border: 1px solid rgba(0,210,100,.45); color: rgba(245,240,232,.97);
  font-size: clamp(9px, 2.4vw, 10px); font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; padding: 10px 22px;
  z-index: 201; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; box-shadow: 0 4px 22px rgba(0,150,70,.4);
}
#GGR_TOAST2.v { opacity: 1; transform: translateX(-50%) translateY(0) }