/* ---------------------------------------------------------------
   Effekte (public/js/fx.js, public/js/feedback.js): fliegende Jetons,
   aufsteigende Betraege, Banner, Konfetti, Zeitlimit-Ringe und die
   Reaktions-/Tonleiste am Tisch.
   --------------------------------------------------------------- */

/* Registriert, damit der Ring weich statt ruckartig ablaeuft. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }

.fx-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.fx-layer > * { position: absolute; will-change: transform, opacity; }

/* Jeton */
.fx-chip {
  width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle, #fff0 0 38%, #ffffffd9 39% 45%, #fff0 46%),
    repeating-conic-gradient(var(--chip) 0 30deg, #fff 30deg 45deg);
  box-shadow: 0 0 0 2px var(--chip), 0 4px 10px -2px #000c;
}

/* Aufsteigender Text ueber einem Platz */
.fx-float {
  font: 800 1.05rem/1 var(--font-hero);
  color: #fff; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  background: #0b1020d9; border: 1px solid #ffffff2e;
  text-shadow: 0 1px 0 #0008;
  box-shadow: 0 8px 20px -8px #000;
}
.fx-float--win { color: #bbf7d0; border-color: #22c55e99; background: #052e16e6; }
.fx-float--lose { color: #fecaca; border-color: #ef444499; background: #3b0a0ae6; }
.fx-float--gold { color: #1f1300; border-color: #fde68a; background: linear-gradient(135deg, #fde68a, #f59e0b); text-shadow: none; }

.fx-emoji { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 6px 8px #0009); }

/* Grosser Schriftzug */
.fx-banner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 28px; border-radius: 22px; text-align: center; white-space: nowrap;
  background: #0b1020e6; border: 2px solid #ffffff30;
  box-shadow: 0 24px 60px -18px #000, 0 0 0 6px #ffffff0a;
  backdrop-filter: blur(6px);
}
.fx-banner strong { font: 800 clamp(1.6rem, 7vw, 2.8rem)/1.05 var(--font-hero); letter-spacing: .02em; }
.fx-banner span { font: 700 1rem/1.2 var(--font); opacity: .9; }
.fx-banner--gold { border-color: #fde68a; background: radial-gradient(120% 140% at 50% 0%, #3b2a06f2, #140d02f2); }
.fx-banner--gold strong {
  background: linear-gradient(180deg, #fff7d1, #fbbf24 55%, #d97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px #f59e0b88);
}
.fx-banner--gold span { color: #fde68a; }
.fx-banner--win { border-color: #22c55e; }
.fx-banner--win strong { color: #bbf7d0; }
.fx-banner--lose { border-color: #ef4444; }
.fx-banner--lose strong { color: #fecaca; }
.fx-banner--info strong { font-size: clamp(1.2rem, 5vw, 1.8rem); color: var(--brand-2); }

.fx-confetti { top: 0; width: 8px; height: 14px; border-radius: 2px; }

.fx-flash { inset: 0; width: 100%; height: 100%; }
.fx-flash--bad { box-shadow: inset 0 0 90px 10px #ef4444aa; }
.fx-flash--ok { box-shadow: inset 0 0 90px 10px #22c55eaa; }

/* ------------------------------------------ Guthaben zaehlt hoch */
.balance-live { transition: box-shadow .3s, border-color .3s, color .3s; }
.balance-live__value { font-variant-numeric: tabular-nums; }
.balance-live--up { color: #bbf7d0; border-color: #22c55e; box-shadow: 0 0 0 3px #22c55e33, 0 0 18px #22c55e55; }
.balance-live--down { color: #fecaca; border-color: #ef4444aa; }

/* ------------------------------------------ Zeitlimit-Ring/-Balken */
.deadline-ring {
  --p: 1;
  position: relative; display: inline-grid; place-items: center; flex: none;
  padding: 3px; border-radius: 14px;
  background: conic-gradient(var(--ring, var(--brand)) calc(var(--p) * 360deg), #ffffff1f 0);
  transition: --p .2s linear;
}
.deadline-ring > .avatar { box-shadow: 0 0 0 2px #0b1020; }
.deadline-ring.deadline--low { --ring: #ef4444; animation: ring-pulse .5s ease-in-out infinite alternate; }
@keyframes ring-pulse { to { filter: drop-shadow(0 0 6px #ef4444); } }

.deadline-bar { --p: 1; display: grid; gap: 4px; }
.deadline-bar__track { height: 5px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.deadline-bar__fill {
  height: 100%; width: calc(var(--p) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .2s linear;
}
.deadline-bar__text { font-size: .72rem; color: var(--text-faint); text-align: right; }
.deadline-bar.deadline--low .deadline-bar__fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.deadline-bar.deadline--low .deadline-bar__text { color: #fca5a5; font-weight: 700; }

/* "Wie zuletzt" beim Einsatz */
.bj-repeat { width: 100%; }

/* ------------------------------------------ Reaktions-/Tonleiste (Kopfzeile) */
/* Die Kopfzeile bildet (backdrop-filter) eine eigene Stapelebene - ohne
   z-index wuerde der spaeter folgende Tisch das Emoji-Menue ueberdecken. */
.table__head { position: relative; z-index: 20; }
.react-dock { position: relative; display: flex; align-items: center; gap: 6px; }
.react-dock[hidden] { display: none; }
.react-dock__btn {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1; padding: 0;
  background: #ffffff0d; border: 1px solid var(--line-strong); color: var(--text);
  cursor: pointer; transition: transform .15s, border-color .15s;
}
.react-dock__btn:active { transform: scale(.9); }
.react-dock__btn[aria-expanded="true"] { border-color: var(--brand); background: rgba(var(--brand-rgb), .15); }
.react-dock__picker {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; padding: 8px;
  border-radius: 18px; background: #0b1020f2; border: 1px solid var(--line-strong);
  box-shadow: 0 16px 36px -14px #000;
  animation: dock-in .18s ease-out;
}
.react-dock__picker[hidden] { display: none; }
.react-dock__emoji {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; padding: 0;
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform .12s, background .12s;
}
.react-dock__emoji:hover { background: #ffffff14; }
.react-dock__emoji:active { transform: scale(1.3); }
@keyframes dock-in { from { opacity: 0; transform: translateY(-6px) scale(.95); } }

@media (prefers-reduced-motion: reduce) {
  .deadline-ring.deadline--low { animation: none; }
  .react-dock__picker { animation: none; }
}