/* Feier-Animationen nach besonderen Stößen und Breaks (src/view/celebrate.js) */

/* Feier-Animationen */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
#celebrate { position: fixed; left: 50%; top: 26%; transform: translate(-50%, -50%) scale(0.6); z-index: 61; pointer-events: none;
  text-align: center; opacity: 0; transition: opacity .5s; white-space: nowrap; }
#celebrate h2 { margin: 0; font-size: clamp(34px, 7vw, 72px); font-weight: 900; letter-spacing: .02em; color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8); }
#celebrate p { margin: 6px 0 0; font-size: clamp(14px, 2.2vw, 22px); font-weight: 600; color: #f3efe4; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#celebrate.show { opacity: 1; animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#celebrate.lvl3.show { animation: pop .8s cubic-bezier(.2, 1.6, .4, 1) forwards, pulse 1.2s ease-in-out .8s infinite; }
#celebrate.lvl3 h2 { color: #ffd84a; text-shadow: 0 0 22px currentColor, 0 4px 24px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.9); }
#celebrate.lvl3.show h2 { animation: rainbow 2.4s linear infinite; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.4); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes rainbow { 0%, 100% { color: #ffd84a; } 25% { color: #ff6b8a; } 50% { color: #6bc4ff; } 75% { color: #8dff9a; } }
/* Stufe 4 (Maximum): Zähler bis 147 in der Bildmitte, dann goldener Schriftzug mit Knall (ohne Zeile darunter) */
#celebrate.lvl4 { top: 50%; }
#celebrate.lvl4 .num { font-size: clamp(64px, 16vw, 170px); font-weight: 900; line-height: 1; color: #fff4c2;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255,200,60,.8), 0 6px 30px rgba(0,0,0,.7); }
#celebrate.lvl4 h2 { opacity: 0; }
#celebrate.lvl4.counting .num { animation: throb .3s ease-in-out infinite; }
#celebrate.lvl4.slam .num { animation: slam .6s cubic-bezier(.2, 1.8, .4, 1) both; color: #ffd84a; }
#celebrate.lvl4.slam h2 { opacity: 1; font-size: clamp(44px, 10vw, 112px); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(100deg, #fff4c2 0%, #ffd700 30%, #fff 45%, #ffb627 60%, #ffd700 80%, #fff4c2 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(255,190,40,.85)) drop-shadow(0 6px 18px rgba(0,0,0,.7));
  animation: slam .7s cubic-bezier(.2, 1.8, .4, 1) .08s both, shine 2.2s linear .8s infinite; }
#celebrate.lvl4.show.slam { animation: pulse 1.6s ease-in-out 1s infinite; }
@keyframes throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes slam { from { transform: scale(3); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#fxFlash { position: fixed; inset: 0; z-index: 62; pointer-events: none; background: #fff8e0; opacity: 0; }
#fxFlash.on { animation: flash .9s ease-out; }
@keyframes flash { from { opacity: var(--flash, .9); } to { opacity: 0; } }
#app.shake { animation: shake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translate(-3px, 2px); } 20%, 80% { transform: translate(6px, -4px); }
  30%, 50%, 70% { transform: translate(-10px, 6px); } 40%, 60% { transform: translate(10px, -6px); } }
@media (prefers-reduced-motion: reduce) { #app.shake { animation: none; } #fxFlash.on { animation-duration: .3s; } }

/* „FOUL“ groß in der Mitte nach einem Foul (flashFoul in hud.js): erscheint, wird größer und blendet aus */
/* Optisch zentriert: Großbuchstaben ohne Unterlänge sitzen in der Zeile etwa 0,05em zu tief (margin-top hebt sie an),
   der Buchstabenabstand steht nach dem letzten Buchstaben (padding-left gleicht ihn vorn aus) */
#foulFlash { position: fixed; left: 50%; top: 50%; z-index: 61; pointer-events: none; opacity: 0; white-space: nowrap;
  font-size: clamp(64px, 14vw, 160px); line-height: 1; color: #fff; transform: translate(-50%, -50%);
  margin-top: -.05em; padding-left: .03em;
  text-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8); }
#foulFlash.show { animation: big-flash 1.3s ease-out forwards; }
/* 50er- und Century-Break genau wie „FOUL“: gleiche Schrift, Größe und Farbe, weiß in der Mitte, wird größer und
   blendet aus (ohne Zeile darunter, ohne Konfetti und Feuerwerk) */
#celebrate.lvl1, #celebrate.lvl2, #celebrate.lvl3 { top: 50%; }
#celebrate.lvl1 h2, #celebrate.lvl2 h2 { font-size: clamp(64px, 14vw, 160px); font-weight: 800; letter-spacing: .03em; color: #fff;
  text-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8); }
/* Optisch zentriert wie „FOUL“ */
#celebrate.lvl1 h2, #celebrate.lvl2 h2, #celebrate.lvl3 h2 { line-height: 1; position: relative; top: -.05em; padding-left: .03em; }
#celebrate.lvl1.show, #celebrate.lvl2.show { animation: big-flash 1.3s ease-out forwards; }
@keyframes big-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { #foulFlash.show, #celebrate.lvl1.show, #celebrate.lvl2.show { animation-name: big-fade; }
  @keyframes big-fade { 0%, 30% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } } }

/* „YOU WIN!“ am Matchende (showTitle in celebrate.js): weiß und so groß wie „FOUL“, springt auf, pulsiert sacht und
   blendet aus, wenn der Dialog erscheint */
#celebrate.win { top: 50%; }
#celebrate.win h2 { font-size: clamp(64px, 14vw, 160px); line-height: 1; color: #fff; position: relative; top: -.05em;
  padding-left: .03em; text-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8); }
#celebrate.win.show { animation: pop .8s cubic-bezier(.2, 1.6, .4, 1) forwards, pulse 1.6s ease-in-out .8s infinite; }
@media (prefers-reduced-motion: reduce) { #celebrate.win.show { animation: none; transform: translate(-50%, -50%); } }