html, body { margin: 0; height: 100%; }
body { background: #11132E; color: #F4F4FF; font-family: 'Onest', system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
button { font: inherit; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
button:active { filter: brightness(.9); }
button:focus-visible { outline: 3px solid #FFC531; outline-offset: 3px; }
b { font-weight: 800; }
.noselect { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none !important; } }
#conn { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 50; padding: 6px 14px; border-radius: 16px; background: #FFC531; color: #0C1030; font: 700 14px 'Onest', system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s; }
#conn.on { opacity: 1; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: 86vw; padding: 12px 18px; border-radius: 18px; background: #fff; color: #11132E; font: 700 16px 'Onest', system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#toast.on { opacity: 1; }
[data-act] { cursor: pointer; }

/* «хвиля» навколо аватарки того, від кого чекаємо дію */
.av-halo { position: absolute; left: -7px; top: -7px; right: -7px; bottom: -7px; border-radius: 50%; border: 4px solid var(--hc, #FFC531); box-sizing: border-box; pointer-events: none; animation: av-halo 1.6s ease-out infinite; }
@keyframes av-halo { 0% { transform: scale(.9); opacity: .95; } 100% { transform: scale(1.3); opacity: 0; } }
/* аватарка в смузі черги, від кого чекаємо дію: легенько «дихає» в ритмі хвилі */
.q-bob { animation: q-bob 1.6s ease-in-out infinite; }
@keyframes q-bob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* межа рахунку-перетягування рухається плавно */
.tug-a { transition: width .9s cubic-bezier(.22, .9, .3, 1), left .9s cubic-bezier(.22, .9, .3, 1); }

/* анімація «вгадано / не вгадано / пропуск» поверх екрана */
#flash { position: fixed; z-index: 45; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k) * 16px); overflow: hidden; animation: fl-bg 1.6s ease both; font-family: 'Onest', system-ui, sans-serif; }
#flash::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(8, 10, 30, .7); }
#flash .fl-disc { position: relative; width: calc(var(--k) * var(--d)); height: calc(var(--k) * var(--d)); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(var(--k) * 10px) calc(var(--k) * 40px) rgba(0, 0, 0, .35); animation: fl-pop 1.5s cubic-bezier(.2, 1.25, .4, 1) both; }
#flash.ok .fl-disc { background: #FFC531; }
#flash.no .fl-disc { background: #fff; }
#flash .fl-disc svg { width: 56%; height: 56%; overflow: visible; }
#flash .fl-disc path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fl-draw .42s .16s ease-out forwards; }
#flash.no .fl-disc svg { animation: fl-shake .5s .3s ease-in-out; }
#flash .fl-txt { position: relative; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: calc(var(--k) * var(--ts)); line-height: 1.1; color: #fff; text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); animation: fl-rise 1.5s ease both; }
#flash .fl-stars { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--k) * 10px); animation: fl-rise 1.6s .08s ease both; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .4)); }
#flash .fl-stars svg { width: calc(var(--k) * var(--ts) * 1.35); height: calc(var(--k) * var(--ts) * 1.35); animation: st-pop .55s cubic-bezier(.2, 1.7, .4, 1) both; animation-delay: calc(.32s + var(--i) * .1s); }
#flash .fl-note { position: relative; white-space: nowrap; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: calc(var(--k) * var(--ts) * .62); line-height: 1; padding: calc(var(--k) * var(--ts) * .3) calc(var(--k) * var(--ts) * .6); border-radius: 999px; animation: fl-rise 1.6s .2s ease both; box-shadow: 0 calc(var(--k) * 6px) calc(var(--k) * 22px) rgba(0, 0, 0, .35); }
#flash .fl-note.pen { background: #fff; color: #B3261E; }
#flash .fl-note.bon { background: #FFC531; color: #0C1030; }
#flash .fl-bit { position: absolute; left: 50%; top: 50%; width: calc(var(--k) * 34px); height: calc(var(--k) * 34px); margin: calc(var(--k) * -17px) 0 0 calc(var(--k) * -17px); animation: fl-fly 1.1s .12s ease-out both; }
@keyframes fl-bg { 0% { opacity: 0; } 10% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fl-pop { 0% { transform: scale(.3); opacity: 0; } 16% { transform: scale(1.12); opacity: 1; } 28% { transform: scale(1); } 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: 0; } }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
@keyframes fl-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9%); } 40% { transform: translateX(8%); } 60% { transform: translateX(-6%); } 80% { transform: translateX(3%); } }
@keyframes fl-rise { 0% { transform: translateY(calc(var(--k) * 24px)); opacity: 0; } 22% { transform: translateY(0); opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fl-fly { 0% { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(var(--k) * var(--dx)), calc(var(--k) * var(--dy))) scale(1) rotate(160deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .av-halo { animation: none; opacity: .9; transform: none; }
  .q-bob { animation: none; }
  .tug-a { transition: none; }
  #flash .fl-bit { display: none; }
  #flash .fl-disc { animation: fl-fade 1.5s ease both; }
  #flash .fl-disc path { animation: none; stroke-dashoffset: 0; }
  #flash.no .fl-disc svg { animation: none; }
}
@keyframes fl-fade { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

@keyframes ph-in { 0% { transform: scale(.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { @keyframes ph-in { 0%, 100% { transform: none; opacity: 1; } } }

/* гортані списки (підказки судді): без смуги прокрутки; поки нижче є ще щось, низ тьмяніє (UI.scrollMore ставить data-more) */
[data-scroll] { scrollbar-width: none; }
[data-scroll]::-webkit-scrollbar { display: none; }
[data-scroll][data-more] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }