/* Follow a player (feature: feat3). Dark base, GDI gold, Nod red, green for online. Mobile first; desktop from 841px. */
:root { --fw-gold: #e8b923; --fw-red: #ef454f; --fw-green: #3ddc6a; --fw-line: #2f3a2a; --fw-card: #0e130d; --fw-muted: #a9b39f; }
/* profile: Follow / Following button next to Share */
.fw-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 2px solid #4a5546; border-radius: 10px; background: #10150f; color: var(--text, #eef1e8);
  font: inherit; font-size: 1.05em; font-weight: 700; letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.fw-btn:hover { border-color: var(--fw-gold); }
.fw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fw-btn.on { border-color: var(--fw-gold); background: rgba(232, 185, 35, .1); color: var(--fw-gold); box-shadow: 0 0 0 3px rgba(232, 185, 35, .14); }
@media (max-width: 590px) { .share-row.fw-has .share-hint { display: none; } }
.fw-online { margin: 4px 0 0; color: var(--text, #eef1e8); font-size: 1.05em; font-weight: 600; }
.fw-online b { color: #fff; }
.fw-online .fw-dot { margin-right: 8px; vertical-align: 1px; }
.fw-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5d665a; }
.fw-dot.on { background: var(--fw-green); box-shadow: 0 0 0 3px rgba(61, 220, 106, .18); }

/* profile: "You're following" card (floats above the phone menu bar, not modal) */
.fw-card { position: fixed; z-index: 40; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); left: 12px; padding: 14px 16px 12px; border: 1px solid rgba(232, 185, 35, .65); border-radius: 16px;
  background: linear-gradient(180deg, #171d12, #0f140d); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); color: var(--text, #eef1e8); opacity: 0; transform: translateY(10px); transition: opacity .18s, transform .18s; }
.fw-card.open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fw-card { transition: none; } }
@media (min-width: 841px) { .fw-card { right: 24px; bottom: 24px; left: auto; width: 420px; } }
.fw-card h2 { margin: 0 34px 2px 0; font-size: 1.25em; letter-spacing: .01em; text-transform: none; }
.fw-lead { margin: 0 0 8px; color: var(--fw-muted); font-size: .95em; }
.fw-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 1px solid #34412f; border-radius: 50%; background: #0b0f0a; color: var(--fw-muted); font: inherit; cursor: pointer; }
.fw-x:hover { color: #fff; }
.fw-opt { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 0; font-size: 1.02em; font-weight: 600; }
.fw-opt input[type="checkbox"] { position: absolute; right: 0; width: 52px; height: 30px; margin: 0; opacity: 0; cursor: pointer; }
.fw-sw { flex: none; position: relative; width: 52px; height: 30px; border-radius: 15px; background: #39433a; transition: background .15s; pointer-events: none; }
.fw-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #e9ece6; transition: transform .15s; }
.fw-opt input:checked + .fw-sw { background: var(--fw-gold); }
.fw-opt input:checked + .fw-sw::after { transform: translateX(22px); }
.fw-opt input:focus-visible + .fw-sw { outline: 2px solid #fff; outline-offset: 2px; }
.fw-opt input:disabled + .fw-sw { opacity: .4; }
.fw-hint { margin: -4px 0 4px; color: var(--fw-muted); font-size: .85em; }
.fw-opt > span { min-width: 0; }
.fw-cmd { padding: 2px 6px; overflow-wrap: anywhere; text-align: left; border: 0; border-radius: 5px; background: #2a2f45; color: #e8ebff; font: 600 .82em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: copy; }
.fw-discord { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 8px; background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fw-discord:hover { filter: brightness(1.1); }

/* home: Following box */
.fw-box { margin: 0 0 18px; padding: 10px 14px 6px; border: 1px solid rgba(232, 185, 35, .55); border-radius: 14px; background: linear-gradient(180deg, rgba(232, 185, 35, .07), rgba(14, 19, 13, .9) 40%); }
.fw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 4px; }
.fw-h h2 { margin: 0; color: var(--fw-gold); font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.fw-h span { color: var(--fw-muted); font-size: 13px; font-weight: 600; }
.fw-list { margin: 0; padding: 0; list-style: none; }
.fw-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fw-line); }
.fw-main { flex: 1; min-width: 0; }
.fw-nick { display: block; overflow: hidden; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.fw-nick:hover { color: var(--fw-gold); }
.fw-where { display: block; color: #c9d0c3; font-size: 13.5px; overflow-wrap: anywhere; }
.fw-row:not(.on) .fw-where { color: var(--fw-muted); }
.fw-team { display: block; color: var(--fw-muted); font-size: 13.5px; font-weight: 600; }
.fw-team.gdi { color: var(--fw-gold); }
.fw-team.nod, .fw-team.soviet { color: var(--fw-red); }
.fw-team.allies { color: #4fa3ff; }
.fw-join { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 8px; background: var(--fw-gold); color: #160f02; font-weight: 700; text-decoration: none; }
.fw-join:hover { filter: brightness(1.08); }
.fw-join:focus-visible, .fw-nick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fw-fun { margin: 4px 0 8px; color: #d9cf9f; font-size: 14px; font-style: italic; }
.fw-fun a, .fw-more a { color: var(--fw-gold); font-style: normal; font-weight: 700; }
.fw-more { margin: 4px 0 8px; color: var(--fw-muted); font-size: 13px; }
@media (min-width: 841px) {
  .fw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 24px; }
}
.fw-sw.on { background: var(--fw-gold); }
.fw-sw.on::after { transform: translateX(22px); }