/* Квиз «35 лет школе Липмана». Стиль — по заставкам вечера встречи выпускников 2026
   (Dropbox Лёни): ночной синий, светящийся логотип «Тхия», золотые цифры с засечками.
   Наборный шрифт — Raleway, как на 1311.ru; заголовки — Playfair Display. */
:root {
  --navy: #040b1e;
  --navy2: #0a1f4a;
  --blue: #2f6fc0;
  --sky: #4f8bcf;
  --sky2: #9cc3ef;
  --amber: #de9324;
  --gold: #e9bd62;
  --brick: #d24a3d;
  --green: #22936a;
  --paper: #fbf7ef;
  --ink: #0f1d36;
  --ok: #1fae6c;
  --bad: #d9473b;
  --a0: #d24a3d; /* ▲ */
  --a1: #2f78d6; /* ◆ */
  --a2: #de9324; /* ● */
  --a3: #22936a; /* ■ */
  --r: 18px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(43,104,201,.55) 0%, rgba(20,60,140,.25) 45%, transparent 75%),
    radial-gradient(130% 100% at 50% 40%, #0c2659 0%, var(--navy2) 40%, var(--navy) 100%);
  background-color: var(--navy);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input { font: inherit; }
.script { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--gold); }
.serif { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
/* звёздная пыль, как на заставке */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 28% 78%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 12%, #ffe9b8aa 50%, transparent 51%), radial-gradient(1px 1px at 63% 64%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 81% 31%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 91% 83%, #ffe9b899 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 61%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 37% 44%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 9%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 55% 91%, #fff6 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .75; } }
.hidden { display: none !important; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.6em; border-radius: 999px; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(#f3cf80, #d9a440); color: #241600; box-shadow: 0 6px 0 #8f6418, 0 12px 30px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .08s ease, filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #8f6418, 0 6px 16px rgba(0,0,0,.3); }
.btn.ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.btn[disabled] { filter: grayscale(.8) brightness(.8); pointer-events: none; }

.sign {
  position: fixed; left: 0; right: 0; bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 11px; color: rgba(255,255,255,.32); pointer-events: none; z-index: 1;
  letter-spacing: .02em;
}

/* фигуры вариантов ответа */
.shape { width: 1em; height: 1em; display: inline-block; flex: none; }
.shape svg { width: 100%; height: 100%; display: block; fill: #fff; }
.c0 { background: var(--a0); } .c1 { background: var(--a1); } .c2 { background: var(--a2); } .c3 { background: var(--a3); }

/* меноры-гирлянда на фоне */
.bg-menorah { position: fixed; inset: auto -4vw -6vh auto; width: 42vw; opacity: .07; pointer-events: none; }

/* конфетти и всплывающие реакции */
canvas.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.floater {
  position: absolute; bottom: -80px; font-size: 54px; will-change: transform, opacity;
  animation: floatUp 3.6s cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));
}
.floater small {
  display: block; font-size: 13px; font-weight: 700; text-align: center; color: #fff;
  background: rgba(0,0,0,.35); border-radius: 99px; padding: 1px 8px; margin-top: -6px; white-space: nowrap;
}
@keyframes floatUp {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: 1; transform: translate(var(--dx1), -12vh) scale(1.05); }
  100% { transform: translate(var(--dx2), -95vh) scale(.9); opacity: 0; }
}

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spinIn { from { transform: rotate(-20deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }