/*
 * Seria 2 — wspólne atomy w języku wizualnym GeoGuessr.
 * Kolory: design.geoguessr.com (#E94555, #10101C, #1A1A2E, #7950E5) + tokeny „ds-color” z obecnej strony.
 */
:root {
  --gg-purple: #7950e5;
  --gg-purple-30: #a685ff;
  --gg-purple-70: #4a2399;
  --gg-purple-90: #351370;
  --gg-purple-100: #171235;
  --gg-ink: #10101c;
  --gg-navy: #1a1a2e;
  --gg-red: #e94555;
  --gg-red-logo: #cf142b;
  --gg-green-20: #c9f75d;
  --gg-green-50: #97e851;
  --gg-green-70: #68c045;
  --gg-green-80: #479440;
  --gg-yellow-20: #ffcf4a;
  --gg-yellow-50: #ffc628;
  --gg-yellow-80: #ffa00c;
  --gg-orange-70: #e9802b;
  --gg-blue-20: #42c0ff;
  --gg-blue-50: #00a2fe;
  --gg-blue-80: #0f5cad;
  --gg-turq-50: #3ae8bd;
  --gg-turq-80: #0d7a7a;
  --gg-magenta: #ff3ce8;
}

/* Przycisk „PLAY” — pigułka z fazą na dole, kursywa, cień pod tekstem. */
.gg-btn {
  --top: #a8e86b;
  --mid: #6cb928;
  --edge: #3d7c16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.72em 1.5em 0.78em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(var(--top), var(--mid) 60%);
  color: #fff;
  font: 900 italic 1rem/1 'GeoGuessr-Sans', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.16), 0 4px 0 var(--edge), 0 9px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.gg-btn:hover { filter: brightness(1.06); }
.gg-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.16), 0 1px 0 var(--edge), 0 4px 10px rgba(0, 0, 0, 0.25); }
.gg-btn svg { width: 1.05em; height: 1.05em; }
.gg-btn--purple { --top: #b79bff; --mid: #7950e5; --edge: #3a1c86; }
.gg-btn--red { --top: #ff8a94; --mid: #e94555; --edge: #8f1f2c; }
.gg-btn--gold { --top: #ffe27a; --mid: #ffb21a; --edge: #9a5a00; color: #3a2200; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.gg-btn--white { --top: #ffffff; --mid: #ece8ff; --edge: #9b8fd0; color: #2a1060; text-shadow: none; }
.gg-btn--small { font-size: 0.82rem; padding: 0.6em 1.1em 0.66em; }

/* Napis-naklejka jak logotyp GeoGuessr: białe wypełnienie, gruby obrys. */
.gg-sticker {
  --stroke: #2a1060;
  color: #fff;
  font-family: 'GeoGuessr-Sans', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  -webkit-text-stroke: 0.15em var(--stroke);
  paint-order: stroke fill;
  letter-spacing: 0.01em;
}
/* Neonowy obrys jak oprawa sezonu WC27. */
.gg-neon {
  --neon: #ff3ce8;
  color: transparent;
  font-family: 'GeoGuessr-Sans', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  -webkit-text-stroke: 0.045em var(--neon);
  filter: drop-shadow(0 0 0.08em var(--neon)) drop-shadow(0 0 0.3em color-mix(in srgb, var(--neon) 60%, transparent));
}

.gg-av { display: inline-block; flex: none; width: var(--s, 48px); height: var(--s, 48px); }
.gg-ic { display: inline-block; flex: none; width: var(--s, 28px); height: var(--s, 28px); }
.gg-ic svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .gg-btn { transition: none; }
}