.participant-special-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.participant-special-actions > div { display: flex; align-items: center; gap: 6px; flex: 1 1 170px; }
.participant-special-actions .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; flex: 1; min-height: 48px; white-space: normal; }
.participant-special-actions .button > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }
.special-action-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; overflow: hidden; pointer-events: none; background: linear-gradient(125deg, #fff9df, #effaff 55%, #e8e4ff); color: #111827; font-family: Inter, system-ui, sans-serif; text-align: center; }
.special-action-overlay h2 { margin: 0; max-width: 100%; font-size: 64px; font-weight: 850; line-height: 1.05; overflow-wrap: anywhere; }
.special-action-overlay p { margin: 0; max-width: 850px; font-size: 30px; font-weight: 750; color: #4145ad; overflow-wrap: anywhere; }
.special-action-overlay > strong { max-width: 850px; font-size: 24px; overflow-wrap: anywhere; }
.special-action-scene { position: relative; width: min(100%, 360px); height: 200px; flex: 0 0 auto; }
.special-action-flight { position: absolute; left: calc(50% - 55px); top: 40px; width: 110px; height: 110px; color: #6358d9; }
.special-action-flight svg { width: 100%; height: 100%; fill: #fff9df; stroke: currentColor; stroke-width: 1.5; }
.special-action-pass .special-action-flight { animation: special-pass-flight var(--special-duration) ease-in-out both; }
.special-action-moon .special-action-scene { height: 240px; }
.special-action-moon .special-action-flight, .special-action-steal .special-action-flight { animation: special-moon-flight var(--special-duration) ease-in-out both; }
.special-action-moon .special-action-flight { width: 80px; height: 80px; }
.special-action-moon { background: linear-gradient(125deg, #fff9df, #f4efff 45%, #e2e4ff); }
.special-action-scene .special-action-star { position: absolute; top: 12px; right: 25px; width: 130px; height: 130px; color: #6358d9; }
.special-action-star svg { width: 100%; height: 100%; fill: #fff0a3; stroke: currentColor; stroke-width: 1.5; }
.special-action-buzz .special-action-flight { animation: special-buzz-pop 700ms ease-out both; }
@keyframes special-pass-flight { 0% { transform: translateX(-160px) rotate(-10deg); opacity: 0; } 25%, 60% { transform: translateX(0) rotate(0); opacity: 1; } 100% { transform: translateX(160px) rotate(10deg); opacity: 0; } }
@keyframes special-moon-flight { 0% { transform: translate(-140px, var(--flight-start-y, 130px)) rotate(-12deg); opacity: 0; } 18% { opacity: 1; } 65%, 90% { transform: translate(80px, var(--flight-end-y, -38px)) rotate(4deg); opacity: 1; } 100% { transform: translate(110px, var(--flight-exit-y, -60px)) rotate(4deg); opacity: 0; } }
@keyframes special-buzz-pop { 0% { transform: scale(.65); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (max-width: 700px) {
  .special-action-overlay { padding: 24px; gap: 16px; }
  .special-action-overlay h2 { font-size: 40px; }
  .special-action-overlay p { font-size: 24px; }
  .special-action-overlay > strong { font-size: 20px; }
}
@media (max-height: 650px) {
  .special-action-scene, .special-action-moon .special-action-scene { height: 160px; }
  .special-action-flight { width: 80px; height: 80px; top: 20px; left: calc(50% - 40px); --flight-start-y: 60px; --flight-end-y: -12px; --flight-exit-y: -30px; }
  .special-action-scene .special-action-star { width: 105px; height: 105px; }
}
@media (max-height: 500px) {
  .special-action-overlay { padding: 16px; gap: 10px; }
  .special-action-scene, .special-action-moon .special-action-scene { height: 120px; }
  .special-action-flight { --flight-start-y: 20px; }
  .special-action-overlay h2 { font-size: 36px; }
  .special-action-overlay p { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .special-action-overlay *, .special-action-overlay { animation: none !important; transition: none !important; } }