/* ─────────────────────────────────────────────────────────────────────
 * OMGPOP HTML Recreation — styles.css
 * Values derived directly from decompiled ActionScript source (Main2.swf)
 *
 * AS Sources:
 *   iilwy.display.globalnav.TopNavMain       → masthead, nav, dropdowns
 *   iilwy.display.globalnav.BottomBar        → footer bar
 *   iilwy.display.globalnav.PageTitle        → page-title-badge
 *   iilwy.display.arcade.home.ArcadeCatalogModule   → thumb strip layout
 *   iilwy.display.arcade.home.ArcadeCatalogFeature  → hero card overlay
 *   iilwy.display.arcade.home.ArcadeCatalogThumbnail→ thumb label
 *   iilwy.display.home.LoggedOutHomePageView → stage layout
 *   iilwy.display.search.PersonSearch        → search expand
 *   iilwy.application.WindowManager         → viewport scale
 * ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════
   FONTS  (FontManager.as — TTF extracted from SWF)
═══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Avenier';
  src: url('fonts/371_iilwy.managers.FontManager_aveneirLight_aveneirLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenier';
  src: url('fonts/109_iilwy.versions.website.WebsitePreloader_avenirMedium_avenirMedium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenier';
  src: url('fonts/417_iilwy.managers.FontManager_aveneirMedium_aveneirMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenier';
  src: url('fonts/397_iilwy.managers.FontManager_aveneirBold_aveneirBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenier';
  src: url('fonts/84_Avenir LT 95 Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════
   RESET / BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════
   VIEWPORT SCALING  (WindowManager.as)
   BASE_W = 1243, BASE_H = 782
   --page-scale computed and applied by app.js syncViewportScale()
═══════════════════════════════════════════════════════ */
.viewport-shell {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.site-shell {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Avenier', 'Avenir', Arial, sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #333333;
  background: #3d3d3d url('img/background/background-default.jpg') center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   MASTHEAD  (TopNavMain.as + PageTitle.as)
   stageHeight of topNav = 36px
═══════════════════════════════════════════════════════ */
.masthead {
  position: relative;
  flex-shrink: 0;
  height: 36px;
  z-index: 1000;
}

.masthead-row,
.masthead-bar {
  display: flex;
  align-items: stretch;
  height: 36px;
  gap: 3px;
}

/* ─── TOP NAV SHELL ───────────────────────────────────
   renderBackground(): colors=[0xDDDDDD,0xFFFFFF] alphas=[100,100] (0-255 scale → 100/255≈39%) 270° (bot→top)
     composited over white: top=white, bottom=0.608×255+0.392×221=242≈#F2F2F2
     → CSS: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%)
   DropShadowFilter(4,90°,0,0.4,6,6) → box-shadow: 0 4px 6px rgba(0,0,0,0.4)
   cornerRadius: BR=10 → drawRoundRectComplex(0,0,100,36, TL=0,TR=0,BL=0,BR=10)
   No explicit border in AS source */
.top-nav-shell {
  height: 36px;
  display: flex;
  align-items: flex-start; /* items are 34px, top-aligned in 36px bar (2px gap at bottom) */
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%); /* renderBackground: [0xDDDDDD,0xFFFFFF] alpha=100/255=39% → composited #F2F2F2 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  border-radius: 0 0 10px 0;
  position: relative;
  z-index: 100;
  padding-right: 8px;
  overflow: visible;
}

/* ─── LOGO / HOME BUTTON ──────────────────────────────
   Home item: type="logo" → width = 210 (icon≠null: "170 : 210" in buildItems)
   setPadding(0,12) on TopNavItem → left=12, right=12 (icon at right:12, top:6)
   logoHolder.x=85, logo.x=-logo.width/2=-80 → logo left edge = 85-80 = 5px from nav left
   logoHolder.rotation = -3; onHover → elastic jiggle (easeOutElastic, rotation 10→-3) */
.top-nav-home {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  width: 210px;      /* home item width = 210 (type="logo" + icon) */
  padding-left: 5px; /* logo left edge at x=5 (logoHolder.x=85 - logo.width/2=80 = 5) */
  padding-right: 0;
  height: 34px;      /* TopNavItem height=34 (super(...,34,...)); bar bg=36 */
  align-self: flex-start; /* top-aligned in 36px bar (items at y=0, 2px gap at bottom) */
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, 0.133); /* Divider after home item */
}

/* logo scaled to 160px wide (AS: _loc1_ = 160 / logo.width; scaleX = _loc1_)
   logoHolder.y = 25 → center at y=25 in 36px bar → shift 7px below flex-center (34px item center=17→25)
   Two filters on _logoHolder (TopNavMain.as:207):
     DropShadowFilter(4, 90°, 0x333333, 0.5, 0, 0)  → (0,4) hard dark-gray edge below
     DropShadowFilter(5, 45°, 0x000000, 0.2, 6, 6)  → (~3.5,~3.5) soft black outer shadow */
.top-nav-logo {
  width: 160px;
  height: auto;
  display: block;
  transform: rotate(-3deg);
  margin-top: 8px; /* 34px item: center at 17px + 8px = 25px center ≈ logoHolder.y=25 */
  flex-shrink: 0;
  filter:
    drop-shadow(0 4px 0 rgba(51, 51, 51, 0.5))
    drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.2));
}

/* easeOutElastic approximation: rotation 10 → -3 over 1s */
@keyframes logo-jiggle {
  0%   { transform: rotate(10deg); }
  14%  { transform: rotate(-6deg); }
  28%  { transform: rotate(4.5deg); }
  42%  { transform: rotate(-3.5deg); }
  57%  { transform: rotate(2deg); }
  71%  { transform: rotate(-2deg); }
  85%  { transform: rotate(0.8deg); }
  100% { transform: rotate(-3deg); }
}

.top-nav-home:hover .top-nav-logo {
  animation: logo-jiggle 1s ease-out forwards;
}

/* iconTopNavHome (352_): 20×20 PNG
   _iconDisplay.y=6, _iconDisplay.x = param1-20-padding.right = 210-20-12 = 178
   → right edge at 178+20=198 = 210-12 → CSS: right:12px, top:6px, width:20px
   iconColor=0x33000000 → getAlpha=51/255=0.200 → opacity:0.200 */
.top-nav-home-icon {
  position: absolute;
  right: 12px;
  top: 6px;
  width: 20px;   /* icon slot = 20px (param1-20-padding.right); PNG is 20×20 */
  height: 20px;
  opacity: 0.200; /* iconColor=0x33000000 → alpha=51/255=0.200 */
  pointer-events: none;
}

/* ─── NAV LINKS  (TopNavItem.as) ──────────────────────
   font: avenirMedium, 10px, uppercase
   padding: 0 12px, divider right 1px × height */
.top-nav-links {
  display: flex;
  align-items: flex-start; /* top-align 34px items in 36px bar */
  height: 36px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: flex-start; /* top-align item in 36px bar (items are 34px, 2px gap at bottom) */
  height: 36px;
}

.nav-item > a,
.nav-direct {
  display: flex;
  align-items: center;
  height: 34px;  /* TopNavItem height=34; bar bg height=36 */
  padding: 0 12px;
  border-right: 1px solid rgba(0, 0, 0, 0.133); /* Divider "divider" style dashColor=0x22000000=rgba(0,0,0,0.133) */
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  color: #666666; /* topNavItem fontColor=0x666666 */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
  user-select: none;
}

/* TopNavItem._hilight: renderRoundRect(white,0,0,width,5,5) at x=2,y=1, alpha=0.1 default
   On OVER: alpha→0.4. Subtle white highlight strip at very top of each nav item.
   Also applies to .top-nav-home since it's a TopNavItem subclass in AS. */
.nav-item > a::before,
.nav-direct::before,
.top-nav-home::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 5px;
  border-radius: 5px;
  background: #ffffff;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1; /* above the gradient overlay, below content */
}

/* TopNavItem over: _gradient alpha→0.4 (black→transparent top-to-bottom) + _hilight alpha→0.4
   Text color unchanged (stays #666666). */
.nav-item > a:hover,
.nav-direct:hover,
.top-nav-home:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.nav-item > a:hover::before,
.nav-direct:hover::before,
.top-nav-home:hover::before {
  opacity: 0.4;
}

/* HTML-only is-current indicator (no persistent selected state in Flash AS source) */
.nav-item > a.is-current {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.nav-item > a.is-current::before {
  opacity: 0.4;
}

/* ─── NAV DROPDOWNS  (TopNavMain — topNavMenuWindow style) ─
   bg: backgroundGradient=[0x99000000=rgba(0,0,0,0.6), 0xEF000000=rgba(0,0,0,0.937)]
   topNavMenuItem: fontColor=0xBBFFFFFF=rgba(255,255,255,0.733)
   _menuWindow.setPadding(5,5,15,5) → top=5, right=5, bottom=15, left=5
   dashColor=0x33FFFFFF=rgba(255,255,255,0.20) for dividers */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px); /* _menuWindow.y tweens to 40; nav bar = 36 → 4px gap */
  left: 0;
  min-width: 170px; /* _standardMenu.width=160 + padding.left/right=5+5=10 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.937) 100%);
  border-radius: 10px; /* cornerRadius=10 from topNavMenuWindow */
  padding: 5px 5px 15px 5px; /* _menuWindow.setPadding(5,5,15,5) */
  z-index: 300;
  /* hidden / collapsed state */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              transform 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Transparent bridge fills the 2px gap between nav bar bottom and dropdown top
   so the hover state is maintained while moving mouse downward */
.nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 10px;
  background: transparent;
}

.nav-item:hover > .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* topNavMenuItem: fontSize=10, fontFace=aveneirMedium, itemHeight=18px
   LiteButton.setPadding(0,3) → default padding.left/right=3; topNavMenuItem has no paddingLeft/Right
   → actual horizontal padding = 3px (LiteButton default)
   fontColor=3154116607=0xBBFFFFFF: Flash TextFormat.color ignores alpha byte → lower 24 bits=0xFFFFFF=white
   over.backgroundColor=0=0x00000000 → getAlpha(highByte=0)=1 → fully opaque black; fontColor=0xFFFFFF=white
   down.backgroundColor=2855482163=0xAA333333 → getAlpha=170/255=0.667; RGB=#333333 */
.nav-dropdown a {
  display: block;
  height: 18px;        /* ListView.itemHeight = 18 */
  line-height: 18px;   /* vertically center 10px text in 18px row */
  padding: 0 3px;      /* LiteButton.setPadding(0,3): top=0,right=3,bottom=0,left=3 */
  border-radius: 10px; /* cornerRadius=10 */
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  color: #ffffff; /* fontColor=0xBBFFFFFF; TextFormat.color uses lower 24 bits only → #ffffff */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.05s;
}

.nav-dropdown a:hover {
  background: #000000; /* over.backgroundColor=0→getAlpha=1→fully opaque black */
}

.nav-dropdown a:active {
  background: rgba(51, 51, 51, 0.667); /* down.backgroundColor=0xAA333333 → rgba(51,51,51,0.667) */
}

/* dashColor=872415231=0x33FFFFFF=rgba(255,255,255,0.20) */
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.200); /* topNavMenuItem.dashColor=0x33FFFFFF → alpha=51/255=0.200 */
  margin: 4px 0;
}

/* ─── MESSAGE BUTTON ──────────────────────────────────
   icon: iconTopNavMessage (373_), 20×20 PNG
   TopNavItem.measure(): padding.left+padding.right+iconSlot=12+12+20=44px width; height=34
   _iconDisplay.y=6, _iconDisplay.x = 44-20-12 = 12 (centered in 44px with 12px left padding) */
.top-nav-message {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 34px;   /* TopNavItem height=34 */
  align-self: flex-start; /* top-aligned in 36px bar */
  width: 44px;
  background: none;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.133); /* Divider dashColor=0x22000000 */
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.top-nav-message img {
  width: 20px;   /* icon slot = 20px; PNG is 20×20 */
  height: 20px;
}

.top-nav-badge {
  position: absolute;
  top: 5px;
  right: 3px;
  background: #cc2222;
  color: #ffffff;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 7px;
  border-radius: 6px;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
}

/* ─── SEARCH  (PersonSearch / topNavInput style) ─────
   topNavInput: fontSize=11, aveneirMedium, cornerRadius=15,
     backgroundColor=0xBABABA=#BABABA, fontColor=white, borderSize=0
   onSearchFocusIn: bg.width += 150 (0.3s easeOutCubic)
   icon: iconTopNavSearch (391_) */
.top-nav-search {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  margin-left: 6px;
  margin-top: 8px;   /* _searchField.y = 8 in TopNavMain */
  align-self: flex-start;
}

.top-nav-search input {
  width: 65px;           /* AutoCompleteInput default width=65 */
  height: 18px;          /* AutoCompleteInput height=18 */
  border: none;          /* borderSize=0 */
  border-radius: 15px;   /* cornerRadius=15 */
  padding: 0 20px 0 8px;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;      /* aveneirMedium */
  font-size: 11px;       /* topNavInput fontSize=11 */
  color: #ffffff;        /* fontColor=0xFFFFFF */
  background: #bababa;   /* backgroundColor=0xBABABA */
  outline: none;
  transition: width 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.top-nav-search input:focus {
  width: 150px; /* PersonSearch focusIn: searchText.width → 150 */
  /* focused state: {} — no color change */
}

.top-nav-search img {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: auto;
  opacity: 0.4;
  pointer-events: none;
}

/* ─── AUTH PANEL  (TopNavRightLoggedOut) ──────────────
   renderTopNavBgRight(): colors=[0xDDDDDD,0xFFFFFF] alphas=[39%] angle=270° (bot→top)
     → composited: bottom=#f2f2f2, top=white; CSS: linear-gradient(180deg,white,#f2f2f2)
   cornerRadius: BL=10 → drawRoundRectComplex(0,0,100,36, TL=0,TR=0,BL=10,BR=0)
   DropShadowFilter(4,90°,0,0.4,6,6) → box-shadow: 0 4px 6px rgba(0,0,0,0.4)
   No explicit border in AS source */
.nav-auth-panel {
  display: flex;
  align-items: flex-start; /* top-align 34px items in 36px bg (2px gap at bottom) */
  height: 36px;
  margin-left: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%); /* renderTopNavBgRight: [0xDDDDDD,0xFFFFFF] alpha=100/255=39% → composited #F2F2F2 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  border-radius: 0 0 0 10px;
  flex-shrink: 0;
  overflow: hidden;
}

/* TopNavItem("LOG IN") + TopNavItem("SIGN UP") — same TopNavItem as nav links
   setPadding(0,12) → padding: 0 12px; height=34 (same as all TopNavItems) */
.nav-auth-btn {
  display: flex;
  align-items: center;
  height: 34px;   /* TopNavItem height=34; auth panel bg=36 */
  padding: 0 12px;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  color: #666666; /* topNavItem fontColor=0x666666 */
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background 0.1s;
}

/* Same _hilight as nav-item > a (alpha 0.1 default) */
.nav-auth-btn::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 5px;
  border-radius: 5px;
  background: #ffffff;
  opacity: 0.1;
  pointer-events: none;
}

/* TopNavItem over: _gradient alpha→0.4 + _hilight alpha→0.4 */
.nav-auth-btn:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.nav-auth-btn:hover::before {
  opacity: 0.4;
}

/* 1px × 34px divider — "divider" style: dashColor=0x22000000=rgba(0,0,0,0.133) */
.nav-auth-divider {
  width: 1px;
  height: 34px;
  background: rgba(0, 0, 0, 0.133);
  flex-shrink: 0;
}

/* ─── PAGE TITLE BADGE  (PageTitle.as) ───────────────
   Shape (symbol293 "pageTitleBg") from the SWF is a flat 120×45 white
   rectangle — confirmed by the exported sprite SVG (one path, fill:#fff).
   The "badge" look comes from DropShadowFilter(2, 30°, black, 0.4, 20,15)
   applied to the solid white rect.

   Position math — PageTitle.as createChildren/showTitle:
     _titleHolderOuter.x = 200, y = 23, rotation = -4°
     _titleHolder.x      = -180
     titleBg local (0,0) inside titleHolder

   Applying outer's rotate(-4°) then translate(+200,+23) to titleBg's
   top-left corner at local (-180, 0):
     rotated = (-179.57, 12.56) → final = (20.43, 35.56)
   So in CSS-parent coords the badge's top-left lands at about (20, 36).
   With `transform-origin: top left` the other three corners also match
   the Flash rotation output, so no extra offset is needed.

   Width: titleBg.width = max(110, titleField.width + 20) → min 110px.
   Height: Flash never sets .height, so it stays at the native 45px.

   Stacking: TopNavMain addChild order is pageTitle → _itemHolder →
   logoHolder (last), so the logo draws ON TOP of the badge. z-index
   must be below .top-nav-shell (z:100). */
.page-title-badge {
  position: absolute;
  left: 20px;
  top: 36px;       /* computed from -4° rotation of (-180,0) + (200,23) */
  min-width: 110px; /* AS minimum: max(110, textW+20) */
  height: 45px;    /* native pageTitleBg shape height */
  padding: 0 10px; /* matches +20px text-width allowance (10 per side) */
  box-sizing: border-box;
  background: #ffffff; /* shape is a plain white rect */
  transform: rotate(-4deg);
  transform-origin: top left;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(2px 1px 18px rgba(0, 0, 0, 0.4));
  z-index: 50;  /* < .top-nav-shell z-index:100 → logo overlaps */
}

/* The inline <img> is redundant now that the badge itself paints the
   white rectangle. Hide it rather than editing every HTML page. */
.page-title-badge img {
  display: none;
}

/* Flex child of .page-title-badge — contributes width so the badge
   grows for longer titles (matches titleBg.width = textW + 20). The
   2px nudge (titleField.y = bgH/2 − tf.h/2 + 2) is applied via
   margin-top. */
#pageTitleText {
  display: block;
  margin-top: 2px;
  font-family: 'Avenier', sans-serif;
  font-weight: 500; /* aveneirMedium */
  font-size: 22px;  /* AS: len≤5→30, >5≤8→24, >8≤10→22, >10→18. Updated live by app.js per title length. */
  color: #666666;   /* pageTitle style: fontColor=0x666666 */
  text-transform: lowercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1;
}

/* PageTitle._subtitleHolder — PageTitle.as constructor:
     UiRender.renderRect(_subtitleBg, 0x66000000, 0, 0, 100, 26)   → bg rgba(0,0,0,0.4), h=26
     _subtitleLabel = new Label("", 20, 6, "cssBlock")              → label x=20, y=6 in holder
     parseCSS: body { font-family:aveneirLight; font-size:10; color:#dddddd; leading:0; }
               a    { font-family:aveneirBold;  color:#FFFFFF; }

   showTitle:    _subtitleHolder.x = _titleBg.width + 10  (→ 120 for short titles)
   showSubtitle: _subtitleHolder.y = 35                    (tween from -26)
   showSubtitle: _subtitleBg.width  = label.x + label.width + 20 → bg pads 20px each side

   Stacking:  PageTitle.createChildren adds _subtitleHolder BEFORE _titleHolderOuter, and
   TopNavMain adds pageTitle BEFORE logoHolder — so the subtitle sits beneath both the
   title badge AND the logo. z-index must be below .page-title-badge (50). */
.page-title-subtitle {
  position: absolute;
  left: 120px; /* = titleBg.width(110) + 10 */
  top: 35px;   /* _subtitleHolder.y = 35 after tween */
  height: 26px;
  background: rgba(0, 0, 0, 0.4); /* 0x66000000 */
  display: flex;
  align-items: center;
  padding: 0 20px; /* left = label.x(20), right = +20 from bg.width formula */
  font-family: 'Avenier', sans-serif;
  font-weight: 300; /* aveneirLight → weight 300 */
  font-size: 10px;
  color: #dddddd; /* body CSS color in subtitleCSS */
  white-space: nowrap;
  z-index: 49;    /* < .page-title-badge(50) < .top-nav-shell(100) */
  pointer-events: auto;
}

.page-title-subtitle a {
  font-family: 'Avenier', sans-serif;
  font-weight: 700; /* aveneirBold — a{} rule in subtitleCSS */
  color: #ffffff;
  text-decoration: none;
}

.page-title-subtitle a:hover {
  text-decoration: underline;
}

.page-title-subtitle .subtitle-light {
  font-weight: 300; /* aveneirLight — .light{} rule in subtitleCSS */
}

/* ═══════════════════════════════════════════════════════
   STAGE  (ArcadeHomePageView content area)
═══════════════════════════════════════════════════════ */
/* LoggedOutHomePageView: introPane.y=10, arcadePane.y = introPane.height + 15 → gap=5
   setPadding(0,10) → 10px left/right (36px left to clear side-tabs takes priority)
   Background: renderGradient([0x01000000,0x66000000], -Math.PI/2, cornerRadius=20)
     = rgba(0,0,0,0)→rgba(0,0,0,0.4) bottom→top → CSS: 180deg, dark at top */
.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 14px 16px 14px 44px; /* top/bottom spacing from nav bars; left: side-tab clearance + breathing room */
  gap: 5px; /* arcadePane.y = introPane.height + 5 + 10; extra 5px gap */
  isolation: isolate; /* creates stacking context so ::before stays behind */
}

/* LoggedOutHomePageView background gradient overlay */
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
}

/* ─── SIDE TABS  (SideNav.as + BaseTheme.as) ─────────
   SideNav._list: HORIZONTAL, rotated -90° → appears vertical on left edge
   Buttons: SimpleButton(label, 0, 0, undefined, height=21, styleName)
     sideNavItemHilight "BETA FEEDBACK": backgroundColor=0xC00300=#C00300 (dark red)
       over: 0xCCC00300 = rgba(192,3,0,0.8)
     sideNavItem      "FIND FRIENDS":   backgroundColor=0x666666=#666666 (gray)
       over: 0xCC666666 = rgba(102,102,102,0.8)
   cornerRadius=0, fontFace=aveneirBold, fontSize=12, fontColor=white
   CSS width=21 (tab thickness = SimpleButton height=21), height=104 (visual length) */
.side-tabs {
  position: absolute;
  left: 0;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 50;
}

.side-tab {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  width: 21px;   /* AS: SimpleButton height=21 → visual tab thickness after -90° rotation */
  height: 104px;
  border: none;
  border-radius: 4px 0 0 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 700; /* aveneirBold */
  font-size: 12px;  /* AS: sideNavItem/sideNavItemHilight fontSize=12 */
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  user-select: none;
}

.side-tab-debug {
  background: #c00300; /* sideNavItemHilight: backgroundColor=0xC00300 */
}

.side-tab-debug:hover {
  background: rgba(192, 3, 0, 0.8); /* over: 0xCCC00300 */
}

.side-tab-friends {
  background: #666666; /* sideNavItem: backgroundColor=0x666666 */
}

.side-tab-friends:hover {
  background: rgba(102, 102, 102, 0.8); /* over: 0xCC666666 */
}

/* ═══════════════════════════════════════════════════════
   INTRO MODULE  (IntroModule.as content height=90)
   Wrapped by introPane: setPadding(5,5,10,5)
   Total visual height = 5+90+10 = 105px (border-box)
   Left: logo (homepage-title-top.png scaleX/Y=0.7)
         + TextBlock cssHome (aveneirMedium 14px #cccccc)
         + joinButton "SIGN UP NOW" (SimpleButton)
   Divider: 1px at x=width-300, height=90
   Right: LoginForm (width=280)
═══════════════════════════════════════════════════════ */
.intro-module {
  height: 105px; /* 5 + 90 + 10 = 105px total (border-box) */
  padding: 5px 5px 10px 5px; /* introPane.setPadding(5,5,10,5) */
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  /* ModuleContainer has no own background — page gradient shows through */
}

/* intro-left: vertical column — logo(y=-5) → body(margin-top=26) → button(y=70=bottom) */
.intro-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
  min-width: 0;
}

/* Image(0,-5): y=-5 → margin-top:-5px; scaleX/Y=0.7 → 525×0.7=368px, 52×0.7=36px
   DropShadowFilter(distance=10, angle=90°, color=black, alpha=0.4, blurX=10, blurY=10)
   Flash angle=90° → offset=(distance·cos90°, distance·sin90°)=(0, 10) */
.intro-logo {
  width: 368px;  /* 525 × 0.7 */
  height: 36px;  /* 52 × 0.7 */
  flex-shrink: 0;
  margin-top: -5px;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));  /* distance=10, angle=90° → (0,10), blur=10 */
}

/* _body.setMargin(26,0,0,0) → margin-top=26px from description list origin
   cssHome.homeIntro: aveneirMedium 14px #cccccc */
.intro-body {
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #cccccc;
  line-height: 1.4;
  flex: 1;
  margin-top: 26px;
  min-height: 0;
}

/* joinButton: y = param2-joinButton.height = 90-20 = 70 → at bottom of content area
   x = _divider.x - joinButton.width - 15 → right-aligned, 15px from divider
   style: simpleButtonDark — backgroundColor=0x77000000, fontColor=0xEEEEEE, fontSize=11
   height=20, setPadding(0,10)
   SimpleButton cornerRadius: getValidValue(cornerRadius, style.cornerRadius, height) → height=20
   capType=ROUND → all corners radius=20 → pill shape → CSS border-radius: 10px (half of 20) */
.intro-signup-btn {
  flex-shrink: 0;
  height: 20px;
  padding: 0 10px;
  margin-top: auto;
  align-self: flex-end; /* x = divider.x - width - 15 → right side of left column */
  margin-right: 15px;   /* 15px gap between button right edge and divider */
  background: rgba(0, 0, 0, 0.467);
  border: none;
  border-radius: 10px; /* cornerRadius = height = 20 → pill (cap=ROUND) */
  color: #eeeeee;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.intro-signup-btn:hover {
  background: rgba(0, 0, 0, 0.6); /* over: 0x99000000 */
}

.intro-signup-btn:active {
  background: rgba(0, 0, 0, 0.733); /* down: 0xBB000000 = 187/255 = 0.733 */
}

/* Vertical divider: dashColor=1442840575=0x55FFFFFF → alpha=0x55/255=0.333
   x = param1-300 (300px from right edge of module) */
.intro-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.333);
  flex-shrink: 0;
  align-self: stretch;
}

/* LoginForm: width=280, x = param1-285 → 14px gap from divider right edge
   (divider right = param1-299, login left = param1-285, gap=14px)
   Login form right edge = param1-5 (5px from intro module right edge)
   margin-left=14px (gap from divider) + margin-right=5px (5px within content before right padding)
   with border-box, width=280 is the exact form width. Total: 14+280+5=299+1divider=300px from right ✓ */
.intro-login {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 14px;
  margin-right: 5px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* _forgotLink is addContentChild(this), positioned absolutely */
}

/* "Already signed up?" label — homeHeader style: aveneirMedium, fontSize=16, white
   (LoginForm._loc1_.fontSize = 16 overrides homeHeader's default 26) */
.login-header {
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 1;
}

/* hList1: horizontal row — user input + password input, 10px gap
   each input = (280-10)/2 = 135px (simpleTextInput_overlay)
   hList1.setMargin(0,0,10,0) → bottom margin 10px */
.login-inputs-row {
  display: flex;
  gap: 10px; /* hList1.itemPadding = 10 */
  margin-bottom: 10px;
}

/* simpleTextInput_overlay: fontSize=11, backgroundGradient=[0x00FFFFFF,0x00FFFFFF]
   GraphicUtil.getAlpha(0x00FFFFFF): highByte=0 → returns 1 (fully opaque) → solid white background
   fontColor=0 (black), type="simple" */
.login-input {
  flex: 1;
  height: 20px; /* TextInput height */
  background: #ffffff; /* solid white: getAlpha(0x00FFFFFF)=1 → fully opaque */
  border: none;
  padding: 0 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #000000; /* fontColor=0 → black */
  outline: none;
}

.login-input::placeholder {
  color: rgba(0, 0, 0, 0.4); /* placeholder on white background */
}

/* hList2: row with remember-me + LOG IN button (right-aligned)
   hList2.setMargin(8,0,20,0) → top=8, bottom=20 */
.login-row {
  display: flex;
  align-items: center;
  position: relative;
  height: 20px;
  margin-top: 8px;
}

/* Remember me checkbox + label (simpleButtonDark checkbox, smallWhite label) */
.login-remember {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.login-remember-check {
  width: 16px;
  height: 16px;
  accent-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.login-remember-label {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px; /* smallWhite: fontSize=10 */
  color: #ffffff;
  cursor: pointer;
}

/* submitButton: simpleButtonDark style — backgroundColor=0x77000000, fontColor=0xEEEEEE
   height=20, setPadding(0,10), right-aligned (x = hList2.width - submitButton.width)
   cornerRadius = height = 20 → pill shape (same as intro-signup-btn) */
.login-btn {
  height: 20px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.467); /* 0x77000000 */
  border: none;
  border-radius: 10px; /* cornerRadius = height = 20 → pill */
  color: #eeeeee; /* fontColor=0xEEEEEE */
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

.login-btn:hover {
  background: rgba(0, 0, 0, 0.6); /* over: 0x99000000 */
}

.login-btn:active {
  background: rgba(0, 0, 0, 0.733); /* down: 0xBB000000 = 187/255 = 0.733 */
}

/* "I forgot" link — smallWhite style (aveneirLight 10px white) alpha=0.8
   addContentChild(this) → absolute, y=8 top=8px right=3px (x=param1-link.width-3)
   overlaps header row right side, separate from _vList */
.login-forgot {
  position: absolute;
  top: 8px;
  right: 3px;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px; /* smallWhite: fontSize=10 */
  color: rgba(255, 255, 255, 0.8); /* alpha=0.8 applied in AS */
  text-decoration: underline;
}

.login-forgot:hover {
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE GRID
   LoggedOutHomePageView: arcadePane + peoplePane (300px)
   arcadePane.width = contentWidth - 300 - panePadding
═══════════════════════════════════════════════════════ */
/* panePadding = 10 (defined in PageView.as), peoplePane.width = 300 */
.homepage-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 10px; /* panePadding = 10 */
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   GAMES PANE  (ArcadeCatalogModule — wraps in Pane.as)
   Pane.as: outer backgroundGradient [0xF1F1F1, 0xDDDDDD] angle=0.5π (top→bottom)
   inner: backgroundColor 0xFFFFFF, inset 3px, cornerRadius inner=17
   outer cornerRadius=20, DropShadowFilter(4, 90°, black, alpha=0.43, blur=6)
═══════════════════════════════════════════════════════ */
.games-pane {
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.games-pane-inner {
  background: #ffffff;
  border-radius: 17px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 7px;  /* Pane.as: content.x=padding.left=10 from outer; white inner at border=3 → 10-3=7px from inner edge */
  gap: 3px;      /* _feature.height = content_height - list.height - 3 → 3px gap */
  min-height: 0;
}

/* ─── SHOWCASE CARD ───────────────────────────────────
   ArcadeCatalogModule: one ArcadeCatalogFeature (full-width) + thumbnail strip
   feature.width=param1, feature.height=param2-list.height-3 */

/* Each card: relative + overflow:hidden for overlays */
.showcase-card {
  position: relative;
  overflow: hidden;
  background: #2a2a2a center / cover no-repeat;
  border-radius: 3px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

/* Polish: subtle brighten on hover — not in AS (hover triggers START_PREVIEW event swap)
   but adds visual feedback that matches the "pop" feel of the original site */
.showcase-card:hover {
  filter: brightness(1.05);
}

/* Hero fills the full games-pane-inner (no side column) */
.showcase-hero {
  flex: 1;
  min-height: 0;
}

/* Game background images (original art assets) */
[data-game="balloono"]    { background-image: url("img/game-jpg/New folder/balloono.jpg"); }
[data-game="drawmything"] { background-image: url("img/game-jpg/New folder/drawmything.jpg"); }
[data-game="pool"]        { background-image: url("img/game-jpg/New folder/pool.jpg"); }

/* ─── CAPTION OVERLAY  (ArcadeCatalogFeature._captionOverlay)
   captionCanvas: backgroundColor=0xCC000000 → rgba(0,0,0,0.8)
   height=65, setPadding(5)
   _title: fontSize=26, uppercase  (y=5 within content)
   _info:  fontSize=16, alpha=0.65, y=29 */
.showcase-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5px;
  pointer-events: none;
}

/* Hero title: strongWhite — aveneirBold (700), fontSize=26 */
.showcase-title strong {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats line (_info: fontSize=16, alpha=0.65) */
#heroStats {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ─── PLAY OVERLAY  (ArcadeCatalogFeature._playOverlay) ─
   _playOverlay.y = 5, x = width - 5 - buttonWidth
   _columnBg: renderGradient([0x33000000, 0xCC000000])
     0x33 = 51/255 ≈ 0.20,  0xCC = 204/255 ≈ 0.80
     → rgba(0,0,0,0.20) at top, rgba(0,0,0,0.80) at bottom
     width=185, height=190
   _quickPlayButton: BevelButton("PLAY NOW", 185×80) at top of column */
.play-now-column {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 185px;
  height: 190px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* BevelButton "PLAY NOW" (bevelButtonColor, color=0xAA000000)
   bevelButtonColor: backgroundGradient=[0xAAFFFFFF,0x01FFFFFF], fontColor=white, fontSize=15, aveneirBold
   color=0xAA000000 (66.7% black colorTransform) → net: dark semi-transparent button */
.play-now {
  width: 185px;
  height: 80px;
  background: rgba(0, 0, 0, 0.67); /* 0xAA000000 = 66.7% opacity black */
  border: none;
  border-radius: 14px; /* BevelButton renderRoundBorderBox default param5=14 */
  color: #ffffff;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 15px; /* bevelButtonColor: fontSize=15 */
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

/* bevelButtonColor over: accentColor 0x22→0x33, gradient bottom 0x01FFFFFF→0x22000000 (adds slight darkness)
   → button gets marginally darker on hover; tintSprite (0xAA000000) unchanged */
.play-now:hover {
  background: rgba(0, 0, 0, 0.72); /* over: gradient bottom adds 0x22000000 → slightly darker */
}

/* bevelButtonColor down: gradient [0x66000000 top, 0x01FFFFFF bottom] over tintSprite (0xAA000000)
   → white highlight removed, top becomes 0x66 black overlay → significantly darker */
.play-now:active {
  background: rgba(0, 0, 0, 0.85); /* down: gradient top loses white, gains 0x66 black → much darker */
}


/* ─── THUMBNAIL STRIP  (ArcadeCatalogModule._thumbnailScroller) ──
   AutoScroller HORIZONTAL: idleScroll=true, scrollPad=100, idleScrollSpeed=50, idleScrollDelay=2000
   List: ListDirection.HORIZONTAL, itemPadding=3
   thumbnailScroller.y = param2 - list.height → strip at bottom
   Thumbnail size: min width=130px (Math.max(130,...)); height=min(width, floor(param2/3))→130px
   PromotionalThumbnail._caption: captionCanvas style (bg=0xCC000000=rgba(0,0,0,0.8)), height=40 */
.thumb-strip {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  flex-shrink: 0;
  height: 130px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.thumb-strip::-webkit-scrollbar {
  display: none;
}

/* Each thumbnail item */
.thumb-item {
  position: relative;
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  background: #2a2a2a center / cover no-repeat;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  /* no hover scale — AS only triggers hero swap via START_PREVIEW, no thumbnail scale */
  transition: filter 0.15s ease;
}

/* Polish: brighten on hover to hint at interactivity (hero swap handled by JS) */
.thumb-item:hover,
.thumb-item.is-active {
  filter: brightness(1.1);
}

/* PromotionalThumbnail._caption: captionCanvas style (bg=0xCC000000=rgba(0,0,0,0.8)), height=40, setPadding(3,3) */
.thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  padding: 3px; /* setPadding(3,3) → top/bottom=3, left/right=3 */
  font-family: 'Avenier', sans-serif;
  color: #ffffff;
  overflow: hidden;
  pointer-events: none;
}

/* _title: setStyleById("strongWhite"), fontSize=14 */
.thumb-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* _info: y=16 in content, setStyleById("white"), fontSize=12, alpha=0.65 */
.thumb-info {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   PEOPLE PANE  (PeopleModule.as — LoggedOutHomePageView)
   peoplePane.width = 300px
   AutoScroller VERTICAL
   Grid: 2 columns, itemPadding=3, itemSize=138, maxItems=30
═══════════════════════════════════════════════════════ */
/* peoplePane = Pane.as — same treatment as games-pane
   outer backgroundGradient [#F1F1F1,#DDDDDD], inner #FFFFFF, inset 3px, radius 20/17
   DropShadowFilter(4, 90°, black, alpha=0.43, blur=6) */
.people-pane {
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.people-pane-inner {
  background: #ffffff;
  border-radius: 17px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 7px;  /* Pane.as: content.x=padding.left=10 from outer; white inner at border=3 → 10-3=7px from inner edge */
  min-height: 0;
}

/* Grid: 2 columns at fixed 138px (itemSize=138), gap=3px (itemPadding=3), scrolls vertically
   Grid starts at (0,0) — no internal padding; pane-inner { padding:7px } handles outer offset */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 138px);
  gap: 3px;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  align-content: start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.people-grid::-webkit-scrollbar {
  display: none;
}

/* PeopleModule grid item placeholder (size set by inline style — 138px default, 90px in sidebar) */
.people-grid-item {
  background: #eeeeee; /* AbstractProfileDisplay._img = 0xEEEEEE (covers _background entirely) */
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

/* ThumbnailProfileDisplay: 138×138
   _img fills full 138×138 (_imgBorderSize=0, so x=y=0, width=height=138)
   _img is opaque #eeeeee — always covers _background. No visible hover color change in Flash
   (_background #999999→#333333 on hover is hidden behind _img) */
.player-thumb {
  width: 138px;
  height: 138px;
  background-color: #eeeeee; /* _img placeholder = 0xEEEEEE, covers _background */
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.player-thumb-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ThumbnailProfileDisplay._infoHolder: rgba(0,0,0,0.6) (0x99000000)
   _nameField: captionHeader (aveneirBold, 10px, white)
   _bodyField: caption (aveneirLight, 10px, white) — below nameField */
.player-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6); /* 0x99000000 */
  padding: 2px 3px;
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  color: #ffffff;
  text-align: left; /* TextFieldAutoSize.LEFT */
  overflow: hidden;
}

.player-thumb-name {
  display: block;
  font-weight: 700; /* aveneirBold — captionHeader style */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-thumb-status {
  display: block;
  font-weight: 300; /* aveneirLight — caption style */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════
   BOTTOM BAR  (BottomBar.as)
   height = 36
   renderBackground(): solid white base (beginFill(0xFFFFFF)) + gradient overlay
     colors=[0xFFFFFF,0xBBBBBB], alphas=[100,100] (0-255 scale → 100/255≈0.392),
     ratios=[0,255], angle=270° (bottom→top): gradient bottom=#FFFFFF@39%, top=#BBBBBB@39%
   Composited over white: bottom=white, top=0.392×187+0.608×255=228≈#E4E4E4
   → CSS: linear-gradient(180deg, #e4e4e4 0%, #ffffff 100%)
═══════════════════════════════════════════════════════ */
.bottom-bar {
  height: 36px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #e4e4e4 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  z-index: 200;
  overflow: visible;
}

.bottom-bar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.bottom-bar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 1px × 34px vertical dividers — "divider" style: dashColor=0x22000000=rgba(0,0,0,0.133) */
.bottom-divider {
  width: 1px;
  height: 34px;
  background: rgba(0, 0, 0, 0.133);
  flex-shrink: 0;
}

/* ─── FOOTER STATS ────────────────────────────────── */
/* NavCounterItem: super("","topNavItem") → setPadding(0,12) in TopNavItem,
   then NavCounterItem constructor calls setPadding(0,10) → padding.left/right=10px */
.footer-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 36px;
  position: relative;
  cursor: default;
}

.footer-stat-coins,
.footer-stat-meter {
  cursor: pointer;
}

.footer-value {
  font-family: 'Avenier', sans-serif;
  font-weight: 700; /* aveneirBold ("strong" style) */
  font-size: 16px;  /* NavCounterItem: _counterLabel.fontSize = 16 */
  color: rgba(0, 0, 0, 0.4); /* fontColor=0 (black), alpha=0.4 */
  line-height: 1;
}

/* XP progress meter — ProgressBar.as, style "progressBar"
   backgroundColor=0x767676, foregroundColor=0xFFFFFF
   width=40, height=10, stroke=2 (LevelNavCounterItem) */
.meter {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 10px;
  background: #767676;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  padding: 2px;
}

/* ─── BOTTOM POPUPS  (UserInfoNavMenu — logged-out state) ─
   bottomNavMenuWindow:
     backgroundGradient = [0xEF000000, 0xCC000000]
       0xEF = 239/255 ≈ 0.937   0xCC = 204/255 ≈ 0.800
       InfoWindow uses Math.PI/2 → top→bottom → first color (0xEF=0.937) at top, second (0xCC=0.800) at bottom
       CSS: linear-gradient(180deg, rgba(0,0,0,0.937) 0%, rgba(0,0,0,0.800) 100%)
     cornerRadius = 10
     setPadding(10)
   BottomBar.showMenu: y = -36-5-menuHeight → popup above bar (easeOutCubic 0.25s) */
.bottom-popup {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.937) 0%, rgba(0, 0, 0, 0.800) 100%);
  border-radius: 10px; /* cornerRadius=10 */
  padding: 10px;       /* setPadding(10) */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  z-index: 500;
  /* hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              transform 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.footer-stat:hover .bottom-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Left-edge stats: don't center the popup (would extend off-screen left).
   Left-align so the popup opens flush with the stat's left edge instead. */
#levelStat .bottom-popup,
#coinStat .bottom-popup {
  left: 0;
  transform: translateX(0) translateY(6px);
}
#levelStat:hover .bottom-popup,
#coinStat:hover .bottom-popup {
  transform: translateX(0) translateY(0);
}

/* _block: TextBlock "cssBlockWhite" — body text wrapped in <strong><font size='16'>
   whiteCSS: strong { font-family:aveneirBold } → font-weight:700
   <font size='16'> → fontSize=16px in Flash → 16px in CSS */
.bottom-popup-text {
  font-family: 'Avenier', sans-serif;
  font-weight: 700; /* <strong> in cssBlockWhite → aveneirBold */
  font-size: 16px;  /* <font size='16'> in Flash HTML text */
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 10px;
  white-space: normal;
}

.bottom-popup-text a {
  color: #ffffff;
  text-decoration: underline;
  transition: opacity 0.1s;
}

.bottom-popup-text a:hover {
  opacity: 0.75;
}

/* bevelButtonDark: 200×50, backgroundColor=0x494949, fontFace=aveneirMedium,
   fontSize=15, fontColor=0xFFFFFF (white), hilight=true → hilightColor=0xBFC1E9 (lavender glow)
   renderRoundBorderBox(param5=14 default) → outer cornerRadius=12, bg cornerRadius=11
   over.backgroundGradient=[0x01000000,0x66000000] → darkening overlay on hover */
.bottom-popup-btn {
  display: block;
  width: 200px;
  height: 50px;
  background: #494949;
  border: none;
  border-radius: 14px; /* renderRoundBorderBox default param5=14 */
  color: #ffffff;
  font-family: 'Avenier', sans-serif;
  font-weight: 500; /* aveneirMedium */
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(191, 193, 233, 0.6); /* hilightColor=0xBFC1E9 */
  transition: box-shadow 0.15s, background 0.1s;
}

.bottom-popup-btn:hover {
  background: linear-gradient(180deg, #494949 0%, #2c2c2c 100%); /* over: dark gradient [0x01000000,0x66000000] */
  box-shadow: 0 0 14px rgba(191, 193, 233, 0.9);
}

/* Volume toggle button (_volumeButton — onVolumeClick → toggleMute)
   TopNavItem.measure(): padding.left+padding.right+iconSlot=6+6+20=32px */
.footer-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s;
}

.footer-sound:hover {
  opacity: 1;
}

/* Chat rooms link — ChatRoomOverviewNavItem.as
     setPadding(2,5) @ line 69 → 2px top/bottom, 5px left/right
     MAX_WIDTH = 180 @ line 54 → measuredWidth cap */
.footer-chatrooms {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;    /* AS: setPadding(2,5) */
  height: 36px;
  max-width: 180px;    /* AS: MAX_WIDTH = 180 */
  cursor: pointer;
}

.footer-chatrooms span {
  font-family: 'Avenier', sans-serif;
  font-weight: 500; /* aveneirMedium — topNavItem style */
  font-size: 10px;  /* topNavItem fontSize=10 */
  color: #666666;   /* topNavItem fontColor=0x666666 */
  text-transform: uppercase; /* ChatRoomOverviewNavItem.initialLabel.text = "CHAT ROOMS" */
  transition: color 0.1s;
}

.footer-chatrooms:hover span {
  color: #222222;
}

/* AS: updateDisplayList lines 332-333
     iconGraphic.width  = userAllowedAccess ? 24 : 16
     iconGraphic.height = userAllowedAccess ? 20 : 13
   Gated on isLoggedIn (+ level≥5 in the original; we simplify to login). */
.footer-chatrooms img {
  width: 16px;
  height: 13px;
  opacity: 0.200; /* iconColor=0x33000000 → getAlpha=51/255=0.200 */
}
body.is-logged-in .footer-chatrooms img {
  width: 24px;
  height: 20px;
}

/* ═══════════════════════════════════════════════════════
   ARCADE BROWSER SIDEBAR  (ArcadeBrowser.as — MODE_HOME)
   navigationType = "accordion" (default)
   Accordian.as: buttonHeight=24; simpleAccordian style: itemPadding=2; visual gap=1px (hardcoded)
   Items: Featured players / Friends playing / Recent opponents
   Pane.as wraps it: same gradient border as games-pane
═══════════════════════════════════════════════════════ */
.browser-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Pane.as: same outer/inner gradient treatment as games-pane */
.browser-pane {
  flex: 1;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.browser-pane-inner {
  background: #ffffff;
  border-radius: 17px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 7px;  /* Pane.as: content.x=padding.left=10 from outer; white inner at border=3 → 10-3=7px from inner edge */
  min-height: 0;
}

/* ─── ACCORDION  (Accordian.as + simpleAccordian style) ──
   buttonHeight = 24 (Accordian.buttonHeight default), itemPadding = 2 (simpleAccordian style override)
   The actual visible 1px gap between buttons comes from the hardcoded _loc5_ += 1 in updateDisplayList.
   simpleAccordianItem:
     backgroundColor: #DDDDDD, fontColor: black, fontSize: 12
     paddingLeft/Right: 8, cornerRadius: 10
     over:             gradient [#DDDDDD, #AAAAAA]
     disabledSelected: gradient [#DDDDDD, #FFFFFF] */
.accordion-item {
  flex-shrink: 0;
}

/* 1px gap between accordion buttons (Accordian.as updateDisplayList: _loc5_ += 1, hardcoded) */
.accordion-item + .accordion-item {
  margin-top: 1px;
}

/* Selected item expands to fill remaining space; order:-1 keeps it at top */
.accordion-item.is-selected {
  flex: 1;
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 0;
}

/* simpleAccordianItem: 24px tall, #DDDDDD bg, black 12px text, cornerRadius=10, paddingLeft/Right=8
   CapType per position (Accordian.as updateDisplayList):
     selected button → CapType.TAB   = border-radius 10px 10px 0 0 (top corners)
     first-after-panel (1 unselected) → CapType.ROUND = border-radius 10px (all corners)
     first-after-panel (2+ unselected) → CapType.TAB  = border-radius 10px 10px 0 0
     last unselected (2+ unselected) → CapType.ROUND_BOTTOM = border-radius 0 0 10px 10px
     middle unselected → CapType.NONE = border-radius 0 */
.accordion-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  padding: 0 8px;
  background: #dddddd;
  border: none;
  border-radius: 0; /* CapType.NONE for middle buttons */
  font-family: 'Avenier', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  user-select: none;
}

/* over: gradient [0xDDDDDD, 0xAAAAAA] */
.accordion-btn:hover {
  background: linear-gradient(180deg, #dddddd 0%, #aaaaaa 100%);
}

/* down: gradient [0xDDDDDD, 0x999999] */
.accordion-btn:active {
  background: linear-gradient(180deg, #dddddd 0%, #999999 100%);
}

/* disabledSelected (active/open): CapType.TAB = top corners only */
.accordion-item.is-selected .accordion-btn {
  background: linear-gradient(180deg, #dddddd 0%, #ffffff 100%);
  border-radius: 10px 10px 0 0; /* CapType.TAB */
  cursor: default;
}

.accordion-item.is-selected .accordion-btn:hover {
  background: linear-gradient(180deg, #dddddd 0%, #ffffff 100%);
}

/* First unselected after panel (2+ unselected): CapType.TAB = top corners */
.accordion-item.is-first-unselected .accordion-btn {
  border-radius: 10px 10px 0 0;
}

/* Last unselected (2+ unselected): CapType.ROUND_BOTTOM = bottom corners */
.accordion-item.is-last-unselected .accordion-btn {
  border-radius: 0 0 10px 10px;
}

/* Only 1 unselected (both first and last): CapType.ROUND = all corners */
.accordion-item.is-first-unselected.is-last-unselected .accordion-btn {
  border-radius: 10px;
}

/* Panel content — only visible when item is selected */
.accordion-panel {
  display: none;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #dddddd transparent;
}

.accordion-item.is-selected .accordion-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* cssBlock = standardCSS: p { font-family:aveneirLight; font-size:12; } body color defaults to textBlock.fontColor=0 (black)
   .actionLink { color:#c00300; text-decoration:underline; } */
.accordion-panel p {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;  /* aveneirLight */
  font-size: 12px;   /* standardCSS p { font-size: 12 } */
  color: #000000;    /* textBlock fontColor=0 (black) */
  line-height: 1.4;
  margin: 0 0 4px;
}

.accordion-panel a {
  color: #000000;          /* standardCSS a { color:#000000; text-decoration:underline; } */
  text-decoration: underline;
}

.accordion-panel a.action-link {
  color: #c00300;          /* standardCSS .actionLink { color:#c00300; text-decoration:underline; } */
  text-decoration: underline;
}

/* ─── PLAYER ROWS (ArcadeBrowserListItem — ArcadePlayerThumbnail + AutoScrollLabelMultiple)
   ArcadeBrowserListItem: setPadding(8, 0) → top/bottom=8, left/right=0
   _thumbnail: ArcadePlayerThumbnail(0,0,40) → 40px size, at x=padding.left=0
   _labels: x = padding.left + 40 + 5 = 45 (5px gap between avatar and text)
   Divider: dashColor=0x22000000=rgba(0,0,0,0.133), composited over white=#DDDDDD ── */
.player-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  text-decoration: none;
  color: #333333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.133);
  transition: background 0.1s;
}

.player-row:hover { background: #f8f8f8; }

.player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
  background: #bbbbbb; /* ArcadePlayerThumbnail→ProfileThumbnail: borderSize=0, borderColor=thumbnail.borderColor=0xBBBBBB */
}

/* Label 0 (main): "label" style in BaseTheme.as: fontColor=0 (black), fontSize=12 */
.player-row-info strong {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 500; /* aveneirMedium — Label default fontFace */
  font-size: 12px;  /* "label" style: fontSize=12 */
  color: #000000;   /* "label" style: fontColor=0 */
  line-height: 1.3;
}

/* Labels 1 & 2: "small" style → fontSize=10 */
.player-row-info span {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #aaaaaa;
  line-height: 1.3;
}

/* XP fill bar — ProgressBar._bar: foregroundColor=0xFFFFFF
   inset by stroke=2 from track, rounded corners */
.footer-xp-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 3px;
  transition: width 0.3s;
  display: block;
}

/* ─── Auth state toggling ───────────────────────────────────────────────────
   auth.js adds .is-logged-in or .is-logged-out to <body>.
   Hide/show nav auth panels accordingly.
   Default (no class yet): show logged-out panel until JS runs.
   ──────────────────────────────────────────────────────────────────────── */
body.is-logged-in  .nav-auth-panel    { display: none !important; }
body.is-logged-out .nav-auth-loggedin { display: none !important; }

/* ── auth-state-specific content elsewhere ── */
/* Logged-in pages (me.html, profile.html, etc.) may use these hooks */
body.is-logged-out .auth-require-login { display: none; }
body.is-logged-in  .auth-show-loggedout { display: none; }

/* CoinNavCounterItem: hidden when logged out (visible=false, includeInLayout=false) */
body.is-logged-in #coinStat { display: flex !important; }
body.is-logged-in #coinStat + .bottom-divider { display: block !important; }

/* Logged-in nav auth panel: hidden by default until auth.js sets is-logged-in on body
   (prevents flash of logged-in nav on first load / when not logged in) */
.nav-auth-loggedin {
  display: none;
  align-items: center;
  height: 36px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  border-radius: 0 0 0 10px;
  flex-shrink: 0;
  overflow: visible;
  gap: 0;
  margin-left: auto;
}
body.is-logged-in .nav-auth-loggedin { display: flex !important; }

/* Username shown in the logged-in nav panel */
.nav-auth-username {
  font-family: 'Avenier', 'Avenir', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #555555;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ArcadeHomePageView: no introPane.y=10 offset, no flex gap (content starts at y=0)
   Keep 36px left for side-tabs; only suppress top padding and gap */
.stage-loggedin {
  padding-top: 0;  /* no introPane.y=10 top offset in ArcadeHomePageView */
  gap: 0;          /* no gap between children (no intro+catalog pair) */
}

/* ArcadeHomePageView has no background gradient — suppress the ::before overlay */
.stage-loggedin::before {
  display: none;
}

/* Logged-in homepage grid: catalog + browser min(350, 35%) (ArcadeHomePageView: Math.floor(Math.min(350,param1*0.35))) */
.homepage-grid-loggedin {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr min(350px, 35%);
  gap: 10px; /* panePadding = 10 */
  min-height: 0;
  position: relative;
  z-index: 1;
}



/* ═══════════════════════════════════════════════════════
   TABBED PANE  (TabbedPane.as — PublicUserPageView)
   toggleSetTabbedPaneLarge: itemPadding=2
   toggleSetTabbedPaneLargeItem: fontSize=12, cornerRadius=10, paddingLeft/Right=8
     up: backgroundColor=#CCCCCC (13421772), fontColor=#FFFFFF
     over: gradient [#CCCCCC,#999999]
     selected: gradient [#DDDDDD,#FFFFFF], fontColor=#000000
   TabbedPane.tabHeight=24
═══════════════════════════════════════════════════════ */

/* Tab strip sits at top of pane, inside outer gradient border */
.tab-strip {
  display: flex;
  gap: 2px;   /* toggleSetTabbedPaneLarge.itemPadding=2 */
  padding: 0;  /* TabbedPane._tabSet.y=10 from outer = 0 from content area; messages.html overrides inline */
  background: transparent;
  flex-shrink: 0;
}

.tab-btn {
  height: 24px;   /* TabbedPane.tabHeight=24 */
  padding: 0 8px;   /* paddingLeft=paddingRight=8 */
  border: none;
  border-radius: 10px 10px 0 0;   /* cornerRadius=10, flat bottom */
  font-family: 'Avenier', sans-serif;
  font-weight: 500;   /* aveneirMedium */
  font-size: 12px;   /* fontSize=12 */
  color: #ffffff;   /* fontColor=0xFFFFFF */
  background: #cccccc;   /* backgroundColor=0xCCCCCC */
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-btn:hover {
  background: linear-gradient(180deg, #cccccc 0%, #999999 100%);   /* over: [0xCCCCCC,0x999999] */
}

.tab-btn.is-active,
.tab-btn:active {
  background: linear-gradient(180deg, #dddddd 0%, #ffffff 100%);   /* selected: [0xDDDDDD,0xFFFFFF] */
  color: #000000;   /* fontColor=0 */
}

/* Tab content area */
.tab-content {
  flex: 1;
  padding: 10px;
  overflow: auto;
  display: none;
}

.tab-content.is-active {
  display: block;
}


/* ═══════════════════════════════════════════════════════
   PUBLIC PROFILE PAGE  (PublicUserPageView.as — profile.html)
   Three separate panes (all ROUND cap), panePadding=10px between each.
   At 1243px: left~402px info, center~621px tabs, right 200px friends.
   pageTitle="people" pageSubtitle="OMG. Make some e-friends..."
═══════════════════════════════════════════════════════ */
.profile-stage {
  display: flex;
  align-items: stretch;
  /* padding from global .stage rule: 14px spacing from nav bars */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 10px;   /* panePadding=10 between all three panes */
}

/* Left pane: info module, default "pane" style, ROUND
   AS: _pane1.width = W - _loc4_ - _loc5_ - 2×panePadding → fills leftover after tabs+side → flex:1 */
.profile-info-pane {
  flex: 1;       /* _pane1 fills whatever's left after 50%-tabs and side pane */
  min-width: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.profile-info-inner {
  background: #ffffff;
  border-radius: 17px;
  padding: 7px;  /* Pane.as: 10px from outer, 3px border → 7px from inner edge */
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Center pane: TabbedPane, ROUND
   AS: _pane2.width = floor(param1 * 0.5) → always 50% of stage width */
.profile-tab-pane {
  width: 50%;    /* _loc5_ = Math.floor(param1 * 0.5) */
  flex-shrink: 0;
  min-width: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.profile-tab-inner {
  background: #ffffff;
  border-radius: 17px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;  /* TabbedPane content scrollable */
  padding: 7px;  /* Pane.as: content.x=10 from outer, border=3 → 7px from inner edge */
}

/* Right pane: friends/ad, ROUND
   AS: _loc4_=200 when param1>1100, else 110 */
.profile-side-pane {
  width: 200px;  /* >1100px wide */
  flex-shrink: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .profile-side-pane { width: 110px; }  /* AS: _loc4_=110 when param1≤1100 */
}

.profile-side-inner {
  background: #ffffff;
  border-radius: 17px;
  padding: 7px;  /* Pane.as: 10px from outer, 3px border → 7px from inner */
  flex: 1;
  overflow: auto;
}

/* User avatar: UserImageAvatarToggleView → PhotoViewer
   PhotoViewer._scrollHolder.graphics.beginFill(16777215=0xFFFFFF) → placeholder = #ffffff */
.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background: #ffffff;
  margin: 0 auto 10px;
  display: block;
  flex-shrink: 0;
}

.profile-username {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;   /* aveneirBold (h3 style) */
  font-size: 26px;    /* getLabelAt(0).label.fontSize = 26 (overrides h3's 20) */
  color: #000000;     /* h3 has no fontColor; label base style fontColor=0=black */
  margin-bottom: 4px;
}

.profile-level {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #999999;
}

/* BigPointDisplay._progressBar: backgroundColor=0x999999, foregroundColor=0xFFFFFF
   height=3, stroke=0, radius=floor(3/2)*2=2px */
.profile-xp-bar {
  width: 80%;
  height: 3px;
  background: #999999;
  border-radius: 1px;
  margin: 6px auto;
  overflow: hidden;
}

.profile-xp-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 1px;
  width: 60%;
}

.profile-stat-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 8px 0;
}

.profile-stat {
  text-align: center;
}

.profile-stat-num {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #333333;
}

.profile-stat-label {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #999999;
  text-transform: uppercase;
}

/* Add Friend button — simpleButtonDark style */
/* simpleButtonHilight: fontSize=11, fontColor=0xFFFFFF, backgroundColor=0xFF8895B5=#8895B5
   _actionButtons.capType=ROUND; height=24; itemPadding=2 */
.profile-add-friend-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  height: 24px;     /* ButtonSet height=24 */
  background: #8895b5;  /* simpleButtonHilight backgroundColor=0xFF8895B5 */
  border: none;
  border-radius: 12px;  /* CapType.ROUND on 24px height = radius=12 */
  font-family: 'Avenier', sans-serif;
  font-size: 11px;   /* simpleButtonHilight fontSize=11 */
  color: #ffffff;    /* fontColor=0xFFFFFF */
  cursor: pointer;
  text-align: center;
}

.profile-add-friend-btn:hover { background: #5a6c9a; } /* over: 0xFF5A6C9A */
.profile-add-friend-btn:active { background: #435072; } /* down: 0xFF435072 */

/* Friends list items */
.profile-friends-list {
  list-style: none;
}

.profile-friend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px dashed rgba(0,0,0,0.133); /* Divider dashColor=0x22000000 */
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
}

.profile-friend-item:hover {
  background: #f5f5f5;
}

.profile-friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #bbbbbb; /* thumbnail style: borderColor=0xBBBBBB → Image._background */
  flex-shrink: 0;
}

.profile-friend-name {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #333333;
}

/* UserOverviewList sub-section structure */
.overview-section {
  margin-bottom: 4px;
}

/* _titleDivider: Divider "dividerDark" dashColor=0x55000000=rgba(0,0,0,0.333) */
.overview-section-divider {
  height: 1px;
  border-top: 1px dashed rgba(0,0,0,0.333);
  margin-bottom: 0;
}

/* _titleLabel: h6 style — fontSize=12, fontFace=aveneirMedium, fontColor=8947848=0x888888 */
.overview-section-header {
  font-family: 'Avenier', sans-serif;
  font-weight: 500;   /* aveneirMedium */
  font-size: 12px;
  color: #888888;     /* 8947848 = 0x888888 */
  padding: 5px 0;     /* _headerBar.setPadding(5,0) */
}

.overview-empty-text {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #555555;
  padding: 4px 0 8px;
  margin: 0;
}

/* _moreButton: "VIEW ALL ACTIVITY" — ShadedButton style */
.overview-more-btn {
  display: block;
  margin: 8px auto 0;
  height: 28px;
  padding: 0 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(218,218,218,0.667) 100%);  /* shadedButton: 0x01FFFFFF→getAlpha=0=transparent, 0xAADADADA→rgba(218,218,218,0.667) */
  border: 1px solid rgba(0,0,0,0.145);
  cursor: pointer;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #000000;
}

/* Feed items */
.profile-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.133); /* Divider dashColor=0x22000000 */
}

.profile-feed-text {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #555555;
  line-height: 1.4;
}

.profile-feed-time {
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  color: #333333;  /* "small" style default color = black; dates shown in dark gray */
  white-space: nowrap;
}

.profile-section-title {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #333333;
  margin: 0 0 8px;
}


/* ═══════════════════════════════════════════════════════
   PRIVATE PROFILE (ME) PAGE  (PrivateUserPageView.as — me.html)
   infoPane: paneTinted ROUND_LEFT width=230
   feedPane: paneLargeTitle ROUND_RIGHT fills middle
   arcadeBrowserPane: pane ROUND, width=250, gap=10px from feedPane
   MIN_INFO_PANE_WIDTH=200, MAX_INFO_PANE_WIDTH=230, RIGHT_PANE_WIDTH=250
═══════════════════════════════════════════════════════ */
.me-stage {
  display: flex;
  align-items: stretch;
  /* padding from global .stage rule: 14px spacing from nav bars */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.me-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;   /* info+feed panes touch (ROUND_LEFT/RIGHT); gap added before right pane */
}

/* infoPane: paneTinted ROUND_LEFT width=230 */
.me-info-pane {
  width: 230px;   /* MAX_INFO_PANE_WIDTH=230 */
  flex-shrink: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px 0 3px 3px;
  display: flex;
  flex-direction: column;
}

.me-info-inner {
  background: #eeeeee;   /* paneTinted backgroundColor=#EEEEEE */
  border-radius: 17px 0 0 17px;
  padding: 7px 10px 7px 7px;  /* ROUND_LEFT: left/top/bottom=10-3=7; right=10-0=10 (no border on seam side) */
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* feedPane: paneLargeTitle ROUND_RIGHT, fills space */
.me-feed-pane {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 0 20px 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px 3px 3px 0;
  display: flex;
  flex-direction: column;
}

.me-feed-inner {
  background: #ffffff;
  border-radius: 0 17px 17px 0;
  padding: 7px 7px 7px 10px;  /* ROUND_RIGHT: right/top/bottom=10-3=7; left=10-0=10 (no border on seam side) */
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;  /* paneLargeTitle content scrollable */
}

/* Right pane column (todo + arcadeBrowser) — gap = panePadding=10 */
.me-right-column {
  width: 250px;   /* RIGHT_PANE_WIDTH=250 */
  flex-shrink: 0;
  margin-left: 10px;   /* panePadding=10 gap from feedPane */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.me-right-pane {
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.me-right-inner {
  background: #ffffff;
  border-radius: 17px;
  padding: 7px;  /* Pane.as: 10px from outer, 3px border → 7px from inner edge */
  flex: 1;
  overflow: auto;
}

/* PrivateUserPageView collapse: when feedPane.width ≤ MIN_FEED_PANE_WIDTH+panePadding=310,
   right column is hidden (feedPane fills all after infoPane).
   feedPane.width = W-490 ≤ 310 → W ≤ 800px */
@media (max-width: 800px) {
  .me-right-column { display: none; }
}

/* Private profile nav — SimpleMenu → contextMenuItem style */
.me-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.me-nav-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;   /* cornerRadius=10 */
  font-family: 'Avenier', sans-serif;
  font-weight: 400;
  font-size: 12px;   /* fontSize=12 */
  color: #000000;   /* fontColor=0 */
  transition: background 0.1s;
}

.me-nav-item:hover {
  background: #cccccc;   /* over: backgroundColor=0xCCCCCC */
}

.me-nav-item:active {
  background: #aaaaaa;   /* down: backgroundColor=0xAAAAAA (getAlpha=1→opaque); fontColor=white */
  color: #ffffff;
}

.me-nav-item.is-active {
  background: #333333;   /* selected: backgroundColor=0x333333 */
  color: #ffffff;   /* selected: fontColor=16777215=white */
}

/* Edit Profile button — bevelButton in private profile */
.me-edit-btn {
  display: block;
  width: 90%;
  margin: 8px auto 0;
  height: 30px;
  background: rgba(0, 0, 0, 0.467);
  border: none;
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #eeeeee;
  cursor: pointer;
}

.me-edit-btn:hover { background: rgba(0, 0, 0, 0.6); }


/* ═══════════════════════════════════════════════════════
   MESSAGES PAGE  (MessagesPageView.as — messages.html)
   Single pane: Pane("paneLargeTitle") CapType.ROUND, fills stage
   pageTitle="messages" pageSubtitle="Send messages to your friends!"
═══════════════════════════════════════════════════════ */
.messages-stage {
  display: flex;
  /* padding from global .stage rule: 14px spacing from nav bars */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.messages-pane {
  flex: 1;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.messages-inner {
  background: #ffffff;
  border-radius: 17px;
  padding: 7px;  /* Pane.as ROUND: all sides border=3 → content.x/y=10 from outer → 10-3=7 from inner */
  flex: 1;
  display: flex;
  flex-direction: column;  /* toolbar at top, list below */
  overflow: hidden;
}

/* Messages list (inbox) — InboxView.setPadding(0): messageGroup at (0,0) */
.messages-list {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* setPadding(6,6,6,0): top=6, right=6, bottom=6, left=0 */
  padding: 6px 6px 6px 0;
  border-top: 1px dashed rgba(0,0,0,0.133); /* Divider dashColor=0x22000000 */
  cursor: pointer;
}

.message-item:first-child { border-top: none; }

.message-item:hover { background: #eeeeee; } /* onMouseOver: backgroundColor=15658734=0xEEEEEE */

/* unread/reply icon slot: IconButton 20x20 */
.message-icon-slot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-self: center;
}

.message-avatar {
  /* ProfileThumbnail size=80 → width=height=80; thumbnail.borderSize=0
     thumbnail style: borderColor=12303291=0xBBBBBB → Image._background colored #bbbbbb */
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: #bbbbbb;
  flex-shrink: 0;
  margin-right: 16px; /* _loc5_=16 gap after thumbnail */
}

.message-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 125px;      /* MessageIndexListItem.infoLabels.width = 125 */
  flex-shrink: 0;
  margin-right: 16px; /* gap after infoLabels = 16 (same as after thumbnail) */
}

/* subject + body column */
.message-body-col {
  flex: 1;
  min-width: 0;
}

.message-sender {
  /* infoLabels[0]: "strong" style → fontFace=aveneirBold, fontSize=12, default color=black */
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #000000;
}

.message-time {
  /* infoLabels[1]: "small" style + fontColor=3355443=0x333333; fontSize=10 */
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  color: #333333;
  white-space: nowrap;
}

.message-subject {
  /* subjectLabel: "strong" style → fontFace=aveneirBold, fontSize=12, black */
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #000000;
}

.message-preview {
  /* bodyBlock: "p" style → fontSize=12, fontLeading=2, default color=black */
  font-family: 'Avenier', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* MessageView — single message thread + ReplyListItem (messages.html)
   MessageListItem: setPadding(6,6,6,0); itemPadding=20 between items
   ReplyListItem: replyInput.height=110; replyButton BevelButton at right */
.msg-detail {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.msg-detail.is-visible {
  display: flex;
}

.msg-detail-back {
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Scrollable thread container */
.msg-detail-thread {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding-bottom: 4px;
}

/* MessageListItem layout: same as message-item but full body shown */
.msg-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 6px 6px 6px 0;
  border-top: 1px dashed rgba(0,0,0,0.133);
}

.msg-detail-item:first-child { border-top: none; }

.msg-detail-avatar {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: #bbbbbb; /* thumbnail style: borderColor=0xBBBBBB → Image._background */
  flex-shrink: 0;
  margin-right: 16px;
}

.msg-detail-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 125px;
  flex-shrink: 0;
  margin-right: 16px;
}

.msg-detail-body-col { flex: 1; min-width: 0; }

.msg-detail-sender {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #000;
}

.msg-detail-date {
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  color: #333333;
}

.msg-detail-subject {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #000;
  margin-bottom: 4px;
}

.msg-detail-text {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000;
  line-height: 1.5;
}

/* ReplyListItem: divider + "Reply:" label + textarea(110px) + Draw + REPLY */
.msg-detail-reply {
  flex-shrink: 0;
  padding: 10px 0 0 0;
}

.msg-detail-reply-divider {
  /* Divider from ReplyListItem: x=237 offset — sits at same x as avatar/content start */
  height: 1px;
  background: rgba(0,0,0,0.133);
  margin: 0 6px 10px 237px; /* offset = 237 = avatar(80) + gap(16) + meta(125) + gap(16) = 237 */
}

.msg-detail-reply-label {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #333;
  margin: 0 6px 4px 237px;
}

.msg-detail-reply-textarea {
  display: block;
  width: calc(100% - 237px - 6px);
  margin-left: 237px;
  height: 110px;  /* replyInput.height = 110 */
  resize: none;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  padding: 5px 6px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.msg-detail-reply-textarea:focus { border-color: rgba(0,0,0,0.4); }

.msg-detail-reply-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}


/* ComposeMessageModule (messages.html compose view)
   Layout from ComposeMessageModule.updateDisplayList:
   labels right-aligned | inputs fill width; textarea fills height;
   sendButton(130x30) + drawingControl(75px) at bottom-right */
.msg-compose {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 10px 7px;
  overflow: hidden;
}

.msg-compose.is-visible {
  display: flex;
}

/* Label + input row (To/Subject) */
.msg-compose-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.msg-compose-label {
  text-align: right;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #333333;
  white-space: nowrap;
  padding-right: 5px;
}

/* TextInput style for compose fields (reuse popup-input styling) */
.msg-compose-input {
  height: 26px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  padding: 0 6px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

.msg-compose-input:focus {
  border-color: rgba(0,0,0,0.4);
}

/* Message textarea row — fills remaining vertical space */
.msg-compose-message-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  flex: 1;
  gap: 5px;
  min-height: 0;
  margin-bottom: 5px;
}

.msg-compose-textarea {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  padding: 5px 6px;
  resize: none;
  outline: none;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.msg-compose-textarea:focus {
  border-color: rgba(0,0,0,0.4);
}

/* Bottom row: Draw button + Send button (BevelButton 130×30) */
.msg-compose-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 75px; /* label column offset */
}

/* "Draw" button (AttachDrawingControl.addButton: width=75) */
.msg-compose-draw-btn {
  width: 75px;
  height: 30px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  background: linear-gradient(180deg, #f8f8f8 0%, #e0e0e0 100%);
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #333;
  cursor: pointer;
}

/* BevelButton "SEND" 130×30, fontSize=12 — default "bevelButton" style
   backgroundColor=0xFFFFFF, fontColor=0 (black), fontFace=aveneirLight
   border1Color=0x25000000=rgba(0,0,0,0.145) (3px outer)
   border2Color=0x18000000=rgba(0,0,0,0.094) (1px inner)
   accentColor=0x44BEBDBD=rgba(190,189,189,0.267) at bottom 40% */
.msg-compose-send-btn {
  width: 130px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.145);
  border-radius: 11px; /* bevelButton default param5=14 - 3 = 11 (renderRoundBorderBox uses radius-2) */
  background: linear-gradient(180deg, #ffffff 55%, rgba(190,189,189,0.267) 100%);
  font-family: 'Avenier', sans-serif;
  font-weight: 300;  /* aveneirLight */
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  box-sizing: border-box;
}

.msg-compose-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.msg-compose-send-btn:not(:disabled):hover {
  /* over: backgroundGradient=[0x01C6C6C6,0xFFC6C6C6] → transparent→solid #C6C6C6 */
  background: linear-gradient(180deg, rgba(198,198,198,0) 0%, #c6c6c6 100%);
}

/* Back/cancel link row above compose */
.msg-compose-back {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.msg-compose-back-btn {
  background: none;
  border: none;
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #888888;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.msg-compose-back-btn:hover { color: #555555; }


/* ═══════════════════════════════════════════════════════
   BROWSE PAGE  (BrowsePageView.as — people.html)
   _pane1.width = 140*5+20 = 720, centered, height=param2
   Pane style = "pane" (default): gradient [#F1F1F1,#DDDDDD], inner #FFFFFF
   paneTitle: fontSize=10, fontColor=#999999, fontFace=aveneirMedium
   _peopleModule.gridColumns=5, itemSize=138, itemPadding=3
═══════════════════════════════════════════════════════ */
/* BrowsePageView: no side-tabs, pane centered via x=param1/2-width/2 */
.browse-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* padding from global .stage rule: consistent spacing from nav bars */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* BrowsePageView has no gradient background overlay */
.browse-stage::before {
  display: none;
}

.browse-pane-wrap {
  width: 720px;   /* 140*5+20 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Pane.as "pane" style — same outer gradient/shadow as games-pane */
.browse-pane {
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px;   /* 3px border inset */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.browse-pane .pane-inner {
  background: #ffffff;
  border-radius: 17px;
  padding: 7px;  /* Pane.as: 10px from outer, 3px border → 7px from inner edge */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

/* pane title row — chromePadding.top=20 when title set; height=20px, flex centering */
.pane-title-row {
  height: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* paneTitle style: fontSize=10, fontColor=0x999999, fontFace=aveneirMedium */
.pane-title-label {
  font-family: 'Avenier', sans-serif;
  font-weight: 500;   /* aveneirMedium */
  font-size: 10px;
  color: #999999;     /* 10066329 = 0x999999 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* paneTitleLarge style: fontSize=12, fontColor=0x777777 */
.pane-title-label-large {
  font-family: 'Avenier', sans-serif;
  font-weight: 400;
  font-size: 12px;   /* paneTitleLarge.fontSize=12 */
  color: #777777;    /* 7829367 = 0x777777 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* PeopleModule: gridColumns=5, itemSize=138, itemPadding=3 */
.browse-people-grid {
  display: grid;
  grid-template-columns: repeat(5, 138px);
  gap: 3px;   /* itemPadding=3 */
  flex: 1;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.browse-people-grid::-webkit-scrollbar {
  display: none;
}

/* ThumbnailProfileDisplay: size=138, _img sprite = UiRender.renderRect(_img, 15658734=0xEEEEEE)
   _img sits above _background in display list; opaque #eeeeee shows as placeholder */
.browse-player-thumb {
  width: 138px;
  height: 138px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: #eeeeee;  /* _img.graphics = 0xEEEEEE (fully opaque, covers _background) */
}

.browse-player-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* Caption overlay: renderRect(0x99000000) = rgba(0,0,0,0.6)
   ThumbnailProfileDisplay: infoHolder scrollRect default shows 28px from bottom.
   onRollOver → Tweener easeOutCubic 0.3s scrolls up to show full caption.
   onRollOut  → Tweener easeInOutCubic 0.3s returns to 28px visible. */
.browse-player-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);   /* 0x99000000 */
  padding: 4px 5px;
  z-index: 2;
  /* Show only 28px by default (matching infoHolderPos=28) */
  transform: translateY(calc(100% - 28px));
  /* onRollOut: easeInOutCubic 0.3s (base transition applies when leaving hover) */
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.browse-player-thumb:hover .browse-player-caption,
.browse-player-thumb:focus-within .browse-player-caption {
  transform: translateY(0);
  /* onRollOver: easeOutCubic 0.3s (hover transition applies when entering hover) */
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* captionHeader style: fontSize=10, fontFace=aveneirBold */
.browse-player-name {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;   /* aveneirBold */
  font-size: 10px;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AbstractProfileDisplay._background: sits BELOW _img in display list (added before _img).
   In Flash _img (opaque #eeeeee / photo) fully covers _background → no visible tint effect.
   The ::after here is hidden behind the img (z-index 0 < img z-index 1) — matches Flash behavior.
   profileDisplay.backgroundColor=0x999999, alpha=0.3 (up); over=0x333333, alpha=0.5 (hover) */
.browse-player-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #999999;  /* profileDisplay.backgroundColor=0x999999 */
  opacity: 0.3;
  transition: background 0s, opacity 0.1s;
  pointer-events: none;
  z-index: 0;
}

.browse-player-thumb:hover::after {
  background: #333333;  /* over.backgroundColor=0x333333 */
  opacity: 0.5;
}

/* Online indicator: small green dot in the top-right of the tile */
.browse-player-thumb.is-online::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3dc93d;
  border: 1px solid #ffffff;
  box-shadow: 0 0 4px rgba(61, 201, 61, 0.8);
  z-index: 3;
  pointer-events: none;
}

/* caption style: fontSize=10, fontFace=aveneirLight */
.browse-player-level {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 300;   /* aveneirLight */
  font-size: 10px;
  color: #ffffff;
  line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════
   INFO PAGE  (InfoPageView.as v3 — info.html)
   navPane: Pane("paneTinted") ROUND_LEFT, width=200
     backgroundColor=#EEEEEE (15658734), gradient [#F1F1F1,#DDDDDD]
   contentPane: Pane("paneLargeTitle") ROUND_RIGHT, fills rest
     backgroundColor=#FFFFFF, gradient [#F1F1F1,#DDDDDD]
     title uses paneTitleLarge: fontSize=12, fontColor=#777777
   InfoNavModule: SimpleMenuList of info sections
═══════════════════════════════════════════════════════ */
.info-stage {
  display: flex;
  align-items: stretch;
  /* padding from global .stage rule: 14px spacing from nav bars */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.info-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* paneTinted ROUND_LEFT: borderRadius TL=20 TR=0 BL=20 BR=0 */
.info-nav-pane {
  width: 200px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px 0 3px 3px;   /* no right gap — butts against content pane */
  display: flex;
  flex-direction: column;
}

.info-nav-inner {
  background: #eeeeee;   /* paneTinted: backgroundColor=0xEEEEEE */
  border-radius: 17px 0 0 17px;
  padding: 7px 10px 7px 7px;  /* ROUND_LEFT: left/top/bottom=10-3=7; right=10-0=10 (no border on seam side) */
  flex: 1;
  overflow: auto;
}

/* paneLargeTitle ROUND_RIGHT */
.info-content-pane {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, #f1f1f1 0%, #dddddd 100%);
  border-radius: 0 20px 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
  padding: 3px 3px 3px 0;   /* no left gap — butts against nav pane */
  display: flex;
  flex-direction: column;
}

.info-content-inner {
  background: #ffffff;
  border-radius: 0 17px 17px 0;
  padding: 7px 7px 7px 10px;  /* ROUND_RIGHT: right/top/bottom=10-3=7; left=10-0=10 (no border on seam side) */
  flex: 1;
  overflow: auto;
}

/* Info nav list — SimpleMenuList style */
.info-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-nav-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.133);   /* Divider dashColor=0x22000000 */
  margin: 4px 0;
}

/* Nav items: SimpleMenu → contextMenuItem style */
.info-nav-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;   /* cornerRadius=10 */
  font-family: 'Avenier', sans-serif;
  font-weight: 400;
  font-size: 12px;   /* fontSize=12 */
  color: #000000;   /* fontColor=0 */
  transition: background 0.1s;
}

.info-nav-item:hover {
  background: #cccccc;   /* over: backgroundColor=0xCCCCCC */
}

.info-nav-item:active {
  background: #aaaaaa;   /* down: backgroundColor=0xAAAAAA (getAlpha=1→opaque); fontColor=white */
  color: #ffffff;
}

.info-nav-item.is-active {
  background: #333333;   /* selected: backgroundColor=0x333333 */
  color: #ffffff;   /* selected: fontColor=white */
}

/* Info content text defaults */
.info-content-inner h2 {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  color: #333333;
}

.info-content-inner p {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════
   POPUP SYSTEM  (PopupManager.as + Window.as)
   dimmer: renderRect(0xCC000000) = rgba(0,0,0,0.8) full stage
   Window chrome:
     topBarHeight=33, cornerRadius=20, padding=10 (or 20 for darkWindow)
     foregroundGradient=[#FFFFFF,#DADADA] (title bar gradient)
     backgroundColor=#FFFFFF (content area) or #333333 (darkWindow)
     accentColor=#D8D8D8 (divider between title bar and content)
     DropShadowFilter(8,90°,black,0.6,25,25) → box-shadow
     Close btn: 16px × 16px, cornerRadius=6, CHROME_PADDING=8 from right
   darkWindow: backgroundColor=#333333 (but filled by AbstractBackgroundPopup)
   AbstractBackgroundPopup: gradient [#4C4C4C,#292929], stripes alpha=0.02
   feedbackWindow: foregroundGradient=[#FF0000,#DE0000], fontColor=#FFFFFF
═══════════════════════════════════════════════════════ */

/* Full-stage dimmer */
.popup-dimmer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);   /* 0xCC000000 */
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.popup-dimmer.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Window chrome outer wrapper */
.popup-window {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);   /* DropShadowFilter(8,90,black,0.6,25) */
  overflow: hidden;
  flex-shrink: 0;
}

/* Title bar: foregroundGradient=[#FFFFFF,#DADADA], height=33 */
.popup-titlebar {
  height: 33px;   /* _topBarHeight=33 */
  background: linear-gradient(180deg, #ffffff 0%, #dadada 100%);
  display: flex;
  align-items: center;
  padding: 0 8px;   /* CHROME_PADDING=8 */
  border-bottom: 1px solid #d8d8d8;   /* accentColor=0xD8D8D8 */
  position: relative;
  cursor: default;
}

/* windowTitle style: fontSize=12, fontColor=0 (black) */
.popup-title-text {
  font-family: 'Avenier', sans-serif;
  font-weight: 500;   /* aveneirMedium */
  font-size: 12px;
  color: #000000;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button: CHROME_CONTROL_SIZE=16, cornerRadius=6
   simpleButtonDark states: up=rgba(0,0,0,0.467), over=rgba(0,0,0,0.6) */
.popup-close-btn {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.467);   /* simpleButtonDark up */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #eeeeee;
  font-size: 9px;
  line-height: 1;
  font-family: sans-serif;
  padding: 0;
}

.popup-close-btn:hover  { background: rgba(0, 0, 0, 0.6); }
.popup-close-btn:active { background: rgba(0, 0, 0, 0.733); }

/* Standard white content area */
.popup-content {
  background: #ffffff;   /* backgroundColor */
  padding: 10px;         /* setPadding(10) */
}

/* feedbackWindow: red title bar [#FF0000,#DE0000], fontColor=#FFFFFF */
.popup-window--feedback .popup-titlebar {
  background: linear-gradient(180deg, #ff0000 0%, #de0000 100%);
  border-bottom-color: rgba(0, 0, 0, 0.133);   /* accentColor=0x22000000 */
}

.popup-window--feedback .popup-title-text {
  color: #ffffff;   /* feedbackWindowTitle: fontColor=0xFFFFFF */
}

/* darkWindow: AbstractBackgroundPopup fills content with [#4C4C4C,#292929]
   padding=20 around module content */
.popup-window--dark .popup-content {
  background: linear-gradient(180deg, #4c4c4c 0%, #292929 100%);
  padding: 20px;   /* popup config: padding=20 */
}

/* Promo popup (AbstractPromoPopup): standard titlebar + background image header + logo overlay
   overflow:visible so logo (positioned at negative left) extends outside popup bounds */
.popup-window--promo {
  overflow: visible;
  background: linear-gradient(180deg, #4c4c4c 0%, #292929 100%);   /* AbstractBackgroundPopup gradient */
}

/* Promo titlebar: same chrome as regular popup, but needs rounded top corners since
   parent overflow:visible won't clip them */
.popup-window--promo .popup-titlebar {
  border-radius: 20px 20px 0 0;
}

/* Promo popup content area is transparent — gradient comes from popup-window--promo
   position+z-index: in Flash the canvas was drawn AFTER the logo in the display list,
   so inputs appeared above the logo. z-index:11 replicates that stacking order. */
.popup-window--promo .popup-content {
  background: transparent;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 11;
}

/* Background image strip below titlebar (AbstractBackgroundImagePopup.backgroundImage)
   position:relative so alt-signup can be absolute inside */
.popup-promo-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
}

.popup-promo-header--login  { height: 70px; }   /* LoginPopup: imageSize=70 */
.popup-promo-header--signup { height: 35px; }   /* SignupPopup: imageSize=35 */
.popup-promo-header--signup .popup-bg-img { opacity: 0.5; }  /* SignupPopup: backgroundImage.alpha=0.5 */

.popup-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OMGPOP logo (vectorLogoWeather, rotation=-3deg, pointer-events:none)
   AbstractPromoPopup adds the logo as a child of promoHolder, which is itself
   a content child of the popup. The content area origin sits just below the
   33px titlebar, so the logo's absolute position is titlebar(33) + logo.y.
   The popup-window has overflow:visible so negative tops bleed above. */
.popup-promo-logo {
  position: absolute;
  pointer-events: none;
  transform: rotate(-3deg);
  transform-origin: top left;
  z-index: 10;
}

/* LoginPopup.createChildren: logo.x=-45, logo.y=-37, scale = 280/logo.width
   → absolute top = 33 + (-37) = -4 */
.popup-promo-logo--login  { width: 280px; left: -45px; top: -4px; }
/* SignupPopup.createChildren: logo.x=-20, logo.y=-35, scale = 180/logo.width
   → absolute top = 33 + (-35) = -2 */
.popup-promo-logo--signup { width: 180px; left: -20px; top: -2px; }

/* "You can also log in with" + AIM icon — _alternateSignupHolder in signup promoHolder
   Positioned at right side of the header strip, vertically centered */
.popup-alt-signup {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.popup-alt-signup-text {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.popup-alt-signup-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* Explicit popup-window widths — logo is positioned relative to this, so width must be exact */
#loginPopup  .popup-window { width: 500px; }
#signupPopup .popup-window { width: 380px; }

/* Error message displayed inside popup on failed login/signup */
.popup-error-msg {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #ff6b6b;
  margin-top: 4px;
  margin-bottom: 2px;
  min-height: 14px;
  display: none;   /* shown via JS when there's an error */
}
.popup-error-msg.is-visible { display: block; }

/* ═══════════════════════════════════════════════════════
   CHAT ROOMS  (ChatRoomWindow.as + ChatRoomHeader.as)
   ChatRoomWindow extends AbstractBackgroundPopup → dark gradient body.
   backgroundScreen.height=70 → header is 70px tall.
   Tab buttons: 115×30, simpleButton tab style, 2px gap.
   List items: 50px tall (ChatRoomListItem), 10px horizontal padding.
   Chat messages area + input below header fill the rest of the window.
═══════════════════════════════════════════════════════ */

#chatroomsPopup .popup-window {
  width: 680px;
  max-width: 95vw;
  height: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

/* Chat-room body uses the AbstractBackgroundPopup gradient */
.chatroom-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Header: 70px tall, padding 5,7 (ChatRoomHeader.setPadding(5,7)) */
.chatroom-header {
  height: 70px;
  flex-shrink: 0;
  padding: 5px 7px;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.chatroom-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Room name: h3 style (strongWhite), fontSize=14, aveneirBold */
.chatroom-title {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Room subject + participants: small style, 10px aveneirLight */
.chatroom-subtitle {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tab group: 3 buttons 115×30, 2px gap, bottom-aligned */
.chatroom-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

/* simpleButton tab-cap: flat bottom, rounded top. fontColor=white,
   bg default=rgba(255,255,255,0.133), selected=rgba(255,255,255,0.28) */
.chatroom-tab {
  width: 115px;
  height: 30px;
  border: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.133);
  color: #ffffff;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.chatroom-tab:hover        { background: rgba(255, 255, 255, 0.2); }
.chatroom-tab.is-selected  {
  background: rgba(255, 255, 255, 0.28);
  font-weight: 700;
}

/* View stack: fills below the header */
.chatroom-view-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.chatroom-view {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.chatroom-view.is-visible { display: flex; }

/* ─── CHAT view ───────────────────────────────────────── */
.chatroom-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.4;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.chatroom-messages::-webkit-scrollbar { width: 6px; }
.chatroom-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

.chatroom-msg { margin-bottom: 4px; word-wrap: break-word; }
.chatroom-msg-user { font-weight: 700; color: #cfe9ff; margin-right: 6px; }
.chatroom-msg-body { color: inherit; }
.chatroom-msg.is-system {
  color: #abaaab; /* 0xABAAAB, matches ChatMessage join/leave/welcome */
  font-style: italic;
}
.chatroom-msg.is-self .chatroom-msg-user { color: #8fe38f; }

/* Composer row at the bottom of the chat view */
.chatroom-composer {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.chatroom-composer input {
  flex: 1;
  height: 28px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  padding: 0 12px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  outline: none;
}
.chatroom-composer input:disabled {
  background: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}
.chatroom-composer button {
  height: 28px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #dddddd 100%);
  color: #000000;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
}
.chatroom-composer button:hover    { background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%); }
.chatroom-composer button:disabled { opacity: 0.5; cursor: default; }

/* ─── ROOM LIST view ──────────────────────────────────── */
.chatroom-list-subtabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chatroom-list-subtab {
  height: 22px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  background: transparent;
  color: #cccccc;
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}
.chatroom-list-subtab.is-selected {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.chatroom-list-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.chatroom-list-scroll::-webkit-scrollbar { width: 6px; }
.chatroom-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

/* ChatRoomListItem: height=50, padding(10,0) horizontal */
.chatroom-list-item {
  position: relative;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.133);
}
.chatroom-list-item-info {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}
.chatroom-list-item-name {
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatroom-list-item-overview {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* LiteButton "JOIN" / "LEAVE" — 70×20, simpleButtonHilight */
.chatroom-join-btn {
  width: 70px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
  color: #000000;
  font-family: 'Avenier', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.chatroom-join-btn:hover { background: linear-gradient(180deg, #ffffff 0%, #ccc 100%); }
.chatroom-join-btn.is-joined {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* ─── INFORMATION view ───────────────────────────────── */
.chatroom-info {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.6;
}
.chatroom-info h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}
.chatroom-info p { margin: 0 0 10px; color: rgba(255, 255, 255, 0.82); }
.chatroom-info ul { margin: 0 0 10px 20px; color: rgba(255, 255, 255, 0.82); }
.chatroom-info li { margin-bottom: 4px; }

/* Footer-bar "Chat Rooms" button is now clickable */
.footer-chatrooms {
  cursor: pointer;
}
.footer-chatrooms:hover {
  opacity: 0.85;
}

/* ─── LOGIN POPUP  width=500, canvas.y=imageSize+20=90 ─── */
.popup-login {
  width: 460px;   /* 500 - 2×20 padding */
}

.popup-login-inner {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* Left column: width=290 */
.popup-login-left {
  width: 290px;
  flex-shrink: 0;
}

/* Vertical divider: dividerWhite → rgba(255,255,255,0.184) */
.popup-login-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.184);
  margin: 0;
  flex-shrink: 0;
}

/* Right column: 500-40-290=170px */
.popup-login-right {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  box-sizing: border-box;
}

/* ─── SIGNUP POPUP  width=380, canvas.x=10, inputs=360×35 ─── */
.popup-signup {
  width: 340px;   /* 380 - 2×20 padding */
}

/* emailLabel.setMargin(45,0,0,0): 45px top margin clears logo that hangs into content area */
.popup-label--logo-clear { margin-top: 45px; }

/* ─── FEEDBACK POPUP  width=600 ─── */
.popup-feedback {
  width: 600px;
}

/* ─── FORGOT PASSWORD POPUP  width≈390 (370px input + 2×10 padding) ─── */
.popup-forgotpw {
  width: 390px;
}

/* ─── FIND FRIENDS POPUP  totalWidth=400 ─── */
.popup-findfriends {
  width: 400px;
}

/* ─── CREATE MATCH POPUP ─── */
.popup-creatematch {
  width: 420px;
}

.creatematch-label {
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #555555;
  display: block;
  margin-bottom: 6px;
  margin-top: 14px;
}

.creatematch-label:first-child { margin-top: 0; }

.creatematch-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.creatematch-name-input {
  flex: 1;
  height: 32px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #333;
  box-sizing: border-box;
}

.creatematch-name-input:focus { outline: none; border-color: #999; }

.creatematch-shuffle-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #e8e8e8;
  border: 1px solid #cccccc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.creatematch-shuffle-btn:hover { background: #ddd; }

/* Public / Private toggle */
.creatematch-toggle {
  display: flex;
  border: 1px solid #cccccc;
  border-radius: 4px;
  overflow: hidden;
}

.creatematch-toggle-btn {
  flex: 1;
  height: 30px;
  border: none;
  background: #f5f5f5;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  border-right: 1px solid #cccccc;
}

.creatematch-toggle-btn:last-child { border-right: none; }

.creatematch-toggle-btn.is-active {
  background: #d0d0d0;
  color: #333;
  font-weight: 600;
}

.creatematch-toggle-btn:hover:not(.is-active) { background: #ebebeb; }

/* Player count selector */
.creatematch-count-row {
  display: flex;
  gap: 6px;
}

.creatematch-count-btn {
  flex: 1;
  height: 30px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #f5f5f5;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.creatematch-count-btn.is-active {
  background: #b0b8c8;
  border-color: #8898b0;
  color: #ffffff;
  font-weight: 600;
}

.creatematch-count-btn:hover:not(.is-active) { background: #ebebeb; }

.creatematch-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 14px 0;
}

.creatematch-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.creatematch-more-btn {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: auto;
}

.creatematch-cancel-btn {
  height: 34px;
  padding: 0 20px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  background: #f5f5f5;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #555;
  cursor: pointer;
}

.creatematch-cancel-btn:hover { background: #e8e8e8; }

.creatematch-go-btn {
  height: 34px;
  padding: 0 20px;
  border-radius: 4px;
  border: none;
  background: linear-gradient(180deg, #c7e9fa 0%, #57beef 100%);
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.creatematch-go-btn:hover { background: linear-gradient(180deg, #d8f0ff 0%, #7fcef5 100%); }

/* ─── Shared popup form styles ─── */
.popup-label {
  display: block;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;   /* "white" style: fontColor=0xFFFFFF */
  margin-bottom: 3px;
  margin-top: 8px;
}

.popup-label:first-child { margin-top: 0; }

/* "white" label style alpha=0.7 for alternateSignups label */
.popup-label--muted { opacity: 0.7; }

.popup-input {
  display: block;
  width: 100%;
  height: 35px;   /* TextInput height=35 from AS */
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  box-sizing: border-box;
  margin-bottom: 10px;   /* margin.bottom=10 from AS */
}

.popup-input:focus {
  outline: none;
  border-color: #999999;
}

/* BevelButton "LOG IN" / "SIGN UP!" — bevelButtonColor
   color=4283940591=0xFF57BEEF → tint sky blue rgb(87,190,239)
   bevelButtonColor backgroundGradient=[0xAAFFFFFF,0x01FFFFFF] over tint:
     top: lerp(#57BEEF, #fff, 0.667) ≈ #C7E9FA  bottom: #57BEEF
   height=50 from AS constructor; fontSize=15 (bevelButtonColor style) */
.popup-submit-btn {
  height: 50px;
  background: linear-gradient(180deg, #c7e9fa 0%, #57beef 100%);
  border: none;
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;   /* aveneirBold */
  font-size: 15px;    /* bevelButtonColor: fontSize=15 */
  color: #ffffff;
  cursor: pointer;
  padding: 0 30px;    /* setPadding(0,30) */
}

.popup-submit-btn:hover  { background: linear-gradient(180deg, #d8f0ff 0%, #7fcef5 100%); }
.popup-submit-btn:active { background: linear-gradient(180deg, #57beef 0%, #3da8df 100%); }

/* SimpleButton "SIGN UP NOW" — simpleButtonWhite */
.popup-signup-link-btn {
  display: block;
  width: 100%;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
}

.popup-signup-link-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Password label row: "Password" left, "I forgot" right */
.popup-password-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Forgot password link */
.popup-forgot-link {
  color: #999999;
  font-size: 11px;
  font-family: 'Avenier', sans-serif;
}

/* Remember me row */
.popup-remember-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 -20px;   /* setMargin(10,0,-20,0) in AS */
}

.popup-remember-row label {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
}

/* TextBlock "Still haven't signed up?" fontSize=14 */
.popup-signup-prompt {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #ffffff;
  margin-top: 1px;
  display: block;
}

/* TOS text: fontSize=10, fontColor=#BBBBBB */
.popup-tos-text {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #bbbbbb;
  margin: 5px 0;
  line-height: 1.4;
}

.popup-tos-text a {
  color: #999999;
}

/* Feedback form text (600px wide, fontColor=#FFFFFF) */
.popup-feedback-text {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.4;
}

.popup-feedback-text a {
  color: #ffffff;
  text-decoration: underline;
}

/* ComboBox — 200px wide */
.popup-select {
  width: 200px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  margin-bottom: 10px;
}

/* TextInputScrollGroup: 600×200 */
.popup-textarea {
  width: 100%;
  height: 200px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  resize: none;
  box-sizing: border-box;
}

/* Send button — right-aligned: margin.left = 600 - button.width */
.popup-send-btn {
  display: block;
  margin-left: auto;
  margin-top: 20px;
  height: 50px;
  background: linear-gradient(180deg, #c7e9fa 0%, #57beef 100%);
  border: none;
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  padding: 0 20px;
}

.popup-send-btn:hover { background: linear-gradient(180deg, #d8f0ff 0%, #7fcef5 100%); }

/* Find Friends form */
.popup-friends-row {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.popup-input-sm {
  height: 30px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0 6px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

.popup-at-sign {
  padding: 0 4px;
  font-family: 'Avenier', sans-serif;
  font-size: 20px;
  color: #333333;
  line-height: 30px;
}

.popup-disclaimer {
  font-family: 'Avenier', sans-serif;
  font-size: 11px;
  color: #777777;
  margin: 6px 0 10px;
}

/* WindowButtonSet "Find" / "Add" / "Invite" button */
.popup-action-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.popup-action-btn button {
  height: 50px;
  padding: 0 20px;
  background: linear-gradient(180deg, #c7e9fa 0%, #57beef 100%);
  border: none;
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
}

.popup-action-btn button:hover { background: linear-gradient(180deg, #d8f0ff 0%, #7fcef5 100%); }

/* Reset Password / Forgot Password */
.popup-desc-text {
  font-family: 'Avenier', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333333;
  margin-bottom: 10px;
  line-height: 1.4;
  width: 370px;
}

.popup-input-wide {
  width: 370px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'Avenier', sans-serif;
  font-size: 12px;
  color: #000000;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.popup-reset-btn {
  display: block;
  margin-left: auto;
  height: 50px;
  background: linear-gradient(180deg, #c7e9fa 0%, #57beef 100%);
  border: none;
  border-radius: 4px;
  font-family: 'Avenier', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  padding: 0 20px;
}

.popup-reset-btn:hover { background: linear-gradient(180deg, #d8f0ff 0%, #7fcef5 100%); }

/* CHAT INPUT ROW */
.chat-input-row { display: flex; gap: 4px; padding: 4px 0 2px; flex-shrink: 0; }
.chat-input { flex:1; height:26px; border:1px solid #bbbbbb; border-radius:4px; padding:0 6px; font-family:'Avenier',sans-serif; font-size:11px; color:#333; background:#fff; box-sizing:border-box; }
.chat-input:focus { outline:none; border-color:#57beef; }
.chat-send-btn { height:26px; padding:0 10px; background:linear-gradient(180deg,#57beef 0%,#3a9fd0 100%); border:none; border-radius:4px; color:#fff; font-family:'Avenier',sans-serif; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; }
.chat-login-notice { font-family:'Avenier',sans-serif; font-size:11px; color:#777; padding:4px 0; text-align:center; flex-shrink:0; }
.chat-login-notice a { color:#c00300; }
.chat-msg--system { color:#999; font-size:10px; font-style:italic; }

/* TOAST NOTIFICATIONS */
.lobby-toast { position:fixed; bottom:70px; right:16px; min-width:260px; max-width:380px; background:rgba(30,30,30,0.93); color:#fff; font-family:'Avenier',sans-serif; font-size:12px; padding:10px 36px 10px 14px; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.5); z-index:9999; opacity:0; transform:translateY(10px); transition:opacity 0.25s ease,transform 0.25s ease; pointer-events:auto; line-height:1.4; }
.lobby-toast.is-visible { opacity:1; transform:translateY(0); }
.lobby-toast--success { border-left:4px solid #50c040; }
.lobby-toast--friend  { border-left:4px solid #57beef; }
.lobby-toast--invite  { border-left:4px solid #e0a020; }
.toast-accept-btn { background:#57beef; color:#fff; border:none; border-radius:3px; padding:2px 8px; cursor:pointer; font-family:'Avenier',sans-serif; font-size:11px; font-weight:700; margin-left:6px; }
.toast-join-link { color:#e0c040; font-weight:700; margin-left:6px; }
.toast-decline-btn { position:absolute; top:6px; right:8px; background:none; border:none; color:rgba(255,255,255,0.5); cursor:pointer; font-size:13px; padding:0; line-height:1; }
.toast-decline-btn:hover { color:#fff; }

/* PUBLIC LOBBY LIST */
.lobby-list-entries { display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.lobby-list-entry { display:flex; align-items:center; justify-content:space-between; padding:5px 8px; background:#f5f5f5; border-radius:4px; font-family:'Avenier',sans-serif; font-size:11px; transition:background 0.1s; cursor:pointer; }
.lobby-list-entry:hover { background:#e8f4ff; }
.lobby-list-host { color:#333; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.lobby-list-count { color:#57beef; font-weight:700; margin-left:8px; flex-shrink:0; }


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY POLISH — :focus-visible states
   ─────────────────────────────────────────────────────
   The original SWF source had no keyboard-focus affordances
   (Flash used tab-order but no visual ring). These rules add
   keyboard-only focus rings that don't interfere with mouse
   interaction (:focus-visible excludes pointer focus).
   Grouped here to keep the SWF-faithful blocks above untouched.
═══════════════════════════════════════════════════════ */

/* Suppress the browser default on everything that already has a styled state,
   then re-enable only for keyboard focus. */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* ─── Light-chrome focus ring (on white/gray backgrounds) ─── */
.nav-item > a:focus-visible,
.nav-direct:focus-visible,
.nav-auth-btn:focus-visible,
.top-nav-message:focus-visible,
.tab-btn:focus-visible,
.accordion-btn:focus-visible,
.me-nav-item:focus-visible,
.info-nav-item:focus-visible,
.overview-more-btn:focus-visible,
.profile-add-friend-btn:focus-visible,
.profile-friend-item:focus-visible,
.player-row:focus-visible,
.message-item:focus-visible,
.lobby-list-entry:focus-visible {
  outline: 2px solid #57beef;
  outline-offset: -2px;
}

/* Keep the dropdown open while keyboard-focused inside it */
.nav-item:focus-within > .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─── Dark-chrome focus ring (nav dropdown, bottom popup, dark popups) ─── */
.nav-dropdown a:focus-visible,
.popup-window--dark button:focus-visible,
.popup-window--dark input:focus-visible,
.popup-window--dark select:focus-visible,
.popup-window--dark textarea:focus-visible,
.bottom-popup a:focus-visible,
.bottom-popup button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -2px;
}

/* ─── Pill buttons get an outer ring so the focus doesn't clip radius ─── */
.intro-signup-btn:focus-visible,
.login-btn:focus-visible,
.play-now:focus-visible,
.popup-close-btn:focus-visible,
.popup-submit-btn:focus-visible,
.popup-send-btn:focus-visible,
.popup-reset-btn:focus-visible,
.popup-action-btn button:focus-visible,
.bottom-popup-btn:focus-visible,
.chat-send-btn:focus-visible,
.side-tab:focus-visible {
  outline: 2px solid #57beef;
  outline-offset: 2px;
}

/* ─── Popup text inputs: reinforce the existing border-color change with a ring ─── */
.popup-input:focus-visible,
.popup-input-sm:focus-visible,
.popup-input-wide:focus-visible,
.popup-textarea:focus-visible,
.popup-select:focus-visible,
.msg-compose-input:focus-visible,
.msg-compose-textarea:focus-visible,
.creatematch-name-input:focus-visible {
  border-color: #57beef;
  box-shadow: 0 0 0 2px rgba(87, 190, 239, 0.35);
}

/* ─── Search input: fidelity says no :focus color change, but keyboard
       focus (distinct from mouse click) still deserves a ring. ─── */
.top-nav-search input:focus-visible {
  box-shadow: 0 0 0 2px rgba(87, 190, 239, 0.6);
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — narrow-viewport polish
   ─────────────────────────────────────────────────────
   WindowManager.as does no transform scaling; the site-shell
   is 100vw × 100vh and lets flex/grid fall out naturally.
   At widths below the 1243 design target, fixed columns
   (300px people-pane, 280px login form, 44px side-tab
   clearance) eat too much space. These breakpoints stack
   and shrink without touching the desktop layout.
═══════════════════════════════════════════════════════ */

/* ── ≤ 1024px : tighten stage padding, keep grid ── */
@media (max-width: 1024px) {
  .stage {
    padding: 12px 12px 12px 40px;
  }
  .homepage-grid {
    grid-template-columns: 1fr 260px;
    gap: 8px;
  }
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .people-grid-item,
  .player-thumb {
    width: auto;
    max-width: 138px;
  }
}

/* ── ≤ 900px : stack homepage grid vertically ── */
@media (max-width: 900px) {
  .homepage-grid {
    grid-template-columns: 1fr;
  }
  .people-pane {
    max-height: 280px;
  }
  /* Logged-in layout: drop the right column inline so feed uses full width */
  .homepage-grid-loggedin {
    grid-template-columns: 1fr;
  }
}

/* ── ≤ 760px : stack intro module + allow masthead nav to scroll ── */
@media (max-width: 760px) {
  .intro-module {
    height: auto;
    min-height: 105px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .intro-left {
    align-items: center;
    text-align: center;
  }
  .intro-logo {
    width: min(368px, 90%);
    height: auto;
  }
  .intro-signup-btn {
    align-self: center;
    margin-right: 0;
  }
  .intro-divider {
    width: 100%;
    height: 1px;
    align-self: stretch;
  }
  .intro-login {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Let nav items scroll horizontally rather than overflow the container */
  .top-nav-links {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .top-nav-links::-webkit-scrollbar { display: none; }

  /* Hide the search box to reclaim space (nav items still work) */
  .top-nav-search {
    display: none;
  }
}

/* ── ≤ 600px : hide side tabs, drop stage padding to the left ── */
@media (max-width: 600px) {
  .side-tabs {
    display: none;
  }
  .stage {
    padding: 10px;
  }

  /* Hero play-now column is 185px on a ~360px card — too cramped. Shrink. */
  .play-now-column {
    width: 130px;
    height: 150px;
  }
  .play-now {
    width: 130px;
    height: 60px;
    font-size: 13px;
  }

  /* Bottom bar chat-rooms label is the first thing to go */
  .footer-chatrooms span {
    display: none;
  }

  /* Profile page: single-column stack */
  .profile-stage {
    flex-direction: column;
    overflow-y: auto;
  }
  .profile-tab-pane {
    width: 100%;
  }
  .profile-side-pane {
    width: 100%;
  }

  /* Popups shouldn't be wider than the viewport */
  .popup-window,
  #loginPopup .popup-window,
  #signupPopup .popup-window {
    max-width: calc(100vw - 20px);
    width: auto !important;
  }
  .popup-login,
  .popup-signup,
  .popup-feedback,
  .popup-forgotpw,
  .popup-findfriends,
  .popup-creatematch {
    width: 100%;
    box-sizing: border-box;
  }
  .popup-login-inner {
    flex-direction: column;
  }
  .popup-login-left,
  .popup-login-right {
    width: 100%;
  }
  .popup-login-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
  }
  .popup-login-right {
    padding-left: 0;
  }
}