/* ================= Floating "Play Ludo" button + pop-up (on every page) ================= */
/* Right side, stacked just above the shopping chatbot button (#cp). Without the chatbot it sits in the corner. */
.lg-fab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 1079; display: flex; flex-direction: column; align-items: flex-end; }
#cp ~ .lg-fab-wrap { bottom: 86px; }
.lg-fab { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 40px; padding: 11px 18px 11px 12px; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, #ff3d9a, #6a5cff); box-shadow: 0 8px 28px rgba(255,61,154,.5); animation: lgGlow 2.6s ease-in-out infinite; position: relative; }
.lg-fab .lg-die { font-size: 1.5rem; display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
.lg-fab:hover { transform: translateY(-2px); }
.lg-fab .lg-badge { position: absolute; top: -8px; right: -6px; background: #ffcf3f; color: #2b1600; font-size: .68rem; font-weight: 800; border-radius: 12px; padding: 2px 7px; box-shadow: 0 0 12px rgba(255,207,63,.8); }
.lg-fab .lg-badge.turn { background: #2ed573; color: #fff; animation: bump 1s infinite; }
@keyframes lgGlow { 50% { box-shadow: 0 8px 38px rgba(106,92,255,.8); } }
.lg-panel { position: fixed; right: 20px; bottom: 84px; width: min(460px, calc(100vw - 40px)); height: min(760px, calc(100vh - 110px)); border-radius: 22px; overflow: hidden;
    background: #120626; box-shadow: 0 24px 80px rgba(18,6,38,.6); border: 1px solid rgba(255,207,63,.35); display: flex; flex-direction: column; z-index: 1079; animation: popIn .3s; }
#cp ~ .lg-fab-wrap .lg-panel { bottom: 150px; height: min(760px, calc(100vh - 176px)); }
.lg-panel[hidden] { display: none; }
.lg-panel.max, #cp ~ .lg-fab-wrap .lg-panel.max { left: 0; right: 0; top: 0; bottom: 0; width: 100vw; height: 100vh; border-radius: 0; }
.lg-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #fff; background: linear-gradient(135deg, #2a0b4a, #7a0f2b); }
.lg-head b { flex: 1; font-size: .95rem; }
.lg-head button, .lg-head a { color: #fff; background: rgba(255,255,255,.1); border: 0; border-radius: 9px; width: 32px; height: 30px; display: grid; place-items: center; text-decoration: none; }
.lg-head button:hover, .lg-head a:hover { background: rgba(255,255,255,.22); color: #ffcf3f; }
.lg-panel iframe { flex: 1; border: 0; width: 100%; background: #120626; }
@media (max-width: 575px) {
    .lg-fab-wrap { right: 12px; bottom: 12px; }
    #cp ~ .lg-fab-wrap { bottom: 76px; }            /* above the round chatbot button on phones */
    .lg-fab .lg-text { display: none; }
    .lg-fab { padding: 12px; }
    .lg-panel, #cp ~ .lg-fab-wrap .lg-panel { left: 0; right: 0; bottom: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; z-index: 1085; }
}
@keyframes wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes bump { 40% { transform: scale(1.25); } }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }