/* Community surfaces share Fight Arena's dark/red visual language. */
.community-modal-open { overflow: hidden; }
.community-account { flex-shrink: 0; }
.community-account-icon { display: inline-flex; align-items: center; flex: 0 0 17px; }
.community-account-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; border-radius: 50%; background: #2d2026; color: #ffb7bc; font: 700 11px 'Outfit', sans-serif; }
.community-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-avatar-large { width: 76px; height: 76px; font-size: 24px; }
.community-dialog, .community-comments, .community-chat { color: #f1f2f5; font: 400 14px/1.5 'Outfit', sans-serif; }
.community-dialog *, .community-comments *, .community-chat * { box-sizing: border-box; }
.community-dialog { width: min(460px, calc(100% - 28px)); max-height: calc(100dvh - 36px); overflow: auto; border: 1px solid #37383f; border-top: 3px solid #e20b19; border-radius: 12px; background: #121318; padding: 32px; margin: auto; box-shadow: 0 24px 100px #000b; }
.community-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.community-dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: #212229; border: 0; border-radius: 50%; color: #eee; font-size: 24px; cursor: pointer; }
.community-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #ff737b; margin-bottom: 7px; }
.community-dialog h2, .community-comments h2, .community-chat h3 { margin: 0; font: 600 30px/1.2 'Oswald', sans-serif; letter-spacing: -.4px; }
.community-dialog-intro, .community-muted { color: #a6a8b4; margin: 12px 0 24px; }
.community-account-form { display: grid; gap: 17px; }
.community-account-form label, .community-comment-form label, .community-chat-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: #e1e2e9; }
.community-account-form input:not([type=file]), .community-comment-form textarea, .community-chat-form textarea { display: block; width: 100%; background: #090a0e; color: #f5f5f7; font: 400 15px/1.5 'Outfit', sans-serif; padding: 11px 12px; border: 1px solid #34363f; border-radius: 6px; }
.community-comment-form textarea, .community-chat-form textarea { resize: vertical; min-height: 74px; max-height: 220px; margin-top: 8px; }
.community-dialog :focus-visible, .community-comments :focus-visible, .community-chat :focus-visible, .community-account:focus-visible, .community-event-tabs button:focus-visible { outline: 2px solid #ff737b; outline-offset: 3px; }
.community-account-form small, .community-composer-footer small, .community-photo-field small { font-size: 11px; font-weight: 400; line-height: 1.5; color: #a1a4b2; }
.community-primary, .community-secondary { font: 600 13px/1.4 'Outfit', sans-serif; border-radius: 5px; padding: 11px 17px; cursor: pointer; }
.community-primary { background: #da0715; color: #fff; border: 1px solid #da0715; }
.community-primary:hover:not(:disabled) { background: #fa1726; }
.community-secondary { background: #1c1e26; border: 1px solid #393b46; color: #eee; }
.community-text-button { background: transparent; border: 0; color: #ff838a; font: 600 13px 'Outfit', sans-serif; padding: 8px 4px; cursor: pointer; }
.community-dialog button:disabled, .community-comments button:disabled, .community-chat button:disabled { opacity: .5; cursor: wait; }
.community-chat textarea:disabled { opacity: .55; cursor: not-allowed; }
.community-feedback { color: #ffb5ba; font-size: 12px; margin: 10px 0; overflow-wrap: anywhere; }
.community-feedback:empty { display: none; }
.community-account-bottom { display: flex; gap: 8px; justify-content: center; align-items: center; border-top: 1px solid #2b2d36; margin-top: 24px; padding-top: 16px; color: #a6a8b4; font-size: 13px; }
.community-photo-field { display: grid; justify-items: center; gap: 9px; }
.community-photo-label { position: relative; overflow: hidden; }
.community-photo-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.community-photo-label:focus-within { outline: 2px solid #ff737b; }
.community-dialog [hidden], .community-comments [hidden] { display: none !important; }
.community-comments { max-width: 860px; margin: 40px auto; padding: 28px; background: #111217; border: 1px solid #292b35; border-top: 2px solid #de0b19; border-radius: 8px; }
.community-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-pill { color: #c4c6d0; font-size: 11px; border: 1px solid #33353f; border-radius: 20px; padding: 5px 10px; white-space: nowrap; }
.community-signin-note { margin: 16px 0; }
.community-signin-note:empty { display: none; }
.community-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.community-comment-list { margin-top: 26px; }
.community-message { display: flex; align-items: flex-start; gap: 10px; padding: 15px 0; border-bottom: 1px solid #252731; }
.community-message-content { flex: 1; min-width: 0; }
.community-message-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.community-message-meta strong { font-size: 13px; overflow-wrap: anywhere; }
.community-message-meta time { color: #9699a9; font-size: 10px; }
.community-message-body { margin: 5px 0 0; color: #dedfe6; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.community-delete { margin-left: auto; background: none; border: 0; color: #aaaebd; font: 400 11px 'Outfit', sans-serif; cursor: pointer; padding: 4px; }
.community-delete:hover { color: #ff838a; }
.community-empty { text-align: center; font-size: 13px; color: #9fa3b3; padding: 24px 12px; line-height: 1.7; }
.community-comment-pagination { margin-top: 20px; text-align: center; }
.community-event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.community-fight-column { min-width: 0; }
.community-fight-column .stream-card-filter { margin-top: 0; }
.community-fight-column .stream-avatar-wrap { height: clamp(160px, 18vw, 260px); }
.community-fight-column .stream-fighter-name { font-size: clamp(18px, 2vw, 28px); overflow-wrap: anywhere; }
.community-fight-column .stream-center-col { padding: 12px; }
.community-fight-column .stream-weight-title { font-size: 18px; }
.community-chat { background: #111217; border: 1px solid #30323d; border-top: 2px solid #e20b19; border-radius: 8px; position: sticky; top: 112px; display: flex; flex-direction: column; max-height: calc(100dvh - 135px); min-height: 410px; }
.community-chat-heading { padding: 18px 18px 13px; border-bottom: 1px solid #292b35; }
.community-chat h3 { font-size: 25px; }
.community-chat-event { margin: 7px 0; color: #babdcb; font-size: 11px; overflow-wrap: anywhere; }
.community-chat-status { margin: 6px 0 0; color: #a5a8b8; font-size: 11px; }
.community-chat[data-phase=live] .community-chat-status { color: #71dcab; }
.community-chat[data-phase=live] .community-chat-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #71dcab; margin-right: 6px; }
.community-chat-messages { overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 150px; height: 340px; padding: 0 15px; scrollbar-width: thin; scrollbar-color: #444651 transparent; }
.community-chat .community-message { padding: 11px 0; border-bottom: 0; gap: 8px; }
.community-chat .community-message-body { font-size: 13px; }
.community-chat .community-avatar { width: 25px; height: 25px; flex-basis: 25px; font-size: 9px; }
.community-chat .community-message-meta strong { font-size: 12px; color: #f0c3c7; }
.community-chat-form { border-top: 1px solid #292b35; padding: 13px 15px 8px; }
.community-chat-form label { font-size: 11px; }
.community-chat-form textarea { font-size: 13px; min-height: 62px; }
.community-chat-form .community-primary { padding: 8px 13px; }
.community-chat-note { padding: 0 15px 13px; color: #969aaa; font-size: 10px; }
.community-chat > .community-feedback { margin: 5px 15px; }
.community-event-tabs { display: none; }
@media (max-width: 1200px) {
  .community-account-label { display: none; }
  .community-event-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
}
@media (max-width: 900px) {
  .community-event-layout { display: block; }
  .community-event-tabs { display: flex; border: 1px solid #30323d; border-radius: 6px; margin-bottom: 18px; padding: 4px; gap: 4px; background: #101116; }
  .community-event-tabs button { flex: 1; border: 0; background: transparent; color: #adb0be; border-radius: 4px; padding: 11px 8px; font: 600 13px 'Outfit', sans-serif; cursor: pointer; }
  .community-event-tabs button.active { background: #28212a; color: #fff; box-shadow: inset 0 -2px #e20b19; }
  #streamView:not([data-panel=chat]) .community-chat { display: none; }
  #streamView[data-panel=chat] .community-fight-column { display: none; }
  .community-chat { position: static; max-height: none; height: min(680px, 78dvh); min-height: 400px; }
  .community-fight-column .stream-avatar-wrap { height: clamp(160px, 27vw, 280px); }
}
@media (max-width: 480px) {
  .community-dialog { padding: 27px 20px; }
  .community-comments { padding: 20px 15px; margin: 28px 0; }
  .community-comments h2 { font-size: 26px; }
  .community-account { margin-left: 0; }
  .community-account .community-avatar { width: 25px; height: 25px; flex-basis: 25px; font-size: 10px; }
}