/* Маячок-сирена у віджетах черг (js/views/queue-beacon.js) */
.qbeacon { width: 88px; height: 88px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qb-svg { width: 100%; height: 100%; overflow: visible; }

/* корпус */
.qb-base     { fill: #475569; }
.qb-base-lip { fill: #64748b; }
.qb-cap      { fill: #64748b; }
.dark .qb-base, html.theme-8bit .qb-base         { fill: #334155; }
.dark .qb-base-lip, html.theme-8bit .qb-base-lip { fill: #475569; }

/* купол: колір = рівень */
.qb-idle  { --qb: #9ca3af; --qb-glow: rgba(156,163,175,0); }
.qb-ok    { --qb: #22c55e; --qb-glow: rgba(34,197,94,.55); }
.qb-warn  { --qb: #f59e0b; --qb-glow: rgba(245,158,11,.6); }
.qb-alarm, .qb-panic { --qb: #ef4444; --qb-glow: rgba(239,68,68,.7); }
.qb-dome  { fill: var(--qb); }
.qb-idle .qb-dome { opacity: .55; }
.qb-spot  { fill: #fff; opacity: .6; }
.qb-idle .qb-spot { opacity: 0; }
.qb-beam  { fill: var(--qb); opacity: 0; }

/* «z» у сплячого та дим (трюк) */
.qb-z { fill: #94a3b8; animation: qb-z 3s ease-in-out infinite; }
.qb-z2 { animation-delay: 1.2s; }
.qb-smoke { fill: #9ca3af; opacity: 0; }

/* поведінка за рівнем */
.qb-ok .qb-svg    { animation: qb-glow 2.4s ease-in-out infinite; }
.qb-ok .qb-spot   { transform: translateX(-4px); opacity: .45; }
.qb-warn .qb-svg  { animation: qb-glow 1.6s ease-in-out infinite; }
.qb-warn .qb-spot { animation: qb-spin 1.6s linear infinite; }
.qb-warn .qb-beam-l { animation: qb-beam 1.6s linear infinite; }
.qb-warn .qb-beam-r { animation: qb-beam 1.6s linear infinite .8s; }
.qb-alarm .qb-svg  { animation: qb-glow .9s ease-in-out infinite; }
.qb-alarm .qb-spot { animation: qb-spin .9s linear infinite; }
.qb-alarm .qb-beam-l { animation: qb-beam .9s linear infinite; }
.qb-alarm .qb-beam-r { animation: qb-beam .9s linear infinite .45s; }
.qb-panic .qb-svg  { animation: qb-glow .5s ease-in-out infinite, qb-shake .25s linear infinite; }
.qb-panic .qb-spot { animation: qb-spin .5s linear infinite; }
.qb-panic .qb-beam-l { animation: qb-beam .5s linear infinite; }
.qb-panic .qb-beam-r { animation: qb-beam .5s linear infinite .25s; }

/* клік: підскок + розгін */
.qbeacon.qb-kick .qb-top  { animation: qb-kick .6s cubic-bezier(.34,1.56,.64,1); transform-origin: 40px 60px; }
.qbeacon.qb-kick .qb-spot { animation: qb-spin .2s linear 3 !important; }
.qbeacon.qb-kick .qb-dome { fill: var(--qb); filter: brightness(1.35); }
.qb-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 100;
    transform: translate(0, 0); transition: transform .7s cubic-bezier(.1,.9,.2,1), opacity .7s linear; }
html.theme-8bit .qb-spark { border-radius: 0; }

/* трюки: 100 — дим, 250 — перегрів, 500 — купол злітає */
.qbeacon.qb-smoking .qb-smoke, .qbeacon.qb-hot .qb-smoke { animation: qb-smoke 1.2s ease-out infinite; }
.qbeacon.qb-hot .qb-dome { fill: #f97316; animation: qb-hot .3s steps(2) infinite; }
.qbeacon.qb-hot .qb-svg  { animation: qb-shake .15s linear infinite; }
.qbeacon.qb-pop .qb-top  { animation: qb-pop 1.6s cubic-bezier(.3,.7,.4,1); transform-origin: 40px 40px; }

@keyframes qb-glow  { 0%,100% { filter: drop-shadow(0 0 0 var(--qb-glow)); } 50% { filter: drop-shadow(0 0 10px var(--qb-glow)); } }
@keyframes qb-spin  { 0% { transform: translateX(-16px); } 100% { transform: translateX(16px); } }
@keyframes qb-beam  { 0%,100% { opacity: 0; } 15% { opacity: .38; } 45% { opacity: 0; } }
@keyframes qb-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes qb-kick  { 0% { transform: scale(1); } 30% { transform: scale(1.15, .85); } 60% { transform: scale(.94, 1.08) translateY(-4px); } 100% { transform: scale(1); } }
@keyframes qb-z     { 0% { transform: translate(0,0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(5px,-9px); opacity: 0; } }
@keyframes qb-smoke { 0% { transform: translateY(4px) scale(.6); opacity: .7; } 100% { transform: translateY(-14px) scale(1.3); opacity: 0; } }
@keyframes qb-hot   { 0% { fill: #f97316; } 100% { fill: #fde047; } }
@keyframes qb-pop   { 0% { transform: none; } 30% { transform: translateY(-34px) rotate(-25deg); } 55% { transform: translateY(-20px) rotate(200deg); }
                      80% { transform: translateY(2px) rotate(360deg); } 90% { transform: translateY(-3px) rotate(360deg); } 100% { transform: rotate(360deg); } }

/* 8-біт: кроки замість плавності, промені й «оберт» — миготінням */
.qb-8bit .qb-dome { fill: var(--qb); }
.qb-8bit .qb-px-l, .qb-8bit .qb-px-r { opacity: .75; }
.qb-ok .qb-8bit .qb-px-r { opacity: 0; }
.qb-warn .qb-8bit .qb-px-l, .qb-alarm .qb-8bit .qb-px-l, .qb-panic .qb-8bit .qb-px-l { animation: qb-px 1s steps(1) infinite; }
.qb-warn .qb-8bit .qb-px-r, .qb-alarm .qb-8bit .qb-px-r, .qb-panic .qb-8bit .qb-px-r { animation: qb-px 1s steps(1) infinite .5s; }
.qb-alarm .qb-8bit .qb-px-l, .qb-alarm .qb-8bit .qb-px-r { animation-duration: .5s; }
.qb-panic .qb-8bit .qb-px-l, .qb-panic .qb-8bit .qb-px-r { animation-duration: .3s; }
.qb-8bit .qb-beam { animation-timing-function: steps(1) !important; }
.qb-8bit .qb-z { fill: #9b9bd0; animation-timing-function: steps(3); }
html.theme-8bit .qbeacon .qb-svg { filter: none !important; }
html.theme-8bit .qbeacon.qb-kick .qb-top { animation-timing-function: steps(4); }
@keyframes qb-px { 0% { opacity: .85; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .qbeacon .qb-svg, .qbeacon .qb-spot, .qbeacon .qb-beam, .qbeacon .qb-z, .qbeacon .qb-px-l, .qbeacon .qb-px-r { animation: none !important; }
    .qb-warn .qb-beam, .qb-alarm .qb-beam, .qb-panic .qb-beam { opacity: .3; }
}