/* Standalone Community app views. All rules stay inside their dedicated host. */
#community-dialog .community-social {
  --social-text: #e9f0fb; --social-muted: #b4c4db; --social-line: #354962;
  flex: 1 1 auto; min-width: 0; min-height: 0; padding: 20px 24px 28px;
  color: var(--social-text); font-size: 14px; line-height: 1.55;
}
#community-dialog .community-social[hidden], #community-dialog .community-social [hidden] { display: none !important; }
#community-dialog .community-social * { box-sizing: border-box; }
#community-dialog .community-social :is(button, input, select, textarea, summary) { font: inherit; }
#community-dialog .community-social :is(button, input, select, textarea, summary, canvas):focus-visible { outline: 3px solid #c5ff52; outline-offset: 3px; }
#community-dialog .community-social :is(p, h4) { overflow-wrap: anywhere; }
#community-dialog .community-social .social-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
#community-dialog .community-social .social-intro { margin: 0; color: var(--social-muted); }
#community-dialog .community-social .social-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 10px 14px;
  border: 1px solid #526a88; border-radius: 10px; background: #22334b; color: #e4edfa;
  font-weight: 650; line-height: 1.3; text-align: center; cursor: pointer; overflow-wrap: anywhere;
}
#community-dialog .community-social .social-button:hover:not(:disabled) { border-color: #b4d88c; background: #2c415b; }
#community-dialog .community-social .social-button.social-primary { border-color: #c5ff52; background: #c5ff52; color: #162315; }
#community-dialog .community-social .social-button.social-primary:hover:not(:disabled) { background: #dbff9b; }
#community-dialog .community-social .social-button.social-danger { border-color: #80574d; color: #ffd4c6; background: #392b2c; }
#community-dialog .community-social .social-button:disabled { cursor: default; opacity: .58; }
#community-dialog .community-social .social-status { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #456578; border-radius: 10px; background: #203244; color: #d3e6f7; }
#community-dialog .community-social .social-status:empty { display: none; }
#community-dialog .community-social .social-status[data-state="error"] { border-color: #865e4d; color: #ffd8c5; background: #382c27; }
#community-dialog .community-social .social-status[data-state="success"] { border-color: #5b7c48; color: #d9f5be; background: #26382b; }
#community-dialog .community-social .social-auth-gate { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 14px; border: 1px solid #415777; border-radius: 12px; background: #192b40; }
#community-dialog .community-social .social-auth-gate p { margin: 0; color: #c2d1e5; }
#community-dialog .community-social .social-auth-gate .social-button { flex-shrink: 0; }
#community-dialog .community-social .social-editor { margin-bottom: 20px; border: 1px solid #496147; border-radius: 13px; background: #172638; }
#community-dialog .community-social .social-editor > summary { min-height: 48px; padding: 12px 15px; color: #daf4bb; font-weight: 750; cursor: pointer; }
#community-dialog .community-social .social-editor[open] > summary { border-bottom: 1px solid #354b46; }
#community-dialog .community-social .social-editor-body { padding: 16px; }
#community-dialog .community-social .social-fields { display: grid; gap: 15px; min-width: 0; margin: 0; padding: 0; border: 0; }
#community-dialog .community-social .social-fields > .social-button { justify-self: start; }
#community-dialog .community-social .social-field { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-width: 0; }
#community-dialog .community-social .social-label { color: #e0eaf8; font-weight: 650; }
#community-dialog .community-social :is(input:not([type="checkbox"]), select, textarea) {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid #59718e; border-radius: 8px;
  color: #f0f5fc; background: #102033; line-height: 1.5; font-size: 16px;
}
#community-dialog .community-social textarea { resize: vertical; }
#community-dialog .community-social :is(input, select, textarea):disabled { opacity: .65; }
#community-dialog .community-social .social-note { margin: 0; color: var(--social-muted); font-size: 14px; line-height: 1.55; }
#community-dialog .community-social .social-inline { display: flex; align-items: flex-end; gap: 10px; }
#community-dialog .community-social .social-inline > .social-button { flex-shrink: 0; }
#community-dialog .community-social .social-checkbox { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; color: #e4edf9; cursor: pointer; }
#community-dialog .community-social .social-checkbox input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: #c5ff52; }
#community-dialog .community-social .social-selected-games, #community-dialog .community-social .social-favorites, #community-dialog .community-social .social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#community-dialog .community-social .social-selected-games:empty { display: none; }
#community-dialog .community-social .social-selected-games .social-button { border-color: #4a6951; background: #253a30; color: #d7eebc; }
#community-dialog .community-social .social-list { display: grid; gap: 14px; }
#community-dialog .community-social .social-card { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--social-line); border-radius: 14px; background: #19283c; }
#community-dialog .community-social .social-card.is-highlighted { border-color: #b9e887; box-shadow: 0 0 0 2px #a2d86830; }
#community-dialog .community-social .social-card h4 { margin: 0; color: #f1f6fc; font-size: 18px; line-height: 1.35; }
#community-dialog .community-social .social-author { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
#community-dialog .community-social .social-author strong { overflow-wrap: anywhere; }
#community-dialog .community-social .social-badge { padding: 2px 7px; border: 1px solid #61738b; border-radius: 6px; color: #cddcf0; font-size: 14px; line-height: 1.4; }
#community-dialog .community-social .social-owner { border-color: #739b4b; color: #d4fca4; background: #2a3e2b; }
#community-dialog .community-social .social-profile-heading { display: flex; align-items: flex-start; gap: 13px; }
#community-dialog .community-social .social-avatar { display: grid; place-items: center; flex: 0 0 48px; min-height: 48px; border: 1px solid #4b6380; border-radius: 12px; background: #273b53; font-size: 28px; }
#community-dialog .community-social .social-bio, #community-dialog .community-social .social-goal { margin: 0; color: #d8e4f3; white-space: pre-wrap; }
#community-dialog .community-social .social-empty { padding: 25px 17px; border: 1px dashed #4c627f; border-radius: 12px; background: #152336; color: #c6d6e9; text-align: center; }
#community-dialog .community-social .social-empty p { margin: 0; }
#community-dialog .community-social .social-score-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--social-line); }
#community-dialog .community-social .social-score-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--social-line); }
#community-dialog .community-social .social-score-list span { min-width: 0; overflow-wrap: anywhere; }
#community-dialog .community-social .social-score-list strong { flex-shrink: 0; color: #d8f4b3; font-variant-numeric: tabular-nums; }
#community-dialog .community-social .social-score-form { display: flex; align-items: flex-end; gap: 10px; }
#community-dialog .community-social .social-score-form > .social-button { flex-shrink: 0; }
#community-dialog .community-social .social-share { margin-bottom: 16px; }
#community-dialog .community-social .social-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; width: 100%; max-width: 425px; }
#community-dialog .community-social .social-swatch { min-width: 0; min-height: 44px; padding: 5px; border: 2px solid #6b7f98; background: var(--swatch); border-radius: 9px; }
#community-dialog .community-social .social-swatch:hover:not(:disabled) { background: var(--swatch); }
#community-dialog .community-social .social-swatch[aria-pressed="true"] { outline: 3px solid #e5fbbf; outline-offset: 1px; box-shadow: inset 0 0 0 2px #152338; }
#community-dialog .community-social .social-drawing-board { display: block; width: min(100%, 352px); aspect-ratio: 1; height: auto; padding: 0; border: 2px solid #90a7c4; border-radius: 3px; background: #f4f5ed; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
#community-dialog .community-social .social-drawing-board[aria-disabled="true"] { cursor: default; opacity: .65; }
#community-dialog .community-social .social-art-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: start; }
#community-dialog .community-social .social-art-preview { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; align-self: center; border-radius: 5px; border: 1px solid #70869f; image-rendering: pixelated; background: #f4f5ed; }
#community-dialog .community-social .social-review-note { margin: 0; padding: 10px 12px; border: 1px solid #7d7152; border-radius: 9px; background: #353126; color: #f5e5b8; font-size: 14px; }
#community-dialog .community-social .social-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  #community-dialog .community-social { padding: 16px 15px 24px; }
  #community-dialog .community-social .social-card { padding: 14px; }
  #community-dialog .community-social .social-editor-body { padding: 13px; }
  #community-dialog .community-social .social-palette { grid-template-columns: repeat(4, minmax(44px, 1fr)); max-width: 320px; }
}
@media (max-width: 430px) {
  #community-dialog .community-social .social-toolbar { align-items: flex-start; }
  #community-dialog .community-social .social-toolbar > .social-button { flex-shrink: 0; }
  #community-dialog .community-social .social-auth-gate, #community-dialog .community-social .social-inline { align-items: stretch; flex-direction: column; }
  #community-dialog .community-social .social-auth-gate .social-button { align-self: flex-start; }
  #community-dialog .community-social .social-score-form { flex-wrap: wrap; }
  #community-dialog .community-social .social-score-form .social-field { flex-basis: 100%; }
  #community-dialog .community-social .social-favorites .social-button { text-align: left; justify-content: flex-start; }
}