/* Rooms and clubs: bounded directories, readable RTL and native controls. */
.social-page { --social-ink: #183f3c; --social-muted: #576f65; --social-line: #dce6df; --social-warm: #f5f3eb; max-inline-size: 1480px; }
.social-page h1, .social-page h2, .social-page h3, .social-create-modal h2 { color: var(--social-ink, #183f3c); }
.social-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: 26px; }
.social-page-head h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 8px 0; }
.social-page p { color: var(--social-muted); line-height: 1.9; }
.social-page-head p { margin: 0; }
.social-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.social-page .btn, .social-create-modal .btn { border-radius: 10px; box-shadow: none; border-color: #bdcec3; font-size: .84rem; min-block-size: 44px; }
.social-page .btn--primary, .social-create-modal .btn--primary { background: #176b57; color: #fff; border-color: #176b57; }
.social-page .btn--primary:hover, .social-create-modal .btn--primary:hover { background: #10523f; }
.social-page .text-link { color: #17634f; font-size: .85rem; min-block-size: 44px; display: inline-flex; align-items: center; }
.room-match-bar { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1px solid #dae8dd; background: #edf4ed; border-radius: 16px; }
.room-match-icon { display: grid; place-items: center; inline-size: 50px; block-size: 50px; background: #d5e8d8; color: #226947; border-radius: 15px; flex-shrink: 0; }
.room-match-icon .icon { inline-size: 29px; block-size: 29px; }
.room-match-bar strong { font-size: 1.05rem; }
.room-match-bar p { margin: 4px 0 0; font-size: .84rem; }
.room-match-bar > .btn { margin-inline-start: auto; }
.room-game-strip { display: flex; gap: 10px; overflow-x: auto; padding: 5px 3px 12px; margin: 23px -3px 12px; scrollbar-width: thin; }
.room-game-pick { display: flex; align-items: center; gap: 10px; flex: 1 0 145px; max-inline-size: 220px; min-block-size: 69px; padding: 10px 14px; border: 1px solid var(--social-line); border-radius: 12px; background: #fff; color: #536c62; font-size: .88rem; font-weight: 650; }
.room-game-pick.is-selected { color: #145e4b; background: #e9f4ed; border-color: #62a68b; box-shadow: inset 0 0 0 1px #62a68b; }
.room-game-pick:hover { border-color: #62a68b; }
.rooms-directory .game-art { min-block-size: 0; padding: 4px; }
.rooms-directory .game-art::after { display: none; }
.rooms-directory .game-art img { padding: 0; border-radius: 6px; object-fit: cover; }
.room-game-pick .game-art, .room-game-icon { inline-size: 42px; block-size: 42px; object-fit: cover; border-radius: 8px; flex-shrink: 0; overflow: hidden; }
.room-game-icon { display: grid; place-items: center; background: #e7ede8; }
.social-results-panel { background: #fff; border: 1px solid var(--social-line); border-radius: 16px; overflow: clip; }
.social-tabs { display: flex; gap: 24px; padding-inline: 24px; border-block-end: 1px solid var(--social-line); overflow-x: auto; scrollbar-width: thin; }
.social-tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 64px; flex-shrink: 0; padding: 12px 0; border-block-end: 3px solid transparent; color: #61746a; font-size: .89rem; white-space: nowrap; }
.social-tabs a.is-active { color: #16644d; border-block-end-color: #217254; font-weight: 750; }
.social-tabs a > span { display: inline-grid; place-items: center; min-inline-size: 24px; padding: 1px 6px; background: #eef3ef; border-radius: 6px; font-size: .73rem; font-weight: 500; }
.social-tabs a.is-active > span { background: #dcede2; }
.social-search-form { display: flex; align-items: stretch; gap: 12px; padding: 24px 24px 12px; }
.social-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; min-inline-size: 0; border: 1px solid var(--social-line); border-radius: 10px; padding-inline: 13px; background: #fafcfb; }
.social-search > .icon { color: #698076; flex-shrink: 0; inline-size: 20px; block-size: 20px; }
.social-search input { border: 0; background: transparent; inline-size: 100%; min-inline-size: 0; font: inherit; font-size: .85rem; color: var(--social-ink); min-block-size: 48px; padding: 8px 0; }
.social-search:focus-within { outline: 3px solid #3479a2; outline-offset: 2px; }
.social-search input:focus-visible { outline: none; }
.social-select { display: flex; align-items: center; gap: 8px; color: var(--social-muted); border: 1px solid var(--social-line); padding-inline: 12px; border-radius: 10px; font-size: .75rem; }
.social-select select { color: var(--social-ink); border: 0; background: transparent; min-block-size: 48px; font: inherit; font-size: .83rem; max-inline-size: 165px; }
.social-results-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-block-size: 51px; padding: 6px 24px 14px; color: var(--social-muted); font-size: .77rem; }
.social-results-count > span:first-child { color: var(--social-ink); font-weight: 650; }
.room-directory-list { padding-inline: 24px; }
.room-directory-row { display: grid; grid-template-columns: minmax(185px, 1.6fr) minmax(135px, 1fr) minmax(125px, .9fr) 82px auto; align-items: center; gap: 16px; padding-block: 20px; border-block-start: 1px solid #e6ece8; }
.room-summary-title { display: flex; align-items: center; gap: 13px; min-inline-size: 0; }
.room-summary-title .game-art { inline-size: 54px; block-size: 54px; object-fit: cover; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.room-summary-title > div { min-inline-size: 0; }
.room-summary-title h2 { font-size: .94rem; line-height: 1.7; margin: 0 0 3px; overflow-wrap: anywhere; }
.room-summary-title p { margin: 0; font-size: .72rem; overflow-wrap: anywhere; }
.room-summary-title p span { padding-inline: 2px; }
.room-summary-status { display: grid; gap: 4px; }
.room-state { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #5b6c63; font-weight: 600; }
.room-state .icon { inline-size: 15px; block-size: 15px; }
.room-state--ready { color: #146644; }
.room-state--playing { color: #875522; }
.room-summary-status small { font-size: .7rem; color: #64766c; }
.room-summary-capacity { display: grid; gap: 5px; color: #566b60; font-size: .72rem; }
.room-summary-capacity meter { inline-size: 100%; block-size: 10px; max-inline-size: 150px; }
.room-summary-capacity meter::-webkit-meter-bar { background: #eaf0eb; border: 0; }
.room-summary-capacity meter::-webkit-meter-optimum-value { background: #5e9981; }
.room-summary-avatars { display: flex; padding-inline-start: 8px; }
.room-summary-avatars .avatar { inline-size: 29px; block-size: 29px; font-size: .7rem; margin-inline-start: -8px; border: 2px solid white; }
.social-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 24px; border-block-start: 1px solid var(--social-line); font-size: .79rem; color: var(--social-muted); }
.room-empty-note { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 9px 20px; background: #f6f8f5; font-size: .78rem; color: #5a6f60; border-block-start: 1px solid var(--social-line); }
.room-empty-note > .icon { inline-size: 18px; block-size: 18px; }
.social-empty { padding: 44px 24px; text-align: center; border-radius: 14px; background: #fff; }
.social-empty-mark { display: grid; place-items: center; inline-size: 59px; block-size: 59px; background: #edf3ed; color: #668776; margin: 0 auto 16px; border-radius: 18px; }
.social-empty-mark .icon { inline-size: 29px; block-size: 29px; }
.social-empty h2 { margin: 0; font-size: 1.16rem; }
.social-empty p { font-size: .87rem; max-inline-size: 430px; margin: 9px auto 21px; }
.social-loading { padding: 35px 24px; color: var(--social-muted); text-align: center; min-block-size: 260px; }
.social-loading span { display: block; block-size: 50px; border-radius: 10px; margin-block-start: 14px; background: #f1f5f1; }
.room-club-bridge { display: flex; gap: 16px; align-items: center; margin-block-start: 25px; padding: 22px 24px; background: #f1f1e8; border-radius: 14px; }
.room-club-bridge > span { color: #7c8554; }
.room-club-bridge p { font-size: .81rem; margin: 4px 0 0; }
.room-club-bridge > .btn { margin-inline-start: auto; flex-shrink: 0; }
.club-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; padding: 34px 40px; border-radius: 20px; background: #f1f0e6; border: 1px solid #e6e8dc; overflow: hidden; }
.club-hero h1 { font-size: clamp(1.8rem, 3.1vw, 3rem); font-weight: 850; line-height: 1.65; margin: 8px 0 13px; }
.club-hero h1 em { color: #277557; font-style: normal; }
.club-hero p { font-size: .89rem; max-inline-size: 430px; margin: 0 0 22px; }
.club-hero-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; padding-block: 20px 40px; isolation: isolate; }
.club-hero-orbit { position: absolute; z-index: -1; inline-size: 235px; block-size: 235px; border-radius: 50%; border: 1px solid #d4ddca; background: #e8eddc; }
.club-hero-orbit::after { content: ''; position: absolute; inset: -25px; border: 1px dashed #cbd6bf; border-radius: 50%; }
.club-hero-art > .club-crest:nth-of-type(2) { transform: rotate(14deg) translateY(20px); }
.club-hero-art > .club-crest:nth-of-type(4) { transform: rotate(-14deg) translateY(20px); }
.club-hero-caption { position: absolute; inset-block-end: 0; font-size: .78rem; color: #586c4d; }
.club-crest { display: inline-flex; inline-size: 64px; block-size: 72px; flex-shrink: 0; --crest-fill: #dbede5; --crest-line: #448774; --crest-symbol: #226251; }
.club-crest svg { inline-size: 100%; block-size: 100%; filter: drop-shadow(0 5px 3px rgb(40 66 42 / 7%)); }
.crest-shell { fill: var(--crest-fill); stroke: var(--crest-line); stroke-width: 1.8; }
.crest-symbol { stroke: var(--crest-symbol); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.club-crest--sun { --crest-fill: #f4e4bb; --crest-line: #b89445; --crest-symbol: #87652d; }
.club-crest--mountain { --crest-fill: #e4e6f1; --crest-line: #8b94ae; --crest-symbol: #596787; }
.club-crest--crown { --crest-fill: #f5ddd0; --crest-line: #c18d72; --crest-symbol: #975d40; }
.club-crest--large { inline-size: 124px; block-size: 138px; }
.club-hero-art > .club-crest:not(.club-crest--large) { inline-size: 85px; block-size: 96px; }
.club-hero--compact { display: block; padding: 22px 28px; }
.club-hero--compact > div:first-child { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; }
.club-hero--compact .eyebrow { grid-column: 1; }
.club-hero--compact h1 { grid-column: 1; font-size: 1.9rem; margin-block: 8px; }
.club-hero--compact p { grid-column: 1; max-inline-size: none; margin: 0; }
.club-hero--compact .btn { grid-column: 2; grid-row: 1 / 4; }
.club-hero--compact .club-hero-art { display: none; }
.club-tabs { padding-inline: 0; margin-block: 22px 5px; gap: 32px; }
.club-tabs a { min-block-size: 61px; }
.club-tabs .icon { inline-size: 19px; block-size: 19px; }
.club-search-form { padding: 22px 0 10px; }
.club-search-form .social-search { background: #fff; }
.club-search-form .social-select { background: #fff; }
.social-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-block: 23px 17px; }
.social-section-heading h2 { font-size: 1.17rem; margin: 0; }
.social-section-heading p { font-size: .84rem; margin: 6px 0 0; }
.social-section-heading > span { font-size: .78rem; color: var(--social-muted); }
.club-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.club-card { background: #fff; border: 1px solid var(--social-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.club-card-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.club-admission { display: inline-flex; gap: 6px; align-items: center; font-size: .7rem; font-weight: 500; color: #496b55; background: #eef4eb; border-radius: 6px; padding: 5px 8px; line-height: 1.6; }
.club-card h2 { font-size: 1.13rem; line-height: 1.7; margin: 15px 0 5px; overflow-wrap: anywhere; }
.club-card > p { font-size: .79rem; margin: 0 0 19px; min-block-size: 45px; overflow-wrap: anywhere; }
.club-card-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #587164; font-size: .74rem; margin-block: auto 16px; }
.club-card-facts span { display: inline-flex; align-items: center; gap: 5px; }
.club-card-facts .icon { inline-size: 16px; block-size: 16px; }
.club-card > .btn { justify-content: space-between; background: #f9fbf9; }
.club-how-it-works { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; padding-block: 30px 12px; margin-block-start: 24px; border-block-start: 1px solid var(--social-line); }
.club-how-it-works > div { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; }
.club-how-it-works strong { font-size: .85rem; font-weight: 650; }
.club-how-it-works p { grid-column: 2; margin: 0; font-size: .74rem; }
.club-how-it-works > div > span { inline-size: 24px; block-size: 24px; display: grid; place-items: center; border-radius: 50%; background: #e6efe7; color: #537362; font-size: .76rem; }
.social-footnote { color: var(--social-muted, #536c60); font-size: .77rem; line-height: 1.9; }
.club-ranking { overflow-x: auto; border-radius: 14px; border: 1px solid var(--social-line); background: #fff; }
.club-ranking table { inline-size: 100%; border-collapse: collapse; text-align: start; font-size: .85rem; }
.club-ranking th, .club-ranking td { padding: 14px 20px; text-align: start; border-block-end: 1px solid #e6ece7; }
.club-ranking thead th { background: #eef3ec; color: #5a7260; font-size: .76rem; font-weight: 500; }
.club-ranking tr:last-child > * { border-block-end: 0; }
.club-ranking .is-mine { background: #f2f8f0; }
.club-rank-name { display: flex; align-items: center; gap: 13px; min-block-size: 44px; }
.club-rank-name bdi { overflow-wrap: anywhere; }
.club-rank-name .club-crest { inline-size: 34px; block-size: 39px; }
.club-rank-number { font-size: 1rem; color: #7c865a; }
.social-back { display: inline-flex; align-items: center; font-size: .82rem; min-block-size: 44px; color: #376a54; margin-block-end: 10px; }
.club-profile-hero { display: flex; align-items: center; gap: 28px; padding: 30px; background: #f1f1e7; border: 1px solid #dfe5d8; border-radius: 18px; }
.club-profile-hero h1 { font-size: clamp(1.8rem,3vw,2.5rem); margin: 8px 0; overflow-wrap: anywhere; }
.club-profile-hero p { font-size: .87rem; max-inline-size: 650px; overflow-wrap: anywhere; }
.club-stat-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fff; border: 1px solid var(--social-line); border-radius: 14px; padding: 22px 0; margin-block: 20px 26px; }
.club-stat-strip > div { text-align: center; border-inline-end: 1px solid var(--social-line); }
.club-stat-strip > div:last-child { border: 0; }
.club-stat-strip dt { font-size: .75rem; color: var(--social-muted); }
.club-stat-strip dd { font-size: 1.5rem; margin: 4px 0 0; color: var(--social-ink); font-weight: 750; }
.club-stat-strip small { font-size: .77rem; font-weight: 450; }
.club-profile-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 24px; align-items: start; }
.club-profile-layout > * { min-inline-size: 0; }
.club-roster { padding: 22px; }
.club-roster .social-section-heading { margin-block: 0 16px; }
.club-roster h2 { font-size: 1.05rem; }
.club-roster ul { list-style: none; padding: 0; margin: 0; max-block-size: 370px; overflow-y: auto; }
.club-roster li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-block: 11px; border-block-end: 1px solid #e7eee8; font-size: .85rem; }
.club-roster li:last-child { border: 0; }
.club-roster li > bdi { flex: 1; min-inline-size: 90px; overflow-wrap: anywhere; }
.club-roster li > span:last-child { color: var(--social-muted); font-size: .72rem; }
.club-side-note { background: #eaf2e9; border: 1px solid #d8e4d4; border-radius: 16px; padding: 24px; }
.club-side-note > span { color: #62865e; }
.club-side-note h2 { font-size: 1.1rem; }
.club-side-note p { font-size: .82rem; }
.club-side-note form, .club-management form { display: grid; gap: 10px; font-size: .82rem; }
.club-side-note .select, .club-side-note .input { inline-size: 100%; min-inline-size: 0; font-size: .8rem; padding-inline: 9px; }
.club-management { padding: 20px; background: #fff; border: 1px solid var(--social-line); border-radius: 14px; font-size: .82rem; }
.club-management summary { cursor: pointer; min-block-size: 44px; align-content: center; font-weight: 600; }
.social-check { display: flex; align-items: start; gap: 9px; min-block-size: 44px; }
.social-check input { margin-block-start: 5px; inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.club-match-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.club-match-grid--profile { grid-template-columns: 1fr; }
.club-match-card { padding: 23px; border: 1px solid var(--social-line); background: #fff; border-radius: 16px; }
.club-match-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--social-muted); }
.club-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding-block: 23px 8px; }
.club-match-teams > span { font-size: .7rem; color: #7b8074; }
.club-match-team { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font-size: .93rem; font-weight: 650; }
.club-match-team bdi { overflow-wrap: anywhere; }
.club-match-time { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; text-align: center; font-size: .72rem; padding-block: 10px; border-block: 1px solid #e9eee7; }
.club-match-time .icon { inline-size: 15px; block-size: 15px; }
.club-match-result { text-align: center; font-size: .85rem; }
.club-match-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.club-result-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; font-size: .75rem; margin-block-start: 15px; }
.club-result-form label { display: grid; gap: 5px; }
.club-result-form .select { max-inline-size: 100%; inline-size: 100%; min-inline-size: 0; }
.social-form-error { color: #a33124 !important; font-size: .81rem; margin: 0; grid-column: 1 / -1; }
.social-form-error:empty { display: none; }
.social-create-modal { max-inline-size: 550px; padding: 27px; }
.social-create-modal form { display: grid; gap: 12px; }
.social-create-modal form > label { font-size: .85rem; margin-block-end: -5px; }
.social-create-modal .input, .social-create-modal .select { font-size: .86rem; border-radius: 9px; }
.social-create-modal textarea { resize: vertical; }
.club-badge-picker { border: 0; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.club-badge-picker legend { font-size: .86rem; margin-block-end: 10px; }
.club-badge-picker label { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 3px; border: 1px solid #d7e3da; border-radius: 12px; font-size: .73rem; cursor: pointer; }
.club-badge-picker label:has(:checked) { border-color: #43896c; background: #eef7ef; box-shadow: inset 0 0 0 1px #43896c; }
.club-badge-picker input { position: absolute; inset-block-start: 7px; inset-inline-start: 7px; accent-color: #246d54; }
.club-badge-picker .club-crest { inline-size: 43px; block-size: 48px; }
.social-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.social-form-columns label { display: grid; gap: 7px; font-size: .79rem; }
.social-form-columns select { inline-size: 100%; min-inline-size: 0; }
.social-page :focus-visible, .social-create-modal :focus-visible { outline: 3px solid #246d9c; outline-offset: 3px; }
@media (max-width: 1200px) {
  .room-summary-avatars { display: none; }
  .room-directory-row { grid-template-columns: minmax(170px,1.4fr) minmax(125px,1fr) minmax(110px,.8fr) auto; gap: 12px; }
  .club-hero { padding: 28px; }
  .club-hero-art > .club-crest:not(.club-crest--large) { inline-size: 60px; block-size: 68px; }
  .club-directory-grid { gap: 14px; }
  .club-card { padding: 18px; }
  .social-search-form { flex-wrap: wrap; }
  .social-search { flex-basis: 240px; }
  .club-profile-layout { grid-template-columns: minmax(0,1fr) 275px; gap: 18px; }
}
@media (max-width: 920px) {
  .mobile-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .club-profile-layout { grid-template-columns: minmax(0,1fr) 270px; }
  .room-game-pick { flex-basis: 130px; }
}
@media (max-width: 760px) {
  .social-page-head { align-items: start; margin-block-end: 19px; }
  .social-page-head h1 { font-size: 1.8rem; }
  .social-page-head p { font-size: .8rem; }
  .social-page-head .btn { font-size: .75rem; padding-inline: 10px; }
  .room-match-bar { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 18px; }
  .room-match-icon { inline-size: 42px; block-size: 42px; }
  .room-match-bar > .btn { grid-column: 1 / -1; margin: 0; }
  .room-game-strip { margin-block: 16px 7px; }
  .room-game-pick { flex: 0 0 116px; max-inline-size: 155px; flex-direction: column; gap: 7px; font-size: .78rem; padding: 12px 8px; }
  .social-tabs { gap: 23px; padding-inline: 17px; }
  .social-tabs a { font-size: .8rem; min-block-size: 58px; }
  .social-tabs a > span { font-size: .67rem; }
  .social-search-form { gap: 10px; padding: 18px 16px 10px; }
  .social-search { flex-basis: calc(100% - 100px); order: 0; }
  .social-search-submit { order: 1; padding-inline: 12px; }
  .social-select { order: 2; flex: 1; justify-content: space-between; min-inline-size: 0; padding-inline: 10px; }
  .social-select select { max-inline-size: 135px; min-inline-size: 0; inline-size: 100%; font-size: .77rem; }
  .social-select > select { flex: 1; }
  .social-results-count { padding-inline: 17px; font-size: .7rem; gap: 5px; }
  .social-results-count > span:last-child:not(:first-child) { display: none; }
  .room-directory-list { padding-inline: 16px; }
  .room-directory-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-block: 18px; }
  .room-summary-title { grid-column: 1; grid-row: 1; gap: 10px; }
  .room-summary-title .game-art { inline-size: 43px; block-size: 43px; }
  .room-summary-title h2 { font-size: .86rem; }
  .room-summary-title p { font-size: .67rem; }
  .room-directory-row > .btn { grid-column: 2; grid-row: 1; padding-inline: 10px; font-size: .72rem; }
  .room-summary-status { grid-column: 1; grid-row: 2; }
  .room-state { font-size: .72rem; }
  .room-summary-status small { font-size: .65rem; }
  .room-summary-capacity { grid-column: 2; grid-row: 2; font-size: .67rem; }
  .social-pagination { padding: 16px; font-size: .7rem; }
  .social-pagination .btn { padding-inline: 9px; font-size: .72rem; }
  .room-club-bridge { display: grid; grid-template-columns: 25px 1fr; gap: 10px; padding: 18px; }
  .room-club-bridge .btn { grid-column: 1 / -1; margin: 5px 0 0; }
  .club-hero { grid-template-columns: 1fr; padding: 23px; gap: 0; }
  .club-hero h1 { font-size: 2rem; line-height: 1.6; }
  .club-hero p { font-size: .81rem; }
  .club-hero-art { display: none; }
  .club-tabs { padding-inline: 0; gap: 23px; }
  .club-tabs a { gap: 6px; }
  .club-tabs .icon { inline-size: 17px; block-size: 17px; }
  .club-search-form { padding-inline: 0; }
  .club-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .club-card { padding: 18px; }
  .club-card-top { align-items: center; }
  .club-card .club-crest { inline-size: 52px; block-size: 58px; }
  .club-admission { font-size: .65rem; }
  .club-how-it-works { grid-template-columns: 1fr; gap: 19px; }
  .club-profile-layout { grid-template-columns: 1fr; }
  .club-profile-layout > aside { grid-row: 1; }
  .club-profile-hero { gap: 20px; padding: 22px; }
  .club-profile-hero .club-crest { inline-size: 75px; block-size: 86px; }
  .club-profile-hero h1 { font-size: 1.65rem; }
  .club-profile-hero p { font-size: .78rem; }
  .club-stat-strip { padding-block: 17px; }
  .club-stat-strip dt { font-size: .68rem; }
  .club-stat-strip dd { font-size: 1.25rem; }
  .club-match-grid { grid-template-columns: 1fr; }
  .club-ranking th, .club-ranking td { padding: 12px 10px; }
  .club-rank-name { gap: 7px; }
  .club-rank-name .club-crest { inline-size: 28px; block-size: 33px; }
}
@media (max-width: 460px) {
  .social-page-head { gap: 12px; }
  .social-page-head > div:first-child { flex: 1; min-inline-size: 0; }
  .social-page-head > .social-head-actions { max-inline-size: 106px; }
  .social-page-head > .social-head-actions .btn { font-size: .69rem; line-height: 1.8; padding-inline: 8px; }
  .social-page-head > .social-head-actions .btn .icon { display: none; }
  .rooms-directory .social-page-head .eyebrow { display: none; }
  .rooms-directory .social-page-head p { font-size: .72rem; }
  .rooms-directory .room-game-pick { flex-direction: row; min-block-size: 54px; padding: 8px; }
  .rooms-directory .room-game-pick .game-art, .rooms-directory .room-game-icon { inline-size: 28px; block-size: 28px; }
  .social-page-head h1 { font-size: 1.75rem; }
  .room-game-pick { flex-basis: 113px; }
  .room-summary-title .game-art { inline-size: 35px; block-size: 40px; }
  .room-directory-row { column-gap: 8px; }
  .room-summary-title { gap: 8px; }
  .room-directory-row > .btn .icon { display: none; }
  .club-directory-grid { grid-template-columns: 1fr; }
  .club-card { padding: 22px; }
  .club-card-top { align-items: start; }
  .club-card > p { min-block-size: 0; }
  .club-card h2 { margin-block-start: 10px; }
  .club-profile-hero { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .club-profile-hero > .club-crest { inline-size: 64px; block-size: 73px; }
  .social-create-modal { padding: 20px; }
  .social-form-columns { grid-template-columns: 1fr; }
  .club-result-form { grid-template-columns: 1fr; }
  .club-ranking table { font-size: .76rem; }
  .club-ranking th, .club-ranking td { padding: 10px 7px; }
  .club-rank-name .club-crest { display: none; }
  .club-hero--compact > div:first-child { display: block; }
  .club-hero--compact .btn { margin-block-start: 14px; }
  .club-hero--compact h1 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) { .social-page *, .social-create-modal * { scroll-behavior: auto !important; transition: none !important; } }
@media (forced-colors: active) { .social-tabs .is-active, .room-game-pick.is-selected, .club-badge-picker label:has(:checked) { outline: 2px solid Highlight; } .crest-shell, .crest-symbol { stroke: CanvasText; } }