/* QRV — warstwa stylów poza Tailwindem: animacje, scrollbary, drobiazgi radiowe. */

:root {
  --dial: #f5a524;
  --good: #34d399;
  --bad: #f87171;
}

html, body { background: #0a0a0b; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }

/* bezpieczne marginesy pod notch/pasek gestów */
.safe-b { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-t { padding-top: env(safe-area-inset-top, 0px); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0b; }
::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 6px; border: 2px solid #0a0a0b; }
::-webkit-scrollbar-thumb:hover { background: #3a3a44; }

/* delikatna siatka w tle — jak podziałka na skali radia */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 44px 44px;
}

.glow-dial { box-shadow: 0 0 0 1px rgba(245,165,36,.25), 0 0 34px -8px rgba(245,165,36,.45); }
.glow-good { box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 0 34px -10px rgba(52,211,153,.5); }
.glow-bad  { box-shadow: 0 0 0 1px rgba(248,113,113,.35), 0 0 34px -10px rgba(248,113,113,.5); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .28s cubic-bezier(.22,1,.36,1) both; }

@keyframes pop { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .22s cubic-bezier(.22,1,.36,1) both; }

@keyframes shake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes sweep { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.sweep {
  background: linear-gradient(100deg, transparent 20%, rgba(245,165,36,.16) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: sweep 2.4s linear infinite;
}

/* przyciski odpowiedzi — duży cel dotykowy, wyraźny stan */
.opt {
  transition: background-color .13s ease, border-color .13s ease, transform .08s ease;
}
.opt:active { transform: scale(.988); }

/* obrazki schematów: białe tło pod czarną kreską, żeby było czytelnie w ciemnym motywie */
.schem {
  background: #fff;
  border-radius: .75rem;
  padding: .5rem;
  max-width: 100%;
  height: auto;
}

/* wykres słupkowy aktywności */
.bar { transition: height .35s cubic-bezier(.22,1,.36,1); }

/* pasek postępu sesji */
.progress-track { background: #1e1e23; }
.progress-fill { transition: width .3s cubic-bezier(.22,1,.36,1); }

/* liczby monospaced z równą szerokością cyfr */
.tnum { font-variant-numeric: tabular-nums; }

/* nie chcemy zoomu iOS przy focusie inputa */
input, select, textarea { font-size: 16px; }
@media (min-width: 640px) { input, select, textarea { font-size: inherit; } }

/* wyłącz animacje gdy user tego chce */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}