/* ============================================
   ROLLIT — SOCIAL LINKS
   --------------------------------------------
   Two things, both rendered by js/social.fefdbb13.js:
     1. `.footer-social` — the row of platform icons that sits in the site
        footer on every page.
     2. `.soc-modal` — the "follow us" popup that greets a visitor once per
        visit (or once ever, for a signed-in account).

   Each icon carries its platform's brand colour, but only on hover/focus:
   at rest they're muted so five logos in a footer read as one quiet row
   rather than a ransom note.
   ============================================ */

/* ---------------- footer row ---------------- */

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}

.footer-social a,
.soc-tiles a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0.5px solid var(--border2);
  background: var(--surface);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}

.footer-social a:hover,
.footer-social a:focus-visible,
.soc-tiles a:hover,
.soc-tiles a:focus-visible {
  color: var(--soc-brand, var(--gold));
  border-color: var(--soc-brand, var(--gold));
  background: var(--bg3);
  transform: translateY(-2px);
  outline: none;
}

/* Brand colours, applied through a custom property so the hover rule above
   stays a single block. */
.soc-discord   { --soc-brand: #5865f2; }
.soc-instagram { --soc-brand: #e1306c; }
.soc-tiktok    { --soc-brand: #25f4ee; }
.soc-youtube   { --soc-brand: #ff0033; }
.soc-facebook  { --soc-brand: #1877f2; }

/* ---------------- promo popup ---------------- */

/* Above the auth modal's 600 so signing in from behind it can't bury it. */
.soc-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 640;
  background: rgba(0,0,0,.8);
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity .2s ease;
}
.soc-modal-bg.open { display: flex; opacity: 1; }

.soc-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 22px;
  padding: 1.75rem 1.5rem 1.4rem;
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.soc-modal-bg.open .soc-modal { transform: none; }

.soc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  font-family: inherit;
  transition: color .18s, background .18s;
}
.soc-close:hover { color: var(--text); background: var(--surface); }

.soc-logo { height: 30px; width: auto; margin: 0 auto 1rem; }
.soc-logo.logo-dark { display: block; }
.soc-logo.logo-light { display: none; }
[data-theme="light"] .soc-logo.logo-dark { display: none; }
[data-theme="light"] .soc-logo.logo-light { display: block; }

.soc-modal h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.9rem;
  letter-spacing: .5px;
  font-weight: 400;
  margin-bottom: .35rem;
}
.soc-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 auto 1.25rem;
  max-width: 320px;
}

/* Discord gets a card of its own — it's where the patch notes land, so it's
   the one link worth spending vertical space on. */
.soc-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0.5px solid rgba(88,101,242,.45);
  background: rgba(88,101,242,.10);
  margin-bottom: 1.1rem;
  transition: background .18s, border-color .18s;
}
.soc-primary:hover { background: rgba(88,101,242,.18); border-color: rgba(88,101,242,.7); }
.soc-primary .soc-primary-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5865f2;
  color: #fff;
  font-size: 22px;
}
/* The name and the blurb are two stacked lines, not one run-on sentence —
   they're spans (a block child would be invalid inside the <a>), so the
   stacking has to come from here. min-width:0 lets the column shrink instead
   of shoving the arrow off the card. */
.soc-primary-text { flex: 1; min-width: 0; }
.soc-primary-name { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.soc-primary-blurb { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.soc-primary .ti-arrow-right { flex: 0 0 auto; color: var(--muted); font-size: 16px; }

.soc-tiles-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .7rem;
}
.soc-tiles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.35rem;
}
.soc-tiles a { width: 52px; height: 52px; border-radius: 14px; font-size: 24px; }

/* ---- install nudge ----
   Sits between the socials and "Maybe later". Deliberately quieter than
   .soc-dismiss: the popup is about the socials, and this is the one other
   thing worth saying to somebody who just arrived. Hidden by js/social.fefdbb13.js
   when the popup is already running inside the installed app. */
.soc-install {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  margin-bottom: .8rem;
  padding: 10px 13px;
  border-radius: 11px;
  border: 0.5px solid var(--border2);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.soc-install:hover { border-color: rgba(232,201,107,.4); background: rgba(232,201,107,.07); }
.soc-install:visited { color: var(--text); }
.soc-install > i:first-child { color: var(--gold); font-size: 17px; flex-shrink: 0; }
.soc-install-text { flex: 1; min-width: 0; text-align: left; line-height: 1.45; }
.soc-install-text span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.soc-install > i:last-child { color: var(--muted); font-size: 15px; flex-shrink: 0; }

.soc-dismiss {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--gold);
  color: #1a1000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s;
}
.soc-dismiss:hover { background: #f0d57a; }

.soc-note { font-size: 11.5px; color: var(--dim); margin-top: .7rem; line-height: 1.5; }

/* Keep the page behind the popup still while it's open. */
html.soc-locked, body.soc-locked { overflow: hidden; }

@media (max-width: 480px) {
  .soc-modal { padding: 1.5rem 1.15rem 1.25rem; }
  .soc-modal h2 { font-size: 1.65rem; }
  .soc-tiles a { width: 48px; height: 48px; font-size: 22px; }
  .footer-social a { width: 34px; height: 34px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .soc-modal-bg, .soc-modal, .footer-social a, .soc-tiles a { transition: none; }
  .soc-modal { transform: none; }
}