/* ---------- flying stuff ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.proj {
  position: absolute; left: 0; top: 0; font-size: 34px; line-height: 1; will-change: transform;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45));
}
.proj.big { font-size: 64px; }
.proj.small { font-size: 18px; }
.impact {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none;
}
.impact .boom {
  position: absolute; width: 96px; height: 96px; transform: translate(0, 0);
  background: radial-gradient(circle, #fff 0 18%, #ffd34d 19% 36%, transparent 37%),
    conic-gradient(from 10deg, transparent 0 8%, #ffb000 8% 12%, transparent 12% 20%, #ff6a00 20% 24%, transparent 24% 33%,
    #ffb000 33% 37%, transparent 37% 45%, #ff6a00 45% 49%, transparent 49% 58%, #ffb000 58% 62%, transparent 62% 70%,
    #ff6a00 70% 74%, transparent 74% 83%, #ffb000 83% 87%, transparent 87%);
  border-radius: 50%; animation: boom .55s ease-out forwards;
}
.impact .word {
  position: relative; font-size: 24px; font-weight: 900; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 1.5px #5e1020; paint-order: stroke fill; text-shadow: 0 3px 0 #5e1020;
  animation: word .9s ease-out forwards;
}
.impact .word.huge { font-size: 40px; }
@keyframes boom { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes word {
  0% { transform: scale(.3) rotate(-15deg); opacity: 0; }
  20% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  70% { transform: scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(-26px) scale(.9); opacity: 0; }
}
.particle { position: absolute; font-size: 14px; pointer-events: none; }

/* avatar reactions */
.av.shake { animation: avShake .45s ease-in-out; }
@keyframes avShake {
  20% { transform: translate(-6px, 2px) rotate(-12deg); }
  40% { transform: translate(5px, -2px) rotate(9deg); }
  60% { transform: translate(-4px, 1px) rotate(-6deg); }
  80% { transform: translate(2px, 0) rotate(3deg); }
}
.av.duck { animation: duck .55s ease-in-out; }
@keyframes duck {
  40% { transform: translate(14px, 16px) rotate(35deg) scale(.85); }
  100% { transform: none; }
}

/* screen-level effects */
.shake-screen { animation: screenShake .5s ease-in-out; }
.shake-screen.hard { animation: screenShake .8s ease-in-out; }
@keyframes screenShake {
  10% { transform: translate(-10px, 4px) rotate(-1deg); }
  25% { transform: translate(9px, -6px) rotate(1deg); }
  40% { transform: translate(-8px, 5px); }
  55% { transform: translate(6px, -3px) rotate(.6deg); }
  70% { transform: translate(-4px, 2px); }
  85% { transform: translate(2px, -1px); }
}
.table.flipped { animation: tableFlip 1.7s cubic-bezier(.3, .1, .3, 1); transform-origin: 50% 90%; }
@keyframes tableFlip {
  0% { transform: none; }
  25% { transform: perspective(700px) rotateX(70deg) rotateZ(-12deg) translateY(-40px); }
  45% { transform: perspective(700px) rotateX(175deg) rotateZ(14deg) translateY(-90px) scale(.85); }
  70% { transform: perspective(700px) rotateX(185deg) rotateZ(6deg) translateY(-30px) scale(.9); filter: brightness(.6); }
  100% { transform: none; }
}

/* splats on *your* screen when you get hit */
.splat-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.splat { position: absolute; border-radius: 50%; animation: splatFade 2.8s ease-in forwards; }
.splat.tomato { background: radial-gradient(circle at 40% 40%, #ff5a4f, #c8102e 55%, rgba(140, 0, 20, .0) 72%); }
.splat.melon { background: radial-gradient(circle at 45% 45%, #ff6f86 0 35%, #ff3355 36% 50%, #2fa84f 51% 60%, #17652f 61% 66%, transparent 68%); }
.splat.tea { background: radial-gradient(circle at 50% 50%, rgba(160, 82, 20, .85), rgba(120, 60, 10, .5) 50%, transparent 70%); }
.splat.seed { width: 14px !important; height: 8px !important; background: #2b2b2b; border-radius: 50%; box-shadow: inset 2px 0 0 #eee; }
.splat.slap { border-radius: 0; background: none; display: grid; place-items: center; font-size: 46vmin; opacity: .9; }
.crack {
  position: absolute; inset: 0; animation: splatFade 2.4s ease-in forwards;
  background:
    linear-gradient(32deg, transparent 49.6%, rgba(255, 255, 255, .85) 50%, transparent 50.4%),
    linear-gradient(-58deg, transparent 49.7%, rgba(255, 255, 255, .7) 50%, transparent 50.3%),
    linear-gradient(101deg, transparent 49.7%, rgba(255, 255, 255, .6) 50%, transparent 50.3%);
}
@keyframes splatFade { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.05); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }

/* ---------- big banners ---------- */
.banner {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 55; pointer-events: none;
  text-align: center; font-weight: 900; font-size: clamp(34px, 11vw, 72px); line-height: 1.25; color: #fff;
  -webkit-text-stroke: 2px #5e1020; paint-order: stroke fill; text-shadow: 0 5px 0 #5e1020, 0 12px 30px rgba(0, 0, 0, .6);
  animation: bannerIn 2.2s ease-out forwards; white-space: nowrap;
}
.banner small { display: block; font-size: .42em; -webkit-text-stroke: 1px #5e1020; }
.banner.gold { color: var(--gold); }
@keyframes bannerIn {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-10deg); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}

/* dodge / catch panic buttons */
.panic {
  position: fixed; left: 50%; bottom: calc(46% + var(--safe-b)); transform: translateX(-50%); z-index: 65;
  border: 0; border-radius: 22px; padding: 16px 30px; font-size: 26px; font-weight: 900; color: #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 0 0 4px #fff; animation: panic .3s ease-in-out infinite alternate;
}
.panic.dodge { background: linear-gradient(180deg, #ff5f5f, #c8102e); }
.panic.catch { background: linear-gradient(180deg, #4bd6c6, #108a7c); bottom: calc(56% + var(--safe-b)); }
@keyframes panic { to { transform: translateX(-50%) scale(1.1) rotate(-2deg); } }

/* overlays (trump pick, results, game over) */
.overlay-card {
  background: linear-gradient(180deg, #fff9ea, #f1e1bd); color: var(--ink); border-radius: 20px; padding: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 3px var(--gold); width: 100%; max-width: 320px;
}
.suit-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.suit-pick button {
  border: 0; border-radius: 14px; padding: 8px 4px; background: #fff; font-weight: 900; font-size: 15px; color: #17172b;
  box-shadow: 0 3px 0 #c9a35a; display: flex; flex-direction: column; align-items: center;
}
.suit-pick button b { font-size: 34px; line-height: 1.1; }
.suit-pick button.red { color: var(--red); }
.result-title { font-size: 26px; font-weight: 900; margin: 0; }
.result-sub { margin: 4px 0 0; font-weight: 700; color: #6b4b3a; }
.awards { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; text-align: right; }
.awards li { background: rgba(94, 16, 32, .08); border-radius: 10px; padding: 6px 10px; font-size: 13.5px; font-weight: 700; }
.awards li b { color: var(--carpet); }
.peek-view { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.peek-view .card { position: relative; --cw: 52px; }
.hakem-card { --cw: 38px; }
.card.fly-in { animation: flyIn .35s ease-out; }
@keyframes flyIn { from { opacity: 0; transform: translateY(40px) scale(.7); } }
.confetti { position: absolute; top: -30px; font-size: 22px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo-slipper, .panic, .hand-note { animation: none; }
}