/* ============================================================
   referral.css — invite-friends sheet (Figma «Refferal» 4576:64447)
   and the success toast (Figma «Master Toast Notification» 4576:64435).

   One component, two layouts, as the design specifies:
     ≤480px  bottom sheet (4575:63915) — same width rule as the game: below
             481px the app is full-screen, so the sheet hugs the bottom.
     ≥481px  centred modal (4578:64592).
   Namespaced `rfs-*` / `ntf-*`. Values are the Figma variables; existing
   tokens from tokens.css are used where they match exactly.
============================================================ */

:root{
  /* Figma "Primary Gradiant Color" on this button — its own angle. */
  --grad-referral:linear-gradient(171.2deg,#A69CFF 7.36%,#2A4BD1 60.94%);
}

/* ---- container: bottom sheet by default ---- */
.rfs{position:fixed;inset:auto 0 0 0;z-index:41;max-width:402px;margin:0 auto;
  background:var(--bg-100);border-radius:16px 16px 0 0;
  padding:0 16px 24px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.rfs.open{transform:translateY(0)}

/* ---- header ---- */
.rfs-hd{position:sticky;top:0;z-index:2;background:var(--bg-100);padding-top:12px;width:100%}
.rfs-grip{width:60px;height:4px;border-radius:100px;background:var(--tx-500);margin:0 auto}
.rfs-hdrow{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.rfs-x{background:none;border:0;padding:2px;cursor:pointer;line-height:0;border-radius:8px;flex:0 0 auto}
.rfs-x img{display:block}
.rfs-hdtitle{flex:1;text-align:center;font-size:16px;line-height:28px;font-weight:500;color:var(--tx-100)}
.rfs-hdpad{width:28px;flex:0 0 auto}

/* ---- body ---- */
.rfs-body{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.rfs-art{width:190px;height:190px;object-fit:cover;display:block;flex:0 0 auto}
.rfs-content{display:flex;flex-direction:column;gap:24px;width:100%}
.rfs-text{display:flex;flex-direction:column;gap:8px;width:100%}
.rfs-title{margin:0;font-size:16px;line-height:28px;font-weight:500;color:var(--tx-100);text-align:center}
.rfs-desc{margin:0;padding:0 16px;font-size:14px;line-height:24px;font-weight:400;color:var(--tx-300);text-align:center}

/* ---- code field ---- */
.rfs-code{display:flex;flex-direction:column;gap:6px;width:100%}
.rfs-label{margin:0;padding:0 12px;font-size:12px;line-height:20px;font-weight:700;color:var(--tx-400);text-align:right}
/* The code is Latin — it reads left-to-right with the copy icon after it. */
.rfs-field{direction:ltr;display:flex;align-items:center;gap:4px;height:48px;box-sizing:border-box;
  background:var(--bg-200);border:1px solid var(--st-100);border-radius:6px;padding:0 12px}
.rfs-val{flex:1;min-width:0;padding-top:2px;font-size:14px;line-height:24px;font-weight:400;color:var(--tx-200);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.rfs-copy{background:none;border:0;padding:0;cursor:pointer;line-height:0;flex:0 0 auto;border-radius:6px}
.rfs-copy img{display:block}

/* ---- buttons ---- */
.rfs-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.rfs-share,.rfs-hist{width:100%;min-width:70px;border:0;border-radius:12px;cursor:pointer;
  padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 16px/28px inherit;font-family:inherit;color:var(--tx-100)}
.rfs-share{background-image:var(--grad-referral)}
.rfs-hist{background:var(--bg-300)}
.rfs-shic{position:relative;width:24px;height:24px;flex:0 0 auto}
/* Figma places the 21.4×21.23 glyph inset 5.75% / 5.42% inside its 24px box. */
.rfs-shic img{position:absolute;top:5.75%;right:5.42%;bottom:5.79%;left:5.42%;display:block}

/* ---- desktop: centred modal ---- */
@media (min-width:481px){
  .rfs{inset:50% auto auto 50%;max-width:none;width:405px;margin:0;
    border-radius:16px;padding:0 24px 24px;gap:16px;
    max-height:calc(100dvh - 48px);
    transform:translate(-50%,-50%) scale(.96);opacity:0;
    transition:transform .2s ease,opacity .2s ease}
  .rfs.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .rfs-hd{padding:24px 0 12px}
  .rfs-grip{display:none}
  .rfs-hdrow{padding:0}
}
@media (prefers-reduced-motion:reduce){.rfs{transition:none}}

/* ---- success toast ----
   Fixed at the top so it never covers the sheet's buttons. Laid out LTR to
   match the design: close X, message, check, green bar on the right edge. */
.ntf{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:2600;
  direction:ltr;display:flex;align-items:center;gap:16px;
  width:min(358px,calc(100% - 32px));height:40px;box-sizing:border-box;padding:6px;
  background:#333;border:1px solid #4C4C4C;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.05);
  animation:ntfin .2s ease}
.ntf-x{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer}
.ntf-x img{display:block}
.ntf-msg{flex:1;min-width:0;margin:0;direction:rtl;text-align:right;
  font-size:14px;line-height:24px;font-weight:400;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;box-sizing:border-box;padding:4px;border-radius:4px;background:rgba(232,248,240,.1)}
.ntf-ic img{display:block}
.ntf-bar{flex:0 0 auto;width:4px;align-self:stretch;border-radius:100px;background:#1FBE72}
@keyframes ntfin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}