/* ===== Эффекты и декор рококо (дополняет style.css; всё некликабельное — pointer-events: none) ===== */
/* свечное мерцание: тёплая виньетка по краям */
#app::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 58%, rgba(10,2,5,.55) 100%),
    radial-gradient(circle at 12% 8%, rgba(255,190,110,.10), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(255,190,110,.08), transparent 28%);
  animation: candle 5.5s ease-in-out infinite alternate;
}
@keyframes candle { 0% { opacity: .85; } 35% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 1; } }

/* золочёные завитки по углам главного экрана */
#scrHome::before, #scrHome::after {
  content: ''; position: absolute; top: 8px; width: 74px; height: 74px; pointer-events: none; opacity: .55;
  background: url("../assets/ui/corner-tl.svg") no-repeat center / contain;
}
#scrHome::before { left: 6px; }
#scrHome::after { right: 6px; transform: scaleX(-1); }

/* картуш вокруг заголовка модалки */
.modal h2::before, .modal h2::after {
  content: '❧'; display: inline-block; margin: 0 8px; font-size: .7em; font-style: normal; vertical-align: middle;
  color: var(--gold); -webkit-text-fill-color: var(--gold); opacity: .8;
}
.modal h2::before { transform: scaleX(-1); }
.modal-card { box-shadow: 0 0 0 1px rgba(240,215,140,.25), 0 18px 50px rgba(0,0,0,.6), 0 0 40px rgba(201,161,74,.18) inset; }

/* тосты — маленький картуш */
.toast::before, .toast::after { content: '✦'; color: var(--gold); margin: 0 6px; font-size: 12px; }

/* отклик кнопок: золотое «дыхание» */
.fx-tap { animation: fxTap .42s ease-out; }
@keyframes fxTap { 0% { box-shadow: 0 0 0 0 rgba(240,215,140,.55); } 100% { box-shadow: 0 0 0 10px rgba(240,215,140,0); } }

/* холст частиц */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 55; }

/* «Браво!» */
.fx-bravo { position: fixed; inset: 0; z-index: 56; display: grid; place-items: center; pointer-events: none; animation: bravoOut 1.5s ease-in forwards; }
.fx-cartouche {
  position: relative; padding: 16px 34px 18px; text-align: center; max-width: 86vw;
  border-radius: 46% 46% 46% 46% / 60% 60% 60% 60%;
  background: radial-gradient(ellipse at 50% 40%, rgba(74,14,30,.92), rgba(26,4,9,.9)) padding-box, var(--gold-grad) border-box;
  border: 3px solid transparent; box-shadow: 0 0 0 2px rgba(42,7,18,.8), 0 0 40px rgba(240,215,140,.45), 0 12px 40px rgba(0,0,0,.6);
  animation: bravoIn .55s cubic-bezier(.2,1.6,.4,1) both;
}
.fx-cartouche b {
  display: block; font-family: var(--display); font-style: italic; font-size: 46px; line-height: 1.1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
.fx-cartouche i { display: block; margin-top: 4px; font-size: 16px; color: var(--cream); font-style: italic; }
@keyframes bravoIn { from { opacity: 0; transform: scale(.4) rotate(-6deg); } }
@keyframes bravoOut { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.fx-bravo.still, .fx-bravo.still .fx-cartouche { animation: none; }

.fx-sound-home { margin-left: 14px; }

@media (prefers-reduced-motion: reduce) {
  #app::after, .fx-tap, .petal { animation: none !important; }
  .petal { display: none; }
  .fx-canvas { display: none; }
}

/* EN-локаль: тексты из CSS */
html[lang="en"] .pz-tray-in:empty::after { content: 'The tray is empty ✦'; }
/* переключатель языка в «О приложении» */
.lang-switch { display: flex; justify-content: center; gap: 8px; margin: 10px 0 4px; }