/**
 * reward-physics.css
 * Style UI dla systemu animacji nagród:
 *   - Nakładki Canvas na ekranach gracza i TV
 *   - Kontenery: skarbonka, reaktor, sejf
 *   - Efekty świecenia i pulsowania
 */

/* ═══════════════════════════════════════════════
   NAKŁADKA CANVAS (wspólna dla wszystkich trybów)
   ═══════════════════════════════════════════════ */
.rp-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* ═══════════════════════════════════════════════
   KONTENER NAGRODY – opakowuje ekran gracza
   z animacją Canvas
   ═══════════════════════════════════════════════ */
.reward-canvas-host {
  position: relative;
  overflow: hidden;
  width: 100%;
  flex: 1;
  min-height: 200px;
}

/* ═══════════════════════════════════════════════
   EKRAN ODPOWIEDZI – rozbudowany o warstwę Canvas
   ═══════════════════════════════════════════════ */
#screen-answer-result.has-reward-canvas {
  padding: 0;
}

#screen-answer-result.has-reward-canvas .screen-inner {
  position: relative;
  z-index: 5;
  padding: 20px 20px 12px;
}

/* ═══════════════════════════════════════════════
   EKRAN TABLICY – reaktor energii
   ═══════════════════════════════════════════════ */
#reward-reactor-host {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 12px 0 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, #090514 0%, #1e1338 100%);
}

/* ═══════════════════════════════════════════════
   EKRAN KOŃCA KONKURENCJI – sejf
   ═══════════════════════════════════════════════ */
#reward-safe-host {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 0 0 0 0;
  /* Sejf jest pierwszym elementem sekcji – bez marginesu górnego */
  flex-shrink: 0;
}

#reward-safe-host:empty {
  display: none;
  height: 0;
}

/* Kiedy sejf jest aktywny, screen-inner przesuwa się poniżej */
#screen-competition-end.active {
  display: flex;
  flex-direction: column;
}

#screen-competition-end .screen-inner {
  flex: 1;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════
   ANIMACJE CSS – pulsowanie i błyski
   ═══════════════════════════════════════════════ */

/* Złoty puls – poprawna odpowiedź */
@keyframes rp-gold-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}

/* Drżenie – błędna odpowiedź */
@keyframes rp-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

/* Błysk zielony – koniec konkurencji */
@keyframes rp-green-flash {
  0%   { opacity: 0; }
  30%  { opacity: 0.25; }
  100% { opacity: 0; }
}

/* Puls energetyczny – lider rundy */
@keyframes rp-energy-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%       { filter: brightness(1.15); transform: scale(1.02); }
}

/* Wejście monety z góry */
@keyframes rp-coin-drop {
  from { transform: translateY(-120%) scale(0.7); opacity: 0; }
  60%  { transform: translateY(8%) scale(1.05); opacity: 1; }
  80%  { transform: translateY(-3%) scale(0.97); }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════
   KLASY STANÓW (modyfikują host za pomocą JS)
   ═══════════════════════════════════════════════ */
.reward-leader #reward-reactor-host {
  animation: rp-energy-pulse 1s ease infinite;
}

/* ═══════════════════════════════════════════════
   TV – canvas monet (absolutny overlay)
   ═══════════════════════════════════════════════ */
.rp-tv-canvas {
  pointer-events: none;
  z-index: 50;
}

/* ═══════════════════════════════════════════════
   PUNKTACJA NA TV – bump przy nowych punktach
   ═══════════════════════════════════════════════ */
@keyframes rp-score-bump {
  0%   { transform: scale(1); color: inherit; }
  30%  { transform: scale(1.35); color: #ffd23f; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.rp-score-bump {
  animation: rp-score-bump 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ═══════════════════════════════════════════════
   RESPONSYWNOŚĆ – na małych ekranach
   ═══════════════════════════════════════════════ */
@media (max-height: 600px) {
  #reward-reactor-host { height: 220px; }
  #reward-safe-host    { height: 240px; }
}

@media (max-height: 500px) {
  #reward-reactor-host { height: 160px; }
  #reward-safe-host    { height: 180px; }
}