#playFriends{width:100%;margin:0 0 14px;padding:14px;background:#153f56;color:#fff;-webkit-text-fill-color:#fff;border:1px solid #7cdeff;font-size:16px;font-weight:800;}
#friendsPanel{position:absolute;z-index:20;top:72px;left:24px;width:440px;max-height:calc(100% - 90px);overflow:auto;padding:24px;border:1px solid #d4e3df;background:#fcfffe;border-radius:20px;box-shadow:0 18px 60px #173c3533;color:#243b32;}
#friendsPanel h2{font-size:26px;line-height:1.1;margin:6px 0 14px;letter-spacing:-.7px;}#friendsPanel h3{font-size:17px;margin:18px 0 8px;}#friendsPanel p{font-size:15px;line-height:1.45;}#friendsPanel label{display:block;font-size:14px;font-weight:700;margin:12px 0 6px;}#friendsPanel input,#friendsPanel select{display:block;width:100%;font-size:16px;border:1px solid #c7d8d0;border-radius:8px;min-height:44px;padding:8px;margin-top:5px;background:white;}#friendsPanel button{min-height:44px;margin:7px 4px 0 0;padding:10px 14px;}#friendsPanel .primary-button{background:#176d53;color:white;}#friendsPanel .invite-link{font-size:12px;}#friendError{color:#a43838;}#friendError:empty{display:none;}.room-code,.inline-room-code{letter-spacing:2px;color:#267562;}.room-code{display:block;font-size:18px;margin-top:10px;}.inline-room-code{white-space:nowrap;}.friend-room-status{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 5px;font-size:14px;}.friend-room-status strong{font-size:17px;}.friend-capacity{display:block;width:100%;height:6px;margin:0 0 14px;border:0;border-radius:999px;overflow:hidden;background:#dce9e3;accent-color:#1a7659;}.friend-capacity::-webkit-progress-bar{background:#dce9e3}.friend-capacity::-webkit-progress-value{background:linear-gradient(90deg,#1a7659,#24a87b)}.friend-capacity::-moz-progress-bar{background:linear-gradient(90deg,#1a7659,#24a87b)}.friend-players{max-height:min(34vh,260px);overflow:auto;padding-right:4px;overscroll-behavior:contain;scrollbar-gutter:stable}.friend-player{display:flex;align-items:center;gap:8px;min-height:48px;padding:7px 8px;border-bottom:1px solid #e5ede9;border-radius:8px;font-size:14px;}.friend-player.is-you{background:#e8f5ef}.friend-player.is-offline{opacity:.72}.friend-player>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere;}.friend-player b{font-size:12px;color:#33785f;white-space:nowrap}.friend-player small{display:inline-block;font-size:10px;color:#728079;margin-left:4px;}.player-avatar{font-size:20px;}.friend-player .remove-player{margin:0!important;min-width:44px;padding:8px!important}.friend-settings{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}.friend-primary-actions,.friend-room-actions,.share-actions{display:flex;flex-wrap:wrap;gap:4px}.friend-primary-actions button{flex:1}.friend-start-hint{margin:5px 0 10px}.friend-divider{display:flex;align-items:center;gap:10px;margin:17px 0 4px;color:#698073;font-size:12px;font-weight:800;letter-spacing:1px}.friend-divider::before,.friend-divider::after{content:"";height:1px;flex:1;background:#d9e8e1}#friendsPanel .friend-note{font-size:12px;color:#698073;}#liveBoard{position:absolute;right:10px;bottom:10px;z-index:8;background:#ffffffed;border:1px solid #c6d9d0;border-radius:12px;min-width:220px;max-width:300px;max-height:min(52vh,430px);overflow:auto;padding:10px;font-size:13px;}#liveBoard summary{font-weight:800;letter-spacing:1px;cursor:pointer;min-height:28px;}.friend-standing{display:grid;grid-template-columns:minmax(36px,max-content) minmax(70px,1fr) auto;gap:4px 8px;padding:8px 4px;border-bottom:1px solid #dfebe5;font-size:14px;}.friend-standing small{grid-column:2/4;color:#76877c;font-size:11px;}.friend-standing.is-you{background:#e2f3e9;}.podium{text-align:center;font-size:22px;color:#22644b;margin:18px 0;}.podium strong{display:block;font-size:26px;margin-top:8px;}.your-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:12px;}.your-stats b{display:block;font-size:20px;}.share-actions{display:flex;}#friendCountdown{position:absolute;inset:0;z-index:15;display:grid;place-items:center;font-size:110px;font-weight:900;color:#135b45;background:#e0f0e4bb;border-radius:16px;}#friendConnection{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:90vw;z-index:50;background:#153e32;color:white;padding:12px 18px;border-radius:10px;font-size:14px;pointer-events:none;}
@media(max-width:760px){#friendsPanel{top:98px;right:8px;bottom:8px;left:8px;width:auto;max-height:none;padding:18px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;}#liveBoard{font-size:12px;max-width:240px;min-width:180px;max-height:48vh;right:6px;bottom:6px;padding:8px;}#liveBoard summary{min-height:36px;}.friend-settings{grid-template-columns:1fr}.friend-player{min-height:52px}.friend-primary-actions button,.friend-room-actions button{flex:1 1 130px}}

@media(max-height:500px) and (min-width:600px){#friendsPanel{top:60px;bottom:8px;left:12px;max-height:none;padding:14px 18px}.friend-players{max-height:132px}.friend-player{min-height:44px;padding-block:4px}.friend-settings{grid-template-columns:1fr 1fr}#liveBoard{max-height:68vh}}

@media(prefers-reduced-motion:reduce){.friend-capacity::-webkit-progress-value{background:#1a7659}.friend-capacity::-moz-progress-bar{background:#1a7659}}

@media(forced-colors:active){.friend-capacity{border:1px solid CanvasText}.friend-player.is-you{outline:2px solid Highlight}.friend-player.is-offline{opacity:1}}

.friend-podium{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.friend-podium>div{flex:1;min-width:90px;text-align:center;background:#eaf4ed;border-radius:10px;padding:12px 6px}.friend-podium span,.friend-podium strong,.friend-podium small{display:block}.friend-podium span{font-size:26px}.friend-podium strong{font-size:14px;overflow-wrap:anywhere}.friend-podium small{font-size:12px;margin-top:5px}

#friendsPanel .friend-room-code{display:block;width:100%;margin:0 0 14px;padding:12px;font-size:20px;font-weight:800;letter-spacing:2px;}
#friendsPanel .friends-home{display:block;margin:0 0 14px;}

/* Flag rounds reuse the room standings outside the hidden map surface. */
.app.flag-platform #flagGameView { position: relative; }
.app.flag-platform #liveBoard { position: static; flex-shrink: 0; align-self: center; width: min(760px,100%); min-width: 0; max-width: 760px; max-height: 160px; text-align: left; }
.app.flag-platform #liveBoard summary { min-height: 36px; display: flex; align-items: center; }
.app.flag-platform #flagGameView:has(#liveBoard:not([hidden])) { justify-content: flex-start; overflow-y: auto; }