/* Belecsöppenés-felajánlás (2026-09-21).
   SZÁNDÉKOSAN nem modál: a játékos épp játszik, nem akarjuk megállítani.
   Halk kártya a sarokban, ami megvárható és egy gombbal eltüntethető. */

.mx-dropin{position:fixed;right:16px;bottom:16px;z-index:58;
  width:min(380px,calc(100vw - 32px));
  display:flex;gap:10px;align-items:flex-start;
  background:var(--panel,#f3ead6);color:var(--text,#2b2317);
  border:1px solid var(--border,#c9b892);
  border-left:4px solid var(--accent,#8b6914);
  border-radius:10px;padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  animation:mx-dropin-be .32s ease-out}

@keyframes mx-dropin-be{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mx-dropin{animation:none}
}

.mx-dropin-x{position:absolute;top:4px;right:6px;background:transparent;border:0;
  font-size:.9rem;line-height:1;cursor:pointer;color:inherit;opacity:.55;
  padding:4px 6px;border-radius:6px}
.mx-dropin-x:hover{opacity:1;background:rgba(127,127,127,.16)}

.mx-dropin-kep{flex:0 0 72px;width:72px;height:72px;object-fit:cover;
  border-radius:8px;border:1px solid var(--border,#c9b892)}
.mx-dropin-torzs{flex:1 1 auto;min-width:0;padding-right:14px}

.mx-dropin-fej{font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;
  opacity:.65;margin-bottom:2px}
.mx-dropin-cim{font-weight:700;font-size:.98rem;line-height:1.3}
.mx-dropin-hook{font-size:.84rem;line-height:1.4;font-style:italic;opacity:.85;
  margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-dropin-mire{font-size:.76rem;opacity:.6;margin-top:4px}
.mx-dropin-fig{font-size:.78rem;line-height:1.4;margin-top:6px;padding:5px 8px;
  border-radius:6px;background:rgba(180,120,20,.14);
  border:1px solid rgba(180,120,20,.35)}

.mx-dropin-sor{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* a három válasz egy sorba fér: a kártya keskeny, a gombok alapmérete nem */
.mx-dropin-sor button{font-size:.8rem;padding-left:9px;padding-right:9px;
  white-space:nowrap}
.mx-dropin-igen{display:inline-flex;align-items:center;gap:5px}
.mx-dropin-bikon{width:17px;height:17px;object-fit:contain;flex:0 0 auto}

@media (max-width:768px){
  .mx-dropin{left:12px;right:12px;bottom:12px;width:auto}
  .mx-dropin-kep{flex:0 0 56px;width:56px;height:56px}
  .mx-dropin-sor button{flex:1 1 auto}
}