/* Wspólne tokeny Quizowni (laptop + telefon) */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #0d0b1e;
  --bg-2: #17133a;
  --panel: rgba(255, 255, 255, 0.07);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.66);
  --accent: #ffd23f;
  --accent-2: #ff4fa3;
  --accent-3: #41e0d0;
  --good: #3ddc84;
  --bad: #ff4d6d;
  /* kolory odpowiedzi – takie same na ekranie i telefonie */
  --a0: #ff4d6d;
  --a1: #ffb627;
  --a2: #22c7a9;
  --a3: #4d7cff;
  --radius: 22px;
  --font: 'Rubik', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input { font: inherit; }

.ans-0 { --c: var(--a0); }
.ans-1 { --c: var(--a1); }
.ans-2 { --c: var(--a2); }
.ans-3 { --c: var(--a3); }

.shape::before { display: inline-block; width: 1em; text-align: center; }
.ans-0 .shape::before { content: '▲'; }
.ans-1 .shape::before { content: '◆'; }
.ans-2 .shape::before { content: '●'; }
.ans-3 .shape::before { content: '■'; }

.timer { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.timer > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-3), var(--accent)); transform-origin: left; border-radius: 99px; }
.timer.low > i { background: linear-gradient(90deg, var(--bad), var(--accent-2)); }

@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 70% { transform: scale(1.06); opacity: 1 } 100% { transform: scale(1) } }
@keyframes rise { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes shake { 0%,100% { transform: none } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; }
.rise { animation: rise .5s ease both; }