/* Scoped friends lobby, using the game's existing slate, gold and emerald. */
.pf-entry-actions{display:flex;gap:8px;margin:8px 0}.pf-entry-actions>*{min-width:0;flex:1}.pf-primary,.pf-secondary{border-radius:12px;padding:12px 14px;font-size:12px;font-weight:800;cursor:pointer}.pf-primary{background:#fbbf24;color:#0f172a;border:1px solid #fbbf24}.pf-secondary{background:#0f172a;color:#e2e8f0;border:1px solid #475569}.pf-entry-actions input{width:100%;border:1px solid #475569;border-radius:12px;background:#020617;color:#fff;padding:10px;text-align:center;letter-spacing:2px}.pf-join-view{position:relative;padding:8px 0 16px}.pf-join-view h3{font-size:16px;font-weight:800;margin:10px 0}.pf-join-view label{font-size:12px;color:#94a3b8}
.pf-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}.pf-seat{position:relative;min-width:0;min-height:150px;padding:14px 5px 10px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;border:1px solid #346859;border-radius:16px;background:linear-gradient(150deg,#122c2a,#0b1428);text-align:center;box-shadow:0 6px 18px #0003}.pf-seat strong{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f5f9}.pf-seat small{font-size:10px;color:#94a3b8;line-height:1.5}.pf-seat .avatar-tile{flex:none}.pf-seat .xp-badge{flex:none}.pf-seat-empty{border:1.5px dashed #475569;background:#0b142899;box-shadow:none;animation:pf-wait 3s ease-in-out infinite}.pf-seat-empty:nth-child(3){animation-delay:.5s}.pf-seat-empty:nth-child(4){animation-delay:1s}.pf-empty-avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px dashed #475569;color:#64748b;font-size:26px}.pf-remove{position:absolute;right:0;top:0;width:30px;height:30px;color:#fda4af;font-size:19px;border-radius:10px;background:#431321}.pf-seat-bot{border-color:#665235}.pf-section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;font-weight:800;margin:18px 0 10px}.pf-section-title span+span{color:#94a3b8;font-size:10px;font-weight:500}
.pf-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:#475569 transparent}.pf-carousel>.pf-mode,.pf-mode-wrap{flex:0 0 calc((100% - 20px)/3);min-width:132px;scroll-snap-align:center}.pf-mode-wrap{position:relative;display:flex}.pf-mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:155px;width:100%;border-radius:16px;padding:22px 8px 16px;border:1px solid #334155;background:linear-gradient(155deg,#182338,#0b1428);color:#cbd5e1;text-align:center;transition:border-color .2s,background .2s}.pf-mode strong{font-size:13px;line-height:1.3}.pf-mode small{font-size:10px;color:#94a3b8}.pf-mode>.ic{width:30px;height:30px;color:#94a3b8}.pf-mode[aria-pressed=true]{border:2px solid #34d399;background:linear-gradient(155deg,#143e35,#0b2025);box-shadow:0 4px 16px #10b98118}.pf-mode[aria-pressed=true]>.ic{color:#6ee7b7}.pf-mode[aria-pressed=true] strong{color:#ecfdf5}.pf-cog{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #475569;border-radius:10px;background:#172033;color:#cbd5e1}.pf-cog .ic{width:19px;height:19px}.pf-mode-wrap>.pf-cog{position:absolute;right:5px;top:5px;width:30px;height:30px}.pf-lock{position:absolute;inset:0;border-radius:16px;background:#080f20d9;display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;color:#fbbf24;font-size:12px;font-weight:800;pointer-events:none}.pf-lock .ic{width:32px;height:32px}.pf-standard{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}.pf-standard>[data-friends-mode]{text-align:left;flex:1;padding:8px 12px;border:1px solid #334155;background:#0b1428;border-radius:10px;font-size:12px;font-weight:800;color:#cbd5e1;min-height:40px}.pf-standard small{font-size:10px;font-weight:500;color:#94a3b8;margin-left:8px}.pf-standard>[aria-pressed=true]{border-color:#34d399;color:#6ee7b7}.pf-summary{font-size:11px;color:#94a3b8;line-height:1.6;margin:10px 0}.pf-ready-row{display:flex;gap:8px;margin:10px 0}.pf-ready-row>*{flex:1}.pf-back{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #475569;background:#0b1428;color:#e2e8f0;border-radius:12px;font-size:24px}
.pf-modal{position:fixed;inset:var(--header-h,60px) 0 0;z-index:180;background:#020617d9;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px)}.pf-config-card{width:min(100%,560px);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid #806a35;border-radius:20px;background:#0b1428;box-shadow:0 24px 80px #0008}.pf-config-heading{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pf-config-heading h2{font-size:20px;font-weight:800;color:#f8fafc}.pf-config-card h3,.pf-config-card label{font-size:12px;font-weight:700;color:#cbd5e1}.pf-config-card select{color:#f1f5f9;background:#172033;border:1px solid #475569;border-radius:8px;min-height:38px;padding:6px;width:100%;font-size:12px}.pf-config-card #hostBotControls{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin:16px 0}.pf-config-card #hostTimerControls{margin:18px 0}.pf-speed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.pf-speed button{min-height:44px}.pf-config-card #houseModeSelect,.pf-config-card #houseReadyBtn{display:none}.pf-config-card #houseRulesPanel select{font-size:11px;width:100%;min-width:0}.pf-config-card #houseRulesPanel label{display:flex;flex-direction:column;align-items:stretch;gap:5px}.pf-config-card #houseRulesPanel .grid{gap:10px}.pf-config-card #houseRulesPanel label span{min-height:17px}.pf-config-card #houseRulesPanel .flex>select{min-width:0}.pf-config-card button:disabled,.pf-cog:disabled{opacity:.45;cursor:not-allowed}body:has(#friendsConfigModal:not(.hidden)) #lobbyScreen{overflow:hidden!important}.pf-modal.hidden,.pf-lock.hidden,.pf-ready-row.hidden,.pf-entry-actions.hidden,.pf-join-view.hidden{display:none}
#multiOptions .series-choices{grid-template-columns:repeat(4,minmax(0,1fr))}#multiOptions .series-choice{min-width:0}#multiOptions .series-choice small{white-space:normal}#friendsHub button:focus-visible,.pf-modal button:focus-visible,.pf-modal select:focus-visible{outline:2px solid #fbbf24;outline-offset:3px}
@keyframes pf-wait{0%,100%{border-color:#475569;background:#0b142899}50%{border-color:#7c9caa;background:#142233aa}}
@media(max-width:420px){.pf-seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pf-seat{min-height:138px}.pf-carousel>.pf-mode,.pf-mode-wrap{flex-basis:58%;min-width:145px}.pf-config-card{padding:14px}.pf-modal{padding:10px}.pf-section-title{margin-top:14px}#multiOptions .series-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.pf-seat-empty{animation:none}.pf-mode{transition:none}}body.reduce-motion .pf-seat-empty{animation:none}

#friendsHub [hidden]{display:none!important}


/* v332: landing → mode selection → room. Four seats stay on one row. */
#friendsHub.hidden,#friendsHub [hidden]{display:none!important}
.pf-seats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0}
.pf-seat{min-height:112px;padding:10px 4px 7px;gap:4px;border-radius:12px}
.pf-seat .avatar-tile,.pf-empty-avatar{width:38px!important;height:38px!important}
.pf-seat small{font-size:9px;line-height:1.25}.pf-seat strong{font-size:11px}
.pf-carousel{padding-inline:calc((100% - min(68%,220px))/2);scroll-padding-inline:calc((100% - min(68%,220px))/2)}
.pf-carousel>.pf-mode{flex:0 0 min(68%,220px);min-width:0;min-height:155px}
.pf-mode-number{position:absolute;left:12px;top:9px;font-size:12px;font-weight:800;color:#94a3b8}
.pf-carousel-controls{display:flex;justify-content:center;gap:8px;margin:8px 0 12px}
.pf-carousel-controls button{width:42px;height:42px;border:1px solid #475569;border-radius:12px;background:#172033;font-size:24px;color:#e2e8f0}
#friendsConfirmMode{width:100%}#friendsHub{animation:pf-enter .2s ease-out}
@keyframes pf-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:420px){.pf-seats{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.pf-seat{min-height:106px;padding:8px 3px}.pf-seat strong{font-size:10px}.pf-seat .xp-badge{font-size:9px;padding:2px 4px}.pf-seat small{font-size:8px}.pf-carousel>.pf-mode{flex-basis:min(68%,220px);min-width:0}}
@media(prefers-reduced-motion:reduce){#friendsHub{animation:none}.pf-carousel{scroll-behavior:auto}}body.reduce-motion #friendsHub{animation:none}

/* v334: shared Home carousel cards/physics, compact friends-only bounds. */
#friendsModeCarousel{position:relative;height:210px;perspective:900px;overflow:hidden;cursor:grab;padding-bottom:22px;box-sizing:content-box;touch-action:pan-y;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
#friendsModeCarousel .mc-card .mc-ic{flex:none}
#friendsCarouselControls{margin:2px 0 8px}
#friendsCarouselControls [data-friends-step=prev]{margin-right:22px}
#friendsConfirmMode{display:none!important}
#friendsSettingsTrigger{display:flex;align-items:center;justify-content:center;gap:8px}
#friendsSettingsTrigger .ic{width:18px;height:18px}
.pf-back{width:40px;height:40px;border-color:#334155;color:#e2e8f0;cursor:pointer}
.pf-back svg{width:20px;height:20px}
.pf-back:hover{background:#1e293b;border-color:#fbbf24}
.pf-tabs,.house-presets,.pf-pages{display:grid;gap:6px;margin:8px 0}
.pf-tabs{grid-template-columns:1fr 1fr}.house-presets{grid-template-columns:repeat(4,minmax(0,1fr))}.pf-pages{grid-template-columns:1fr 1fr 1.5fr}
:is(.pf-tabs,.house-presets,.pf-pages) button{min-width:0;min-height:38px;border:1px solid #334155;border-radius:9px;background:#172033;color:#cbd5e1;font-size:11px;font-weight:700;padding:6px;overflow-wrap:anywhere}
:is(.pf-tabs,.house-presets,.pf-pages) button[aria-pressed=true]{border-color:#fbbf24;color:#fde68a;background:#382a14}
.pf-save{display:block;margin:6px 0 10px auto;color:#fde68a;font-size:11px;min-height:32px;padding:4px 8px;border:1px solid #806a35;border-radius:8px}
.pf-config-card{width:min(100%,600px);padding:14px;overflow:visible}
.pf-config-heading{margin-bottom:6px}.pf-config-heading h2{font-size:18px}
.pf-config-card #hostBotControls{margin:10px 0}.pf-config-card #hostTimerControls{margin:10px 0}
.pf-config-card #houseRulesPanel .grid{gap:8px}
.pf-config-card [hidden],.pf-tabs[hidden],.house-powers>label[hidden]{display:none!important}
#houseNameModal{z-index:185}.pf-name-card{width:min(100%,420px);padding:18px;border:1px solid #806a35;border-radius:18px;background:#0b1428;box-shadow:0 24px 80px #0008}
.pf-name-card label{display:block;margin:12px 0 5px;font-size:12px;font-weight:700;color:#cbd5e1}
.pf-name-card :is(input,select){width:100%;min-height:40px;border:1px solid #475569;border-radius:8px;background:#172033;color:#fff;padding:8px;font-size:14px}
#houseNameError{font-size:12px;color:#fbbf24;margin-top:8px}
#lobbyScreen[data-mode-page=friends]{padding:8px 12px}
#lobbyScreen[data-mode-page=friends]>.bg-slate-900{margin-top:calc(clamp(12px, 5vh, 48px) * var(--pf-panel-spacing-scale, 1));margin-bottom:auto;padding:14px 16px;zoom:1}
#lobbyScreen[data-mode-page=friends] #modePageHead{padding-bottom:8px;gap:10px}
#lobbyScreen[data-mode-page=friends] #homeNameBlock{margin:6px 0}
#lobbyScreen[data-mode-page=friends] .pf-seats{margin:8px 0}
#lobbyScreen[data-mode-page=friends] .pf-seat{min-height:108px;padding:8px 4px;gap:4px}
#lobbyScreen[data-mode-page=friends] .pf-section-title{margin:8px 0 2px}
#lobbyScreen[data-mode-page=friends] .pf-summary{margin:4px 0}
@media(min-width:700px){#friendsModeCarousel{height:220px}}
@media(max-height:720px){
 #lobbyScreen[data-mode-page=friends]>.bg-slate-900{padding:10px 14px 2px}
 #lobbyScreen[data-mode-page=friends] #modePageSub{display:none}
 #lobbyScreen[data-mode-page=friends] .pf-seat{min-height:88px;gap:2px}
 #lobbyScreen[data-mode-page=friends] .pf-seat .avatar-tile{width:36px!important;height:36px!important}
 #lobbyScreen[data-mode-page=friends] .pf-empty-avatar{width:36px;height:36px}
 #lobbyScreen[data-mode-page=friends] .pf-primary,#lobbyScreen[data-mode-page=friends] .pf-secondary{padding:9px}
 .pf-modal{padding:8px}.pf-config-card{padding:10px}.pf-config-card .pf-summary{margin:4px 0;font-size:10px}
 .pf-config-card #houseRulesPanel label{gap:2px}.pf-config-card #houseRulesPanel .grid{gap:5px}
 .pf-config-card #houseRulesPanel select{min-height:32px;padding:4px}.pf-config-heading h2{font-size:16px}
 .pf-tabs,.house-presets,.pf-pages{margin:5px 0;gap:4px}.pf-save{margin:4px 0 5px auto}
}
@media(prefers-reduced-motion:reduce){#friendsModeCarousel .mc-card{transition:none}}
.pf-config-card{position:relative}
#friendsConfigTitle{padding-right:24px}
#friendsConfigModal #houseRulesPanel>.flex>div>span,#friendsConfigModal #houseRulesPanel>.flex>div>div{display:none}
#friendsConfigModal #houseInfoBtn{position:absolute;right:14px;top:24px;margin:0}
.house-presets button{font-size:10px;padding:5px 3px}
#lobbyScreen[data-mode-page=friends]:has(.pf-in-room) #homeNameBlock,#multiOptions.pf-in-room>.mode-intro-line{display:none}
@media(max-height:720px){#friendsModeCarousel{height:198px;padding-bottom:0}#lobbyScreen[data-mode-page=friends] #modePageTitle{font-size:18px}}
#lobbyScreen[data-mode-page=friends]>.bg-slate-900>.text-center{display:none}
#multiOptions .room-actions{display:grid;grid-template-columns:repeat(3,auto);gap:4px;margin-top:4px}
#multiOptions .room-action{font-size:9px;padding:0 6px;gap:3px;letter-spacing:0}
#multiLobbyRoom>.flex.justify-between{font-size:10px;gap:4px}
#multiLobbyRoom #playerCounter{white-space:nowrap}
#multiLobbyRoom #leaveRoomBtn{flex:0 0 86px}
#lobbyScreen[data-mode-page=friends] #modePageHead{gap:8px}
#multiLobbyRoom>.flex.justify-between>span:first-child>*{font-size:9px;white-space:nowrap}
@media(max-height:720px){
 #lobbyScreen[data-mode-page=friends] #modePageTitle{font-size:16px}
 #lobbyScreen[data-mode-page=friends] #modePageIcon{width:36px;height:36px}
 #multiOptions.pf-in-room{margin-top:2px;padding-top:0}
 #multiOptions.pf-in-room #friendsHub{margin-top:2px}
 #lobbyScreen[data-mode-page=friends] .pf-seat small{line-height:1.2}
}
.house-presets button{height:44px;line-height:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#friendsConfigModal #houseInfoText{position:absolute;inset:66px 12px auto;z-index:3;margin:0;padding:14px;box-shadow:0 12px 24px #0008}

/* Compact shared series settings, including per-length level requirements. */
#friendsConfigModal .series-choices{gap:5px}
#friendsConfigModal .series-choice{min-width:0;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px}
#friendsConfigModal .series-note{margin:8px 0 0;font-size:11px;line-height:1.4}
@media(max-height:600px){#lobbyScreen[data-mode-page=friends] .pf-section-title{margin-top:4px}#lobbyScreen[data-mode-page=friends] .pf-summary{font-size:10px}#friendsConfigModal .series-choice{padding:6px 3px;gap:3px}}

/* Match the shared mode-page top gap, including its tablet/desktop zoom. */
@media(min-width:700px) and (min-height:760px){#lobbyScreen[data-mode-page=friends]{--pf-panel-spacing-scale:1.25}}
@media(min-width:1100px) and (min-height:900px){#lobbyScreen[data-mode-page=friends]{--pf-panel-spacing-scale:1.4}}
.pf-team{font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 9px;border-radius:999px;border:1px solid}.pf-team-0{color:#7dd3fc;background:#0c2a40;border-color:#0369a1}.pf-team-1{color:#fda4af;background:#3b1220;border-color:#be123c}.pf-team:not(:disabled){cursor:pointer}