/* ═══════════════════════════════════════════════
   animations.css — All game animations
   Settlers of Catan — Browser Edition
═══════════════════════════════════════════════ */

/* ══════════════════════════
   DICE
══════════════════════════ */

#dice-container {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 8px 0;
  align-items: center;
}

.die {
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #1a0a00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  user-select: none;
  flex-shrink: 0;
}

/* ── Dice roll animation ── */
@keyframes diceRoll {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(180deg) scale(1.2); }
  50%  { transform: rotate(360deg) scale(0.9); }
  75%  { transform: rotate(540deg) scale(1.1); }
  100% { transform: rotate(720deg) scale(1); }
}

.dice-rolling {
  animation: diceRoll 0.6s ease-out;
}

/* ══════════════════════════
   FADE IN UP
══════════════════════════ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

/* ══════════════════════════
   ROBBER DROP
══════════════════════════ */

@keyframes robberDrop {
  0%   { transform: translateY(-40px); opacity: 0; }
  60%  { transform: translateY(8px);   opacity: 1; }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0);     opacity: 1; }
}

.robber-dropping {
  animation: robberDrop 0.5s ease-out;
}

/* ══════════════════════════
   RESOURCE GAIN (panel badge pop)
══════════════════════════ */

@keyframes resourceGain {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}

.resource-gained {
  animation: resourceGain 0.4s ease-out;
}

/* ══════════════════════════
   RESOURCE FLOAT (on-board +N emoji)
══════════════════════════ */

@keyframes floatUp {
  0%   { opacity: 0;   transform: translateY(0);    }
  12%  { opacity: 1;   transform: translateY(-10px); }
  72%  { opacity: 0.9; transform: translateY(-42px); }
  100% { opacity: 0;   transform: translateY(-58px); }
}

.res-float-text {
  animation: floatUp 1.9s ease-out forwards;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* ══════════════════════════
   HIGHLIGHT FLASH
══════════════════════════ */

@keyframes highlight-flash {
  0%,
  100% { opacity: 1; }
  50%  { opacity: 0.3; }
}

.highlight-flash {
  animation: highlight-flash 0.5s ease-in-out 3;
}

/* ══════════════════════════
   LONGEST ROAD / LARGEST ARMY BANNERS
══════════════════════════ */

.longest-road-banner,
.largest-army-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: #1a0a00;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  z-index: 90;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: fadeInUp 0.3s ease-out;
}

/* JS removes these classes / elements after 2 s */
.banner-dismissing {
  animation: fadeInUp 0.3s ease-out reverse forwards;
}

/* ══════════════════════════
   PIECE PLACEMENT
══════════════════════════ */

@keyframes pieceDrop {
  0%   { transform: scale(0) translateY(-20px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(0); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.piece-placed {
  animation: pieceDrop 0.35s ease-out;
}

/* ══════════════════════════
   CARD FLIP (dev cards)
══════════════════════════ */

@keyframes cardReveal {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg);  opacity: 1; }
}

.card-reveal {
  animation: cardReveal 0.3s ease-out forwards;
}

/* ══════════════════════════
   SCREEN TRANSITIONS
══════════════════════════ */

@keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.screen-enter {
  animation: screenFadeIn 0.25s ease-out forwards;
}

/* ══════════════════════════
   TOAST / NOTIFICATION
══════════════════════════ */

@keyframes toastSlide {
  0%   { transform: translateX(120%); opacity: 0; }
  15%  { transform: translateX(0);    opacity: 1; }
  80%  { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  z-index: 300;
  pointer-events: none;
  animation: toastSlide 3s ease-in-out forwards;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.toast-accent {
  border-color: var(--accent);
  color: var(--accent);
}

/* ══════════════════════════
   PULSE (shared, overrides board.css if needed)
══════════════════════════ */

@keyframes pulse {
  0%,
  100% { opacity: 0.5; }
  50%  { opacity: 1; }
}