*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--fl-color-bg);min-height:100dvh;color:var(--fl-color-ink);font:var(--text-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}::selection{background:var(--fl-color-success);color:var(--fl-color-success-ink)}img{max-width:100%}h1,h2,h3,p{margin:0}.lobby{--gutter:clamp(16px, 2.25vw, 32px);--panel-w:clamp(256px, 18.4vw, 320px);--panel-gap:var(--fl-space-3);grid-template-columns:minmax(0, 1fr) var(--panel-w);column-gap:var(--panel-gap);height:100dvh;padding:max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));display:grid}.lobby[data-panel=closed]{grid-template-columns:minmax(0,1fr) 0;column-gap:0}.lobby-main{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid}.lobby-header{align-items:center;gap:var(--fl-space-4);min-height:var(--fl-control-lg);grid-template-columns:auto minmax(0,1fr) auto;margin-bottom:clamp(24px,3vw,44px);display:grid}.lobby-logo{border-radius:var(--fl-radius-sm);width:max-content;color:var(--fl-color-ink);display:block}.lobby-logo svg{width:auto;height:44px;display:block}.lobby-tools{align-items:center;gap:var(--fl-space-2);grid-column:3;grid-auto-flow:column;display:grid}.lang-select .fl-dropdown-trigger{font:var(--text-caption);font-weight:600}.party-toggle{width:var(--fl-control-lg);min-height:var(--fl-control-lg);border-radius:var(--fl-radius-md);position:relative}.party-toggle>i{font-size:24px}.party-toggle-badge{top:calc(var(--fl-space-1) * -1);right:calc(var(--fl-space-1) * -1);min-width:16px;height:16px;padding:0 var(--fl-space-1);background:var(--fl-color-success);color:var(--fl-color-success-ink);font:var(--text-caption);border-radius:8px;place-items:center;font-size:10px;font-weight:700;line-height:16px;display:grid;position:absolute}.party-neck{z-index:1;pointer-events:none;width:100vw;height:100dvh;position:fixed;inset:0;overflow:visible}.party-neck g{fill:var(--fl-color-surface)}.party-neck[data-visible=false]{display:none}.party-toggle,.lobby-panel{z-index:2}.color-mode-toggle{width:var(--fl-control-lg);min-height:var(--fl-control-lg);border-radius:var(--fl-radius-md);position:relative}.color-mode-icon{opacity:0;transition:opacity var(--fl-duration-enter) ease-out;grid-area:1/1;font-size:20px}.color-mode-toggle{grid-auto-flow:row;display:grid}:root:not([data-color-mode=light]) .color-mode-icon[data-for=dark],:root[data-color-mode=light] .color-mode-icon[data-for=light]{opacity:1}.lobby-scroll{overscroll-behavior:contain;min-height:0;padding-right:var(--gutter);margin-left:calc(var(--gutter) * -1);padding-left:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--fl-color-scroll-thumb) var(--fl-color-scroll-track);scrollbar-gutter:stable;overflow-y:auto}.banner{margin-bottom:var(--fl-space-6);container:banner/inline-size}.banner-inner{align-items:center;column-gap:var(--fl-space-3);min-height:var(--fl-control-xl);padding:var(--fl-space-3) var(--fl-space-4);border-radius:var(--fl-radius-lg);background:var(--fl-color-banner);grid-template-columns:auto auto minmax(0,1fr) auto;display:grid;position:relative}.banner-icon{color:var(--fl-color-brand);font-size:20px}.banner-title{font:var(--text-label);white-space:nowrap}.banner-copy{font:var(--text-note);color:var(--fl-color-subtle);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.banner-action{align-items:center;gap:var(--fl-space-2);min-height:var(--fl-control-md);padding:0 var(--fl-space-2);border-radius:var(--fl-radius-sm);color:var(--fl-color-success);font:var(--text-caption);cursor:pointer;transition:background-color var(--fl-duration-control) ease-out;background:0 0;border:0;grid-auto-flow:column;font-weight:700;display:inline-grid}.banner-action:hover{background-color:color-mix(in srgb, var(--fl-color-success) 12%, transparent)}.banner-action>i{font-size:20px}@container banner (max-width:640px){.banner-inner{row-gap:var(--fl-space-1);grid-template-columns:auto minmax(0,1fr) auto}.banner-copy{white-space:normal;grid-area:2/2/auto/-1}.banner-action{grid-area:1/3}.banner-title{grid-area:1/2}}.lobby-panel{min-width:0;min-height:0;overflow:hidden}.lobby[data-panel=closed]:not([data-app=true]) .lobby-panel{visibility:hidden}.lobby-panel-host{height:100%}.lobby-panel-host>.flp{min-width:240px}.app-me,.app-tabbar{display:none}@media (max-width:767px),(orientation:landscape) and (max-height:520px){.lobby{--gutter:var(--fl-space-4);--tabbar-h:68px;--view-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom));grid-template:"head""view"minmax(0,1fr)/minmax(0,1fr);column-gap:0;height:100dvh;padding:0;display:grid;overflow:hidden}.lobby-main{display:contents}.lobby-header{min-height:0;padding:max(var(--fl-space-3), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) var(--fl-space-3) max(var(--gutter), env(safe-area-inset-left));grid-area:head;margin:0}.lobby-logo svg{height:32px}.lobby-tools{display:none}.lobby-scroll,.lobby-panel,.app-me{grid-area:view;min-height:0}.lobby:not([data-tab=games]) .lobby-scroll,.lobby:not([data-tab=party]) .lobby-panel,.lobby:not([data-tab=me]) .app-me{display:none}.lobby-scroll{padding:var(--fl-space-1) max(var(--gutter), env(safe-area-inset-right)) calc(var(--view-end) + var(--fl-space-6)) max(var(--gutter), env(safe-area-inset-left));scrollbar-gutter:auto;scrollbar-width:none;margin:0;overflow-y:auto}.lobby-scroll::-webkit-scrollbar{display:none}.banner{margin-bottom:var(--fl-space-5)}.lobby-panel{width:auto;padding:var(--fl-space-1) max(var(--gutter), env(safe-area-inset-right)) calc(var(--view-end) + var(--fl-space-4)) max(var(--gutter), env(safe-area-inset-left));visibility:visible;position:static;overflow:hidden}.lobby-panel-host>.flp{min-width:0}.lobby-panel .flp-profile{display:none}.lobby-panel .flp{padding-bottom:var(--fl-space-3)}.party-neck,.party-toggle{display:none}.app-me{align-content:start;gap:var(--fl-space-6);padding:var(--fl-space-1) max(var(--gutter), env(safe-area-inset-right)) calc(var(--view-end) + var(--fl-space-6)) max(var(--gutter), env(safe-area-inset-left));display:grid;overflow-y:auto}.me-profile{align-items:center;gap:var(--fl-space-4);width:100%;padding:var(--fl-space-4);border-radius:var(--fl-radius-lg);background:var(--fl-color-surface);color:var(--fl-color-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter var(--fl-duration-control) ease-out;border:0;grid-template-columns:64px minmax(0,1fr) auto;display:grid}.me-profile:active{filter:var(--fl-active-filter)}.me-profile-avatar{border-radius:var(--fl-radius-md);object-fit:cover;width:64px;height:64px;display:block}.me-profile-text{gap:var(--fl-space-1);min-width:0;display:grid}.me-profile-name{font:var(--text-h2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.me-profile-hint{font:var(--text-note);color:var(--fl-color-subtle)}.me-profile-edit{color:var(--fl-color-muted);font-size:20px}.me-list{border-radius:var(--fl-radius-lg);background:var(--fl-color-surface);display:grid}.me-row{align-items:center;gap:var(--fl-space-3);min-height:64px;padding:var(--fl-space-2) var(--fl-space-4);grid-template-columns:20px minmax(0,1fr) auto;display:grid}.me-row+.me-row{position:relative}.me-row+.me-row:before{content:"";top:0;right:0;left:calc(var(--fl-space-4) + 20px + var(--fl-space-3));border-top:1px solid var(--fl-color-line);position:absolute}.me-row-icon{color:var(--fl-color-muted);font-size:20px}.me-row-label{font:var(--text-body)}.mode-segment{padding:var(--fl-space-1);border-radius:var(--fl-radius-md);background:var(--fl-color-sink);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.mode-segment-option{justify-content:center;align-items:center;gap:var(--fl-space-1);min-height:40px;padding:0 var(--fl-space-3);border-radius:var(--fl-radius-sm);color:var(--fl-color-muted);font:var(--text-caption);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--fl-duration-control) ease-out, color var(--fl-duration-control) ease-out;background:0 0;border:0;grid-auto-flow:column;font-weight:600;display:inline-grid}.mode-segment-option>i{font-size:16px}.mode-segment-option[aria-checked=true]{background:var(--fl-color-surface-raised);color:var(--fl-color-ink);box-shadow:0 1px 3px #00000029}.app-tabbar{z-index:10;padding:var(--fl-space-1) max(var(--fl-space-2), env(safe-area-inset-right)) max(var(--fl-space-2), env(safe-area-inset-bottom)) max(var(--fl-space-2), env(safe-area-inset-left));border-top:1px solid var(--fl-color-line);background:color-mix(in srgb, var(--fl-color-surface) 88%, transparent);-webkit-backdrop-filter:blur(20px)saturate(1.6);backdrop-filter:blur(20px)saturate(1.6);grid-template-columns:repeat(3,minmax(0,160px));justify-content:center;display:grid;position:fixed;bottom:0;left:0;right:0}.app-tab{align-content:center;justify-items:center;gap:var(--fl-space-1);border-radius:var(--fl-radius-md);min-height:56px;color:var(--fl-color-muted);font:var(--text-caption);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--fl-duration-control) ease-out;background:0 0;border:0;padding:0;font-weight:600;display:grid}.app-tab-icon{border-radius:var(--fl-radius-pill);width:56px;height:32px;transition:background-color var(--fl-duration-control) ease-out;place-items:center;display:grid;position:relative}.app-tab-icon>i{font-size:24px}.app-tab-avatar{border-radius:var(--fl-radius-xs);object-fit:cover;width:24px;height:24px}.app-tab[aria-current=page]{color:var(--fl-color-ink)}.app-tab[aria-current=page] .app-tab-icon{background:var(--fl-color-surface-alt)}.app-tab:active .app-tab-icon{filter:var(--fl-active-filter)}.app-tab-badge{top:calc(var(--fl-space-1) * -1);right:var(--fl-space-2);min-width:16px;height:16px;padding:0 var(--fl-space-1);background:var(--fl-color-success);color:var(--fl-color-success-ink);font:var(--text-caption);border-radius:8px;place-items:center;font-size:10px;font-weight:700;line-height:16px;display:grid;position:absolute}.lobby .devpanel{top:max(var(--fl-space-2), env(safe-area-inset-top));right:max(var(--gutter), env(safe-area-inset-right));justify-items:end;bottom:auto;left:auto}.lobby .devpanel-toggle{width:var(--fl-control-lg);min-height:var(--fl-control-lg);order:0}}@media (orientation:landscape) and (max-height:520px){.lobby{--tabbar-h:56px}.lobby-header{padding-top:max(var(--fl-space-2), env(safe-area-inset-top));padding-bottom:var(--fl-space-2)}.app-tab{grid-auto-flow:column;justify-content:center;align-items:center;gap:0;min-height:44px}.app-tab-icon{width:40px}}.devpanel{z-index:60;left:max(var(--fl-space-4), env(safe-area-inset-left));bottom:max(var(--fl-space-4), env(safe-area-inset-bottom));justify-items:start;gap:var(--fl-space-2);display:grid;position:fixed}.devpanel-toggle{width:var(--fl-space-10);min-height:var(--fl-space-10);border-radius:var(--fl-radius-lg);box-shadow:var(--fl-shadow-overlay);order:2}.devpanel-toggle>i{color:var(--fl-color-warning);font-size:20px}.devpanel-body{gap:var(--fl-space-3);width:min(360px, calc(100vw - var(--fl-space-8)));max-height:min(640px,100dvh - 96px);padding:var(--fl-space-4);box-shadow:var(--fl-shadow-overlay);animation:fl-dialog-in var(--fl-duration-enter) var(--fl-ease-out);display:grid;overflow-y:auto}.devpanel-body[hidden]{display:none}.devpanel-head{gap:var(--fl-space-1);display:grid}.devpanel-head strong{font:var(--text-label)}.devpanel-head span,.devpanel-note{font:var(--text-caption);color:var(--fl-color-muted);margin:0}.devpanel-group{gap:var(--fl-space-2);border:0;margin:0;padding:0;display:grid}.devpanel-group legend{margin-bottom:var(--fl-space-2);font:var(--text-caption);color:var(--fl-color-muted)}.devpanel-grid{gap:var(--fl-space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.devpanel-grid .fl-button{min-height:var(--fl-control-md);padding:0 var(--fl-space-3);font:var(--text-note);text-align:left;justify-content:start}.devpanel-grid .fl-button>i{font-size:16px}.devpanel-grid--tight{grid-template-columns:repeat(3,minmax(0,1fr))}.devpanel-code{font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lobby{--party-slow:1}.lobby:not([data-app=true]){transition:grid-template-columns calc(.36s * var(--party-slow)) var(--fl-ease-out), column-gap calc(.36s * var(--party-slow)) var(--fl-ease-out)}.lobby[data-panel=closed]:not([data-app=true]) .lobby-panel{transition:visibility 0s linear calc(.36s * var(--party-slow))}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel{animation:party-reveal calc(.36s * var(--party-slow)) var(--fl-ease-out) both}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel .flp>*{animation:party-content-in calc(.24s * var(--party-slow)) var(--fl-ease-out) both}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel .flp>:first-child{animation-delay:calc(.16s * var(--party-slow))}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel .flp>:nth-child(2){animation-delay:calc(.2s * var(--party-slow))}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel .flp>:nth-child(3){animation-delay:calc(.24s * var(--party-slow))}.lobby[data-phase=opening]:not([data-app=true]) .lobby-panel .flp>:nth-child(n+4){animation-delay:calc(.28s * var(--party-slow))}.lobby[data-phase=closing]:not([data-app=true]) .lobby-panel{animation:party-conceal calc(.36s * var(--party-slow)) var(--fl-ease-in) both}.lobby[data-phase=closing]:not([data-app=true]) .lobby-panel .flp>*{animation:party-content-out calc(.14s * var(--party-slow)) ease-in both}@keyframes party-reveal{0%{clip-path:inset(0 100% 100% 0 round var(--fl-radius-lg))}to{clip-path:inset(0 0 0 0 round var(--fl-radius-lg))}}@keyframes party-conceal{0%{clip-path:inset(0 0 0 0 round var(--fl-radius-lg))}to{clip-path:inset(0 100% 100% 0 round var(--fl-radius-lg))}}@keyframes party-content-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes party-content-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){.lobby{transition:none!important}.lobby .lobby-panel,.lobby .lobby-panel .flp>*{transition:none!important;animation:none!important}}
