/* Floating "Play Ludo" button + pop-up (right side, just above the chat button) */
.lg-wrap { font-family: Poppins, system-ui, sans-serif; }
.lg-fab { position: fixed; right: 18px; bottom: 80px; z-index: 1045; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 30px;
    padding: 9px 14px 9px 10px; background: linear-gradient(135deg, #0F4EAA, #0A3A80); color: #fff; font: 600 14px Poppins, sans-serif;
    box-shadow: 0 8px 22px rgba(15,78,170,.35); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.lg-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,78,170,.42); }
.lg-die { width: 30px; height: 30px; border-radius: 9px; background: #FDC84C; display: grid; place-items: center; font-size: 18px; animation: lg-wiggle 3s ease-in-out infinite; }
@keyframes lg-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-16deg); } 90% { transform: rotate(14deg); } 95% { transform: rotate(-8deg); } }
.lg-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; background: #FDC84C; color: #1F2A37; border-radius: 10px; padding: 2px 7px; }
.lg-badge.turn { background: #E5484D; color: #fff; animation: lg-blink 1s ease-in-out infinite; }
@keyframes lg-blink { 50% { opacity: .55; } }

.lg-panel { position: fixed; right: 18px; bottom: 18px; z-index: 1070; width: min(920px, calc(100vw - 36px)); height: min(640px, calc(100vh - 110px));
    display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(10,58,128,.35);
    border: 1px solid #D6E4F5; animation: lg-up .22s ease-out; }
@keyframes lg-up { from { transform: translateY(20px); opacity: 0; } }
.lg-panel[hidden] { display: none; }
.lg-panel.max { left: 0; right: 0; bottom: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; }
.lg-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; background: linear-gradient(135deg, #0F4EAA, #0A3A80); color: #fff; }
.lg-head b { font-size: 15px; }
.lg-head small { opacity: .75; font-size: 12px; margin-right: auto; }
.lg-head-die { font-size: 18px; }
.lg-head button, .lg-head a { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; text-decoration: none; cursor: pointer; }
.lg-head button:hover, .lg-head a:hover { background: rgba(255,255,255,.25); color: #fff; }
.lg-panel iframe { flex: 1; width: 100%; border: 0; background: #F4F7FB; }

@media (max-width: 576px) {
    .lg-fab { right: 14px; bottom: 76px; padding: 8px 12px 8px 8px; }
    .lg-text { display: none; }
    .lg-panel { left: 0; right: 0; bottom: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; }
}
@media print { .lg-wrap { display: none !important; } }