/* PK Arcade - shared styles. Colours from the Gambian flag. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;600&display=swap");

:root {
  --red: #ce1126;
  --blue: #0c1c8c;
  --green: #3a7728;
  --sand: #fbf3e4;
  --sand-2: #f3e3c3;
  --ink: #1d1a16;
  --muted: #6b6257;
  --card: #fffdf8;
  --radius: 18px;
  --shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 10px 30px -12px rgba(60, 40, 10, .35);
  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--sand);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* flag stripe at the top of every page */
.flag {
  height: 8px;
  background: linear-gradient(to bottom,
    var(--red) 0 30%, #fff 30% 37%, var(--blue) 37% 63%, #fff 63% 70%, var(--green) 70% 100%);
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  max-width: 980px; margin: 0 auto; padding: 14px 18px;
}
.topbar a.back {
  text-decoration: none; color: var(--ink); font-weight: 600;
  background: var(--card); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow);
  white-space: nowrap; flex-shrink: 0;
}
.topbar h1 {
  font-family: var(--display); font-size: clamp(1.3rem, 4vw, 1.9rem); margin: 0; line-height: 1;
}

main { max-width: 980px; margin: 0 auto; padding: 0 18px 60px; }

h2, h3 { font-family: var(--display); }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}

.btn {
  font: 700 1rem var(--display);
  border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer;
  background: var(--blue); color: #fff; box-shadow: 0 3px 0 #050c45;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #050c45; }
.btn.red { background: var(--red); box-shadow: 0 3px 0 #7d0a17; }
.btn.green { background: var(--green); box-shadow: 0 3px 0 #1f4415; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }

.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.toast {
  position: fixed; left: 50%; top: 80px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }

footer.site {
  text-align: center; color: var(--muted); font-size: .85rem; padding: 30px 18px 40px;
}
footer.site a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}