.sf-game-fab {
  --sf-primary:#14a5a3; --sf-accent:#ff6b57; --sf-dark:#0b1d20;
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 52px; height: 52px; border-radius: 999px; display:flex; align-items:center; justify-content:center;
  background: var(--sf-primary); color:#fff; font-size: 24px; box-shadow: 0 10px 26px rgba(0,0,0,.24); cursor:pointer;
}
.sf-game-fab.left { right: auto; left: 18px; }

.sf-game-drawer { position: fixed; right: 18px; bottom: 78px; z-index: 9999; display: none; }
.sf-game-drawer.left { right: auto; left: 18px; }
.sf-game-drawer.open { display: block; }

.sf-drawer-card {
  background: #fffdf6; border: 1px solid #00000018; border-radius: 12px; padding: 12px; width: 260px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.sf-drawer-header { display:flex; align-items:center; gap:8px; margin-bottom: 8px; }
.sf-drawer-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sf-drawer-title { font-weight: 800; }

.sf-game { display:flex; align-items:center; gap:10px; padding:8px; border-radius: 8px; color:#0b1d20; text-decoration:none; }
.sf-game:hover { background:#ffffff; box-shadow: inset 0 1px 0 #00000010; }
.sf-game .sf-emoji {
  width: 32px; height: 32px; display:inline-flex; align-items:center; justify-content:center; font-size: 20px;
  background:#fff; border:1px solid #00000012; border-radius:8px;
}