/* Rei da Praça social sheet. Contrast, touch targets and lists are scoped here. */
#socialModal { padding:8px; box-sizing:border-box; background:#03121ad9; backdrop-filter:blur(6px); z-index:110; }
#socialModal [hidden] { display:none!important; }
.bando-sheet { width:min(100%,470px); max-height:calc(100% - 8px); height:94%; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; border:1px solid #edcf8a; border-radius:20px; color:#eff7f5; background:linear-gradient(155deg,#174451,#0b2635 50%,#091d2c); box-shadow:0 6px 0 #04121d,0 18px 45px #0008; font-family:system-ui,sans-serif; text-shadow:none; text-align:left; }
.bando-header { position:relative; display:grid; grid-template-columns:50px minmax(0,1fr) 36px; gap:9px; align-items:center; padding:14px 12px 12px; background:linear-gradient(110deg,#245c63,#123b4f); border-bottom:1px solid #a4d2c52b; }
.bando-avatar { flex:none; display:block; width:43px; height:48px; background-image:image-set(url('assets/image-quality/variants/opombo_tower_moods-0fb29c9a8bbe-512.webp') 1x,url('assets/image-quality/variants/opombo_tower_moods-0fb29c9a8bbe-1024.webp') 2x); background-size:400% 400%; background-position:0 0; background-repeat:no-repeat; filter:drop-shadow(0 2px 1px #071620); }
.bando-avatar.happy { background-position:33.333333% 0; }
.bando-header > .bando-avatar { width:50px; height:55px; transform:rotate(-4deg); }
.bando-eyebrow { display:block; font-size:8px; font-weight:800; letter-spacing:.09em; color:#f6d38b; }
.bando-header h2 { margin:3px 0 4px; font-size:clamp(18px,5cqw,25px); line-height:1.04; font-weight:1000; color:#fff3d2; letter-spacing:-.025em; -webkit-text-stroke:.6px #11232a; paint-order:stroke fill; text-shadow:0 2px #102730; }
.bando-header p { margin:0; font-size:10px; line-height:1.25; color:#d5e8e7; }
.bando-close { display:grid; place-items:center; width:36px; height:38px; margin:0; padding:0; border:1px solid #ffe9ac; border-radius:10px; background:linear-gradient(#ffe48d,#e6ae45); color:#2c270f; font:500 29px/1 system-ui; cursor:pointer; box-shadow:0 3px 0 #8b631e; }
.bando-tabs { flex:none; display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; padding:11px 10px 0; }
.bando-tabs button { position:relative; display:flex; justify-content:center; align-items:center; gap:5px; min-width:0; min-height:43px; padding:7px 3px; border:1px solid #628c9a; border-radius:10px; color:#d8e9ec; background:#133745; font:800 12px/1.2 system-ui; cursor:pointer; }
.bando-tabs button[aria-selected=true] { background:linear-gradient(#ffdf88,#e5b456); color:#2b2716; border-color:#ffeeb0; box-shadow:0 2px 0 #725b26; }
.bando-tabs button>span { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 3px; border-radius:6px; background:#082732; color:#eaf6f5; font-size:10px; }
.bando-tabs button>i { position:absolute; right:0; top:-5px; display:grid; place-items:center; width:18px; height:18px; border:1px solid #ffc6ae; border-radius:50%; font:850 10px/1 system-ui; background:#bd593c; color:white; }
.bando-search { flex:none; padding:12px 11px 10px; }
.bando-search label { display:block; margin-bottom:5px; color:#a9c8cb; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.bando-search input { display:block; box-sizing:border-box; width:100%; min-height:39px; padding:8px 11px; border:1px solid #608f9b; border-radius:9px; background:#082533; color:#f1f7f8; font:400 16px/1.2 system-ui; }
.bando-search input::placeholder { color:#aac7cd; opacity:1; }
.bando-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 11px 12px; scrollbar-width:thin; scrollbar-color:#e4c67c #113240; }
.bando-ranking-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.bando-ranking-tabs button { min-height:36px; border:1px solid #688e9a; border-radius:9px; color:#c7dde1; background:#153745; font:850 9px/1.2 system-ui; cursor:pointer; }
.bando-ranking-tabs button[aria-pressed=true] { color:#fff0b9; background:#365c60; border-color:#cbb676; box-shadow:inset 0 -3px #c5ab60; }
#socialModal #rankingRule { margin:9px 2px 10px; color:#c9dce0; font:500 11px/1.35 system-ui; }
.bando-your-rank { display:flex; align-items:center; gap:9px; min-height:62px; padding:7px 10px; border:1px solid #c5af67; border-radius:12px; background:linear-gradient(115deg,#38564d,#203d46); box-shadow:inset 0 1px #ffebaf30; }
.bando-your-rank .bando-avatar { width:34px; height:40px; }
.bando-your-rank > div:not(.bando-score) { flex:1; min-width:0; }
.bando-your-rank > div > span { display:block; color:#ead297; font:800 8px/1.1 system-ui; letter-spacing:.08em; }
.bando-your-rank > div > strong { display:block; margin-top:4px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bando-your-rank > p { margin:0; font:500 11px/1.4 system-ui; color:#d6e5de; }
.bando-list-heading { margin:15px 1px 8px; font:850 10px/1.2 system-ui; letter-spacing:.07em; color:#9fcbd4; }
.bando-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:5px 0 8px; }
.bando-panel-heading h3 { margin:0; font:850 12px/1.2 system-ui; color:#d2edf0; letter-spacing:.05em; }
.bando-live-dot { color:#a1ebbd; font:850 8px/1.2 system-ui; white-space:nowrap; }
.bando-live-dot::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#92e8ad; box-shadow:0 0 8px #87efb190; }
.bando-hint { margin:0 0 12px; color:#b8d4da; font:500 11px/1.4 system-ui; }
#socialModal .bando-list { margin:0; padding:0; list-style:none; line-height:normal; font-size:13px; }
.bando-player { position:relative; display:grid; grid-template-columns:25px 39px minmax(0,1fr) 54px; gap:6px; align-items:center; margin:7px 0; padding:10px 7px 8px; box-sizing:border-box; border:1px solid #56879365; border-radius:12px; background:linear-gradient(110deg,#214451,#143545); color:#eff7f7; }
.bando-player.is-you { border-color:#c5b87b; background:linear-gradient(110deg,#3b544d,#243f47); }
.bando-player.is-friend { border-left:3px solid #92c9aa; }
.bando-player > .bando-avatar { width:39px; height:44px; }
.bando-place { align-self:start; padding-top:5px; color:#a5c5cd; font:850 10px/1 system-ui; text-align:center; }
.bando-place:empty { display:none; }
.bando-player:has(>.bando-place:empty) { grid-template-columns:39px minmax(0,1fr) 54px; }
.bando-place.podium-1 { color:#ffe494; font-size:14px; }.bando-place.podium-2 { color:#deecf3; font-size:13px; }.bando-place.podium-3 { color:#f4c39b; font-size:12px; }
.bando-identity { min-width:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:4px; row-gap:4px; }
.bando-name { flex-basis:100%; color:#fff9eb; font:850 13px/1.15 system-ui; overflow-wrap:anywhere; }
.bando-meta { flex-basis:100%; font:500 10px/1.2 system-ui; color:#c8dfe1; }
.bando-badge { display:inline-flex; justify-content:center; align-items:center; min-height:14px; box-sizing:border-box; padding:2px 4px; border-radius:4px; font:850 7px/1.15 system-ui; letter-spacing:.04em; white-space:nowrap; color:#cbdfe4; background:#234b5a; }
.bando-badge.online { color:#aaf1bd; background:#163f36; }.bando-badge.online::before { content:''; height:4px; width:4px; margin-right:3px; border-radius:50%; background:#a0e7b5; }
.bando-badge.offline { color:#ccdbe0; background:#25404d; }.bando-badge.busy { color:#ffe0a2; background:#604629; }
.bando-badge.you { color:#253c39; background:#f1d28d; }.bando-badge.friend { color:#abe1bd; background:#1d473b; min-height:27px; padding:4px 7px; }
.bando-badge.pending { color:#ccdde7; font-size:7px; padding:4px; }
.bando-score { flex:none; min-width:47px; display:grid; grid-template-columns:17px auto; align-items:center; justify-content:end; gap:2px 3px; text-align:right; color:#ffe199; }
.bando-score img { width:17px; height:20px; object-fit:contain; }
.bando-score strong { color:#fff0b5; font:950 16px/1.1 system-ui; letter-spacing:-.02em; }
.bando-score small { grid-column:1/-1; color:#d1c28e; font:750 7px/1.1 system-ui; letter-spacing:.08em; }
.bando-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:flex-end; margin-top:3px; padding-top:7px; border-top:1px solid #98bcb822; }
.bando-wins { margin-right:auto; color:#b3cdd1; font:550 9px/1.2 system-ui; }
.bando-action { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-height:34px; padding:6px 9px; border:1px solid #71a4ae; border-radius:7px; background:#245364; color:#eef7f5; font:800 10px/1.1 system-ui; white-space:nowrap; cursor:pointer; box-shadow:0 2px 0 #082631; }
.bando-action.gold { color:#30280e; background:linear-gradient(#ffe08b,#dcb563); border-color:#f2d996; box-shadow:0 2px 0 #7b612f; }
.bando-action.quiet { color:#d7e7e9; background:#193d4c; border-color:#648b95; }
.bando-action.remove { width:27px; padding:0; min-height:30px; border-color:#866868; background:#3d3d46; color:#eacaca; font-size:19px; }
.bando-action:disabled { opacity:.55; cursor:default; box-shadow:none; }
.bando-invites { margin:3px 0 12px; }
.bando-invite { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:10px; margin:5px 0; border:1px solid #c8ae73; border-radius:10px; background:#3c544d; color:#fff3d0; font:750 12px/1.35 system-ui; }
.bando-invite > span { width:100%; }
.bando-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:165px; padding:20px 10px; box-sizing:border-box; text-align:center; color:#d9edee; }
.bando-empty .bando-avatar { margin-bottom:9px; width:55px; height:62px; }
.bando-empty > strong { font:900 16px/1.2 system-ui; color:#ffedb9; }.bando-empty > p { max-width:270px; margin:8px 0 0; font:450 12px/1.5 system-ui; color:#b7d1d7; }
#socialModal .bando-notice { flex:none; margin:0; padding:0 12px; min-height:0; color:#ffdf9b; font:700 11px/1.4 system-ui; }
#socialModal .bando-notice:not(:empty) { padding:8px 12px; border-top:1px solid #abc1bd20; background:#183b43; }
.bando-footer { flex:none; padding:9px 12px; border-top:1px solid #668c9738; color:#99bac4; font:500 9px/1.3 system-ui; text-align:center; }
#socialModal button:focus-visible,#socialModal input:focus-visible { outline:3px solid #acecff; outline-offset:2px; }
@container (min-width:390px) { .bando-player { grid-template-columns:30px 43px minmax(0,1fr) 64px; gap:8px; padding:11px 10px; }.bando-name { font-size:15px; }.bando-score strong { font-size:19px; }.bando-meta { font-size:11px; }.bando-action { font-size:11px; min-height:36px; }.bando-tabs button { font-size:14px; }.bando-header p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .bando-sheet * { scroll-behavior:auto!important; } }