/* The community stays within the existing cocoa lobby and board surfaces. */
#lobbyFeatureBody .community-intro { margin: 0 1px 15px; }
#lobbyFeatureBody .community-intro h1 { margin: 0; color: #fff3e0; font-size: 18px; font-weight: 800; letter-spacing: -.45px; }
#lobbyFeatureBody .community-intro p { margin: 5px 0 0; color: #cbb99d; font-size: 11px; }
.community-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; margin-bottom: 10px; }
.community-section-head h2 { margin: 0; color: #f2c574; font-size: 13px; font-weight: 800; }
.community-update-badge { flex: none; padding: 5px 8px; border: 1px solid #80613f; border-radius: 7px; background: #3a2e25; color: #ceb998; font-size: 9px; white-space: nowrap; }
.community-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.community-video-carousel { display: flex; width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 11px; }
.community-video-carousel::-webkit-scrollbar { display: none; }
.community-video-page { box-sizing: border-box; flex: 0 0 100%; min-width: 0; align-items: start; scroll-snap-align: start; scroll-snap-stop: always; }
.community-video-carousel:focus-visible { outline: 2px solid #ffd76a; outline-offset: 3px; }
.community-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 3px; }
.community-video-footer .community-video-updated { min-width: 0; margin: 0; text-align: left; }
.community-video-pagination { display: flex; flex: none; align-items: center; gap: 2px; }
#lobbyFeatureBody .community-video-pagination button { display: grid; place-items: center; width: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #f2c574; font-size: 28px; line-height: 1; }
#lobbyFeatureBody .community-video-pagination button:disabled { opacity: .3; cursor: default; }
#lobbyFeatureBody .community-video-pagination button:focus-visible { outline: 2px solid #ffd76a; outline-offset: -3px; }
.community-video-pagination [role="status"] { min-width: 32px; color: #d9c7a5; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
#lobbyFeatureBody .community-video-card { display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #795c36; border-radius: 11px; background: linear-gradient(145deg, #3b3026, #30261e); color: #fff3e0; text-align: left; }
.community-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #231c17; }
.community-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 35px; height: 25px; transform: translate(-50%, -50%); border-radius: 7px; background: #e93128; box-shadow: 0 2px 9px #0005; }
.community-video-play svg { width: 11px; height: 13px; margin-left: 2px; fill: #fff; }
.community-video-duration { position: absolute; right: 6px; bottom: 5px; padding: 2px 4px; border-radius: 3px; background: #130f0dd9; color: #fff5e2; font-size: 9px; font-variant-numeric: tabular-nums; }
.community-video-copy { display: block; padding: 9px 9px 10px; }
.community-video-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; color: #f6e8cf; font-size: 11.5px; font-weight: 750; line-height: 1.45; letter-spacing: -.2px; overflow-wrap: anywhere; }
.community-video-copy small { display: block; overflow: hidden; margin-top: 4px; color: #b5a185; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.community-video-updated { margin: 8px 1px 0; text-align: right; color: #b5a185; font-size: 9px; }
.community-video-empty { display: grid; place-items: center; gap: 8px; min-height: 106px; padding: 16px; border: 1px solid #795c3677; border-radius: 11px; background: #30261e; color: #cbb99d; font-size: 12px; text-align: center; }
#lobbyFeatureBody .community-video-retry { min-height: 44px; padding: 6px 12px; border: 1px solid #80613f; border-radius: 7px; background: #3a2e25; color: #f2c574; font-size: 12px; }
.community-board-section { margin-top: 21px; padding-top: 16px; border-top: 1px solid #86653c6e; }
.community-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.community-board-heading h2 { margin: 0; color: #fff0d6; font-size: 16px; letter-spacing: -.4px; }
.community-board-heading p { margin: 3px 0 0; color: #baa889; font-size: 10px; }
#lobbyFeatureBody .community-board-heading .board-small-primary { flex: none; min-width: 79px; border-color: #d9a943; background: linear-gradient(180deg, #ffdc8b, #edbb61); color: #422b13; box-shadow: 0 2px 0 #845724; }
#lobbyFeatureBody .community-board-section .board-tabs { gap: 5px; margin-bottom: 10px; }
#lobbyFeatureBody .community-board-section .board-tabs button { border-color: #735a3a; background: #352b23; color: #d2bd9f; font-size: 11px !important; }
#lobbyFeatureBody .community-board-section .board-tabs button.is-active { border-color: #e7c071; background: linear-gradient(180deg, #ead09a, #d2ae69); color: #3d2916; }
.community-search { display: flex; align-items: center; min-height: 44px; border: 1px solid #725a40; border-radius: 9px; background: #302720; }
#lobbyFeatureBody .community-search input { min-width: 0; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px 0 0 9px; background: transparent; color: #f1e2c5; font-size: 16px; }
.community-search input::placeholder { color: #b29c7d; font-size: 11px; }
#lobbyFeatureBody .community-search button { display: grid; flex: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: #d1b27d; }
.community-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.community-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 5px 1px 3px; }
.community-list-toolbar > span { color: #bba88b; font-size: 10px; }
.community-sort { display: flex; align-items: center; }
#lobbyFeatureBody .community-sort button { position: relative; min-width: 44px; min-height: 44px; padding: 0 5px; border: 0; background: transparent; color: #baa889; font-size: 11px; }
#lobbyFeatureBody .community-sort button.is-active { color: #f3ca7e; font-weight: 800; }
.community-sort button + button::before { position: absolute; left: 0; top: 17px; height: 10px; border-left: 1px solid #6e5638; content: ''; }
/* Native modal keeps keyboard focus within the player and above every lobby layer. */
.community-video-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 12px; overflow: auto; border: 1px solid #a98247; border-radius: 14px; background: #30261e; color: #f6e8cf; box-shadow: 0 14px 60px #0009; font-family: Pretendard, 'Pretendard Variable', sans-serif; }
.community-video-dialog::backdrop { background: #100b08cc; }
.community-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.community-player-head h2 { min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.community-player-head button { flex: none; width: 44px; min-height: 44px; padding: 0; border: 1px solid #80613f; border-radius: 9px; background: #3a2e25; color: #f6e8cf; font: inherit; cursor: pointer; }
.community-video-dialog iframe { display: block; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 0; border-radius: 7px; background: #100d0a; }
.community-youtube-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; color: #f3ca7e; font-size: 13px; text-decoration: none; }
.community-video-dialog :focus-visible { outline: 2px solid #ffd76a; outline-offset: 2px; }
@media (max-width: 359px) { .community-section-head h2 { font-size: 12px; } .community-update-badge { padding: 5px; } .community-board-heading p { font-size: 9px; } }

/* Community extensions share the approved cocoa, gold and quiet green palette. */
#lobbyFeatureBody .community-board-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; }
#lobbyFeatureBody .community-board-nav .board-back { margin:0; font-size:13px !important; }
.community-kind-filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
#lobbyFeatureBody .community-kind-filters button { min-height:44px; min-width:44px; padding:8px 13px; border:1px solid #72593d; border-radius:22px; background:#33281f; color:#cbb99d; font-size:12px; font-weight:700; }
#lobbyFeatureBody .community-kind-filters button.is-active { border-color:#d8b16b; background:#ead09a; color:#3b2919; }
.community-kind-badge { display:inline-flex; flex:none; align-items:center; min-height:23px; padding:3px 7px; border:1px solid #8c6a3c; border-radius:6px; background:#473720; color:#efcf92; font-size:10px; font-weight:750; }
.community-kind-badge.is-solved { border-color:#477e69; background:#253e32; color:#b9e2cc; }
.community-board-notice { margin:0 0 12px; padding:11px 12px; border:1px solid #537e65; border-radius:10px; background:#253c2f; color:#c6e2c9; font-size:13px; }
.community-review-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.community-review-tags span { padding:5px 8px; border:1px solid #7e6242; border-radius:15px; color:#ead3ac; background:#423526; font-size:12px; }
.community-replay-card { margin-top:18px; padding:14px 12px; border:1px solid #8c6e41; border-radius:13px; background:radial-gradient(ellipse at 50% 40%,#373b30,#24281f 80%); }
.community-replay-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; color:#c4bd9f; font-size:11px; }
.community-replay-heading strong { color:#f5d38c; }
.community-replay-board,.community-replay-own { display:grid; justify-items:center; gap:8px; color:#c3bea6; font-size:11px; }
.community-replay-own { margin-top:13px; }
.community-hand-cards { display:inline-flex; justify-content:center; flex-wrap:nowrap; gap:5px; max-width:100%; }
/* Reuse the table card face and body deck preference; keep sizing in this panel. */
#lobbyFeatureBody .community-hand-card.card { --community-card-width:38px; position:relative; flex:none; width:var(--community-card-width); height:calc(var(--community-card-width) * 1.38); padding:0; line-height:1; }
#app #lobbyFeatureBody .community-hand-card.card-face { --face-rank-size:calc(var(--community-card-width) * .49); --face-corner-size:calc(var(--community-card-width) * .27); }
#lobbyFeatureBody .community-hand-card .suit { position:relative; }
#lobbyFeatureBody .community-hand-card .suit>.hd-suit-text { opacity:0; }
#lobbyFeatureBody .community-hand-card .suit>.hd-suit-vector { position:absolute; inset:0; display:block; width:100%; height:100%; fill:currentColor; }
#lobbyFeatureBody .community-replay-link { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-top:14px; padding:8px; border:1px solid #a68b52; border-radius:8px; background:#50472e; color:#f7dfa1; text-decoration:none; font-size:13px; font-weight:800; }
.community-poll { margin-top:18px; padding:14px 11px; border:1px solid #9b7742; border-radius:12px; background:#3b3023; }
.community-poll h4 { margin:0 0 12px; color:#f8e6bd; font-size:15px; }
.community-poll-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
#lobbyFeatureBody .community-poll-choices button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:52px; padding:9px 5px; overflow:hidden; border:1px solid #9f8050; border-radius:9px; background:#2e261c; color:#e9d2a6; font-size:14px; font-weight:800; }
#lobbyFeatureBody .community-poll-choices button.is-selected { border-color:#f3ce7c; background:#ead09a; color:#3b2814; }
.community-poll-choices b { font-size:13px; }.community-vote-track { display:block; width:100%; height:3px; overflow:hidden; border-radius:2px; background:#816c493a; }.community-vote-track i { display:block; height:100%; background:#bb9043; }
.community-poll > p { margin:10px 0 0; color:#c4b18e; font-size:11px; line-height:1.6; }
.community-poll-explanation { margin-top:13px; padding:12px; border-radius:8px; background:#29271d; color:#e3d7b6; font-size:13px; line-height:1.7; }
.community-poll-explanation strong { color:#f0d28f; }.community-poll-explanation p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.community-article-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:17px; }
#lobbyFeatureBody .community-article-actions button { min-height:44px; min-width:0; padding:9px 5px; border:1px solid #806541; border-radius:9px; background:#3b3025; color:#ead5ae; font-size:12px; font-weight:750; }
#lobbyFeatureBody .community-article-actions button.is-active { color:#f4cf7e; border-color:#c69a4a; background:#4b3822; }
#lobbyFeatureBody .board-comment.is-reply { margin-left:20px; padding-left:12px; border-left:2px solid #7f6944; }
#lobbyFeatureBody .board-comment.is-accepted { margin-top:10px; padding:13px 11px; border:1px solid #6e9b77; border-radius:10px; background:#273b2e; }
.community-accepted-label { margin-bottom:9px; color:#bce3c1; font-size:12px; font-weight:800; }
.community-comment-actions { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:5px; }
#lobbyFeatureBody .community-comment-actions button { min-width:44px; min-height:44px; padding:5px 2px; border:0; background:transparent; color:#d3bb8d; font-size:12px; }
#lobbyFeatureBody .community-comment-actions button.is-active { color:#bae6c3; }
.community-save-note { display:grid; gap:8px; margin-top:14px; padding:13px; border:1px solid #7b694b; border-radius:10px; background:#30291f; }
.community-save-note > label { font-size:13px; font-weight:750; color:#edd5a9; }.community-save-note p { margin:0; color:#b6a88c; font-size:11px; }
#lobbyFeatureBody .community-save-note textarea { box-sizing:border-box; width:100%; min-height:92px; padding:10px; border:1px solid #776043; border-radius:8px; background:#211c16; color:#f2e6ca; font:inherit; font-size:16px; resize:vertical; }
.community-save-note > div { display:flex; justify-content:flex-end; gap:8px; }
#lobbyFeatureBody .community-save-note button { min-height:44px; min-width:62px; border:1px solid #a28045; border-radius:8px; background:#4b3a24; color:#f2d796; font:inherit; font-size:13px; }
.community-hand-field { display:grid; gap:10px; padding:13px 11px; border:1px solid #806643; border-radius:11px; background:#302a20; }
.community-hand-field h4 { margin:0; color:#f0d6a2; font-size:14px; }.community-hand-field > p { margin:0; font-size:11px; color:#baa98a; line-height:1.7; }
.community-hand-preview { display:grid; justify-items:center; gap:8px; padding:12px; border:1px solid #5a6049; border-radius:8px; background:#24291f; color:#c5c6ad; font-size:11px; }
.community-hand-preview .community-hand-cards + span { margin-top:8px; }
#lobbyFeatureBody .board-form .community-checkbox { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; min-height:44px; font-size:12px; font-weight:500; line-height:1.6; }
#lobbyFeatureBody .community-checkbox input[type="checkbox"] { width:22px; height:22px; min-height:22px; margin:4px; padding:0; accent-color:#e4bd6d; }
.community-review-field { min-width:0; padding:10px; border:1px solid #806643; border-radius:10px; }.community-review-field legend { color:#e9d1a6; font-size:12px; }
#lobbyFeatureBody .board-form textarea[name="community_explanation"] { min-height:110px; }
@media (max-width:359px) { #lobbyFeatureBody .community-hand-card.card { --community-card-width:34px; }.community-hand-cards { gap:4px; }.community-article-actions { gap:6px; }#lobbyFeatureBody .community-article-actions button { font-size:11px; }#lobbyFeatureBody .board-comment.is-reply { margin-left:12px; padding-left:8px; }.community-poll { padding:12px 9px; } }
#lobbyFeatureBody .board-comment.is-store-reply { padding:13px 11px; border:1px solid #9b7a45; border-radius:10px; background:#3b3022; margin-top:10px; }
.community-store-reply-label { display:inline-flex; align-items:center; min-height:24px; margin-bottom:8px; padding:3px 7px; border:1px solid #a4834a; border-radius:5px; background:#574126; color:#f1d08b; font-size:10px; font-weight:800; }