/* ============================================================
   HEX-SIEDLER — Keyframe Animations
   ============================================================ */

/* Title pulse on setup screen */
@keyframes titlePulse {
    0%, 100% { text-shadow: 0 0 30px rgba(240,192,64,0.4), 2px 2px 8px rgba(0,0,0,0.6); }
    50% { text-shadow: 0 0 50px rgba(240,192,64,0.7), 2px 2px 8px rgba(0,0,0,0.6), 0 0 80px rgba(240,192,64,0.2); }
}

/* Elements sliding in */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(30px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes slideLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Dice shaking */
@keyframes diceShake {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-12deg) scale(1.1); }
    50% { transform: rotate(8deg) scale(0.95); }
    75% { transform: rotate(-5deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Dice final land */
@keyframes diceLand {
    0% { transform: scale(1.3) rotate(10deg); }
    50% { transform: scale(0.9) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Resource count bump */
@keyframes resBump {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
@keyframes countPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Active player glow in scoreboard */
@keyframes activeGlow {
    0%, 100% { box-shadow: inset 0 0 0 rgba(240,192,64,0); }
    50% { box-shadow: inset 0 0 12px rgba(240,192,64,0.15); }
}

/* VP change bounce */
@keyframes vpBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); color: #f0c040; }
    100% { transform: scale(1); }
}

/* Modal fade-in */
@keyframes modalFadeIn {
    from { background: rgba(0,0,0,0); }
    to { background: rgba(0,0,0,0.6); }
}
@keyframes modalBoxIn {
    from { transform: scale(0.85) rotate(var(--modal-rot, 0deg)); opacity: 0; }
    to { transform: scale(1) rotate(var(--modal-rot, 0deg)); opacity: 1; }
}

/* Win screen pulse */
@keyframes winPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); text-shadow: 0 0 30px rgba(240,192,64,0.6); }
}

/* Turn change flash */
@keyframes turnFlash {
    0% { opacity: 0; }
    15% { opacity: 0.15; }
    100% { opacity: 0; }
}

/* Build placement glow (canvas-rendered, reference for timing) */
@keyframes placementPop {
    0% { transform: scale(0); opacity: 1; }
    60% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Floating hex (setup background) */
@keyframes floatHex {
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}
.floating-hex {
    position: absolute; font-size: 2em; pointer-events: none;
    animation: floatHex linear infinite;
    opacity: 0;
}

/* 3D Dice roll tumble */
@keyframes diceRoll3d {
    0%   { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg)   translateY(0); }
    15%  { transform: rotateX(240deg) rotateY(120deg)  rotateZ(60deg)  translateY(-80px); }
    30%  { transform: rotateX(480deg) rotateY(300deg)  rotateZ(-40deg) translateY(-120px); }
    50%  { transform: rotateX(720deg) rotateY(540deg)  rotateZ(20deg)  translateY(-60px); }
    70%  { transform: rotateX(900deg) rotateY(700deg)  rotateZ(-10deg) translateY(-20px); }
    85%  { transform: rotateX(1000deg) rotateY(800deg) rotateZ(5deg)   translateY(0); }
    100% { transform: rotateX(1080deg) rotateY(900deg) rotateZ(0deg)   translateY(0); }
}

/* Dice bounce landing */
@keyframes diceBounce {
    0%   { transform: var(--final-rot) translateY(0) scale(1); }
    30%  { transform: var(--final-rot) translateY(-15px) scale(1.05); }
    60%  { transform: var(--final-rot) translateY(0) scale(0.97); }
    80%  { transform: var(--final-rot) translateY(-5px) scale(1.02); }
    100% { transform: var(--final-rot) translateY(0) scale(1); }
}

/* Card deal in */
@keyframes cardDeal {
    0% { transform: translateY(20px) scale(0.5) rotate(-10deg); opacity: 0; }
    100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

/* Toast notification slide */
@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

/* Robber slam */
@keyframes robberSlam {
    0% { transform: scale(2) rotate(-20deg); opacity: 0; }
    50% { transform: scale(0.8) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Hex highlight pulse (used in canvas, timing reference) */
@keyframes highlightPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Resource flying from board to panel */
@keyframes flyToPanel {
    0% { opacity: 1; transform: translate(var(--fly-x), var(--fly-y)) scale(1.5); }
    100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}
.flying-resource {
    position: absolute; font-size: 1.8em; pointer-events: none;
    animation: flyToPanel 0.7s cubic-bezier(.2,0,.3,1) forwards;
    z-index: 50;
}

/* Toast container */
#toastContainer {
    position: absolute; top: 60px; right: 10px; z-index: 20;
    display: flex; flex-direction: column; gap: 6px;
    pointer-events: none;
}
.toast {
    background: rgba(10,22,40,0.92); color: #e0e8f0;
    border-radius: 10px; padding: 8px 16px; font-size: 0.9em;
    border-left: 4px solid #f0c040;
    backdrop-filter: blur(6px);
    animation: toastIn 0.3s ease-out forwards;
    pointer-events: auto;
}
.toast.out {
    animation: toastOut 0.3s ease-in forwards;
}

/* Turn change overlay */
#turnOverlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 8; opacity: 0;
}