/* MySchatz — Founding 100 section. Everything is scoped under .f100 / .f100-* so
   it can live inside the existing myschatz.app page without leaking styles. */
.f100 {
  --f100-navy: #0f1230;
  --f100-navy-2: #181c48;
  --f100-purple: #6d4ae0;
  --f100-coral: #ff6f7d;
  --f100-pink: #ff8fb8;
  --f100-text: #f4f1ff;
  --f100-muted: #aea8d6;
  --f100-card: rgba(255, 255, 255, 0.06);
  --f100-line: rgba(255, 255, 255, 0.12);
  position: relative;
  color: var(--f100-text);
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(255, 111, 125, 0.18), transparent 70%),
    radial-gradient(50% 45% at 90% 20%, rgba(165, 92, 240, 0.22), transparent 70%),
    linear-gradient(180deg, var(--f100-navy) 0%, var(--f100-navy-2) 100%);
  border-radius: 28px;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px);
  overflow: hidden;
  font-family: inherit;
  box-sizing: border-box;
}
.f100 *, .f100-overlay * { box-sizing: border-box; }
/* The modal is appended to <body>, outside .f100 — it needs the brand tokens too. */
.f100-overlay { --f100-coral: #ff6f7d; --f100-purple: #6d4ae0; --f100-pink: #ff8fb8; font-family: inherit; }

.f100-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.f100-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f100-pink); }
.f100-title { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; font-weight: 800; }
.f100-intro { margin: 10px 0 0; max-width: 620px; color: var(--f100-muted); line-height: 1.55; }
.f100-lang { display: inline-flex; background: var(--f100-card); border: 1px solid var(--f100-line); border-radius: 999px; padding: 3px; }
.f100-lang-btn { border: 0; background: transparent; color: var(--f100-muted); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.f100-lang-btn.is-on { background: linear-gradient(90deg, var(--f100-coral), var(--f100-purple)); color: #fff; }

.f100-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; color: var(--f100-muted); text-align: center; }
.f100-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--f100-line); border-top-color: var(--f100-coral); animation: f100-spin 0.9s linear infinite; }
@keyframes f100-spin { to { transform: rotate(360deg); } }

/* ---- Map ---- */
.f100-map-wrap { position: relative; border-radius: 22px; background: rgba(6, 8, 30, 0.35); border: 1px solid var(--f100-line); overflow: hidden; }
.f100-map { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: grab; }
.f100-map:active { cursor: grabbing; }
.f100-sphere { fill: rgba(40, 46, 110, 0.25); }
.f100-graticule { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 0.5; }
.f100-country { fill: #2a2f6e; stroke: #4a4f9c; stroke-width: 0.5; transition: fill 0.3s ease; }
.f100-country.is-on { fill: url(#f100-land-on); fill-opacity: 0.55; }
.f100-marker { cursor: pointer; outline: none; }
.f100-marker image { animation: f100-breathe 3.2s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
.f100-marker.is-founder image { animation-duration: 2.4s; }
.f100-marker:hover image, .f100-marker:focus-visible image { filter: drop-shadow(0 0 8px rgba(255, 143, 184, 0.9)); }
.f100-marker:focus-visible .f100-marker-glow { stroke: #fff; stroke-width: 1.5; }
.f100-count-bg { fill: #fff; stroke: var(--f100-coral); stroke-width: 1.5; }
.f100-count { fill: #3b1f2b; font-size: 9px; font-weight: 800; text-anchor: middle; }
.f100-crown { font-size: 12px; }
@keyframes f100-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.f100-tooltip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); background: #fff; color: #2a1b3d; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.f100-tooltip.is-on { opacity: 1; }
@media (hover: none) { .f100-tooltip { display: none; } }

.f100-reset { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--f100-line); background: rgba(15, 18, 48, 0.75); color: #fff; font-size: 18px; cursor: pointer; }

.f100-panel { position: absolute; left: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: rgba(20, 22, 56, 0.96); border: 1px solid var(--f100-line); border-radius: 18px; padding: 14px; transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; backdrop-filter: blur(10px); }
.f100-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.f100-panel-close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: var(--f100-muted); font-size: 22px; cursor: pointer; z-index: 1; }
.f100-panel-title { margin: 0 24px 4px 0; font-weight: 800; }
.f100-muted { color: var(--f100-muted); font-size: 13px; margin: 0 0 8px; }
.f100-choose { display: flex; flex-direction: column; gap: 6px; }
.f100-choose-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--f100-line); background: var(--f100-card); color: var(--f100-text); font: inherit; border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.f100-choose-item:hover, .f100-choose-item:focus-visible { border-color: var(--f100-pink); }
.f100-choose-names { font-size: 14px; font-weight: 600; }

@media (max-width: 640px) {
  .f100-panel { position: relative; left: auto; bottom: auto; width: auto; max-height: none; margin: 0; border-radius: 0 0 18px 18px; transform: none; display: none; }
  .f100-panel.is-open { display: block; }
}

/* ---- Cards ---- */
.f100-num { font-weight: 900; color: var(--f100-pink); letter-spacing: 0.04em; }
.f100-founder { font-size: 11px; font-weight: 800; border: 1px solid currentColor; color: #ffd27a; border-radius: 999px; padding: 1px 8px; }
.f100-avatars { display: inline-flex; align-items: center; gap: 4px; }
.f100-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; border: 2px solid rgba(255, 255, 255, 0.85); flex: none; }
.f100-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f100-avatar-a { background: linear-gradient(135deg, #ff8a8a, var(--f100-coral)); }
.f100-avatar-b { background: linear-gradient(135deg, #c08bff, var(--f100-purple)); }
.f100-avatar-heart { color: var(--f100-coral); font-size: 14px; }

.f100-card { background: var(--f100-card); border: 1px solid var(--f100-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.f100-card.is-founder { border-color: rgba(255, 210, 122, 0.6); box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.25), 0 10px 30px rgba(255, 111, 125, 0.15); }
.f100-card.is-compact { background: transparent; border: 0; box-shadow: none; }
.f100-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.f100-card.is-compact .f100-cover { border-radius: 12px; margin-top: 18px; }
.f100-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.f100-card.is-compact .f100-card-body { padding: 10px 0 0; }
.f100-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f100-card-top .f100-avatars { margin-left: auto; }
.f100-card-title { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.f100-card-meta { margin: 0; font-size: 13px; color: var(--f100-muted); }
.f100-card-excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: #d9d4f5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.f100-btn { align-self: flex-start; margin-top: auto; border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 800; font-size: 14px; color: #fff; cursor: pointer; background: linear-gradient(90deg, var(--f100-coral), var(--f100-purple)); box-shadow: 0 6px 18px rgba(255, 111, 125, 0.3); }
.f100-btn:hover { filter: brightness(1.08); }
.f100 :focus-visible, .f100-overlay :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.f100-stories { margin-top: 32px; }
.f100-subtitle { margin: 0 0 14px; font-size: clamp(20px, 2.6vw, 26px); }
.f100-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.f100-empty { color: var(--f100-muted); }

/* ---- Stats ---- */
.f100-stats { margin-top: 36px; }
.f100-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.f100-stat { background: var(--f100-card); border: 1px solid var(--f100-line); border-radius: 18px; padding: 16px 12px; text-align: center; }
.f100-stat-value { font-size: clamp(26px, 4vw, 38px); font-weight: 900; background: linear-gradient(90deg, var(--f100-pink), #c9a2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f100-stat-label { color: var(--f100-muted); font-size: 13px; }
.f100-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.f100-bar-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.f100-bar-track { height: 10px; border-radius: 999px; background: var(--f100-card); overflow: hidden; }
.f100-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--f100-coral), var(--f100-purple)); }
.f100-bar-value { color: var(--f100-muted); font-size: 13px; white-space: nowrap; }
.f100-join { margin: 28px 0 0; color: var(--f100-muted); font-size: 13px; }
@media (max-width: 520px) {
  .f100-stat-row { grid-template-columns: 1fr; }
  .f100-bar-row { grid-template-columns: 1fr auto; }
  .f100-bar-track { grid-column: 1 / -1; order: 3; }
}

/* ---- Modal ---- */
body.f100-noscroll { position: fixed; left: 0; right: 0; overflow: hidden; }
.f100-overlay { position: fixed; inset: 0; z-index: 2147483000; background: rgba(8, 9, 28, 0.72); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.25s ease; backdrop-filter: blur(4px); }
.f100-overlay.is-open { opacity: 1; }
.f100-dialog { --f100-t-bg: #FCE7EF; --f100-t-paper: #FFF8FB; --f100-t-text: #3B1F2B; --f100-t-muted: #8A6474; --f100-t-accent: #E5568A; --f100-t-border: #F6C6D8;
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--f100-t-bg); color: var(--f100-t-text); border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); transform: translateY(18px) scale(0.98); transition: transform 0.3s ease; }
.f100-overlay.is-open .f100-dialog { transform: none; }
.f100-dialog-close { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 24px; cursor: pointer; z-index: 2; }
.f100-dialog-body { position: relative; padding: clamp(28px, 5vw, 44px) clamp(14px, 4vw, 36px); }
.f100-deco { position: absolute; font-size: 20px; opacity: 0.85; pointer-events: none; }
.f100-deco-tl { top: 12px; left: 14px; } .f100-deco-tr { top: 12px; right: 60px; } .f100-deco-bl { bottom: 12px; left: 14px; } .f100-deco-br { bottom: 12px; right: 14px; }
.f100-paper { background: var(--f100-t-paper); border: 1px solid var(--f100-t-border); border-radius: 22px; padding: clamp(16px, 4vw, 32px); }
.f100-story-head { text-align: center; margin-bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.f100-badges { display: flex; gap: 8px; align-items: center; }
.f100-num-badge { background: var(--f100-t-accent); color: #fff; font-weight: 900; border-radius: 999px; padding: 3px 12px; letter-spacing: 0.06em; }
.f100-dialog .f100-founder { color: var(--f100-t-accent); }
.f100-story-names { margin: 0; color: var(--f100-t-muted); font-size: 14px; }
.f100-story-title { margin: 0; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.2; }
.f100-story-country { margin: 0; color: var(--f100-t-muted); }
.f100-block { margin: 0 0 18px; color: var(--f100-tone); }
.f100-block p, .f100-block h3, .f100-block h4, .f100-block blockquote, .f100-block ul { margin: 0; }
.f100-block p, .f100-block li { font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.f100-block h3 { font-size: 22px; } .f100-block h4 { font-size: 18px; }
.f100-block blockquote { border-left: 3px solid currentColor; padding-left: 14px; font-style: italic; font-size: 17px; line-height: 1.65; }
.f100-box { display: flex; gap: 10px; border: 1px solid color-mix(in srgb, var(--f100-tone) 35%, transparent); background: color-mix(in srgb, var(--f100-tone) 9%, transparent); border-radius: 16px; padding: 12px 14px; }
.f100-box-icon { font-size: 20px; }
.f100-block ul { padding-left: 20px; }
.f100-block figure { margin: 0; }
.f100-block img { width: 100%; height: auto; border-radius: 16px; display: block; background: color-mix(in srgb, var(--f100-t-border) 50%, transparent); }
.f100-block figcaption { text-align: center; font-style: italic; font-size: 14px; margin-top: 6px; }
.f100-by { display: block; font-size: 12px; font-weight: 700; margin-top: 4px; opacity: 0.85; }
.f100-date { text-align: center; } .f100-date { color: var(--f100-t-accent); font-weight: 700; }
.f100-heart { text-align: center; font-size: 28px; }
.f100-block hr { border: 0; height: 1px; background: var(--f100-t-border); margin: 6px 20%; }
@media (max-width: 640px) {
  .f100-overlay { padding: 0; align-items: flex-end; }
  .f100-dialog { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 24px 24px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .f100 *, .f100-overlay, .f100-overlay * { animation: none !important; transition: none !important; }
}

/* Language tabs inside a multi-language story (0165). */
.f100-story-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto 14px; flex-wrap: wrap; justify-content: center; }
.f100-story-tabs .f100-lang-btn { font-size: 13px; padding: 7px 14px; }