/* «Квиз»: предметы игрока (контракт — _notes/items-contract.md, раздел «Квиз»).
   buzzer — кнопки ответа .qz-btn.qb-<css>, cheer — вспышка за верный ответ .qz-cheer.qc-<css>,
   backdrop — картинка /art/items/<id>.webp. Подключён глобально: те же классы рисуют превью в инвентаре. */

/* ---------- кнопка ответа ---------- */
.qz-btn {
  --qb-bg: linear-gradient(180deg, #2b2231, #18121d);
  --qb-ink: #f5ede1;
  --qb-edge: rgba(245, 237, 225, 0.16);
  --qb-key-bg: rgba(217, 183, 122, 0.14);
  --qb-key-ink: #e6c98f;
  --qb-glow: rgba(217, 183, 122, 0.55);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--qb-bg);
  color: var(--qb-ink);
  box-shadow: 0 0 0 1px var(--qb-edge) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
  font: 650 15px/1.25 var(--sans, "Manrope", sans-serif);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.qz-btn .qz-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--qb-key-bg);
  color: var(--qb-key-ink);
  font: 700 17px/1 var(--display, "Cormorant Garamond", serif);
}
.qz-btn .qz-label { min-width: 0; overflow-wrap: anywhere; }

.qz-btn.qb-slate {
  --qb-bg: linear-gradient(180deg, #2f3533, #1c201f);
  --qb-ink: #f1efe6;
  --qb-edge: rgba(241, 239, 230, 0.42);
  --qb-key-bg: rgba(241, 239, 230, 0.1);
  --qb-key-ink: #f1efe6;
  --qb-glow: rgba(241, 239, 230, 0.5);
  background-image: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.07), transparent 60%), var(--qb-bg);
}
.qz-btn.qb-slate .qz-key { box-shadow: 0 0 0 1px rgba(241, 239, 230, 0.4) inset; border-radius: 50%; }
.qz-btn.qb-brass {
  --qb-bg: linear-gradient(180deg, #5b4421, #2d200d);
  --qb-ink: #ffe9c2;
  --qb-edge: rgba(230, 190, 115, 0.7);
  --qb-key-bg: linear-gradient(180deg, #f2cf86, #a87a32);
  --qb-key-ink: #2a1a06;
  --qb-glow: rgba(242, 207, 134, 0.6);
}
.qz-btn.qb-ivory {
  --qb-bg: linear-gradient(180deg, #f6efdf, #ddd0b3);
  --qb-ink: #2a2016;
  --qb-edge: rgba(80, 60, 30, 0.35);
  --qb-key-bg: #2a2016;
  --qb-key-ink: #f6efdf;
  --qb-glow: rgba(246, 239, 223, 0.7);
}
.qz-btn.qb-velvet {
  --qb-bg: radial-gradient(120% 140% at 30% 0%, #8d1a39, #3d0815 70%);
  --qb-ink: #fff1ea;
  --qb-edge: rgba(230, 196, 132, 0.65);
  --qb-key-bg: rgba(0, 0, 0, 0.28);
  --qb-key-ink: #f3cf8a;
  --qb-glow: rgba(229, 72, 107, 0.6);
}
.qz-btn.qb-neon {
  --qb-bg: linear-gradient(180deg, #160b18, #0b060d);
  --qb-ink: #ffe3f1;
  --qb-edge: #ff4fa3;
  --qb-key-bg: transparent;
  --qb-key-ink: #7ef9ff;
  --qb-glow: rgba(255, 79, 163, 0.75);
  box-shadow: 0 0 0 1.5px #ff4fa3 inset, 0 0 14px rgba(255, 79, 163, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 8px rgba(255, 79, 163, 0.7);
}
.qz-btn.qb-neon .qz-key { box-shadow: 0 0 0 1.5px #7ef9ff inset, 0 0 10px rgba(126, 249, 255, 0.55); text-shadow: 0 0 8px rgba(126, 249, 255, 0.9); }
.qz-btn.qb-marble {
  --qb-bg:
    linear-gradient(118deg, transparent 38%, rgba(222, 186, 112, 0.42) 40%, transparent 42.5%),
    linear-gradient(64deg, transparent 62%, rgba(222, 186, 112, 0.28) 63.5%, transparent 65%),
    radial-gradient(90% 120% at 80% 10%, #2c2c2f, #0f0f11 70%);
  --qb-ink: #f4ead8;
  --qb-edge: rgba(222, 186, 112, 0.5);
  --qb-key-bg: rgba(222, 186, 112, 0.16);
  --qb-key-ink: #ecc983;
}
.qz-btn.qb-gilt {
  --qb-bg: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px), linear-gradient(180deg, #f3d79b, #c09042 55%, #8d6424);
  --qb-ink: #2a1a06;
  --qb-edge: rgba(255, 238, 196, 0.85);
  --qb-key-bg: rgba(42, 26, 6, 0.85);
  --qb-key-ink: #f3d79b;
  --qb-glow: rgba(243, 215, 155, 0.8);
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.6);
}
.qz-btn.qb-aurora {
  --qb-ink: #eef6ff;
  --qb-key-bg: rgba(91, 157, 255, 0.18);
  --qb-key-ink: #a9f0d1;
  --qb-glow: rgba(120, 190, 255, 0.7);
  border: 2px solid transparent;
  background: linear-gradient(180deg, #151228, #0b0a17) padding-box, linear-gradient(110deg, #5fcf98, #5b9dff, #b26bff, #5fcf98, #5b9dff) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: qb-aurora 6s linear infinite;
}
@keyframes qb-aurora { to { background-position: 0 0, 300% 0; } }
.qz-btn.qb-sovereign {
  --qb-ink: #ffefcf;
  --qb-key-bg: radial-gradient(circle at 35% 30%, #e0405f, #7c0a22);
  --qb-key-ink: #ffe2a6;
  --qb-glow: rgba(255, 210, 120, 0.85);
  border: 2px solid transparent;
  background: radial-gradient(120% 140% at 25% 0%, #2a1a12, #0b0806 70%) padding-box, linear-gradient(120deg, #8d6424, #ffe7a8, #c99a45, #fff3cc, #8d6424) border-box;
  background-size: 100% 100%, 260% 100%;
  animation: qb-gold-edge 5s ease-in-out infinite;
}
.qz-btn.qb-sovereign::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 231, 168, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: qb-sheen 3.6s ease-in-out infinite;
}
.qz-btn.qb-sovereign .qz-key { box-shadow: 0 0 0 1px rgba(255, 226, 166, 0.7) inset, 0 0 10px rgba(224, 64, 95, 0.55); }
@keyframes qb-gold-edge { 50% { background-position: 0 0, 100% 0; } }
@keyframes qb-sheen { 0%, 40% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }

/* пятая волна */
.qz-btn.qb-oak {
  --qb-bg: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px), linear-gradient(180deg, #6a4526, #3b2412);
  --qb-ink: #f6e8d2;
  --qb-edge: rgba(230, 196, 132, 0.4);
  --qb-key-bg: rgba(0, 0, 0, 0.3);
  --qb-key-ink: #e6c98f;
  --qb-glow: rgba(230, 196, 132, 0.5);
}
.qz-btn.qb-frost {
  --qb-bg: radial-gradient(120% 90% at 20% 0%, rgba(230, 245, 255, 0.22), transparent 60%), linear-gradient(180deg, #2a3a4c, #141e2a);
  --qb-ink: #eef7ff;
  --qb-edge: rgba(200, 230, 255, 0.6);
  --qb-key-bg: rgba(200, 230, 255, 0.14);
  --qb-key-ink: #d8eef8;
  --qb-glow: rgba(180, 220, 255, 0.65);
}
.qz-btn.qb-frost .qz-key { box-shadow: 0 0 0 1px rgba(216, 238, 248, 0.55) inset; }

/* ---------- салют за верный ответ ---------- */
.qz-cheer {
  --qc-size: 84px;
  position: absolute;
  z-index: 30;
  width: var(--qc-size);
  height: var(--qc-size);
  margin: calc(var(--qc-size) / -2) 0 0 calc(var(--qc-size) / -2);
  pointer-events: none;
}
.qz-cheer::before, .qz-cheer::after { content: ""; position: absolute; inset: 0; }
.qz-cheer::after { background: center / 60% no-repeat; animation: qc-pop 1.5s cubic-bezier(.2, .9, .3, 1.2) forwards; }
/* по умолчанию (без предмета) — мягкая золотая вспышка */
.qz-cheer::before { border-radius: 50%; animation: qc-ring 1.2s ease-out forwards; box-shadow: 0 0 0 2px rgba(143, 224, 180, 0.9); }

.qz-cheer.qc-spark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c46b' d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z'/%3E%3C/svg%3E");
}
.qz-cheer.qc-spark::before {
  box-shadow: none;
  border-radius: 0;
  background:
    radial-gradient(circle, #ffe6a3 0 2px, transparent 3px) 15% 20% / 12px 12px no-repeat,
    radial-gradient(circle, #ffe6a3 0 2px, transparent 3px) 80% 25% / 12px 12px no-repeat,
    radial-gradient(circle, #f3c46b 0 2px, transparent 3px) 25% 85% / 12px 12px no-repeat,
    radial-gradient(circle, #f3c46b 0 2px, transparent 3px) 85% 75% / 12px 12px no-repeat;
  animation: qc-burst 1.2s ease-out forwards;
}
.qz-cheer.qc-bell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c46b' d='M12 2a1.5 1.5 0 0 1 1.5 1.5v.6A6 6 0 0 1 18 10v4l2 3H4l2-3v-4a6 6 0 0 1 4.5-5.9v-.6A1.5 1.5 0 0 1 12 2zm-2.5 17h5a2.5 2.5 0 0 1-5 0z'/%3E%3C/svg%3E");
  transform-origin: 50% 15%;
  animation: qc-ring-bell 1.6s ease-out forwards;
}
.qz-cheer.qc-bell::before { box-shadow: 0 0 0 2px rgba(243, 196, 107, 0.85); animation: qc-ring 1.1s ease-out 0.15s both, qc-ring 1.1s ease-out 0.5s both; }
.qz-cheer.qc-confetti::after { display: none; }
.qz-cheer.qc-confetti::before {
  box-shadow: none;
  border-radius: 0;
  background:
    linear-gradient(#e5486b, #e5486b) 10% 20% / 6px 10px no-repeat,
    linear-gradient(#f3c46b, #f3c46b) 30% 5% / 8px 5px no-repeat,
    linear-gradient(#5fcf98, #5fcf98) 55% 15% / 5px 9px no-repeat,
    linear-gradient(#5b9dff, #5b9dff) 80% 8% / 7px 6px no-repeat,
    linear-gradient(#f3c46b, #f3c46b) 92% 30% / 5px 8px no-repeat,
    linear-gradient(#b26bff, #b26bff) 20% 45% / 7px 5px no-repeat,
    linear-gradient(#e5486b, #e5486b) 68% 40% / 5px 7px no-repeat;
  animation: qc-fall 1.6s ease-in forwards;
}
.qz-cheer.qc-laurel::after {
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23d9b77a'%3E%3Cpath d='M24 44C13 42 6 33 7 20' fill='none' stroke='%23d9b77a' stroke-width='1.6'/%3E%3Cpath d='M24 44c11-2 18-11 17-24' fill='none' stroke='%23d9b77a' stroke-width='1.6'/%3E%3Cellipse cx='8' cy='18' rx='2' ry='4.5' transform='rotate(-20 8 18)'/%3E%3Cellipse cx='8.5' cy='26' rx='2' ry='4.5' transform='rotate(-45 8.5 26)'/%3E%3Cellipse cx='11.5' cy='33' rx='2' ry='4.5' transform='rotate(-60 11.5 33)'/%3E%3Cellipse cx='17' cy='39' rx='2' ry='4.5' transform='rotate(-75 17 39)'/%3E%3Cellipse cx='40' cy='18' rx='2' ry='4.5' transform='rotate(20 40 18)'/%3E%3Cellipse cx='39.5' cy='26' rx='2' ry='4.5' transform='rotate(45 39.5 26)'/%3E%3Cellipse cx='36.5' cy='33' rx='2' ry='4.5' transform='rotate(60 36.5 33)'/%3E%3Cellipse cx='31' cy='39' rx='2' ry='4.5' transform='rotate(75 31 39)'/%3E%3C/g%3E%3C/svg%3E");
  animation: qc-wreath 1.8s cubic-bezier(.2, .9, .3, 1) forwards;
}
.qz-cheer.qc-laurel::before { box-shadow: 0 0 22px 4px rgba(217, 183, 122, 0.45); animation: qc-ring 1.6s ease-out forwards; }
.qz-cheer.qc-lamp::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffe9a8' d='M12 2a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2zM9 19h6v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 10px rgba(255, 233, 168, 0.95));
  animation: qc-pop 1.8s cubic-bezier(.2, .9, .3, 1.2) forwards, qc-flicker 1.8s steps(1) forwards;
}
.qz-cheer.qc-lamp::before {
  border-radius: 50%;
  box-shadow: none;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.85), rgba(255, 220, 140, 0.25) 45%, transparent 70%);
  animation: qc-glow 1.8s ease-out forwards;
}
.qz-cheer.qc-crown { --qc-size: 110px; }
.qz-cheer.qc-crown::after {
  background-size: 52%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c46b' stroke='%23fff0c8' stroke-width='.6' d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3Ccircle cx='12' cy='14' r='1.7' fill='%23c41e3a'/%3E%3Ccircle cx='7.5' cy='14.5' r='1' fill='%23fff0c8'/%3E%3Ccircle cx='16.5' cy='14.5' r='1' fill='%23fff0c8'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.9));
  animation: qc-crown 2.2s cubic-bezier(.2, .9, .3, 1) forwards;
}
.qz-cheer.qc-crown::before {
  border-radius: 50%;
  box-shadow: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 130, 0.55) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%);
  mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%);
  animation: qc-rays 2.2s ease-out forwards;
}

/* пятая волна */
.qz-cheer.qc-star::after {
  background-size: 54%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c46b' stroke='%23fff0c8' stroke-width='.6' d='M12 2.5l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8 6.2 20l1.4-6.4L2.7 9.2l6.5-.7z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(255, 215, 130, 0.75));
}
.qz-cheer.qc-star::before { box-shadow: 0 0 0 2px rgba(243, 196, 107, 0.8); }
.qz-cheer.qc-medal::after {
  background-size: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8284c' d='M7 1h4l2 7H9z'/%3E%3Cpath fill='%23e5486b' d='M17 1h-4l-2 7h4z'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23e3b85c' stroke='%23fff0c8' stroke-width='.8'/%3E%3Ccircle cx='12' cy='15' r='4.6' fill='none' stroke='%238a6a33' stroke-width='.8'/%3E%3Cpath fill='%23fff0c8' d='M12 11.6l1 2.1 2.3.3-1.7 1.6.4 2.3-2-1.1-2 1.1.4-2.3-1.7-1.6 2.3-.3z'/%3E%3C/svg%3E");
  transform-origin: 50% 0;
  filter: drop-shadow(0 0 6px rgba(255, 215, 130, 0.7));
  animation: qc-ring-bell 1.8s ease-out forwards;
}
.qz-cheer.qc-medal::before { box-shadow: 0 0 18px 3px rgba(229, 72, 107, 0.4); animation: qc-ring 1.4s ease-out forwards; }

@keyframes qc-pop { 0% { opacity: 0; transform: translateY(16px) scale(0.3); } 25% { opacity: 1; transform: translateY(-6px) scale(1.15); } 45% { transform: translateY(-10px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(0.95); } }
@keyframes qc-ring { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes qc-burst { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(40deg); } }
@keyframes qc-ring-bell { 0% { opacity: 0; transform: translateY(10px) scale(0.4); } 20% { opacity: 1; transform: scale(1.1) rotate(0); } 32% { transform: rotate(18deg); } 44% { transform: rotate(-16deg); } 56% { transform: rotate(10deg); } 68% { transform: rotate(-6deg); } 80% { opacity: 1; transform: rotate(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes qc-fall { 0% { opacity: 0; transform: translateY(-30px) rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px) rotate(25deg); } }
@keyframes qc-wreath { 0% { opacity: 0; transform: translateY(-40px) scale(0.6) rotate(-20deg); } 35% { opacity: 1; transform: translateY(0) scale(1.05) rotate(0); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes qc-flicker { 0%, 12%, 20% { opacity: 1; } 8%, 16% { opacity: 0.3; } }
@keyframes qc-glow { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes qc-crown { 0% { opacity: 0; transform: translateY(-70px) rotate(-14deg) scale(0.7); } 35% { opacity: 1; transform: translateY(0) rotate(0) scale(1.1); } 50% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes qc-rays { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(60deg); } }

/* ---------- превью в инвентаре ---------- */
.thumb--buzzer, .thumb--cheer { background: radial-gradient(120% 90% at 50% 0%, #2a1d27, #0c0a10 70%); }
.thumb-buzz { display: grid; gap: 6px; width: 88%; }
.thumb-buzz .qz-btn { min-height: 0; padding: 5px 6px 5px 4px; gap: 5px; border-radius: 10px; font-size: 11px; pointer-events: none; }
.thumb-buzz .qz-btn .qz-label { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-tile .thumb-buzz { width: 94%; }
.co-tile .thumb-buzz .qz-btn { font-size: 10px; padding-right: 4px; }
.thumb-buzz .qz-btn .qz-key { flex: none; width: 18px; height: 18px; border-radius: 7px; font-size: 12px; }
.thumb-buzz .qz-btn.qb-aurora, .thumb-buzz .qz-btn.qb-sovereign { border-width: 1.5px; }
.thumb-cheer { position: relative; width: 70%; aspect-ratio: 1; }
.thumb-cheer .qz-cheer { --qc-size: 100%; left: 50%; top: 50%; }
.thumb-cheer .qz-cheer::after { animation: none; opacity: 1; }
.thumb-cheer .qz-cheer::before { animation: none; opacity: 0.55; transform: scale(0.95); }
.thumb-cheer .qz-cheer.qc-confetti::before { opacity: 1; transform: none; }
.lo-game-box > .thumb { min-height: 0; width: 52px; height: 52px; border-radius: 10px; }
.lo-game-box > .thumb .thumb-buzz { width: 90%; gap: 3px; }
.lo-game-box > .thumb .thumb-buzz .qz-btn { padding: 2px 4px 2px 2px; font-size: 7px; gap: 3px; border-radius: 6px; }
.lo-game-box > .thumb .thumb-buzz .qz-key { width: 11px; height: 11px; font-size: 8px; border-radius: 4px; }
.thumb-cheer .qz-cheer:not([class*="qc-"])::after,
.thumb-cheer .qz-cheer.qc-confetti::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .qz-btn.qb-aurora, .qz-btn.qb-sovereign, .qz-btn.qb-sovereign::after { animation: none !important; }
  .qz-cheer::before { animation: none !important; opacity: 0; }
  .qz-cheer::after { animation: qc-still 1.4s ease forwards !important; }
  @keyframes qc-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}