/* ==========================================================
   global.css — ZmajRun
   Fonts, CSS variables, resets, and shared utility styles.
   Imported by every page.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Pixelify+Sans:wght@400..700&family=Press+Start+2P&family=VT323&display=swap');

/* ── CSS Variables ── */
:root {
  /* Brand palette */
  --color-sky:        #87CEEB;
  --color-sky-light:  #c9e8f5;
  --color-ground:     #5c4033;
  --color-grass:      #3a9d23;
  --color-grass-dark: #2d7a1c;
  --color-brick:      #c0392b;
  --color-coin:       #f5c518;
  --color-coin-dark:  #c9a10a;

  /* UI palette */
  --color-primary:    #e63946;
  --color-primary-dk: #c1121f;
  --color-secondary:  #3a86ff;
  --color-accent:     #f5c518;
  --color-success:    #38b000;
  --color-dark:       #1a1a2e;
  --color-dark-2:     #16213e;
  --color-dark-3:     #0f3460;
  --color-panel:      rgba(15, 20, 50, 0.92);
  --color-panel-light:rgba(255,255,255,0.08);
  --color-text:       #f0f0f0;
  --color-text-muted: #9a9ab0;
  --color-border:     rgba(255,255,255,0.12);

  /* Typography */
  --font-pixel: 'Pixelify Sans', 'Nunito', sans-serif;
  --font-ui:    'Nunito', sans-serif;

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  40px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(230,57,70,0.4);
  --shadow-coin: 0 0 12px rgba(245,197,24,0.6);

  /* Ad banner height — change this ONE line to resize the banner everywhere */
  --ad-banner-height: 90px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-med:  0.3s ease;
  --transition-slow: 0.5s ease;
}

@media (max-width: 767px) {
  :root {
    --ad-banner-height: 60px;
  }
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-dark);
  color: var(--color-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ── Shared utility classes ── */
.pixel-font { font-family: var(--font-pixel); }
.ui-font    { font-family: var(--font-ui); }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Ad Banner (present on every page) ── */
#ad-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--ad-banner-height);
  background: var(--color-dark);
  border-top: 1px solid #333;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ad-banner .ad-label {
  position: absolute;
  top: 4px;
  left: 6px;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: #555;
  letter-spacing: 0.5px;
}

#ad-slot-banner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
}

/* Placeholder ad content — remove when real AdSense unit is pasted in */
.ad-placeholder {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #444;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-dark-2); }
::-webkit-scrollbar-thumb { background: var(--color-dark-3); border-radius: 3px; }

/* ── Global animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes coinSpin {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.15); }
  100% { transform: scaleX(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}