/* Квиз «Кто лучше всех знает Шошу?». Стиль — по открытке бат-мицвы Шошаны
   (shoshana-batmitzva.pages.dev): кремовая бумага, акварельные розовые цветы, шалфей, золото.
   Заголовки — Cormorant Garamond (иврит — Frank Ruhl Libre), каллиграфия — Great Vibes / Marck Script,
   наборный — Rubik: в нём есть и кириллица, и иврит. */
:root {
  --paper: #fbf4ec;
  --paper2: #f5e7dc;
  --card: #fffaf5;
  --ink: #4a2c2a;
  --ink2: #7b5c55;
  --rose: #c9566e;
  --rose-d: #a33d55;
  --blush: #f4d6d3;
  --sage: #7d8c6a;
  --sage-d: #5d6b4d;
  --gold: #b88a3e;
  --gold-l: #dcbd7f;
  --ok: #4f9a6a;
  --bad: #c9564d;
  --a0: #d0587a; /* ▲ роза */
  --a1: #5f8a6e; /* ◆ шалфей */
  --a2: #c48f2f; /* ● золото */
  --a3: #6a72b5; /* ■ лаванда */
  --r: 18px;
  --sans: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif;
  --he: 'Frank Ruhl Libre', 'Rubik', serif;
  --script: 'Great Vibes', 'Marck Script', cursive;
  font-family: var(--sans);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(40% 35% at 8% 12%, rgba(240, 190, 190, .35), transparent 70%),
    radial-gradient(45% 40% at 92% 88%, rgba(200, 214, 182, .35), transparent 70%),
    radial-gradient(60% 50% at 50% 40%, #fffaf4 0%, transparent 80%),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* акварельные цветы из открытки — в углах, не мешают тексту */
body::before, body::after {
  content: ''; position: fixed; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain;
}
body::before { left: 0; top: 0; width: 18vmin; height: 46vmin; background-image: url(/img/flowers-left.webp); background-position: left top; opacity: .9; }
body::after { right: 0; bottom: 0; width: 26vmin; height: 37vmin; background-image: url(/img/flowers-right.webp); background-position: right bottom; opacity: .9; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input { font: inherit; }
.script { font-family: var(--script); font-weight: 400; color: var(--rose); }
.serif { font-family: var(--serif); }
.he { font-family: var(--he); direction: rtl; unicode-bidi: isolate; }
.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: 700; letter-spacing: .01em;
  background: linear-gradient(#d86d85, var(--rose-d)); color: #fff; box-shadow: 0 5px 0 #7d2a3f, 0 12px 26px rgba(122, 45, 63, .25);
  transition: transform .08s ease, box-shadow .08s ease, filter .2s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #7d2a3f, 0 6px 14px rgba(122, 45, 63, .2); }
.btn.gold { background: linear-gradient(#e2c27e, #b88a3e); color: #3b2508; box-shadow: 0 5px 0 #80601f, 0 12px 26px rgba(120, 90, 30, .25); }
.btn.ghost { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(184, 138, 62, .45); }
.btn[disabled] { filter: grayscale(.7) opacity(.7); 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(74, 44, 42, .38); 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); }
.c0, .c1, .c2, .c3 { color: #fff; }

/* торт со свечами */
.cake { display: block; width: 100%; height: 100%; overflow: visible; }
.cake .fl { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .4s; }
.cake .glow { opacity: 0; transition: opacity .4s; }
.cake .on .fl { opacity: 1; animation: flicker .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
.cake .on .glow { opacity: .55; }
.cake .new .fl { animation: ignite .9s both, flicker .9s .9s ease-in-out infinite alternate; }
.cake .smoke { opacity: 0; }
.cake.blown .fl, .cake.blown .glow { opacity: 0 !important; transition: opacity .25s calc(var(--i) * 40ms); }
.cake.blown .on .smoke { animation: smoke 2.4s calc(var(--i) * 40ms) ease-out both; }
@keyframes flicker { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.9, 1.12) rotate(3deg); } }
@keyframes ignite { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(1); } }
@keyframes smoke { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .7; } 100% { opacity: 0; transform: translate(6px, -40px); } }

/* конфетти и всплывающие реакции */
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(74, 44, 42, .2));
}
.floater small {
  display: block; font-size: 13px; font-weight: 600; text-align: center; color: #fff;
  background: rgba(74, 44, 42, .55); 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); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }