/* ── FAB GROUP (chat + emoji, bottom-right) ─────────────────── */
#fab-group {
    position: fixed;
    bottom: 56px;
    right: 14px;
    z-index: 200;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    /* Whole floating container is click-through — only the FAB buttons
       and the OPEN tray/picker re-enable pointer events below. This makes
       it impossible for the invisible closed trays to block token taps. */
    pointer-events: none;
}

/* ── CHAT FAB ───────────────────────────────────────────────── */
#chat-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

#chat-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    pointer-events: auto;
}

#chat-fab:hover  { background: rgba(255,255,255,0.22); }
#chat-fab:active { transform: scale(0.9); }
#chat-fab.open   { background: rgba(255,255,255,0.25); transform: scale(1.08); }

/* Tray slides up above the chat FAB.
   Hidden state uses visibility:hidden (delayed until after the fade-out)
   so the tray occupies no layout space and can never capture a click. */
#chat-tray {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.93);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

#chat-tray::-webkit-scrollbar { display: none; }

#chat-tray.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.chat-msg-btn {
    background: rgba(25,25,25,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 18px;
    padding: 6px 13px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.12s, transform 0.1s;
    line-height: 1.3;
    text-align: right;
}

.chat-msg-btn:hover  { background: rgba(55,55,55,0.92); transform: scale(1.04); }
.chat-msg-btn:active { transform: scale(0.95); }

/* ── CHAT FEED — zero-height anchor so board is never pushed ─── */
#chat-feed-anchor {
    width: 100%;
    max-width: 760px;
    height: 0;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    /* Belt & suspenders: the anchor itself must never be a click target */
    pointer-events: none;
}

#chat-feed {
    position: absolute;
    top: 0;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    pointer-events: none;
    max-width: min(240px, 65%);
}

.chat-bubble {
    background: rgba(20,20,20,0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 5px 11px;
    font-size: 12px;
    color: #fff;
    line-height: 1.35;
    max-width: min(240px, 65%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    animation: chat-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    word-break: break-word;
    pointer-events: none;
}

.chat-bubble .chat-sender {
    font-weight: 700;
    margin-right: 4px;
}

.chat-bubble.chat-out {
    animation: chat-out 0.35s ease forwards;
}

@keyframes chat-in {
    from { opacity: 0; transform: translateX(-12px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0)     scale(1);   }
}

@keyframes chat-out {
    to { opacity: 0; transform: translateX(-16px); max-height: 0; padding: 0 11px; margin: 0; }
}

/* ── EMOJI FAB ─────────────────────────────────────────────── */
#emoji-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

#emoji-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    pointer-events: auto;
}

#emoji-fab:hover  { background: rgba(255,255,255,0.22); }
#emoji-fab:active { transform: scale(0.9); }
#emoji-fab.open   { background: rgba(255,255,255,0.25); transform: scale(1.08); }

/* Hidden picker uses visibility:hidden so it occupies no layout space
   and can never capture a click when closed. */
#emoji-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

#emoji-picker.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.emoji-btn {
    background: rgba(30,30,30,0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 21px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.12s, transform 0.12s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.emoji-btn:hover  { background: rgba(60,60,60,0.9); transform: scale(1.15); }
.emoji-btn:active { transform: scale(0.88); }

.emoji-btn-sent {
    background: rgba(255,255,255,0.28) !important;
    transform: scale(1.22) !important;
}

/* ── EMOJI FLOAT CONTAINER ──────────────────────────────────── */
.emoji-float {
    position: fixed;
    pointer-events: none;
    z-index: 300;
    /* outer element handles rise + fade */
    transform: translateX(-50%) translateY(0px);
    opacity: 1;
    transition: none;
}

.emoji-float-go {
    transform: translateX(-50%) translateY(-100px);
    opacity: 0;
    transition: transform 1.8s cubic-bezier(0.15, 0.8, 0.35, 1),
                opacity   1.8s ease-in;
}

/* Inner glyph — animations run on this so they don't fight the outer rise */
.emoji-face {
    font-size: 36px;
    line-height: 1;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
    transform-origin: center bottom;
    pointer-events: none;
}

/* Particles share absolute positioning inside .emoji-float */
.emoji-particle {
    position: absolute;
    pointer-events: none;
    font-size: 12px;
    line-height: 1;
}

/* ── PER-EMOJI KEYFRAMES ─────────────────────────────────────── */

/* 😂 / 🤣 wobble */
@keyframes ef-wobble {
    0%   { transform: rotate(0deg)   scale(1);    }
    20%  { transform: rotate(-14deg) scale(1.12); }
    40%  { transform: rotate(12deg)  scale(1.08); }
    60%  { transform: rotate(-10deg) scale(1.05); }
    80%  { transform: rotate(7deg)   scale(1.02); }
    100% { transform: rotate(0deg)   scale(1);    }
}
.ef-wobble { animation: ef-wobble 0.55s ease-in-out 2; }

/* Teardrop particles for 😂/🤣 */
@keyframes ef-tear-l {
    0%   { transform: translate(0,0)     opacity: 1; }
    100% { transform: translate(-18px, 20px); opacity: 0; }
}
@keyframes ef-tear-r {
    0%   { transform: translate(0,0)     opacity: 1; }
    100% { transform: translate(18px, 20px);  opacity: 0; }
}
.ef-tear-l { animation: ef-tear-l 0.7s ease-out forwards; }
.ef-tear-r { animation: ef-tear-r 0.7s ease-out forwards; }

/* 🔥 flicker */
@keyframes ef-flicker {
    0%,100% { transform: scaleY(1)    scaleX(1);    }
    15%     { transform: scaleY(1.18) scaleX(0.88); }
    30%     { transform: scaleY(0.92) scaleX(1.06); }
    50%     { transform: scaleY(1.22) scaleX(0.85); }
    70%     { transform: scaleY(0.95) scaleX(1.04); }
    85%     { transform: scaleY(1.14) scaleX(0.9);  }
}
.ef-flicker { animation: ef-flicker 0.35s ease-in-out 4; }

/* 🎉 bounce */
@keyframes ef-bounce {
    0%,100% { transform: translateY(0)    scale(1);    }
    25%     { transform: translateY(-10px) scale(1.15); }
    55%     { transform: translateY(4px)  scale(0.95); }
    75%     { transform: translateY(-6px) scale(1.08); }
}
.ef-bounce { animation: ef-bounce 0.5s ease-in-out 2; }

/* Confetti particles for 🎉 */
@keyframes ef-conf {
    0%   { transform: translate(0,0)  rotate(0deg)   scale(1); opacity: 1; }
    100% { transform: var(--tx)       rotate(360deg) scale(0); opacity: 0; }
}
.ef-conf { animation: ef-conf 0.8s ease-out forwards; }

/* 😤 pulse */
@keyframes ef-pulse {
    0%,100% { transform: scale(1);    }
    40%     { transform: scale(1.22); }
    70%     { transform: scale(0.93); }
}
.ef-pulse { animation: ef-pulse 0.4s ease-in-out 2; }

/* Steam for 😤 */
@keyframes ef-steam-l {
    0%   { transform: translate(0,0)       scale(1);   opacity: 0.9; }
    100% { transform: translate(-22px,-8px) scale(1.6); opacity: 0;   }
}
@keyframes ef-steam-r {
    0%   { transform: translate(0,0)      scale(1);   opacity: 0.9; }
    100% { transform: translate(22px,-8px) scale(1.6); opacity: 0;   }
}
.ef-steam-l { animation: ef-steam-l 0.55s ease-out forwards; }
.ef-steam-r { animation: ef-steam-r 0.55s ease-out forwards; }

/* 👑 spin */
@keyframes ef-spin {
    0%   { transform: rotate(0deg)   scale(1);    }
    30%  { transform: rotate(-18deg) scale(1.12); }
    60%  { transform: rotate(22deg)  scale(1.08); }
    100% { transform: rotate(0deg)   scale(1);    }
}
.ef-spin { animation: ef-spin 0.65s ease-in-out 2; }

/* Sparkles for 👑 */
@keyframes ef-spark {
    0%   { transform: translate(0,0) scale(0); opacity: 1; }
    50%  { opacity: 1; }
    100% { transform: var(--tx)      scale(1); opacity: 0; }
}
.ef-spark { animation: ef-spark 0.7s ease-out forwards; }

/* 💀 rattle */
@keyframes ef-rattle {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-5px) rotate(-4deg); }
    30%     { transform: translateX(5px)  rotate(4deg);  }
    45%     { transform: translateX(-4px) rotate(-3deg); }
    60%     { transform: translateX(4px)  rotate(3deg);  }
    75%     { transform: translateX(-2px); }
}
.ef-rattle { animation: ef-rattle 0.4s ease-in-out 2; }

/* 😮 zoom pulse */
@keyframes ef-zoom {
    0%   { transform: scale(0.5); opacity: 0.5; }
    45%  { transform: scale(1.3); opacity: 1;   }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1);   }
}
.ef-zoom { animation: ef-zoom 0.45s cubic-bezier(0.34,1.56,0.64,1) 1; }

/* STATUS BAR — connection left, activity events right */
#status-bar {
    width: 100%;
    max-width: 760px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-top: 6px;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 32px;
}

#status-connection {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

#status-conn-icon { font-size: 13px; }

#status-conn-text {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

#status-event {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    min-width: 0;
}

#status-icon { font-size: 13px; flex-shrink: 0; }

#status-text {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TURN LABEL — left of dice in #controls */
#current-player {
    color: white;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    transition: color 0.3s;
    letter-spacing: 0.5px;
    line-height: 1.2;
}