@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");

:root {
  --tlo: #14123a;
  --tlo2: #221d5c;
  --karta: #2c2672;
  --tekst: #ffffff;
  --przygaszony: #b9b4ec;
  --akcent: #ffcc33;
  --a: #e8506f;
  --b: #3d8bfd;
  --c: #f0a92e;
  --d: #1fb27e;
  --dobrze: #2fd47f;
  --zle: #ff5a5a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: radial-gradient(circle at 20% 0%, var(--tlo2), var(--tlo) 60%) fixed;
  color: var(--tekst);
  font-family: "Fredoka", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.ukryty { display: none !important; }

.opcja.a { background: var(--a); }
.opcja.b { background: var(--b); }
.opcja.c { background: var(--c); }
.opcja.d { background: var(--d); }

.litera {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  font-weight: 700;
}

.przycisk {
  background: var(--akcent);
  color: #2a1c00;
  font-weight: 600;
  border-radius: 999px;
  padding: .6em 1.6em;
  box-shadow: 0 .25em 0 #b88a00;
  transition: transform .08s;
}
.przycisk:active { transform: translateY(.15em); box-shadow: 0 .1em 0 #b88a00; }
.przycisk:disabled { opacity: .45; cursor: default; }
.przycisk.drugi { background: var(--karta); color: var(--tekst); box-shadow: 0 .25em 0 #17134a; }

@keyframes wjazd { from { opacity: 0; transform: translateY(1.5rem) scale(.97); } to { opacity: 1; transform: none; } }
.wjazd { animation: wjazd .45s ease-out both; }

@keyframes puls { 50% { transform: scale(1.06); } }