/* N.O. CHANNEL MESSAGE BOARD */

.board-page {
    width:min(1180px, calc(100vw - 40px));
}

.board-page a {
    color:#ff5a00;
}

.board-return-link {
    display:inline-block;
    margin-top:10px;
    color:#ff5a00;
    text-decoration:none;
}

.board-flash {
    margin:0 0 24px;
    padding:14px 18px;
    border:1px solid #ff5a00;
    background:rgba(255,90,0,.08);
    color:#fff;
    text-align:center;
}

.board-flash-success {
    border-color:#00ff66;
    color:#00ff66;
}

.board-flash-error {
    border-color:#ff3b30;
    color:#ff8b84;
}

.board-account-strip {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:24px;
    padding:12px;
    border:1px dashed #ff5a00;
    color:#aaa;
}

.board-account-strip form,
.page-actions form {
    margin:0;
}

.board-inline-button,
.board-form button {
    border:1px solid #ff5a00;
    background:#020202;
    color:#ff5a00;
    font:inherit;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    cursor:pointer;
}

.board-inline-button {
    padding:10px 18px;
}

.board-inline-button:hover,
.board-form button:hover,
.board-inline-button:focus-visible,
.board-form button:focus-visible {
    background:#ff5a00;
    color:#020202;
    box-shadow:0 0 14px rgba(255,90,0,.65);
}

.board-grid,
.board-topic-list,
.board-post-list {
    display:grid;
    gap:14px;
}

.board-card,
.board-topic-row {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:16px;
    padding:18px;
    border:1px solid #ff5a00;
    background:rgba(255,90,0,.035);
    color:#ff5a00;
    text-decoration:none;
    transition:background .15s, box-shadow .15s, transform .15s;
}

.board-card:hover,
.board-topic-row:hover {
    background:rgba(255,90,0,.11);
    box-shadow:0 0 16px rgba(255,90,0,.38);
    transform:translateY(-2px);
}

.board-card-signal,
.board-topic-icon {
    color:#00ff66;
    font-size:20px;
}

.board-card-copy,
.board-topic-copy {
    display:grid;
    gap:6px;
    min-width:0;
    text-align:center;
}

.board-card-copy strong,
.board-topic-copy strong {
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:18px;
    overflow-wrap:anywhere;
}

.board-card-copy span,
.board-topic-copy span,
.board-card-stats,
.board-topic-stats {
    color:#aaa;
    font-size:12px;
    line-height:1.5;
}

.board-card-stats,
.board-topic-stats {
    min-width:155px;
    text-align:center;
}

.board-empty,
.board-signin-callout {
    padding:22px;
    border:1px dashed #ff5a00;
    color:#aaa;
    text-align:center;
}

.board-form-panel {
    margin-top:30px;
    padding:24px;
    border:1px dashed #ff5a00;
    background:rgba(255,90,0,.025);
}

.board-form {
    display:grid;
    gap:10px;
    width:min(100%, 720px);
    margin:0 auto;
}

.board-form label,
.board-form small {
    text-align:center;
}

.board-form input,
.board-form textarea {
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #ff5a00;
    border-radius:0;
    outline:none;
    background:#090400;
    color:#fff;
    font:inherit;
    text-align:left;
}

.board-form input:focus,
.board-form textarea:focus {
    box-shadow:0 0 0 2px #020202, 0 0 0 4px #ff5a00;
}

.board-form textarea {
    resize:vertical;
    line-height:1.55;
}

.board-form button {
    justify-self:center;
    min-width:190px;
    margin-top:8px;
    padding:12px 20px;
}

.board-post {
    display:grid;
    grid-template-columns:180px minmax(0, 1fr);
    border:1px solid #ff5a00;
    background:rgba(0,0,0,.74);
}

.board-post-author {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:8px;
    padding:20px;
    border-right:1px dashed #ff5a00;
    color:#aaa;
    font-size:11px;
    text-align:center;
}

.board-post-author strong {
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:17px;
    overflow-wrap:anywhere;
}

.board-post-content {
    min-width:0;
    padding:20px;
    text-align:center;
}

.board-post-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px dashed rgba(255,90,0,.6);
    color:#777;
    font-size:11px;
}

.board-post-content p {
    margin:20px 0;
    color:#ccc;
    line-height:1.7;
    overflow-wrap:anywhere;
    white-space:normal;
}

.board-post-content small {
    color:#777;
}

.board-post.is-removed {
    border-color:#6f3217;
    opacity:.78;
}

.board-post-removed {
    color:#ff8b84 !important;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    letter-spacing:2px;
}

.board-post-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px dashed rgba(255,90,0,.35);
}

.board-post-editor,
.board-post-remover {
    width:min(100%, 620px);
    padding:10px;
    border:1px solid rgba(255,90,0,.5);
    background:rgba(255,90,0,.035);
}

.board-post-editor summary,
.board-post-remover summary {
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    cursor:pointer;
}

.board-edit-form {
    margin-top:12px;
}

.board-post-remover > p {
    margin:12px 0;
    color:#aaa;
    font-size:11px;
}

.board-post-remover form {
    margin:0;
}

.board-danger-button {
    padding:10px 16px;
    border:1px solid #ff3b30;
    background:#100;
    color:#ff8b84;
    font:inherit;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    cursor:pointer;
}

.board-danger-button:hover,
.board-danger-button:focus-visible {
    background:#ff3b30;
    color:#fff;
    box-shadow:0 0 12px rgba(255,59,48,.65);
}

.board-auth-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.board-filebrowser-note {
    margin-top:34px;
    padding-top:26px;
    border-top:1px dashed #ff5a00;
}

@media (max-width:700px) {
    .board-page {
        width:calc(100vw - 24px);
    }

    .board-card,
    .board-topic-row {
        grid-template-columns:1fr;
    }

    .board-card-stats,
    .board-topic-stats {
        min-width:0;
    }

    .board-post {
        grid-template-columns:1fr;
    }

    .board-post-author {
        border-right:0;
        border-bottom:1px dashed #ff5a00;
    }

    .board-post-meta {
        flex-direction:column;
    }

    .board-post-actions,
    .board-post-editor,
    .board-post-remover {
        width:100%;
        box-sizing:border-box;
    }

    .board-auth-grid {
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion:reduce) {
    .board-card,
    .board-topic-row {
        transition:none;
    }
}

/* ================================================================
   SHARED REELS FRAME CONTROLS — START ADJUSTING THE DESIGN HERE
   --reel-frame-step controls each black/orange ring (use 2px–4px).
   --reel-frame-radius controls the rounded video-preview corners.
   Pattern order: BLACK / ORANGE / BLACK / ORANGE.
   ================================================================ */

.shared-reels-carousel,
.community-media-relay,
.shared-reel-overlay {
    --reel-frame-step:3px;
    --reel-frame-radius:22px;
    --reel-orange:#ff5a00;
    --reel-black:#020202;
}

.shared-reels-carousel {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0 0 28px;
    padding:22px 28px 26px;
    border:2px solid #ff5a00;
    border-radius:30px;
    background:rgba(0,0,0,.86);
    box-shadow:0 0 20px rgba(255,90,0,.35), inset 0 0 18px rgba(255,90,0,.12);
}

.shared-reels-heading {
    margin-bottom:22px;
    text-align:center;
}

.shared-reels-heading h2 {
    margin:5px 0 8px;
    color:#ff5a00;
    font-size:24px;
    letter-spacing:3px;
}

.shared-reels-heading p:last-child,
.shared-reels-empty,
.shared-reels-position {
    color:#888;
    font-size:11px;
    text-align:center;
}

.shared-reels-carousel-row {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:24px;
}

.shared-reels-carousel-row[hidden],
.shared-reels-position[hidden],
.shared-reels-empty[hidden] {
    display:none;
}

.shared-reels-feature {
    min-width:0;
    margin:14px;
}

.shared-reels-position {
    margin:22px 0 0;
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    letter-spacing:3px;
}

.shared-reel-card {
    display:grid;
    gap:18px;
    min-width:0;
    text-align:center;
}

.shared-reel-stage,
.shared-reel-overlay-stage {
    position:relative;
    width:100%;
    min-width:0;
    overflow:hidden;
    border:var(--reel-frame-step) solid var(--reel-black);
    border-radius:var(--reel-frame-radius);
    background:#000;
    box-shadow:
        0 0 0 var(--reel-frame-step) var(--reel-orange),
        0 0 0 calc(var(--reel-frame-step) + var(--reel-frame-step)) var(--reel-black),
        0 0 0 calc(var(--reel-frame-step) + var(--reel-frame-step) + var(--reel-frame-step)) var(--reel-orange),
        0 0 20px calc(var(--reel-frame-step) + var(--reel-frame-step) + var(--reel-frame-step)) rgba(255,90,0,.28);
    cursor:pointer;
}

.shared-reel-card.is-featured .shared-reel-stage {
    aspect-ratio:16 / 9;
    min-height:270px;
}

.shared-reel-card.is-compact .shared-reel-stage {
    aspect-ratio:4 / 3;
    min-height:300px;
}

.shared-reel-preview,
.shared-reel-iframe,
.shared-reel-thumbnail,
.shared-reel-placeholder {
    display:block;
    width:100%;
    height:100%;
    min-height:inherit;
    border:0;
    background:#000;
}

.shared-reel-preview {
    position:absolute;
    inset:0;
}

.shared-reel-iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
}

.shared-reel-thumbnail {
    object-fit:cover;
    transition:filter .2s, transform .25s;
}

.shared-reel-stage:hover .shared-reel-thumbnail {
    filter:brightness(.72) saturate(1.12);
    transform:scale(1.025);
}

.shared-reel-placeholder {
    display:grid;
    place-items:center;
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:clamp(20px, 5vw, 48px);
    letter-spacing:5px;
    background:
        radial-gradient(circle at center, rgba(255,90,0,.16), transparent 52%),
        repeating-linear-gradient(135deg, #020202 0 18px, #0c0401 18px 36px);
}

.shared-reel-play-symbol {
    position:absolute;
    top:50%;
    left:50%;
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    border:3px solid #020202;
    border-radius:50%;
    background:#ff5a00;
    color:#020202;
    font-size:30px;
    line-height:1;
    transform:translate(-50%, -50%);
    box-shadow:0 0 0 3px #ff5a00, 0 0 20px rgba(255,90,0,.8);
    pointer-events:none;
}

.shared-reel-copy {
    display:grid;
    gap:7px;
    justify-items:center;
}

.shared-reel-title {
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:16px;
    overflow-wrap:anywhere;
}

.shared-reel-meta {
    color:#888;
    font-size:10px;
    overflow-wrap:anywhere;
}

.shared-reel-actions,
.shared-reel-overlay-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.shared-reel-action {
    padding:8px 11px;
    border:1px solid #ff5a00;
    background:#020202;
    color:#ff5a00;
    font:inherit;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:10px;
    text-decoration:none;
    cursor:pointer;
}

.shared-reel-action:hover,
.shared-reel-action:focus-visible {
    background:#ff5a00;
    color:#020202;
    box-shadow:0 0 10px rgba(255,90,0,.7);
}

.shared-reel-action:disabled {
    border-color:#56301d;
    color:#68402a;
    cursor:not-allowed;
    box-shadow:none;
}

.shared-reels-knob {
    flex:0 0 auto;
}

/* Centered Discord-style reel pop-out */

.shared-reel-overlay {
    width:min(900px, calc(100vw - 30px), 120dvh);
    max-width:none;
    max-height:calc(100dvh - 16px);
    box-sizing:border-box;
    padding:0;
    overflow:auto;
    border:0;
    background:transparent;
    color:#ddd;
}

.shared-reel-overlay::backdrop {
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(3px);
}

.shared-reel-overlay-shell {
    position:relative;
    width:100%;
    box-sizing:border-box;
    padding:52px 18px 18px;
    border:2px solid #ff5a00;
    border-radius:28px;
    background:#060606;
    box-shadow:0 0 40px rgba(255,90,0,.42), inset 0 0 24px rgba(255,90,0,.1);
}

.shared-reel-overlay-close {
    position:absolute;
    top:10px;
    right:10px;
    z-index:4;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    padding:0;
    border:3px solid #ff5a00;
    border-radius:50%;
    background:#020202;
    color:#ff5a00;
    font:700 32px/1 Arial, sans-serif;
    cursor:pointer;
    box-shadow:0 0 0 3px #020202, 0 0 14px #ff5a00;
}

.shared-reel-overlay-close:hover,
.shared-reel-overlay-close:focus-visible {
    background:#ff5a00;
    color:#020202;
    transform:rotate(90deg);
}

.shared-reel-overlay-heading {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px 20px;
    margin:0 8px 18px;
}

.shared-reel-overlay-player-row {
    display:grid;
    grid-template-columns:70px minmax(0, 1fr) 70px;
    align-items:center;
    gap:18px;
    width:100%;
    min-width:0;
    margin-bottom:22px;
}

.shared-reel-overlay-knob[hidden] {
    display:flex;
    visibility:hidden;
}

.shared-reel-overlay-title {
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
}

.shared-reel-overlay-provider {
    color:#777;
    font-size:10px;
}

.shared-reel-overlay-stage {
    aspect-ratio:16 / 9;
    min-height:0;
    cursor:default;
}

.shared-reel-overlay-stage:fullscreen {
    display:grid;
    place-items:center;
    border-radius:0;
    width:100vw;
    height:100vh;
    border:0;
    background:#000;
    box-shadow:none;
}

.shared-reel-overlay-stage:fullscreen .shared-reel-iframe {
    width:100vw;
    height:100vh;
    border-radius:0;
}

/* ================================================================
   SHARED REELS FRAME CONTROLS — END
   ================================================================ */

/* LIVE COMMUNITY */

.community-page {
    width:100%;
    max-width:100%;
}

.community-app {
    --community-channels-width:190px;
    --community-presence-width:300px;
    display:grid;
    grid-template-columns:
        var(--community-channels-width)
        8px
        minmax(280px, 1fr)
        8px
        var(--community-presence-width);
    grid-template-rows:auto minmax(650px, 1fr);
    grid-template-areas:
        "toolbar toolbar toolbar toolbar toolbar"
        "channels left-resizer conversation right-resizer presence";
    min-height:650px;
    border:1px solid #ff5a00;
    background:rgba(0,0,0,.84);
}

.community-view-toolbar {
    grid-area:toolbar;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px;
    border-bottom:1px dashed #ff5a00;
    background:#050302;
}

.community-view-toolbar button,
.community-view-toolbar select,
.community-view-toolbar input,
.community-view-toolbar summary {
    border:1px solid #ff5a00;
    background:#020202;
    color:#ff5a00;
    font:inherit;
}

.community-view-toolbar button,
.community-view-toolbar select,
.community-view-toolbar summary {
    padding:7px 9px;
    cursor:pointer;
}

.community-view-toolbar label {
    display:flex;
    align-items:center;
    gap:6px;
    color:#aaa;
    font-size:10px;
}

.community-profile-settings {
    position:relative;
}

.community-profile-settings form {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:20;
    display:grid;
    gap:9px;
    width:min(320px, calc(100vw - 40px));
    padding:14px;
    border:2px solid #ff5a00;
    background:#050505;
    box-shadow:0 0 22px rgba(255,90,0,.45);
}

.community-profile-settings form label {
    display:grid;
    justify-items:stretch;
    text-align:left;
}

.community-profile-settings input {
    width:100%;
    box-sizing:border-box;
    padding:8px;
}

.community-channels {
    grid-area:channels;
    min-width:0;
}

.community-conversation {
    grid-area:conversation;
}

.community-presence {
    grid-area:presence;
    min-width:0;
}

.community-resizer {
    position:relative;
    touch-action:none;
    cursor:col-resize;
    background:linear-gradient(90deg, transparent 0 3px, rgba(255,90,0,.75) 3px 5px, transparent 5px);
}

.community-resizer::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:4px;
    height:56px;
    border:1px solid #ff5a00;
    border-radius:4px;
    background:#020202;
    transform:translate(-50%, -50%);
}

.community-resizer:hover,
.community-resizer:focus-visible,
.community-resizer.is-dragging {
    background:rgba(255,90,0,.24);
    outline:0;
}

.community-resizer-left {
    grid-area:left-resizer;
}

.community-resizer-right {
    grid-area:right-resizer;
}

.community-app.is-channels-collapsed {
    grid-template-columns:0 0 minmax(280px, 1fr) 8px var(--community-presence-width);
}

.community-app.is-channels-collapsed .community-channels,
.community-app.is-channels-collapsed .community-resizer-left,
.community-app.is-presence-collapsed .community-presence,
.community-app.is-presence-collapsed .community-resizer-right {
    display:none;
}

.community-app.is-presence-collapsed {
    grid-template-columns:var(--community-channels-width) 8px minmax(280px, 1fr) 0 0;
}

.community-app.is-channels-collapsed.is-presence-collapsed {
    grid-template-columns:0 0 minmax(280px, 1fr) 0 0;
}

.community-app h2 {
    margin:0 0 16px;
    color:#ff5a00;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:17px;
}

.community-channels,
.community-presence {
    padding:18px;
    background:rgba(255,90,0,.035);
}

.community-channels {
    border-right:1px dashed #ff5a00;
}

.community-presence {
    border-left:1px dashed #ff5a00;
}

.community-channel-list {
    display:grid;
    gap:7px;
}

.community-channel-button {
    display:grid;
    grid-template-columns:32px minmax(0, 1fr) auto;
    align-items:center;
    gap:6px;
    width:100%;
    padding:10px;
    border:1px solid transparent;
    background:transparent;
    color:#aaa;
    font:inherit;
    cursor:pointer;
    text-align:left;
}

.community-channel-button:hover,
.community-channel-button.is-active {
    border-color:#ff5a00;
    background:rgba(255,90,0,.12);
    color:#ff5a00;
}

.community-channel-name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.community-channel-online {
    color:#00ff66;
    font-size:10px;
}

.community-create-channel,
.board-resend-panel {
    margin-top:24px;
    padding:12px;
    border:1px dashed #ff5a00;
}

.community-create-channel summary,
.board-resend-panel summary {
    cursor:pointer;
    color:#ff5a00;
}

.community-create-channel form {
    display:grid;
    gap:8px;
    margin-top:12px;
}

.community-create-channel input,
.community-create-channel select,
.community-create-channel button,
.community-message-form textarea,
.community-message-form button,
.community-voice-panel button,
.community-media-controls button {
    border:1px solid #ff5a00;
    background:#050505;
    color:#ff5a00;
    font:inherit;
}

.community-create-channel input,
.community-create-channel select {
    width:100%;
    box-sizing:border-box;
    padding:9px;
}

.community-create-channel button,
.community-message-form button,
.community-voice-panel button,
.community-media-controls button {
    padding:9px 12px;
    cursor:pointer;
}

.community-conversation {
    display:grid;
    grid-template-rows:auto minmax(420px, 1fr) auto auto;
    min-width:0;
}

.community-conversation-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-bottom:1px dashed #ff5a00;
}

.community-conversation-header h2 {
    margin:0;
    flex:1;
}

.community-connection-state {
    color:#00ff66;
    font-size:10px;
}

.community-connection-state.is-error,
.board-setup-warning {
    color:#ff8b84;
}

.community-messages {
    min-height:420px;
    max-height:none;
    overflow-y:auto;
    padding:14px 20px;
    text-align:left;
}

.community-message {
    padding:14px 0;
    border-bottom:1px solid rgba(255,90,0,.2);
}

.community-message header {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    align-items:center;
    gap:12px;
    color:#777;
    font-size:10px;
}

.community-message-identity {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.community-message-identity small {
    overflow:hidden;
    color:#777;
    text-overflow:ellipsis;
}

.community-avatar,
.community-message-avatar {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:32px;
    height:32px;
    border:1px solid #ff5a00;
    border-radius:50%;
    background:#100500;
    color:#ff5a00;
    object-fit:cover;
}

.community-message-avatar {
    width:28px;
    height:28px;
}

.community-read-message {
    padding:5px 7px;
    border:1px solid #7a3209;
    background:#020202;
    color:#ff5a00;
    font:inherit;
    cursor:pointer;
}

.community-message header strong {
    color:#ff5a00;
    font-size:13px;
}

.community-message p {
    margin:8px 0;
    color:#ccc;
    line-height:1.55;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
}

.community-message-media {
    font-size:11px;
}

.community-gif-link {
    display:block;
    width:min(100%, 420px);
    margin:10px auto;
}

.community-gif-preview {
    display:block;
    width:100%;
    max-height:360px;
    border:2px solid #ff5a00;
    border-radius:16px;
    object-fit:contain;
    background:#000;
}

.community-message-form {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
    padding:16px;
    border-top:1px dashed #ff5a00;
}

.community-compose-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:7px;
}

.community-emoji-picker {
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    padding:9px;
    border:1px dashed #ff5a00;
    background:#050505;
}

.community-emoji-picker[hidden] {
    display:none;
}

.community-emoji-picker button {
    min-width:38px;
    min-height:38px;
    border:1px solid #6f2a04;
    background:#020202;
    font-size:20px;
    cursor:pointer;
}

.community-message-form textarea {
    width:100%;
    box-sizing:border-box;
    padding:12px;
    color:#fff;
    resize:vertical;
}

.community-presence section + section {
    margin-top:30px;
}

.community-presence-list {
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
    color:#aaa;
}

.community-presence-user {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
    padding:6px;
}

.community-presence-copy {
    display:grid;
    gap:2px;
    min-width:0;
}

.community-presence-copy strong,
.community-presence-copy small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.presence-light {
    color:#00ff66;
}

.community-media-frame iframe,
.community-media-frame img {
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    border:1px solid #ff5a00;
    background:#000;
    object-fit:cover;
}

.community-media-frame {
    margin:14px 12px 20px;
}

.community-media-frame .shared-reel-iframe,
.community-media-frame .shared-reel-thumbnail {
    border:0;
    border-radius:0;
}

.community-media-card {
    display:grid;
    gap:10px;
    overflow-wrap:anywhere;
}

.community-media-card strong,
.community-media-card a {
    font-size:11px;
}

.community-media-controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:12px;
}

.community-media-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.community-media-heading h2 {
    margin:0;
}

.community-media-heading button,
.community-watch-controls button {
    padding:7px 9px;
    border:1px solid #ff5a00;
    background:#020202;
    color:#ff5a00;
    font:inherit;
    cursor:pointer;
}

.community-watch-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
}

.community-watch-controls span {
    flex-basis:100%;
    color:#aaa;
    font-size:10px;
}

.community-voice-panel {
    padding:24px;
    border-top:1px dashed #ff5a00;
    color:#aaa;
    text-align:center;
}

.community-voice-panel p {
    line-height:1.55;
}

.voice-participants {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:16px;
}

.voice-participant {
    padding:8px 10px;
    border:1px solid rgba(255,90,0,.55);
}

.voice-video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    margin-top:16px;
}

.voice-video-card {
    position:relative;
    overflow:hidden;
    min-height:150px;
    border:2px solid #ff5a00;
    border-radius:18px;
    background:#000;
}

.voice-video-card video {
    display:block;
    width:100%;
    height:100%;
    min-height:150px;
    object-fit:cover;
}

.voice-video-card span {
    position:absolute;
    left:8px;
    bottom:8px;
    padding:4px 7px;
    background:rgba(0,0,0,.82);
    color:#ff5a00;
}

.community-app[data-community-font="readable"] {
    font-family:Verdana, Arial, sans-serif;
    letter-spacing:.02em;
}

.community-app[data-community-font="mono"] {
    font-family:"Courier New", Consolas, monospace;
}

.community-app[data-community-text="large"] .community-message p,
.community-app[data-community-text="large"] .community-message-form textarea,
.community-app[data-community-text="large"] .community-channel-button {
    font-size:18px;
}

.community-app[data-community-text="xlarge"] .community-message p,
.community-app[data-community-text="xlarge"] .community-message-form textarea,
.community-app[data-community-text="xlarge"] .community-channel-button {
    font-size:22px;
    line-height:1.65;
}

.community-app.is-high-contrast {
    background:#000;
    color:#fff;
    box-shadow:inset 0 0 0 2px #ff7a20;
}

.community-app.is-high-contrast .community-message p,
.community-app.is-high-contrast .community-presence,
.community-app.is-high-contrast .community-channels {
    color:#fff;
}

.community-app.is-reduced-motion *,
.community-app.is-reduced-motion *::before,
.community-app.is-reduced-motion *::after {
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
}

.turnstile-widget {
    display:flex;
    justify-content:center;
    min-height:65px;
    margin:8px 0;
}

body[aria-busy="true"] .standard-page-shell,
body[aria-busy="true"] .screen-wrapper {
    opacity:.55;
    pointer-events:none;
}

.site-nav-links a[aria-current="page"] {
    color:#fff;
    text-shadow:0 0 9px #ff5a00;
}

@media (max-width:800px) {
    .community-app {
        display:block;
    }

    .community-resizer {
        display:none;
    }

    .community-channels,
    .community-presence {
        border:0;
        border-bottom:1px dashed #ff5a00;
    }

    .community-app.is-channels-collapsed .community-channels,
    .community-app.is-presence-collapsed .community-presence {
        display:none;
    }
}

@media (max-width:650px) {
    .shared-reels-carousel {
        padding:18px 10px 22px;
        border-radius:22px;
    }

    .shared-reels-carousel-row {
        grid-template-columns:48px minmax(0, 1fr) 48px;
        gap:8px;
    }

    .shared-reels-feature {
        margin:10px;
    }

    .shared-reel-card.is-featured .shared-reel-stage,
    .shared-reel-card.is-compact .shared-reel-stage {
        min-height:210px;
    }

    .shared-reel-play-symbol {
        width:52px;
        height:52px;
        font-size:22px;
    }

    .shared-reel-overlay {
        width:calc(100vw - 12px);
        max-height:calc(100dvh - 8px);
    }

    .shared-reel-overlay-shell {
        padding:50px 8px 12px;
        border-radius:18px;
    }

    .shared-reel-overlay-close {
        top:7px;
        right:7px;
    }

    .shared-reel-overlay-player-row {
        grid-template-columns:48px minmax(0, 1fr) 48px;
        gap:6px;
    }

    .community-app {
        display:block;
    }

    .community-channels,
    .community-presence {
        border:0;
        border-bottom:1px dashed #ff5a00;
    }

    .community-channel-list {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .community-conversation {
        min-height:560px;
    }

    .community-presence {
        display:block;
    }

    .community-presence section + section {
        margin-top:24px;
    }

    .community-message-form {
        grid-template-columns:1fr;
    }

    .community-view-toolbar {
        align-items:stretch;
    }

    .community-view-toolbar > * {
        flex:1 1 140px;
    }

    .community-profile-settings form {
        position:fixed;
        top:12px;
        right:12px;
        left:12px;
        width:auto;
    }

    .community-message header {
        grid-template-columns:minmax(0, 1fr) auto;
    }

    .community-message header time {
        display:none;
    }
}