/* ═══════════════════════════════════════════════════════════
   ЕФЕКТИ ОТ НЕОН-ДИЗАЙНА, но в нашитe цветове (злато, смарагд, крем)
   ═══════════════════════════════════════════════════════════ */

#screen-lobby { position: relative; isolation: isolate; overflow: hidden; }

.fx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-bg i { position: absolute; display: block; }

/* 1. перспективна решетка на пода */
.fx-grid {
  left: -30%; right: -30%; bottom: -8%; height: 60%;
  background-image:
    linear-gradient(rgba(201, 162, 39, .20) 0 1px, transparent 1px 100%),
    linear-gradient(90deg, rgba(150, 178, 128, .13) 0 1px, transparent 1px 100%);
  background-size: 74px 74px, 74px 74px;
  transform: perspective(440px) rotateX(73deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 44%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 44%, transparent 88%);
  opacity: .55;
  animation: fxFloor 6.5s linear infinite;
}
@keyframes fxFloor { to { background-position: 0 74px, 0 0; } }

/* 2. бавни диагонални ивици */
.fx-streaks {
  inset: -25%;
  background: repeating-linear-gradient(102deg,
    transparent 0 72px,
    rgba(201, 162, 39, .045) 72px 74px,
    transparent 74px 186px,
    rgba(150, 178, 128, .04) 186px 188px,
    transparent 188px 308px);
  animation: fxDrift 26s linear infinite;
}
@keyframes fxDrift { to { transform: translateX(-380px); } }

/* 3. сканиращи линии */
.fx-scan {
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px);
  opacity: .42;
  mix-blend-mode: soft-light;
}

/* 4. бавна светлинна вълна */
.fx-sweep {
  left: 0; right: 0; height: 240px; top: -260px;
  background: linear-gradient(180deg, transparent, rgba(201, 162, 39, .085) 42%, rgba(150, 178, 128, .05) 64%, transparent);
  animation: fxSweep 9.5s linear infinite;
  will-change: top;
}
@keyframes fxSweep { 0% { top: -260px; } 100% { top: 110%; } }

/* 5. винетка */
.fx-vig {
  inset: 0;
  background: radial-gradient(120% 92% at 50% 42%, transparent 40%, rgba(4, 8, 6, .78) 100%);
}

#screen-lobby .lob { position: relative; z-index: 2; }

/* ═══ заглавие със златен неон ═══ */
.lob-table .display {
  color: #f6efdc;
  text-shadow:
    0 0 1px rgba(255, 246, 224, .9),
    0 0 16px rgba(201, 162, 39, .42),
    0 0 42px rgba(201, 162, 39, .22),
    0 0 76px rgba(201, 162, 39, .12);
  animation: fxTitle 5.5s ease-in-out infinite;
}
.lob-table .display em { color: #d8b25a; }
@keyframes fxTitle {
  0%, 100% { text-shadow: 0 0 1px rgba(255,246,224,.9), 0 0 16px rgba(201,162,39,.42), 0 0 42px rgba(201,162,39,.22), 0 0 76px rgba(201,162,39,.12); }
  50% { text-shadow: 0 0 1px rgba(255,246,224,1), 0 0 22px rgba(216,178,90,.55), 0 0 54px rgba(201,162,39,.3), 0 0 96px rgba(201,162,39,.16); }
}

/* ═══ моята карта: пулсираща златна рамка ═══ */
.dt-card.me {
  animation: fxCard 4.8s ease-in-out infinite;
}
@keyframes fxCard {
  0%, 100% { box-shadow: 0 0 0 5px #10150f, 0 0 0 6px rgba(201,162,39,.22), 0 18px 34px -26px #000; }
  50% { box-shadow: 0 0 0 5px #10150f, 0 0 0 6px rgba(201,162,39,.5), 0 0 30px -6px rgba(201,162,39,.35), 0 18px 34px -26px #000; }
}
.dt-card.me::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 245, 214, .16) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: fxShine 7s ease-in-out infinite;
}
@keyframes fxShine { 0%, 62% { transform: translateX(-120%); } 78%, 100% { transform: translateX(120%); } }

/* ═══ гербовете: светят при избор ═══ */
.dt-face-btn { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease; }
.dt-face-btn:hover { box-shadow: 0 0 16px -4px rgba(201, 162, 39, .5); }
.dt-face-btn[aria-selected="true"] {
  animation: fxPick 3.6s ease-in-out infinite;
}
@keyframes fxPick {
  0%, 100% { box-shadow: 0 0 0 2px rgba(201,162,39,.5), 0 0 18px -6px rgba(201,162,39,.5), 0 10px 20px -14px #000; }
  50% { box-shadow: 0 0 0 2px rgba(216,178,90,.85), 0 0 26px -4px rgba(201,162,39,.65), 0 10px 20px -14px #000; }
}

/* ═══ бутони: светкавица при посочване ═══ */
.lob-table .btn-play { position: relative; overflow: hidden; }
.lob-table .btn-play::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 226, .22), transparent);
  transform: skewX(-18deg);
  transition: left .45s ease;
}
.lob-table .btn-play:hover::before { left: 118%; }
.lob-table .btn-play:hover { box-shadow: 0 0 26px -8px rgba(201, 162, 39, .6); }
.btn-gold.btn-play:hover { box-shadow: 0 0 30px -6px rgba(216, 178, 90, .65); }

/* ═══ поява на екрана ═══ */
#screen-lobby:not([hidden]) .lob { animation: fxScreenIn .5s cubic-bezier(.22,.61,.36,1); }
@keyframes fxScreenIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }

/* ═══ изключваме при намалено движение ═══ */
@media (prefers-reduced-motion: reduce) {
  .fx-grid, .fx-streaks, .fx-sweep, .lob-table .display, .dt-card.me,
  .dt-card.me::after, .dt-face-btn[aria-selected="true"], #screen-lobby:not([hidden]) .lob { animation: none !important; }
}

/* ═══ телефон: по-леко ═══ */
@media (max-width: 760px) {
  .fx-grid { opacity: .38; height: 48%; }
  .fx-scan { opacity: .28; }
  .fx-streaks { opacity: .5; }
}

/* ═══ таймерът свети — злато, после червено в последните 5 сек ═══ */
.timer-ring {
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, .55)) drop-shadow(0 0 18px rgba(201, 162, 39, .25));
  transition: filter .3s ease;
}
.timer.urgent .timer-ring {
  filter: drop-shadow(0 0 8px rgba(214, 74, 60, .95)) drop-shadow(0 0 24px rgba(214, 74, 60, .55));
  animation: fxTimerBeat .55s ease-in-out infinite;
}
@keyframes fxTimerBeat { 50% { opacity: .72; } }
.timer-num { text-shadow: 0 0 12px rgba(201, 162, 39, .45); }

@media (prefers-reduced-motion: reduce) {
  .timer.urgent .timer-ring { animation: none !important; }
}