/* ============================================================
   Mayflower Studios — Enchanted Night Garden
   Shared design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=Nunito+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  --bg:           #0b1120;
  --bg-mid:       #111827;
  --rose:         #f9a8d4;
  --rose-deep:    #ec4899;
  --violet:       #c4b5fd;
  --violet-deep:  #8b5cf6;
  --gold:         #fde68a;
  --emerald:      #6ee7b7;
  --text:         #faf5ff;
  --text-2:       rgba(250,245,255,.78);
  --text-3:       rgba(250,245,255,.60);
  --border:       rgba(249,168,212,.10);
  --border-2:     rgba(249,168,212,.20);
  --glass:        rgba(11,17,32,.68);
  --glass-2:      rgba(255,255,255,.04);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --ease: cubic-bezier(.4,0,.2,1);
  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  /* legacy compat */
  --font: var(--font-b);
  --mono: var(--font-m);
  --accent: var(--rose);
  --muted: var(--text-2);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0; font-family: var(--font-b);
  font-size: 15px; color: var(--text); line-height: 1.65;
  background: var(--bg); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-family: var(--font-d); font-weight: 400; }
p { margin: 0; }
img { display: block; max-width: 100%; }
code { font-family: var(--font-m); font-size: .9em; }

/* A clear, consistent keyboard focus ring across both shared and page-specific
   controls. Mouse users do not see it; keyboard and switch users always do. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(253,230,138,.92);
  outline-offset: 3px;
}

/* ── Background ── */
.bg-scene {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,17,32,.58) 0%, rgba(11,17,32,.75) 100%),
    url('/assets/cherry-bg.webp') center / cover no-repeat;
}
.bg-glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 15% 5%,  rgba(196,181,253,.13), transparent 65%),
    radial-gradient(ellipse 700px 500px at 85% 10%, rgba(249,168,212,.12), transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 95%, rgba(110,231,183,.07), transparent 60%);
}
#fireflies {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: .9;
}
#petals {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 1; pointer-events: none; opacity: .5;
}

/* ── Page wrapper ── */
.site-page { position: relative; z-index: 2; min-height: 100vh; }

/* ── NAV ── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  padding: 14px 24px 10px;
  background: linear-gradient(180deg, rgba(11,17,32,.82) 0%, rgba(11,17,32,.55) 70%, transparent 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 4px 4px 12px;
  border: none; border-radius: 0; background: none; box-shadow: none;
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  flex-direction: row;
}
.nav-brand::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(253,230,138,.7), 0 0 14px rgba(253,230,138,.4);
  animation: navGlow 3.2s var(--ease) infinite;
}
@keyframes navGlow {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.nav-brand strong {
  font-family: var(--font-d); font-size: 20px; font-weight: 400; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--text) 30%, var(--rose) 95%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.nav-brand span { display: none; }  /* tagline lives on the homepage hero, not the bar */

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  position: relative;
  font-family: var(--font-b); font-size: 14px; font-weight: 500; color: var(--text-2);
  padding: 6px 4px; margin: 0 8px; border: none; background: none; border-radius: 0;
  transition: color 180ms var(--ease); white-space: nowrap;
}
/* the firefly-underline */
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; transform: scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--rose) 35%, var(--violet) 65%, transparent);
  box-shadow: 0 0 8px rgba(249,168,212,.5);
  transition: transform 220ms var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.nav-active { color: var(--rose); }
.nav-links a.nav-active::after { transform: scaleX(1); }

.nav-mob-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 34px; border: 1px solid var(--border-2);
  border-radius: var(--r-sm); background: var(--glass-2);
  cursor: pointer; color: var(--text-2); font-size: 17px;
}
.nav-mob-btn:hover { color: var(--text); border-color: var(--border-2); }

@media (max-width: 720px) {
  .site-nav { padding: 12px 16px 8px; }
  .nav-links {
    display: none; flex-direction: column; align-items: stretch;
    gap: 2px; width: 100%; padding-top: 10px;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    margin: 0; padding: 11px 10px; border-radius: var(--r-sm);
    border: 1px solid transparent;
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover { background: rgba(255,255,255,.05); }
  .nav-links a.nav-active { background: rgba(249,168,212,.08); border-color: rgba(249,168,212,.18); }
  .nav-inner { flex-wrap: wrap; }
  .nav-mob-btn { display: flex; }
}

/* ── Content area ── */
.content {
  max-width: 1060px; margin: 0 auto;
  padding: 60px 24px 80px;
  display: flex; flex-direction: column; gap: 48px;
}
@media (max-width: 640px) { .content { padding: 40px 16px 60px; gap: 36px; } }

/* ── Page Hero ── */
.page-hero {
  display: flex; flex-direction: column; gap: 16px;
}
.page-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--rose);
}
.page-title { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; }
.page-title em {
  font-style: italic;
  background: linear-gradient(130deg, var(--rose) 10%, var(--violet) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-sub { font-size: 16px; color: var(--text-2); max-width: 62ch; line-height: 1.75; }
.page-sub strong { color: var(--text); font-weight: 500; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ── Section header ── */
.sec { display: flex; flex-direction: column; gap: 20px; }
.sec-head { display: flex; flex-direction: column; gap: 6px; }
.sec-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--rose); }
.sec-title { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; }
.sec-sub { font-size: 14px; color: var(--text-2); max-width: 68ch; }

/* ── Grid ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 761px) and (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }

/* ── Cards ── */
.card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  position: relative; overflow: hidden;
}
.card:hover { border-color: var(--border-2); box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.card-shine {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,168,212,.3), rgba(196,181,253,.2), transparent);
  opacity: 0; transition: opacity 200ms;
}
.card:hover .card-shine { opacity: 1; }
.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { color: var(--text-2); line-height: 1.7; }

.card-accent-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rose), var(--violet), transparent); opacity: .5;
}

/* ── Badge ── */
.badge {
  font-family: var(--font-b); font-size: 10px; font-weight: 600; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--text-3); background: rgba(255,255,255,.04);
}
.badge-green { color: var(--emerald); border-color: rgba(110,231,183,.3); background: rgba(110,231,183,.07); }
.badge-violet { color: var(--violet); border-color: rgba(196,181,253,.25); background: rgba(196,181,253,.07); }
.badge-rose { color: var(--rose); border-color: rgba(249,168,212,.25); background: rgba(249,168,212,.07); }

/* ── Buttons ── */
.btn-pri {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-b); font-weight: 600; font-size: 14px;
  padding: 11px 22px; border-radius: var(--r-md); border: none; cursor: pointer;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
  box-shadow: 0 4px 20px rgba(249,168,212,.22);
  transition: all 160ms var(--ease); text-decoration: none;
}
.btn-pri:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,168,212,.32); }
.btn-pri.sm { font-size: 13px; padding: 9px 16px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-b); font-weight: 500; font-size: 14px;
  padding: 10px 20px; border-radius: var(--r-md); cursor: pointer;
  color: var(--text-2); background: rgba(255,255,255,.06);
  border: 1px solid var(--border-2);
  transition: all 160ms var(--ease); text-decoration: none;
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.10); border-color: rgba(249,168,212,.25); transform: translateY(-1px); }
.btn-ghost.sm { font-size: 13px; padding: 8px 15px; }

.btn-violet {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-b); font-weight: 600; font-size: 14px;
  padding: 11px 22px; border-radius: var(--r-md); border: none; cursor: pointer;
  color: #0b1120; background: linear-gradient(135deg, var(--violet), var(--rose));
  box-shadow: 0 4px 20px rgba(196,181,253,.2); transition: all 160ms var(--ease); text-decoration: none;
}
.btn-violet:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(196,181,253,.3); }
.btn-violet.sm { font-size: 13px; padding: 9px 16px; }

/* Legacy button aliases */
a.button, .button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-b); font-weight: 600; font-size: 13px;
  padding: 9px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; transition: all 160ms var(--ease); text-decoration: none; color: #0b1120;
}
a.button:hover, .button:hover { transform: translateY(-1px); }
a.button.mods, .button.mods { background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 3px 14px rgba(249,168,212,.18); }
a.button.bots, .button.bots { background: linear-gradient(135deg, var(--violet), #d8b4fe); box-shadow: 0 3px 14px rgba(196,181,253,.18); }
a.button.ghost, .button.ghost, a.btn.ghost, .btn.ghost {
  color: var(--text-2); background: rgba(255,255,255,.06); border-color: var(--border-2);
}
a.button.ghost:hover, .button.ghost:hover { color: var(--text); background: rgba(255,255,255,.10); border-color: rgba(249,168,212,.25); }
a.button.disabled { pointer-events: none; opacity: .35; }
a.btn, .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-b); font-weight: 600; font-size: 13.5px; padding: 10px 20px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: all 160ms var(--ease); text-decoration: none; color: #0b1120; }
a.btn:hover, .btn:hover { transform: translateY(-1px); }
a.btn.primary, .btn.primary { background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 3px 14px rgba(249,168,212,.2); }
a.btn.bots, .btn.bots { background: linear-gradient(135deg, var(--violet), var(--rose)); box-shadow: 0 3px 14px rgba(196,181,253,.2); }

/* ── Code + Callouts ── */
.codebox {
  border: 1px solid var(--border); background: rgba(0,0,0,.22);
  border-radius: var(--r-md); padding: 16px; overflow: auto;
  margin: 2px 0;
}
.codebox code {
  font-family: var(--font-m); font-size: 12.5px; color: rgba(255,255,255,.82);
  white-space: pre; line-height: 1.7;
}
.callout {
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  border-radius: var(--r-md); padding: 16px;
}
.callout strong { display: block; margin-bottom: 6px; }
.callout p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }

/* ── Info row / address boxes ── */
.addr-box {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: rgba(0,0,0,.22);
}
.addr-box code { font-family: var(--font-m); font-size: 15px; color: var(--gold); flex: 1; }
.copy-btn {
  font-family: var(--font-b); font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(253,230,138,.25); background: rgba(253,230,138,.07);
  color: var(--gold); transition: all 140ms var(--ease);
}
.copy-btn:hover { background: rgba(253,230,138,.14); }
.copy-btn.copied { color: var(--emerald); border-color: rgba(110,231,183,.3); background: rgba(110,231,183,.08); }

/* ── Steps ── */
.step-list { display: flex; flex-direction: column; gap: 12px; }
.step {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px; background: rgba(255,255,255,.03);
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: 14px; line-height: 1.7; }

/* ── Tiles (small info units) ── */
.tile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 500px) { .tile-grid { grid-template-columns: 1fr; } }
.tile {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255,255,255,.03); padding: 14px;
  transition: border-color 160ms;
}
.tile:hover { border-color: var(--border-2); }
.tile strong { display: block; margin-bottom: 4px; font-size: 13px; font-family: var(--font-b); }
.tile p { color: var(--text-3); font-size: 12.5px; line-height: 1.55; margin: 0; }

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.data-table th, .data-table td {
  text-align: left; padding: 10px 12px;
  border: 1px solid var(--border); vertical-align: top;
}
.data-table th { background: rgba(0,0,0,.25); color: var(--text); font-weight: 600; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.data-table td { color: var(--text-2); line-height: 1.6; }
.data-table td strong { color: var(--text); }
@media (max-width: 600px) { .data-table th, .data-table td { padding: 8px; font-size: 12px; } }

/* ── Tabs ── */
.tab-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-btn {
  font-family: var(--font-b); font-size: 13px; font-weight: 500;
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border-2);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: all 160ms var(--ease);
}
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.tab-btn.active { color: var(--rose); background: rgba(249,168,212,.08); border-color: rgba(249,168,212,.25); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Legal / prose ── */
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { color: var(--text-2); font-size: 14px; line-height: 1.8; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin: 5px 0; }
.prose a { color: var(--rose); text-decoration: underline; text-decoration-color: rgba(249,168,212,.3); }
.prose a:hover { text-decoration-color: var(--rose); }
.prose hr { border: none; height: 1px; background: var(--border); margin: 20px 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { color: var(--rose); background: rgba(249,168,212,.08); padding: 1px 5px; border-radius: 4px; }
.summary-box {
  border: 1px solid rgba(249,168,212,.2); background: rgba(249,168,212,.06);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 24px;
}
.summary-box strong { display: block; color: var(--rose); margin-bottom: 6px; font-family: var(--font-b); }

/* ── Realm cards (lore) ── */
.realm-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.realm-card:hover { border-color: var(--border-2); box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.realm-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.realm-card h3 { font-size: 22px; }
.realm-card .realm-meta { font-size: 13px; color: var(--text-3); line-height: 1.65; margin-bottom: 14px; }
.realm-card .realm-meta strong { color: var(--text-2); font-weight: 500; }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); border: none; }

/* ── Footer ── */
.site-footer {
  max-width: 1060px; margin: 0 auto 0;
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* Inside .wrap the footer already has horizontal padding from the container */
.wrap .site-footer { padding-left: 0; padding-right: 0; margin-top: 8px; }
.footer-brand { font-family: var(--font-d); font-size: 18px; color: var(--text-2); }
.footer-links { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-links a {
  font-size: 12px; color: var(--text-3); padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--border);
  transition: all 140ms var(--ease);
}
.footer-links a:hover { color: var(--text-2); border-color: var(--border-2); }
.footer-copy { font-size: 12px; color: var(--text-3); width: 100%; text-align: center; margin-top: 4px; }

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(249,168,212,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(249,168,212,.35); }

/* ============================================================
   LEGACY COMPAT — bot/mod pages use these classes unchanged
   ============================================================ */

/* .wrap — old page container */
.wrap {
  width: min(1060px, 100%); margin: 0 auto;
  position: relative; z-index: 2;
  padding: 20px 24px 64px;
  display: flex; flex-direction: column; gap: 28px;
}
@media (max-width: 640px) { .wrap { padding: 14px 16px 48px; gap: 20px; } }

/* .hero — two-column page hero */
.hero {
  padding: 32px 28px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 64px rgba(0,0,0,.28);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px;
  align-items: start; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 500px 300px at 0% 0%, rgba(196,181,253,.12), transparent),
    radial-gradient(ellipse 400px 250px at 100% 100%, rgba(249,168,212,.10), transparent);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; margin-bottom: 8px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding: 24px 20px; } }

/* .kicker — eyebrow label */
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--rose); margin-bottom: 8px;
}

/* .muted — secondary text */
.muted { color: var(--text-2); line-height: 1.72; margin: 0; }
.muted2 { color: var(--text-3); line-height: 1.65; }
.desc { color: var(--text-2); line-height: 1.68; margin-bottom: 12px; }
.small { font-size: 13.5px; line-height: 1.6; }
.muted.small, .desc.small { font-size: 13.5px; }

/* .sectionTitle — labeled section dividers */
.sectionTitle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 4px;
}
.sectionTitle h2 { font-size: 24px; }
.sectionTitle h2::after {
  content: ''; display: block; height: 2px; width: 44px; margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--violet), transparent); opacity: .5;
}
.sectionTitle span { color: var(--text-3); font-size: 13px; }

/* .grid3 */
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr; } }

/* .tileGrid in old pages (auto-fill) */
.tileGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 500px) { .tileGrid { grid-template-columns: 1fr; } }

/* two-column card grid used by mods + bots pages */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* Projects index cards */
.projGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.projCard {
  display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--glass); text-decoration: none; color: inherit;
  transition: transform .14s var(--ease), border-color .14s var(--ease);
}
.projCard:hover { transform: translateY(-3px); border-color: rgba(249,168,212,.4); }
.projCard .pc-head { display: flex; align-items: center; gap: 10px; }
.projCard .pc-ic { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.projCard .pc-emoji { font-size: 26px; line-height: 1; }
.projCard h3 { margin: 0; font-size: 17px; }
.projCard .pc-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .55; margin: 0; }
.projCard .pc-tag { font-size: 13.5px; opacity: .8; line-height: 1.5; margin: 0; }

/* .ctaRow / .btnrow */
.ctaRow, .btnrow {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}

/* .btn.invite — Discord invite button */
a.btn.invite, .btn.invite {
  color: #0b1120;
  background: linear-gradient(135deg, var(--rose), var(--violet));
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(249,168,212,.22);
}
a.btn.invite:hover, .btn.invite:hover {
  box-shadow: 0 8px 28px rgba(249,168,212,.35);
  transform: translateY(-2px);
}

/* hr.sep */
hr.sep { border: 0; height: 1px; background: var(--border); margin: 14px 0; }

/* details/summary inside .commandRef */
.commandRef details { padding: 10px 0; border-bottom: 1px solid var(--border); }
.commandRef details:last-child { border-bottom: none; }
.commandRef details[open] { padding-bottom: 6px; }
.commandRef summary {
  cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 4px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.commandRef summary::-webkit-details-marker { display: none; }
.commandRef summary::after {
  content: '▸'; margin-left: auto;
  transition: transform .2s ease; opacity: .4;
}
.commandRef details[open] > summary::after { transform: rotate(90deg); }
.commandRef details ul { margin: 10px 0 0; padding-left: 18px; }
.commandRef details li { padding: 3px 0; font-size: 13.5px; color: var(--text-2); }

/* Media block */
.mediaBlock { display: flex; flex-wrap: wrap; gap: 12px; }
.mediaBlock img { border-radius: var(--r-md); border: 1px solid var(--border); max-height: 280px; }
/* ── Language picker in nav ── */
.nav-lang {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 4px 0 8px; padding: 5px 10px 5px 11px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--glass-2); cursor: pointer;
  transition: border-color 180ms var(--ease);
}
.nav-lang:hover { border-color: rgba(249,168,212,.3); }
.nav-lang-ic { font-size: 13px; line-height: 1; opacity: .8; }
.nav-lang select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background: transparent; outline: none; cursor: pointer;
  color: var(--text-2); font-family: var(--font-b); font-size: 13px; font-weight: 500;
  padding: 0 2px; max-width: 120px;
}
.nav-lang select:hover { color: var(--text); }
.nav-lang select option { background: #141a2e; color: var(--text); }
/* show a subtle shimmer on the page while a translation pass runs */
html[data-mf-translating] .content,
html[data-mf-translating] .wrap { transition: opacity 200ms var(--ease); }

@media (max-width: 720px) {
  .nav-lang {
    margin: 4px 0; justify-content: flex-start; width: 100%;
    border-radius: var(--r-sm); padding: 10px 12px;
  }
  .nav-lang select { max-width: none; flex: 1; font-size: 15px; }
}

/* ── Account link in nav ── */
.nav-links a.nav-account {
  color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: 6px 14px; margin-left: 6px;
}
.nav-links a.nav-account:hover { color: var(--text); border-color: rgba(249,168,212,.3); }
.nav-links a.nav-account.nav-active::after { display: none; }
.nav-links a.nav-account.nav-signed-in {
  color: var(--violet); background: rgba(196,181,253,.08); border-color: rgba(196,181,253,.22);
}
@media (max-width: 720px) {
  .nav-links a.nav-account { margin-left: 0; text-align: left; }
}

/* ════════════════════════════════════════════════
   Universal chat (chat.js)
   ════════════════════════════════════════════════ */
.mf-chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer; border: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
  box-shadow: 0 8px 28px rgba(249,168,212,.4);
  transition: transform 140ms var(--ease);
}
.mf-chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.mf-chat-badge {
  position: absolute; min-width: 19px; height: 19px;
  border-radius: 10px; color: #fff; font-size: 11px; font-weight: 600;
  display: none; align-items: center; justify-content: center; padding: 0 5px;
  font-family: var(--font-b); border: 2px solid var(--bg);
}
.mf-chat-badge.show { display: flex; }
/* DM messages — top-right (rose) */
.mf-badge-dm { top: -4px; right: -4px; background: #fb7185; }
/* friend requests — opposite corner, top-left (violet) */
.mf-badge-req { top: -4px; left: -4px; background: var(--violet-deep); }

.mf-chat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 300;
  /* --mf-chat-w/h are written by chat.js when you drag the corner grip */
  width: var(--mf-chat-w, min(420px, calc(100vw - 40px)));
  height: var(--mf-chat-h, min(620px, calc(100vh - 128px)));
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,17,32,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.mf-chat-panel.open { display: flex; animation: mfChatIn .2s var(--ease); }
.mf-chat-panel.resizing { user-select: none; animation: none; }
@keyframes mfChatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* drag the top-left corner to resize; double-click it to reset */
.mf-chat-grip {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px; z-index: 6;
  cursor: nwse-resize; touch-action: none;
}
.mf-chat-grip::before {
  content: ""; position: absolute; top: 8px; left: 8px; width: 9px; height: 9px;
  border-top: 2px solid rgba(255,255,255,.25); border-left: 2px solid rgba(255,255,255,.25);
  border-top-left-radius: 4px; transition: border-color 140ms var(--ease);
}
.mf-chat-panel:hover .mf-chat-grip::before { border-color: rgba(249,168,212,.75); }

.mf-chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px 10px 22px; border-bottom: 1px solid rgba(255,255,255,.1);
  min-width: 0;
}
.mf-chat-tabs { display: flex; gap: 4px; min-width: 0; }
.mf-ct {
  border: 0; cursor: pointer; font-family: var(--font-b); font-size: 13px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,.04);
  transition: all 140ms var(--ease); white-space: nowrap;
}
.mf-ct:hover { color: var(--text); }
.mf-ct.on { color: var(--rose); background: rgba(249,168,212,.10); }
.mf-chat-x {
  border: 0; cursor: pointer; background: none; color: var(--text-3); font-size: 15px;
  width: 28px; height: 28px; border-radius: 8px;
}
.mf-chat-x:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* the translate language picker lives here, not crammed into the header */
.mf-chat-subbar {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(196,181,253,.05);
  font-size: 11.5px; color: var(--text-3); flex-shrink: 0;
}
.mf-chat-subbar[hidden] { display: none; }
.mf-chat-subbar .mf-tr-lang { margin-left: auto; }
.mf-tr-retry {
  border: 1px solid rgba(249,168,212,.28); border-radius: 999px;
  padding: 4px 9px; color: var(--rose); background: rgba(249,168,212,.08);
  font: 600 11px var(--font-b); cursor: pointer;
}
.mf-tr-retry:hover { background: rgba(249,168,212,.15); }

.mf-chat-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.mf-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
/* keep a flick at the end of the log from scrolling the page behind the chat */
.mf-chat-body, .mf-chat-log, .mf-chat-dmlist, .mf-pickerPop { overscroll-behavior: contain; }

.mf-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; position: relative; }
.mf-msg.them { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
.mf-msg.me   { align-self: flex-end; background: rgba(249,168,212,.20); border-bottom-right-radius: 4px; }
.mf-msg-name { display: block; font-size: 10.5px; opacity: .6; margin-bottom: 2px; }
.mf-msg-text { display: block; }
.mf-msg-text .mf-link {
  color: var(--violet); text-decoration: underline;
  text-decoration-color: rgba(196,181,253,.5); text-underline-offset: 2px;
  word-break: break-word; overflow-wrap: anywhere;
}
.mf-msg-text .mf-link:hover { color: var(--rose); text-decoration-color: var(--rose); }
.mf-msg.me .mf-msg-text .mf-link { color: var(--text); text-decoration-color: rgba(255,255,255,.45); }
.mf-msg.me .mf-msg-text .mf-link:hover { text-decoration-color: var(--text); }
.mf-msg-time { display: block; font-size: 9.5px; opacity: .4; margin-top: 3px; text-align: right; }

/* edited tag + deleted tombstone */
.mf-msg-edited { font-size: 9.5px; opacity: .45; font-style: italic; }
.mf-msg.deleted { opacity: .75; }
.mf-msg-tomb { font-style: italic; opacity: .6; }

/* per-message edit/delete affordance (your own text messages only) */
.mf-msg-actions {
  position: absolute; top: 2px; right: 4px; width: 20px; height: 20px;
  border: 0; border-radius: 6px; cursor: pointer; padding: 0;
  background: transparent; color: var(--text); opacity: 0;
  font-size: 15px; line-height: 1; transition: opacity .12s, background .12s;
}
.mf-msg:hover .mf-msg-actions { opacity: .5; }
.mf-msg-actions:hover { opacity: 1 !important; background: rgba(0,0,0,.25); }
@media (hover: none), (pointer: coarse) {
  .mf-msg-actions { opacity: .55; }
}
.mf-msg.me { padding-right: 24px; }

.mf-msg-menu {
  position: absolute; top: 22px; right: 4px; z-index: 5;
  display: flex; flex-direction: column; min-width: 116px; overflow: hidden;
  background: #141a2e; border: 1px solid rgba(196,181,253,.25);
  border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
.mf-msg-menu button {
  border: 0; background: transparent; color: var(--text); cursor: pointer;
  text-align: left; padding: 9px 12px; font-size: 13px; font-family: var(--font-b);
}
.mf-msg-menu button:hover { background: rgba(196,181,253,.16); }

.mf-msg-editing { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.mf-msg-editfield {
  flex: 1; min-width: 0; padding: 6px 9px; border-radius: 9px; font-size: 14px;
  font-family: var(--font-b); color: var(--text);
  border: 1px solid rgba(196,181,253,.45); background: rgba(0,0,0,.3);
}
.mf-msg-editfield:focus { outline: none; border-color: rgba(196,181,253,.7); }
.mf-msg-editbtns { display: flex; gap: 4px; }
.mf-msg-editbtns button {
  border: 0; border-radius: 8px; width: 28px; height: 28px; cursor: pointer;
  font-size: 14px; color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
}
.mf-msg-editbtns button[data-act="cancel"] { background: rgba(255,255,255,.14); color: var(--text); }

.mf-chat-foot { flex-shrink: 0; }
.mf-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.mf-chat-input input {
  flex: 1; padding: 10px 13px; border-radius: 12px; font-size: 14px; font-family: var(--font-b);
  border: 1px solid var(--border-2); background: rgba(0,0,0,.3); color: var(--text);
}
.mf-chat-input input:focus { outline: none; border-color: rgba(196,181,253,.45); }
.mf-chat-input button {
  border: 0; border-radius: 12px; padding: 0 15px; cursor: pointer; font-size: 16px;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
}

.mf-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px 24px; color: var(--text-2); }
.mf-chat-empty p { font-size: 13.5px; line-height: 1.6; }
.mf-chat-cta {
  margin-top: 4px; padding: 9px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 600;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet)); text-decoration: none;
}

/* DM list */
.mf-chat-dmlist { padding: 8px; overflow-y: auto; }
.mf-dm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: none; color: var(--text); font-family: var(--font-b); font-size: 14px;
  transition: background 140ms var(--ease);
}
.mf-dm-item:hover { background: rgba(255,255,255,.06); }
.mf-dm-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
}
.mf-dm-av.sm { width: 28px; height: 28px; font-size: 12px; }
/* The round crop lives on the image, not the container: the presence dot sits
   just outside the circle, and overflow:hidden here used to swallow it. */
.mf-dm-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mf-dm-name { font-weight: 500; }

.mf-chat-dmhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mf-dm-back { border: 0; background: none; color: var(--text-2); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; }
.mf-dm-back:hover { color: var(--text); }
.mf-dm-headwrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: pointer; }
.mf-dm-headname { font-size: 15px; font-weight: 500; line-height: 1.2; }
.mf-dm-headstatus { font-size: 11.5px; color: var(--text-3); line-height: 1.2; }
.mf-dm-headstatus.typing { color: var(--rose); font-style: italic; }
.mf-chat-dmhead .mf-dm-dot { position: absolute; right: -1px; bottom: -1px; border: 2px solid rgba(11,17,32,.94); }

@media (max-width: 520px) {
  /* Phones get a full sheet sized from the *visual* viewport (chat.js keeps
     --mf-vvh/--mf-vvtop in sync). A vh-sized floating card kept getting half
     buried by the keyboard, and the browser scrolled the page trying to fix it. */
  .mf-chat-panel {
    left: 0; right: 0; bottom: auto; top: var(--mf-vvtop, 0px);
    width: auto; height: var(--mf-vvh, 100dvh);
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  }
  .mf-chat-grip { display: none; }
  .mf-chat-head { padding-left: 10px; gap: 4px; }
  .mf-chat-tabs { gap: 2px; }
  /* Leave room for the moderation button when an admin/owner is signed in. */
  .mf-ct { padding: 7px; font-size: 12px; }
  .mf-chat-headtools { gap: 3px; flex-shrink: 0; }
  .mf-tr-btn, .mf-chat-x { width: 32px; min-width: 32px; height: 32px; }
  .mf-chat-subbar { padding: 8px 10px; }
  .mf-chat-subbar .mf-tr-lang { max-width: 132px; min-height: 34px; font-size: 16px; }
  .mf-chat-fab {
    right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 50px; height: 50px; font-size: 21px;
    box-shadow: 0 6px 22px rgba(249,168,212,.34);
  }
  body.mf-chat-open .mf-chat-fab { display: none; }
  /* Under 16px, iOS Safari zooms the page in on focus — which reads as the
     whole page lurching and rescaling every time you tap the message box.
     Scoped to the panel so these win over the later single-class rules. */
  .mf-chat-panel .mf-chat-input input,
  .mf-chat-panel .mf-gifSearch input,
  .mf-chat-panel .mf-msg-editfield { font-size: 16px; }
  .mf-pickerPop { max-height: 46vh; }
}

/* Data-saving mobile connections keep the garden styling but skip continuously
   animated canvases. The reduced-motion preference is handled below too. */
html.mf-save-data #fireflies,
html.mf-save-data #petals { display: none !important; }

@media (max-width: 360px) {
  .mf-ct { max-width: 91px; overflow: hidden; text-overflow: ellipsis; }
  .mf-chat-head { padding-right: 6px; }
}

/* ── chat: clickable names + DM presence dots ── */
.mf-msg-name { cursor: pointer; }
.mf-msg-name:hover { text-decoration: underline; }
.mf-dm-item { position: relative; }
.mf-dm-av { position: relative; }
.mf-dm-dot, .mf-prof-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--text-3);
  display: inline-block;
}
.mf-dm-dot {
  position: absolute; right: -1px; bottom: -1px; border: 2px solid rgba(11,17,32,.94);
}
.mf-dm-dot.on, .mf-prof-dot.on { background: var(--emerald); box-shadow: 0 0 6px rgba(110,231,183,.7); }
.mf-dm-go { margin-left: auto; color: var(--text-3); font-size: 18px; }

/* ════════════════════════════════════════════════
   Public profile overlay (profile-view.js)
   ════════════════════════════════════════════════ */
.mf-prof-overlay {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(7,10,20,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mf-prof-overlay.open { display: flex; animation: mfFade .18s var(--ease); }
@keyframes mfFade { from { opacity: 0; } to { opacity: 1; } }

.mf-prof-card {
  --prof-accent: var(--rose);
  position: relative; width: min(380px, 100%);
  border-radius: 24px; overflow: hidden;
  background: rgba(17,24,39,.96); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: mfProfIn .22s var(--ease);
}
@keyframes mfProfIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.mf-prof-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.35); color: #fff; font-size: 14px;
}
.mf-prof-x:hover { background: rgba(0,0,0,.55); }

.mf-prof-banner {
  height: 84px;
  background: linear-gradient(135deg, var(--prof-accent), rgba(196,181,253,.4));
  opacity: .55;
}
.mf-prof-avatar {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(17,24,39,.96);
  display: flex; align-items: center; justify-content: center; font-size: 38px;
  background: linear-gradient(135deg, var(--prof-accent), var(--violet)); color: #0b1120;
}
.mf-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mf-prof-body { padding: 50px 24px 24px; text-align: center; }
.mf-prof-name { font-family: var(--font-d); font-size: 26px; line-height: 1.1; }
.mf-prof-pron { font-family: var(--font-b); font-size: 12px; color: var(--text-3); margin-left: 4px; }
/* owner / admin badge beside an @name */
.mf-prof-rank {
  display: inline-block; margin-left: 5px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-b); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #c4b5fd; background: rgba(196,181,253,.13); border: 1px solid rgba(196,181,253,.32);
}
.mf-prof-rank.owner { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.32); }
.mf-prof-presence { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.mf-prof-status { margin-top: 12px; font-family: var(--font-d); font-style: italic; font-size: 17px; color: var(--prof-accent); }
.mf-prof-bio { margin-top: 12px; font-size: 14px; color: var(--text-2); line-height: 1.65; }
.mf-prof-bio.dim { color: var(--text-3); font-style: italic; }
.mf-prof-actions { margin-top: 20px; }
.mf-prof-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 20px; border-radius: var(--r-md); border: 0; text-decoration: none;
  font-family: var(--font-b); font-weight: 600; font-size: 14px; color: #0b1120;
  background: linear-gradient(135deg, var(--prof-accent), var(--violet));
  box-shadow: 0 4px 18px rgba(0,0,0,.25); transition: transform 140ms var(--ease);
}
.mf-prof-btn:hover { transform: translateY(-1px); }
.mf-prof-loading { padding: 50px; text-align: center; color: var(--text-3); }

/* ── chat: rich composer (emoji / gif / image), media, translate, lightbox ── */
.mf-chat-headtools { display: flex; align-items: center; gap: 6px; }
.mf-tr-btn { border: 0; background: rgba(255,255,255,.05); color: var(--text-2); cursor: pointer; width: 30px; height: 28px; border-radius: 8px; font-size: 14px; }
.mf-tr-btn:hover { color: var(--text); background: rgba(255,255,255,.1); }
.mf-tr-btn.on { color: var(--rose); background: rgba(249,168,212,.12); }
.mf-tr-btn:disabled { opacity: .4; cursor: default; }
.mf-tr-lang { font-family: var(--font-b); font-size: 12px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--border-2); background: rgba(0,0,0,.3); color: var(--text); max-width: 96px; }

/* These controls are declared after the main phone sheet rules, so keep the
   narrow-layout overrides here as well to win the cascade on real devices. */
@media (max-width: 520px) {
  .mf-chat-headtools { gap: 3px; flex-shrink: 0; }
  .mf-tr-btn, .mf-chat-x { width: 32px; min-width: 32px; height: 32px; }
  .mf-chat-subbar .mf-tr-lang { max-width: 132px; min-height: 34px; font-size: 16px; }
}

.mf-chat-tools { display: flex; gap: 4px; padding: 8px 10px 0; }
.mf-tool { border: 0; cursor: pointer; background: rgba(255,255,255,.05); color: var(--text-2); border-radius: 9px; padding: 6px 9px; font-size: 14px; font-weight: 600; line-height: 1; transition: all 130ms var(--ease); }
.mf-tool:hover { color: var(--text); background: rgba(255,255,255,.1); }
.mf-tool.on { color: var(--rose); background: rgba(249,168,212,.12); }
.mf-tool:disabled { opacity: .5; cursor: default; }

.mf-pickerPop {
  position: absolute; bottom: 96px; left: 10px; right: 10px; z-index: 5;
  max-height: 260px; overflow-y: auto; display: none; padding: 10px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(17,24,39,.98); backdrop-filter: blur(20px); box-shadow: 0 14px 50px rgba(0,0,0,.5);
}
.mf-pickerPop.open { display: block; }
.mf-emojiCat { font-size: 11px; opacity: .5; font-weight: 600; letter-spacing: .04em; margin: 10px 2px 4px; }
.mf-emojiCat:first-child { margin-top: 0; }
.mf-emojiGrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.mf-emojiGrid button { border: 0; background: none; cursor: pointer; font-size: 19px; border-radius: 8px; padding: 4px 0; transition: all 120ms var(--ease); }
.mf-emojiGrid button:hover { background: rgba(249,168,212,.18); transform: scale(1.15); }
.mf-gifPop { max-height: 340px; }
.mf-gifTop {
  position: sticky; top: 0; z-index: 2; margin: -10px -10px 8px;
  padding: 10px 10px 8px; background: rgba(17,24,39,.98);
}
.mf-gifTabs { display: flex; gap: 4px; margin-bottom: 8px; }
.mf-gifTab {
  flex: 1; border: 0; cursor: pointer; font-family: var(--font-b);
  font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 999px;
  color: var(--text-3); background: rgba(255,255,255,.05);
  transition: all 130ms var(--ease);
}
.mf-gifTab:hover { color: var(--text); }
.mf-gifTab.on { color: var(--rose); background: rgba(249,168,212,.12); }
.mf-gifSearch input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-2); background: rgba(0,0,0,.3); color: var(--text); font-size: 13px; font-family: var(--font-b); }
.mf-gifSearch input:focus { outline: none; border-color: rgba(196,181,253,.45); }
/* Masonry, the Discord way. A grid puts every row on the tallest item in it,
   so a short GIF leaves a hole underneath. Multi-column flow instead lets each
   column pack tight, and column-width (rather than a fixed count) means
   dragging the panel wider adds a column instead of stretching two. */
/* 150px keeps two columns at the narrowest the panel gets (a phone sheet is
   ~335px of usable width) and adds a third and fourth as it is dragged wider.
   At 170px a narrow panel fell back to one full-width column. */
.mf-gifGrid { column-width: 150px; column-gap: 6px; }
.mf-gifCell { position: relative; break-inside: avoid; margin-bottom: 6px; }
.mf-gifGrid img { width: 100%; border-radius: 10px; cursor: pointer; display: block; transition: filter 120ms var(--ease); }
.mf-gifGrid img:hover { filter: brightness(1.1); }
.mf-gifFav {
  position: absolute; top: 4px; right: 4px; width: 25px; height: 25px;
  border: 0; border-radius: 8px; cursor: pointer; padding: 0;
  font-size: 14px; line-height: 1; color: #fff; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity 120ms var(--ease), background 120ms var(--ease);
}
.mf-gifCell:hover .mf-gifFav, .mf-gifFav.on, .mf-gifFav:focus-visible { opacity: 1; }
.mf-gifFav.on { color: var(--gold); }
.mf-gifFav:hover { background: rgba(0,0,0,.72); }
/* no hover on touch, so the star has to stay visible */
@media (hover: none) { .mf-gifFav { opacity: .9; } }
.mf-gifMsg { text-align: center; font-size: 12px; opacity: .6; padding: 14px 0; }
.mf-gifAttr { text-align: center; font-size: 10px; opacity: .35; margin-top: 8px; }
.mf-gifAttr:empty { display: none; }

.mf-media img { border-radius: 12px; max-width: 100%; cursor: pointer; display: block; }
.mf-msg.me .mf-media { display: flex; justify-content: flex-end; }
.mf-msg-orig { display: block; font-size: 10.5px; opacity: .45; margin-top: 3px; }

.mf-lightbox { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 24px; cursor: zoom-out; }
.mf-lightbox.open { display: flex; }
.mf-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 70px rgba(0,0,0,.6); }

/* ── chat: friends list + requests ── */
.mf-friends { padding: 12px; overflow-y: auto; }
.mf-addfriend { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-2); border-radius: 12px; background: rgba(0,0,0,.3); overflow: hidden; }
.mf-addfriend:focus-within { border-color: rgba(196,181,253,.45); }
.mf-addfriend .mf-at { padding: 0 2px 0 12px; color: var(--text-3); }
.mf-addfriend input { flex: 1; border: 0; background: none; color: var(--text); font-family: var(--font-b); font-size: 14px; padding: 10px 8px; }
.mf-addfriend input:focus { outline: none; }
.mf-addfriend button { border: 0; cursor: pointer; padding: 0 16px; align-self: stretch; color: #0b1120; font-family: var(--font-b); font-weight: 600; font-size: 13px; background: linear-gradient(135deg, var(--rose), var(--violet)); }
.mf-addfriend button:disabled { opacity: .6; }
.mf-addmsg { font-size: 12px; min-height: 16px; margin: 6px 2px 0; }
.mf-addmsg.ok { color: var(--emerald); }
.mf-addmsg.err { color: #fecaca; }

.mf-friends-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 16px 2px 6px; }
.mf-friends-list { display: flex; flex-direction: column; gap: 2px; }
.mf-dim { color: var(--text-3); font-weight: 400; font-size: 12px; }

.mf-req-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(249,168,212,.06); margin-bottom: 4px; }
.mf-req-item .mf-dm-name { flex: 1; font-size: 14px; }
.mf-req-actions { display: flex; gap: 6px; }
.mf-req-yes, .mf-req-no { border: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.mf-req-yes { background: rgba(110,231,183,.18); color: var(--emerald); }
.mf-req-yes:hover { background: rgba(110,231,183,.3); }
.mf-req-no { background: rgba(248,113,113,.15); color: #fca5a5; }
.mf-req-no:hover { background: rgba(248,113,113,.28); }

.mf-prof-dim { font-size: 12px; color: var(--text-3); }
/* ── profile social extras: relationship, gifts, guestbook ── */
.mf-prof-card { max-height: min(86vh, 820px); overflow-y: auto; }
.mf-prof-rel {
  margin: 12px auto 0; padding: 9px 12px; border-radius: 14px;
  background: rgba(249,168,212,.09); border: 1px solid rgba(249,168,212,.18);
  color: var(--text-2); font-size: 13px; line-height: 1.35;
}
.mf-prof-rel b { color: var(--prof-accent); }
.mf-prof-rel span { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.mf-prof-section { margin-top: 18px; text-align: left; border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px; }
.mf-prof-section h3 { margin: 0 0 10px; font-size: 14px; color: var(--text); font-family: var(--font-b); }
.mf-prof-giftpick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 10px; }
.mf-prof-giftpick button { aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); cursor: pointer; font-size: 18px; transition: transform 120ms var(--ease), background 120ms var(--ease); }
.mf-prof-giftpick button:hover { transform: translateY(-1px) scale(1.05); background: rgba(255,255,255,.10); }
.mf-prof-giftpick input { grid-column: 1 / -1; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--text); font-family: var(--font-b); }
.mf-prof-collection { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mf-prof-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); font-size: 12px; color: var(--text-2); }
.mf-prof-line { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: var(--text-2); }
.mf-prof-line:first-child { border-top: 0; }
.mf-prof-line em { display: block; color: var(--text-3); font-style: italic; margin-top: 2px; }
.mf-prof-line small { color: var(--text-3); white-space: nowrap; }
.mf-prof-gbform { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.mf-prof-gbform textarea { min-height: 48px; resize: vertical; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--text); font-family: var(--font-b); padding: 10px 11px; line-height: 1.45; }
.mf-prof-gbform .mf-prof-btn { padding: 10px 14px; }
.mf-prof-gbpost { margin-top: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.mf-prof-gbpost div { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 12.5px; }
.mf-prof-gbpost small { color: var(--text-3); white-space: nowrap; }
.mf-prof-gbpost p { margin: 7px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.mf-prof-mini { margin-top: 8px; border: 0; border-radius: 999px; padding: 5px 9px; cursor: pointer; font-size: 11px; color: var(--text-2); background: rgba(255,255,255,.07); }
.mf-prof-empty { color: var(--text-3); font-size: 12.5px; padding: 7px 0; }
@media (max-width: 420px) { .mf-prof-giftpick { grid-template-columns: repeat(4, 1fr); } .mf-prof-gbform { grid-template-columns: 1fr; } }

/* ── account relationship controls ── */
.relPanel { border: 1px solid var(--border-2); border-radius: var(--r-md); background: rgba(255,255,255,.03); padding: 14px; margin-bottom: 16px; }
.relCurrent { color: var(--text-2); font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.relCurrent b { color: var(--rose); }
.relForm { display: grid; grid-template-columns: 1fr 150px; gap: 10px; }
.relForm input { padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--border-2); background: rgba(0,0,0,.25); color: var(--text); font-family: var(--font-b); }
.relActions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.relMiniBtn { padding: 9px 12px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--border-2); background: rgba(255,255,255,.06); color: var(--text-2); font-family: var(--font-b); font-weight: 600; }
.relMiniBtn.primary { color: #0b1120; border: 0; background: linear-gradient(135deg, var(--rose), var(--violet)); }
.relReq { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.relReq:first-child { border-top: 0; }
@media (max-width: 580px) { .relForm { grid-template-columns: 1fr; } }

/* ── public profile refresh: wider social profile layout ── */
.mf-prof-overlay { padding: 24px; }
.mf-prof-card {
  width: min(96vw, 980px) !important;
  max-height: min(90vh, 900px);
  overflow-y: auto;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--prof-accent), transparent 78%), transparent 38%),
    rgba(12,18,32,.97);
  border: 1px solid rgba(255,255,255,.14);
}
.mf-prof-banner {
  height: 190px;
  opacity: .92;
  background: linear-gradient(135deg, color-mix(in srgb, var(--prof-accent), #0b1120 12%), rgba(124,58,237,.36));
  position: relative;
}
.mf-prof-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,18,32,.98), rgba(12,18,32,.28) 56%, transparent);
}
.mf-prof-head {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  padding: 0 34px 26px;
  margin-top: -84px;
  z-index: 2;
}
.mf-prof-avatar {
  position: static;
  transform: none;
  width: 132px;
  height: 132px;
  border: 4px solid rgba(12,18,32,.96);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 14px 40px rgba(0,0,0,.45);
  font-size: 54px;
}
.mf-prof-intro { min-width: 0; text-align: left; padding-bottom: 4px; }
.mf-prof-name { font-size: clamp(30px, 4vw, 44px); }
.mf-prof-handle { margin-top: 4px; color: var(--prof-accent); font-weight: 700; font-size: 15px; }
.mf-prof-handle .mf-prof-rank { vertical-align: middle; }
.mf-prof-pron { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-2); vertical-align: middle; }
.mf-prof-presence { margin-top: 8px; }
.mf-prof-status { margin-top: 10px; font-size: 19px; }
.mf-prof-bio { max-width: 620px; margin-top: 10px; font-size: 15px; }
.mf-prof-actions { margin: 0 0 8px; display: flex; gap: 10px; justify-content: flex-end; }
.mf-prof-btn { border-radius: 18px; padding: 12px 20px; }
.mf-prof-body {
  display: grid;
  grid-template-columns: minmax(260px, 330px) 1fr;
  gap: 18px;
  padding: 0 34px 34px;
  text-align: left;
}
.mf-prof-side, .mf-prof-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mf-prof-panel {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mf-prof-panel h3, .mf-prof-section-head h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); font-family: var(--font-b); }
.mf-prof-rel { margin: 0; padding: 16px; border-radius: 18px; font-size: 15px; background: rgba(249,168,212,.10); }
.mf-prof-rel span { font-size: 13px; margin-top: 6px; }
.mf-prof-stats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mf-prof-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.mf-prof-stats div:first-child { border-top: 0; padding-top: 0; }
.mf-prof-stats b { color: var(--text); font-size: 17px; }
.mf-prof-stats span { color: var(--text-3); font-size: 13px; }
.mf-prof-giftpick { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mf-prof-giftpick button { min-height: 62px; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; }
.mf-prof-giftpick button span { font-size: 23px; }
.mf-prof-giftpick button small { font-size: 10px; color: var(--text-3); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-prof-giftpick input { padding: 11px 12px; border-radius: 16px; }
.mf-prof-collection { gap: 8px; margin: 12px 0 0; }
.mf-prof-giftstat { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 15px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.08); }
.mf-prof-giftstat b { font-size: 22px; }
.mf-prof-giftstat span { color: var(--text-2); font-size: 13px; }
.mf-prof-giftstat strong { color: var(--prof-accent); }
.mf-prof-giftgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mf-prof-giftcard { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.08); }
.mf-prof-gifticon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; font-size: 26px; background: rgba(255,255,255,.07); }
.mf-prof-giftmain { min-width: 0; color: var(--text-2); }
.mf-prof-giftmain b { color: var(--prof-accent); margin-right: 4px; }
.mf-prof-giftmain span { color: var(--text-2); font-size: 13px; }
.mf-prof-giftmain p { margin: 6px 0 0; color: var(--text); line-height: 1.45; }
.mf-prof-giftcard time { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.mf-prof-gbform { grid-template-columns: 1fr auto; gap: 12px; }
.mf-prof-gbform textarea { min-height: 62px; border-radius: 18px; font-size: 14px; }
.mf-prof-gblist { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mf-prof-gbpost { margin-top: 0; padding: 15px 16px; border-radius: 18px; background: rgba(0,0,0,.18); }
.mf-prof-gbmeta { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: 13px; }
.mf-prof-gbmeta b { color: var(--prof-accent); }
.mf-prof-gbpost p { font-size: 15px; margin-top: 9px; }
.mf-prof-mini { background: rgba(249,168,212,.12); color: var(--text-2); }
.mf-prof-section { border-top: 0; padding-top: 0; margin-top: 0; }
.mf-prof-line { border-top: 0; }

@media (max-width: 760px) {
  .mf-prof-overlay { align-items: flex-start; padding: 12px; overflow-y: auto; }
  .mf-prof-card { width: 100% !important; max-height: none; border-radius: 22px; }
  .mf-prof-banner { height: 132px; }
  .mf-prof-head { grid-template-columns: 88px 1fr; gap: 14px; padding: 0 18px 20px; margin-top: -50px; align-items: end; }
  .mf-prof-avatar { width: 88px; height: 88px; font-size: 36px; }
  .mf-prof-actions { grid-column: 1 / -1; justify-content: stretch; margin-top: 6px; }
  .mf-prof-actions .mf-prof-btn { width: 100%; justify-content: center; }
  .mf-prof-body { grid-template-columns: 1fr; padding: 0 18px 22px; }
  .mf-prof-giftgrid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .mf-prof-giftpick { grid-template-columns: repeat(4, 1fr); }
  .mf-prof-gbform { grid-template-columns: 1fr; }
}


/* ── birthday sparkle ── */
.fieldHint { margin-top: 6px; color: var(--text-3); font-size: 12px; line-height: 1.35; }
.previewCard.isBirthday { box-shadow: 0 24px 80px rgba(249,168,212,.28), 0 0 0 1px rgba(255,255,255,.12) inset; }
.previewCard.isBirthday .pvBanner::before,
.mf-prof-card.isBirthday .mf-prof-banner::before {
  content: "🎂  ✦  🎈  ✦  🎁  ✦  🎉";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: .18em;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  z-index: 1;
}
.acctBirthdayCard {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 16px 34px 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(249,168,212,.22), rgba(125,211,252,.14));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.acctBirthdayBurst { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.14); font-size: 26px; }
.acctBirthdayCard b { display: block; font-size: 16px; }
.acctBirthdayCard span { display: block; color: var(--text-3); font-size: 13px; margin-top: 3px; }
.mf-prof-birthday {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: center;
  max-width: 560px;
  padding: 13px 15px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(249,168,212,.24), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.15);
}
.mf-prof-birthday span { grid-row: 1 / span 2; font-size: 28px; }
.mf-prof-birthday b { font-size: 15px; }
.mf-prof-birthday small { color: var(--text-3); font-size: 12px; }
@media (max-width: 620px) { .acctBirthdayCard { margin-left: 18px; margin-right: 18px; } }
.acctBirthdayCard[hidden] { display: none !important; }


/* ── profile glow-up v2: public profile overlay ── */
.mf-prof-overlay { padding: 28px; backdrop-filter: blur(8px); }
.mf-prof-card {
  width: min(96vw, 1120px) !important; border-radius: 32px;
  background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--prof-accent), transparent 76%), transparent 34%), radial-gradient(circle at 90% 12%, rgba(196,181,253,.16), transparent 32%), rgba(10,16,29,.972);
  border-color: rgba(255,255,255,.16); box-shadow: 0 28px 90px rgba(0,0,0,.46);
}
.mf-prof-banner { height: clamp(190px, 20vw, 245px); background-position: center 42%; }
.mf-prof-banner::after { background: linear-gradient(to top, rgba(10,16,29,.99), rgba(10,16,29,.62) 36%, rgba(10,16,29,.15) 70%, transparent), radial-gradient(circle at 22% 30%, rgba(255,255,255,.13), transparent 28%); }
.mf-prof-head { grid-template-columns: 128px minmax(0, 1fr) auto; gap: 22px; padding: 0 42px 28px; margin-top: -76px; }
.mf-prof-avatar { width: 128px; height: 128px; border-radius: 34px; font-size: 52px; border-width: 5px; }
.mf-prof-intro { padding: 14px 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); }
.mf-prof-status { display: inline-block; max-width: 760px; padding: 11px 14px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); line-height: 1.45; }
.mf-prof-bio { line-height: 1.7; max-width: 760px; }
.mf-prof-actions { align-self: end; margin-bottom: 10px; }
.mf-prof-btn { border-radius: 999px; }
.mf-prof-body { grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: 20px; padding: 0 42px 42px; }
.mf-prof-panel { border-radius: 26px; padding: 20px; background: radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.024)); }
.mf-prof-panel h3, .mf-prof-section-head h3 { font-size: 16px; }
.mf-prof-rel { border-radius: 20px; }
.mf-prof-stats div { padding: 12px 0; }
.mf-prof-giftcard, .mf-prof-gbpost { border-radius: 20px; }
.mf-prof-giftgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .mf-prof-overlay { padding: 12px; }
  .mf-prof-card { border-radius: 24px; }
  .mf-prof-banner { height: 150px; }
  .mf-prof-head { grid-template-columns: 88px 1fr; gap: 13px; padding: 0 18px 22px; margin-top: -52px; }
  .mf-prof-avatar { width: 88px; height: 88px; border-radius: 26px; font-size: 36px; }
  .mf-prof-intro { padding: 10px 12px; border-radius: 20px; }
  .mf-prof-actions { grid-column: 1 / -1; margin: 4px 0 0; }
  .mf-prof-body { grid-template-columns: 1fr; padding: 0 18px 24px; }
  .mf-prof-giftgrid { grid-template-columns: 1fr; }
}

/* ── community settings + public profile extras v50 ── */
/* Two ways in: the site's own toggle (html.mf-reduce-motion, set by shared.js)
   and the reduce-motion setting people have already turned on in Windows,
   macOS or iOS. The OS one used to be ignored here, so anyone relying on it
   still got every animation unless they found the site's switch. */
html.mf-reduce-motion *,
html.mf-reduce-motion *::before,
html.mf-reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.mf-reduce-motion .petal,
html.mf-reduce-motion .firefly,
html.mf-reduce-motion .mf-firefly,
html.mf-reduce-motion #petals,
html.mf-reduce-motion #fireflies { display: none !important; }

/* Off-screen until focused, then it lands over the nav. */
.mf-skip {
  position: absolute; left: 8px; top: -60px; z-index: 500;
  padding: 10px 16px; border-radius: 0 0 12px 12px;
  font-family: var(--font-b); font-size: 14px; font-weight: 600;
  color: #0b1120; background: linear-gradient(135deg, var(--rose), var(--violet));
  text-decoration: none; transition: top 140ms var(--ease);
}
.mf-skip:focus { top: 0; outline: 2px solid var(--text); outline-offset: 2px; }
main:focus, [id="mf-main"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .petal, .firefly, .mf-firefly, #petals, #fireflies { display: none !important; }
}

.mf-prof-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.mf-prof-userbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--prof-accent, #f9a8d4), transparent 84%);
  border: 1px solid color-mix(in srgb, var(--prof-accent, #f9a8d4), transparent 62%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.mf-prof-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.mf-prof-badge-list .mf-prof-userbadge {
  padding: 8px 11px;
  font-size: 13px;
}
.mf-prof-achievements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mf-prof-ach {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 3px 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.mf-prof-ach > span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  font-size: 21px;
}
.mf-prof-ach b { min-width: 0; font-size: 13px; }
.mf-prof-ach small { min-width: 0; color: var(--text-3); font-size: 11px; line-height: 1.35; }
.mf-prof-friends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.mf-prof-friend {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mf-prof-friend:hover { background: rgba(255,255,255,.075); }
.mf-prof-friend img,
.mf-prof-friend .mf-prof-friend-avatar {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 19px;
}
.mf-prof-friend b,
.mf-prof-friend small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-prof-friend b { font-size: 13px; }
.mf-prof-friend small { color: var(--text-3); font-size: 11px; }

@media (max-width: 620px) {
  .mf-prof-achievements,
  .mf-prof-friends-grid { grid-template-columns: 1fr; }
}
.mf-prof-friend > span:first-child {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 19px;
}
.mf-prof-friend > span:first-child img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* ── Download ownership / license notice ── */
.download-license-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
}
.download-license-note a { color: var(--rose); text-decoration: none; }
.download-license-note a:hover { text-decoration: underline; }

/* Account safety + group direct messages */
.mf-message-actions{display:flex;justify-content:flex-end;margin:10px 0 2px}.mf-group-create{border:1px solid rgba(249,168,212,.24);background:rgba(249,168,212,.07);color:var(--rose);border-radius:10px;padding:8px 11px;font:600 12px var(--font-b);cursor:pointer}.mf-group-create:hover{background:rgba(249,168,212,.13)}
.mf-group-item{width:100%;border:0;color:inherit;text-align:left}.mf-group-av{font-size:16px;background:linear-gradient(135deg,rgba(249,168,212,.16),rgba(196,181,253,.14))}.mf-group-headmenu{margin-left:auto;width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.035);color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}.mf-group-headmenu:hover{color:var(--text);background:rgba(255,255,255,.07)}
.mf-group-overlay{position:fixed;inset:0;z-index:100020;display:grid;place-items:center;padding:18px;background:rgba(3,6,15,.78);backdrop-filter:blur(8px)}.mf-group-dialog{position:relative;width:min(460px,100%);max-height:min(680px,90vh);overflow:auto;border:1px solid var(--border-2);border-radius:20px;padding:22px;background:#0d1424;box-shadow:0 28px 80px rgba(0,0,0,.5)}.mf-group-dialog h3{margin:0 38px 5px 0;font-family:var(--font-d);font-size:24px}.mf-group-dialog>p{margin:0 0 16px;color:var(--text-3);font-size:12px;line-height:1.5}.mf-group-x{position:absolute;right:14px;top:14px;width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.05);color:var(--text-2);font-size:22px;cursor:pointer}.mf-group-dialog>input,.mf-group-rename input{width:100%;border:1px solid var(--border-2);border-radius:11px;background:rgba(0,0,0,.28);color:var(--text);padding:10px 12px;font:inherit}.mf-group-picks,.mf-group-members{display:grid;gap:6px;margin:12px 0;max-height:330px;overflow:auto}.mf-group-picks label,.mf-group-members>div{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}.mf-group-picks label{cursor:pointer}.mf-group-picks input{width:17px;height:17px;accent-color:var(--rose)}.mf-group-picks span,.mf-group-members span{min-width:0;flex:1}.mf-group-picks b,.mf-group-picks small,.mf-group-members b,.mf-group-members small{display:block}.mf-group-picks small,.mf-group-members small{margin-top:2px;color:var(--text-3);font-size:11px}.mf-group-members button,.mf-group-rename button,.mf-group-primary,.mf-group-secondary,.mf-group-danger{border:1px solid var(--border-2);border-radius:10px;padding:9px 12px;background:rgba(255,255,255,.04);color:var(--text-2);font:600 12px var(--font-b);cursor:pointer}.mf-group-primary{width:100%;border:0;background:linear-gradient(135deg,var(--rose),var(--violet));color:#0b1120}.mf-group-secondary{width:100%;margin-top:5px}.mf-group-danger{width:100%;margin-top:8px;border-color:rgba(248,113,113,.3);color:#fecaca;background:rgba(248,113,113,.06)}.mf-group-rename{display:flex;gap:8px;margin:10px 0}.mf-prof-safety{min-width:42px;padding-inline:12px;font-size:18px}

/* Account safety dialogs — button-first blocking/reporting flow. */
.mf-safety-dialog{width:min(430px,100%)}
.mf-safety-actions{display:grid;gap:8px;margin-top:14px}
.mf-safety-actions .mf-group-secondary,.mf-safety-actions .mf-group-danger{margin:0}
.mf-report-reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.mf-report-reasons button{border:1px solid var(--border-2);border-radius:11px;padding:10px 11px;background:rgba(255,255,255,.035);color:var(--text-2);font:600 12px var(--font-b);cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease,color .15s ease}
.mf-report-reasons button:hover{border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.07)}
.mf-report-reasons button.selected{border-color:rgba(244,114,182,.7);background:rgba(244,114,182,.13);color:var(--text)}
.mf-report-detail{display:block;margin-top:12px}
.mf-report-detail>span{display:block;margin-bottom:6px;color:var(--text-2);font:700 12px var(--font-b)}
.mf-report-detail small{color:var(--text-3);font-weight:500}
.mf-report-detail textarea{width:100%;resize:vertical;min-height:105px;border:1px solid var(--border-2);border-radius:12px;background:rgba(0,0,0,.26);color:var(--text);padding:11px 12px;font:inherit;line-height:1.45;outline:none}
.mf-report-detail textarea:focus{border-color:rgba(244,114,182,.62);box-shadow:0 0 0 3px rgba(244,114,182,.08)}
.mf-safety-footer{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:14px}
.mf-safety-footer .mf-group-secondary,.mf-safety-footer .mf-group-primary{width:100%;margin:0}
.mf-safety-status{min-height:18px;margin-top:10px;color:var(--text-3);font-size:11.5px;line-height:1.45}
.mf-safety-dialog button:disabled{opacity:.55;cursor:default}
@media (max-width:520px){.mf-report-reasons{grid-template-columns:1fr}.mf-safety-footer{grid-template-columns:1fr}}