/* css/community.css — the MOD round (docs/PLAN-MOD.md): the staff pills every player sees, the
   moderation bits in the chat, and the Team & Discord page (#community, js/ui/community.js).
   The MOD colour is Discord's blurple #5865f2: nowhere else in the game, so it cannot be read
   as a prestige tier or as the green of your own name. OWNER is the game's accent red. */

/* ---- The pills (js/sprites.js staffTagEl): before a name in chat, lists, links, headings ---- */
.mod-tag, .owner-tag {
  display: inline-flex; align-items: center; flex: none;
  margin-right: 5px; padding: 0 5px; border-radius: 999px; vertical-align: 1px;
  font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: 0.04em;
}
.mod-tag { background: #5865f2; color: #fff; }
.owner-tag { background: var(--accent, #d64545); color: #fff; }
/* Next to a heading (Trainer Card, Team & Discord, the status popup): a bit bigger. */
.mod-tag.lg, .owner-tag.lg { font-size: 11px; line-height: 18px; padding: 0 8px; vertical-align: 3px; margin: 0 0 0 8px; }
/* Inside a name link the pill sits before the name and never gets its own underline. */
.trainer-link .mod-tag, .trainer-link .owner-tag { text-decoration: none; }
/* The tiny version inside the name plate above a walker on the map (js/scene/actors.js). */
.actor-name .actor-staff { font-size: 7px; line-height: 10px; padding: 0 3px; margin-right: 3px; vertical-align: 1px; }
/* The one fixed line under a MOD's name on the Trainer Card (js/ui/profile.js). */
.profile-mod-line { color: #8b95f6; font-weight: 700; }

/* ---- Mini-right A in the chat (js/ui/chat.js): the ⚑ and a hidden line ---------------------- */
/* Staff only. Faint until the line is hovered (a still finger on a phone taps it directly). */
.chat-flag-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); opacity: 0.25; cursor: pointer; vertical-align: -2px;
}
.chat-msg:hover .chat-flag-btn, .chat-flag-btn:focus-visible { opacity: 1; color: #5865f2; background: rgba(88, 101, 242, 0.18); }
/* A hidden line, as the MOD and the admin keep seeing it (players no longer get the row). */
.chat-msg.hidden-mod { opacity: 0.55; }
.chat-msg.hidden-mod .chat-text { text-decoration: line-through; font-style: italic; }
.hidden-tag {
  display: inline-block; flex: none; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: rgba(88, 101, 242, 0.2); color: #aab4ff; font-size: 9px; font-weight: 700; line-height: 14px; white-space: nowrap;
}

/* ---- The chat-head button: the one entrance to #community (js/ui/chat.js) ------------------- */
.chat-discord-btn { color: #8b95f6; }
.chat-discord-btn:hover { color: #aab4ff; }

/* ---- The Team & Discord page (#community) --------------------------------------------------- */
.team-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.team-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
}
.team-card .avatar { flex: none; }
.team-name { display: flex; align-items: center; font-size: 1.05rem; font-weight: 800; }
.team-card p { margin: 4px 0 10px; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.team-sub { margin: 1px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.team-card .actions { display: flex; gap: 8px; }
.become-mod { margin: 10px 0 0; font-size: 0.8rem; }

/* The Discord card: one blurple block, clearly "this leaves the game" (variant A: static). */
.discord-card {
  display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.28), rgba(88, 101, 242, 0.1));
  border: 1px solid rgba(88, 101, 242, 0.55);
}
.discord-card .discord-mark { flex: none; display: inline-flex; color: #aab4ff; }
.discord-card h4 { margin: 0 0 3px; font-size: 1rem; font-weight: 800; }
.discord-card p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.discord-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; margin-left: auto; }
.btn.discord-btn { background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 800; gap: 7px; }
.btn.discord-btn:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }
.discord-url { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.01em; }
@media (max-width: 699px) {
  .discord-card { flex-wrap: wrap; }
  .discord-cta { align-items: flex-start; margin-left: 0; width: 100%; }
  .discord-cta .btn { width: 100%; }
}

/* The staff-only moderation panel at the bottom of #community. */
.mod-panel-h { margin: 12px 0 6px; font-size: 0.9rem; }
.mod-panel-h:first-child { margin-top: 0; }
.mod-panel-sub { margin: 0 0 8px; font-size: 0.76rem; }
.mod-hidden-text { text-decoration: line-through; font-style: italic; }
.mod-hit-row .mod-hidden-text { text-decoration: none; font-style: normal; }

/* ---- The "Your server status" popup (js/ui/role.js) ----------------------------------------- */
.role-popup { text-align: center; }
.role-popup-pill { margin: 6px 0 12px; }
.role-popup-pill .mod-tag.lg, .role-popup-pill .owner-tag.lg { font-size: 15px; line-height: 26px; padding: 0 14px; margin: 0; }
.role-none {
  display: inline-block; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: var(--text); font-size: 15px; font-weight: 800; line-height: 26px;
}
.role-popup p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); text-align: left; }

/* ---- about.html's Community block reuses .discord-card on the light text page --------------- */
.text-page .discord-card { border-color: rgba(88, 101, 242, 0.45); background: linear-gradient(135deg, rgba(88, 101, 242, 0.16), rgba(88, 101, 242, 0.05)); }
.text-page .discord-card p { color: inherit; opacity: 0.8; }