/* ══════════════════════════════════════════════════════════
   Fluent UI — 1:1 web rebuild of the in-game menu.

   Every value below is taken from the library the hubs load
   (dawid-scripts/Fluent) and from each hub's window config:
     Theme "Dark", Acrylic off, Size 820x580, TabWidth 175.

   Dark theme    Accent rgb(96,205,255)   Text rgb(240,240,240)
                 SubText rgb(170,170,170) Tab/Element rgb(120,120,120)
                 ElementTransparency .87  HoverChange .07
                 ElementBorder rgb(35,35,35)  InElementBorder rgb(90,90,90)
                 TitleBarLine rgb(75,75,75)   AcrylicMain rgb(60,60,60)
   The hubs then run a rainbow loop over every accent-coloured
   element: Color3.fromHSV((os.clock() % 5) / 5, 1, 1)  -> menu.js
   ══════════════════════════════════════════════════════════ */

.fl-wrap{
  position:relative;
  width:100%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  /* stand-in for the blurred game behind the window */
  --fl-accent:#60cdff;
  --fl-scale:1;
  /* overridden per hub from its own HUB_CONFIG (see menu.js) */
  --fl-w:820px;
  --fl-h:580px;
  --fl-tabw:175px;
}
.fl-wrap::-webkit-scrollbar{ display:none; }
/* the window keeps its true 820x580 box and is scaled; this holds the scaled size
   so narrow screens pan across it instead of shrinking the text into mush */
.fl-scroll{
  position:relative;
  width:calc(var(--fl-w) * var(--fl-scale));
  height:calc(var(--fl-h) * var(--fl-scale));
  margin-inline:auto;
}
/* Stand-in for the blurred game behind the window — it exists to show *through*
   the translucent acrylic, so it is clipped to the window box exactly. Any bleed
   past the edges reads as a grey strip beside the menu (and makes the wrapper
   horizontally scrollable), so no negative insets and no blur filter here. */
.fl-scroll::before{
  content:'';
  position:absolute; inset:0;
  border-radius:8px;
  background:
    radial-gradient(46% 52% at 20% 24%, color-mix(in srgb,var(--accent,#7c5cff) 45%, transparent), transparent 72%),
    radial-gradient(52% 58% at 84% 74%, color-mix(in srgb,var(--accent,#7c5cff) 26%, transparent), transparent 74%),
    linear-gradient(150deg,#1b1a2b,#0d0d16);
}

.fl{
  position:absolute; top:0; left:0;
  width:var(--fl-w); height:var(--fl-h);
  transform-origin:top left;
  transform:scale(var(--fl-scale,1));
  border-radius:8px;
  /* AcrylicBorder @ .5 — drawn inset so the content box stays exactly 820x580 */
  box-shadow:inset 0 0 0 1px rgba(90,90,90,.5), 0 30px 90px -20px rgba(0,0,0,.85);
  /* AcrylicPaint: AcrylicMain @ .45 transparency, then the gradient frame @ .4 */
  background:
    linear-gradient(rgba(40,40,40,.6), rgba(40,40,40,.6)),
    rgba(60,60,60,.55);
  font-family:'Montserrat','Inter',system-ui,sans-serif;
  color:#f0f0f0;
  overflow:hidden;
  user-select:none;
  -webkit-font-smoothing:antialiased;
}
/* AcrylicNoise (.9 transparency, tiled 128) */
.fl::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:8px;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fl *{ box-sizing:border-box; }

/* ── title bar (height 42) ─────────────────────────────── */
.fl__bar{
  position:absolute; top:0; left:0; right:0; height:42px;
  display:flex; align-items:center; gap:5px;
  padding-left:16px;
  border-bottom:1px solid rgba(75,75,75,.5);   /* TitleBarLine @ .5 */
}
.fl__title{ font-size:12px; font-weight:400; letter-spacing:0; }
.fl__sub{ font-size:12px; font-weight:400; opacity:.6; }   /* TextTransparency .4 */

.fl__wbtn{
  position:absolute; top:4px; width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:7px; background:rgba(240,240,240,0);
  transition:background .18s ease;
}
.fl__wbtn:hover{ background:rgba(240,240,240,.06); }   /* Text @ .94 */
.fl__wbtn:active{ background:rgba(240,240,240,.04); }
.fl__wbtn svg{ width:16px; height:16px; stroke:#f0f0f0; fill:none; stroke-width:1.4; }
.fl__wbtn--close{ right:4px; }
.fl__wbtn--max{ right:42px; }
.fl__wbtn--min{ right:80px; }

/* ── sidebar (x 12, y 54, w TabWidth, h 100%-66) ───────── */
.fl__side{ position:absolute; left:12px; top:54px; width:var(--fl-tabw); height:calc(100% - 66px); }
.fl__tabs{
  position:absolute; inset:0 0 62px 0;
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; scrollbar-width:none;
}
.fl__tabs::-webkit-scrollbar{ display:none; }

.fl__tab{
  position:relative; flex:0 0 auto;
  display:flex; align-items:center;
  height:34px; padding:0 12px 0 8px;
  border-radius:6px;
  background:rgba(120,120,120,0);              /* Tab, transparency 1 */
  text-align:left; color:#f0f0f0;
  transition:background .16s ease;
}
.fl__tab:hover{ background:rgba(120,120,120,.11); }        /* .89 */
.fl__tab:active{ background:rgba(120,120,120,.08); }       /* .92 */
.fl__tab.is-active{ background:rgba(120,120,120,.11); }
.fl__tab.is-active:hover{ background:rgba(120,120,120,.15); } /* .85 */
.fl__tab svg{ width:16px; height:16px; flex:0 0 16px; stroke:#f0f0f0; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fl__tab span{
  margin-left:6px; font-size:12px; font-weight:400; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the accent selector rail (4px, corner 2, spring-driven) */
.fl__sel{
  position:absolute; left:0; width:4px; height:16px;
  border-radius:2px; background:var(--fl-accent);
  transition:top .28s cubic-bezier(.2,.9,.25,1), height .28s cubic-bezier(.2,.9,.25,1);
  pointer-events:none;
}

/* the hub's own player widget (bottom of the sidebar) */
.fl__pw{
  position:absolute; left:0; bottom:0; width:calc(var(--fl-tabw) - 16px); height:50px;
  border-radius:6px;
  background:rgba(30,30,35,.85);
  border:1px solid var(--fl-accent);
  overflow:hidden;
}
.fl__avatar{
  position:absolute; left:9px; top:9px; width:32px; height:32px;
  border-radius:50%; background:#3a3a44; object-fit:cover;
}
/* both labels are TextScaled in game (name max 13, sub max 11) and never wrap */
.fl__pwname{
  position:absolute; left:48px; top:8px; right:8px; height:16px;
  font-size:13px; font-weight:700; line-height:16px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fl__pwsub{
  position:absolute; left:48px; top:26px; right:8px; height:14px;
  font-size:10.5px; font-weight:600; line-height:14px; color:#969696;
  letter-spacing:-.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── current tab heading (28px SemiBold at TabWidth+26 / y 56) ── */
.fl__display{
  position:absolute; left:calc(var(--fl-tabw) + 26px); top:56px; right:16px; height:28px;
  font-size:28px; font-weight:600; line-height:28px; letter-spacing:-.01em;
  color:#f0f0f0;
}

/* ── element container (x 201, y 94, w 613, h 100%-102) ── */
.fl__container{
  position:absolute; left:calc(var(--fl-tabw) + 26px); top:94px;
  width:calc(100% - var(--fl-tabw) - 32px); height:calc(100% - 102px);
  padding-right:10px;
  display:flex; flex-direction:column; gap:5px;
  overflow-y:auto; overscroll-behavior:contain;
  transition:transform .16s ease-out, opacity .16s ease-out;
}
/* Fluent's ScrollBarThickness = 3 (no standard scrollbar-width here — Chrome
   would then ignore the rule below and reserve ~11px, shifting every row) */
.fl__container::-webkit-scrollbar{ width:3px; }
.fl__container::-webkit-scrollbar-track{ background:transparent; border:0; }
/* border:0 matters — the site's global thumb rule adds a 2px dark border, which on
   a 3px rail paints a hard dark line down the edge of the menu */
.fl__container::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.05); border:0; border-radius:3px; }
.fl__container.is-out{ transform:translateY(16px); opacity:0; }

/* ── element row ───────────────────────────────────────── */
.fl-el{
  position:relative; flex:0 0 auto; width:100%;
  display:block; text-align:left;
  padding:13px 0;
  border-radius:4px;
  background:rgba(120,120,120,.13);            /* ElementTransparency .87 */
  border:1px solid rgba(35,35,35,.5);          /* ElementBorder @ .5 */
  transition:background .12s ease;
}
button.fl-el:hover{ background:rgba(120,120,120,.20); }   /* -HoverChange */
button.fl-el:active{ background:rgba(120,120,120,.06); }
.fl-el__labels{ margin-left:10px; width:calc(100% - 28px); }
.fl-el__t{ font-size:13px; font-weight:500; line-height:14px; color:#f0f0f0; }
.fl-el__d{
  margin-top:2px; font-size:12px; font-weight:400; line-height:14px; color:#aaa;
  width:100%;
}
.fl-el--toggle .fl-el__d{ width:calc(100% - 54px); }
.fl-el--slider .fl-el__d,
.fl-el--dropdown .fl-el__d{ width:calc(100% - 170px); }

/* toggle: 36x18, corner 9, knob 14 at x2 / x19, Quint .25s */
.fl-tg{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:36px; height:18px; border-radius:9px;
  background:var(--fl-accent); opacity:0;                /* transparent when off */
  box-shadow:inset 0 0 0 1px rgba(120,120,120,.5);       /* ToggleSlider stroke @ .5 */
  transition:opacity .25s cubic-bezier(.23,1,.32,1), box-shadow .25s cubic-bezier(.23,1,.32,1);
}
.fl-tg::after{
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:rgba(120,120,120,.5);                       /* ToggleSlider, .5 image transparency */
  transition:left .25s cubic-bezier(.23,1,.32,1), background .25s cubic-bezier(.23,1,.32,1);
}
.is-on .fl-tg{ opacity:1; box-shadow:inset 0 0 0 1px var(--fl-accent); }
.is-on .fl-tg::after{ left:20px; background:#fff; }

/* slider: rail h4 max-w150 right 10, knob 14, value label to the left */
.fl-sl{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:150px; height:14px;
  display:flex; align-items:center;
}
.fl-sl__rail{
  position:relative; width:100%; height:4px; border-radius:2px;
  background:rgba(120,120,120,.6);                        /* SliderRail @ .4 */
  cursor:pointer;
}
.fl-sl__fill{ position:absolute; inset:0 auto 0 0; height:4px; border-radius:2px; background:var(--fl-accent); }
.fl-sl__knob{
  position:absolute; top:50%; width:14px; height:14px; margin-left:-7px;
  border-radius:50%; background:var(--fl-accent); transform:translateY(-50%);
}
.fl-sl__val{
  position:absolute; right:164px; top:50%; transform:translateY(-50%);
  font-size:12px; color:#aaa; white-space:nowrap;
}

/* dropdown: 160x30, corner 5, DropdownFrame @ .9, InElementBorder @ .5 */
.fl-dd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:160px; height:30px; border-radius:5px;
  background:rgba(160,160,160,.1);
  border:1px solid rgba(90,90,90,.5);
  display:flex; align-items:center; padding:0 8px;
}
.fl-dd__v{
  flex:1; min-width:0; font-size:13px; color:#f0f0f0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fl-dd__c{ width:16px; height:16px; flex:0 0 16px; stroke:#aaa; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.fl-el.is-open .fl-dd__c{ transform:rotate(180deg); }

.fl-ddlist{
  position:absolute; right:10px; z-index:30;
  width:160px; max-height:172px; overflow-y:auto;
  padding:5px; border-radius:7px;
  background:rgb(45,45,45);                                /* DropdownHolder */
  border:1px solid rgb(35,35,35);                          /* DropdownBorder */
  box-shadow:0 12px 30px -8px rgba(0,0,0,.8);
  display:flex; flex-direction:column; gap:3px;
  scrollbar-width:thin;
  transform-origin:top;
  animation:ddOpen .2s cubic-bezier(.165,.84,.44,1);       /* 0.2s Quart Out */
}
@keyframes ddOpen{ from{ transform:scaleY(.6); opacity:0 } }

/* an option is not a filled pill in game — it is a subtle row with a 4px accent
   rail on the left that grows from 6px to 14px when picked */
.fl-ddopt{
  position:relative; flex:0 0 auto;
  height:32px; padding:0 10px 0 20px; border-radius:6px;
  display:flex; align-items:center;
  font-size:13px; color:#f0f0f0; text-align:left;
  background:rgba(120,120,120,0);
  transition:background .12s ease;
}
.fl-ddopt::before{
  content:''; position:absolute; left:6px; top:50%;
  width:4px; height:6px; margin-top:-3px; border-radius:2px;
  background:var(--fl-accent); opacity:0;
  transition:height .28s cubic-bezier(.2,.9,.25,1), margin-top .28s cubic-bezier(.2,.9,.25,1), opacity .2s;
}
.fl-ddopt:hover{ background:rgba(120,120,120,.11); }
.fl-ddopt.is-sel{ background:rgba(120,120,120,.11); }
.fl-ddopt.is-sel:hover{ background:rgba(120,120,120,.15); }
.fl-ddopt.is-sel::before{ height:14px; margin-top:-7px; opacity:1; }

.fl-ddnote{
  padding:8px 10px; font-size:11.5px; line-height:1.45; color:#8d8d8d;
}

/* button element: 16px chevron on the right */
.fl-btn-ico{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:#f0f0f0; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* keybind / input pill */
.fl-pill{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  height:30px; min-width:70px; padding:0 10px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(160,160,160,.1); border:1px solid rgba(90,90,90,.5);
  font-size:13px; color:#f0f0f0;
}

/* section header (18px SemiBold) */
.fl-sec{ flex:0 0 auto; margin-top:19px; font-size:18px; font-weight:600; line-height:18px; color:#f0f0f0; }

/* ── caption under the emulation ───────────────────────── */
.fl-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:14px; font-size:12.5px; color:var(--txt-faint);
}
.fl-note b{ color:var(--txt-dim); font-weight:600; }
.fl-note i{
  font-style:normal; width:7px; height:7px; border-radius:50%;
  background:var(--fl-accent,#60cdff); box-shadow:0 0 10px var(--fl-accent,#60cdff);
}

@media (prefers-reduced-motion:reduce){
  .fl__container, .fl-tg, .fl-tg::after, .fl__sel{ transition:none !important; }
}