/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Core public pages, responsive refinements and shared page-level styling
 * Source lines: 9201-17987
 */

/* Webchat: on desktop the list fills the available height and scrolls internally */
@media (min-width: 981px) {
  .homeMainGrid .webchat {
    flex: 1 1 auto;
    min-height: 0;
  }
  .homeMainGrid .webchat__list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* ====================================================================
 * Base roommates (invites) + Profile invites tab
 */
.pTabBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(240,140,40,.16);
  border: 1px solid rgba(240,140,40,.32);
  color: var(--text900);
  font-size: 12px;
  font-weight: 950;
  line-height: 18px;
  vertical-align: middle;
}

.baseInviteList{ display:flex; flex-direction:column; gap: 10px; }
.baseInviteRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.baseInviteRow__img{ width: 84px; height: 52px; border-radius: 12px; overflow:hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.baseInviteRow__img img{ width:100%; height:100%; object-fit: cover; display:block; }
.baseInviteRow__main{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.baseInviteRow__title{ font-weight: 950; letter-spacing: .2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.baseInviteRow__meta{ font-size: 12px; color: var(--text700); font-weight: 800; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.baseInviteActions{ margin-left:auto; display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end; }

.roommateSection{ margin-top: 12px; }
.roommateSection h3{ margin: 0 0 8px 0; font-size: 14px; font-weight: 950; }
.roommateNote{ font-size: 12px; color: var(--text700); margin-top: 6px; }
.roommateList li{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 8px;
}
.roommateList .rmRole{ margin-left: 4px; }
.roommateList .rmActions{ margin-left: 6px; display:flex; gap: 6px; }
.roommateList .rmActions .btn{ padding: 5px 8px; }

.roommateInviteForm{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.roommateInviteForm input{
  flex: 1 1 320px;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.roommateInviteForm input:focus{ outline: none; border-color: var(--control-accent-border-active); }

/* ==============================
   Responsive phase 3 — Bases/Promo cards + admin forms + local table scrolling
   (non-breaking, monitoring sidebar untouched)
   ============================== */

.baseCard__meta{ gap: 10px; min-width: 0; }
.baseCard__counts{ flex-wrap: wrap; }
.baseCard__counts .c{ white-space: nowrap; }

@media (max-width: 720px){
  .basesWinnersGrid,
  .basesTopGrid,
  .basesListGrid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .baseCard__body{ padding: 10px; gap: 6px; }
  .baseCard__ownerRow{ flex-wrap: wrap; }
}
@media (max-width: 420px){
  .basesWinnersGrid,
  .basesTopGrid,
  .basesListGrid{ grid-template-columns: 1fr; }
}

.railScroller--promo .promoTitle{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.railScroller--promo .promoSub{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 520px){
  .railScroller--promo .promoOverlay{ left: 12px; right: 12px; bottom: 12px; }
  .railScroller--promo .railSlide--promo .promoMedia{ --media-frame: 10%; }
  .railScroller--promo .promoTitle{ font-size: 13px; }
  .railScroller--promo .promoSub{ font-size: 12px; max-width: 32ch; }
}
@media (max-width: 390px){
  .railScroller--promo .promoSub{ display:none; }
}

/* Auto table scroll wrapper (public + admin): used by JS */
.tableScroll{
  width:100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.12);
  scrollbar-gutter: stable both-edges;
}
.tableScroll > table{
  width: max-content;
  min-width: 100%;
}
.tableScroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tableScroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.tableScroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.tableScroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.14); border-radius: 999px; }


/* ==============================
   Responsive phase 4 — overlays + safe-area + mobile market
   Goal:
   - eliminate remaining "clipping" on phones (dropdowns/modals)
   - better iOS viewport behavior (dvh + safe-area)
   - remove horizontal scrolling UX on market mobile by stacking rows
   ============================== */

/* Market: stacked view for narrow/medium screens (no horizontal scroll required) */
@media (max-width: 820px){
  html.page-market .marketAll{ overflow: visible; }
  html.page-market .marketAllHead{ display:none; min-width: 0; }
  html.page-market .marketAllBody{ min-width: 0; padding: 10px; }
  html.page-market .marketAllRow{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 10px;
  }
  html.page-market .marketAllRow .c{ width: 100%; }
  html.page-market .marketAllRow .c--seller{ justify-content: space-between; }
  html.page-market .marketAllRow .c--grid{ justify-content: flex-start; gap: 8px; }
  html.page-market .marketAllRow .t .l1,
  html.page-market .marketAllRow .t .l2{ white-space: normal; }
}


/* ============================================================
   Stage 2.8 — Public site interface alignment
   Goal:
   - unify public page heads and descriptive text
   - make header/guest state/side rail feel like one system
   - improve sidebar stickiness and section rhythm
   - polish footer / news / bases without changing routes or logic
   ============================================================ */

.sitePanel{
  border-color: rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(16,18,24,.68), rgba(12,14,20,.74));
}
.sitePanel__head > :first-child{
  min-width: 0;
  flex: 1 1 auto;
}
.sitePanel__head .h1{
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: .01em;
}
.sitePanel__head .hint{
  margin-top: 6px;
  max-width: min(78ch, 100%);
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
.sitePanel__head .pill,
.sitePanel__head .pill--soft{
  align-self: center;
}
.sitePanel__head .panel__actions{
  justify-content: flex-end;
}
.sitePanel .panel-body{
  padding: clamp(14px, 1.2vw, 18px);
}

/* Public page rhythm */
.stack > .sitePanel + .sitePanel{
  margin-top: 2px;
}
.sitePanel .emptyState,
.sitePanel .state{
  border-radius: 18px;
}
.sitePanel .emptyState{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16));
  border-color: rgba(255,255,255,.12);
}
.sitePanel .state__text,
.sitePanel .emptyState__text{
  line-height: 1.55;
}

/* Header / navigation */
.topline,
.navline{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topline{
  background: linear-gradient(180deg, rgba(10,10,12,.72), rgba(10,10,12,.58));
}
.navline{
  background: linear-gradient(180deg, rgba(10,10,12,.58), rgba(10,10,12,.46));
}
.nav{
  min-width: 0;
}
@media (max-width: 860px){
  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar{ height: 0; }
  .navLink{ white-space: nowrap; }
}

/* Guest profile block in header */
.profileWidget--guest{
  align-items: center;
  min-width: min(100%, 360px);
}
.profileGuestIcon{
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(240,140,40,.18), rgba(0,0,0,.18));
  color: var(--accent);
  font-size: 24px;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.profileWidgetSteamId--guest{
  font-size: 12px;
  line-height: 1.45;
  opacity: .88;
  white-space: normal;
}
.notifMenuFoot__row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:8px;
}
.notifMenuFoot__hint{
  margin:0;
  line-height:1.45;
}

/* Sidebar as a stable utility column */
.grid > aside.stack{
  min-width: 0;
}
@media (min-width: 981px){
  html:not(.page-market):not(.page-map) .grid > aside.stack{
    position: sticky;
    top: calc(var(--sticky-top) + 14px);
    align-self: start;
  }
  html.page-home .homeMainGrid__chat{
    position: sticky;
    top: calc(var(--sticky-top) + 14px);
  }
}
.grid > aside.stack .sitePanel{
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.grid > aside.stack .panel__head .hint{
  max-width: 100%;
}
.btn-ghost{
  border-radius: 14px;
}

/* Home layout */
.homeMainGrid{
  align-items: stretch;
}
.homeMainGrid__chat,
.homeMainGrid__news{
  min-width: 0;
}
.sitePanel--webchat .webchat__list{
  min-height: 460px;
}
.sitePanel--news .newsGrid,
.sitePanel--news-list .newsGrid{
  gap: 16px;
}
.sitePanel--news .newsCard,
.sitePanel--news-list .newsCard{
  border-radius: 18px;
}
.sitePanel--news .newsCard__body,
.sitePanel--news-list .newsCard__body{
  padding-left: 0;
}

/* News layout split: compact 2-card home block + tiled catalog page */
body.page-home .sitePanel--news > .panel-body{
  overflow: hidden;
}
body.page-home .sitePanel--news .newsGrid--home{
  height: 100%;
  min-height: 0;
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard{
  min-height: 0;
  height: 100%;
  padding: 10px;
  gap: 12px;
  border-radius: 18px;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(140% 140% at 100% 0%, rgba(240,140,40,.10), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(11,16,24,.94), rgba(8,12,18,.98));
}
body.page-home .sitePanel--news .newsGrid--home .newsCard::before{
  width: 4px;
  opacity: .5;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__cover{
  position: relative;
  flex: 0 0 clamp(212px, 23vw, 286px);
  max-width: clamp(212px, 23vw, 286px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__cover img{
  transition: transform .25s ease;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard:hover .newsCard__cover img{
  transform: scale(1.03);
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__coverShade{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
  pointer-events: none;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__coverMeta{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__badge,
body.page-home .sitePanel--news .newsGrid--home .newsCard__datePill{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(10,14,20,.72);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__badge{
  background: linear-gradient(180deg, rgba(240,140,40,.95), rgba(214,112,26,.82));
  border-color: rgba(255,173,96,.5);
  color: #1f1207;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__body{
  padding-left: 2px;
  gap: 8px;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__head{
  margin-bottom: 0;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__head--compact .newsCard__meta{
  margin-left: auto;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__title{
  font-size: clamp(17px, 1.02vw, 19px);
  line-height: 1.14;
  -webkit-line-clamp: 2;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__text{
  -webkit-line-clamp: 2;
  line-height: 1.42;
  color: rgba(231,237,243,.78);
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__actions{
  margin-top: auto;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard__actions--compact .btn{
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 12px;
}
body.page-home .sitePanel--news .newsGrid--home .newsCard.is-featured{
  border-color: rgba(240,140,40,.18);
}

.sitePanel--news-list .newsGrid--catalog{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 0;
  align-items: start;
}
.sitePanel--news-list .newsGrid--catalog .newsCard{
  min-height: 100%;
  padding: 12px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 18px;
}
.sitePanel--news-list .newsGrid--catalog .newsCard::before{
  width: 100%;
  height: 4px;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  border-radius: 18px 18px 0 0;
}
.sitePanel--news-list .newsGrid--catalog .newsCard__cover{
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
}
.sitePanel--news-list .newsGrid--catalog .newsCard__body{
  padding-left: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.sitePanel--news-list .newsGrid--catalog .newsCard__title{
  font-size: 20px;
}
.sitePanel--news-list .newsGrid--catalog .newsCard__text{
  -webkit-line-clamp: 4;
}
.sitePanel--news-list .newsGrid--catalog .newsCard__actions{
  justify-content: flex-start;
  margin-top: auto;
}

@media (max-width: 980px){
  body.page-home .sitePanel--news > .panel-body{
    overflow: visible;
  }
  body.page-home .sitePanel--news .newsGrid--home{
    height: auto;
    grid-template-rows: none;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard{
    height: auto;
    min-height: 0;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__cover{
    flex-basis: clamp(240px, 36vw, 340px);
    max-width: clamp(240px, 36vw, 340px);
  }
  .sitePanel--news-list .newsGrid--catalog{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 720px){
  body.page-home .sitePanel--news .newsGrid--home .newsCard{
    padding: 10px;
    gap: 10px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__cover{
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__coverMeta{
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__badge,
  body.page-home .sitePanel--news .newsGrid--home .newsCard__datePill{
    min-height: 24px;
    padding-inline: 8px;
    font-size: 10px;
  }
  .sitePanel--news-list .newsGrid--catalog{
    grid-template-columns: 1fr;
  }
}

/* News detail: increase reading comfort */
.sitePanel--news-detail .newsBody{
  max-width: min(84ch, 100%);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.72;
}
.sitePanel--news-detail .newsHero{
  margin-bottom: 18px;
}
.sitePanel--news-detail .newsFooter{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sitePanel--news-detail .newsComments__form{
  border-radius: 18px;
}

/* Stats / filters */
.sitePanel--stats .roleGrid{
  gap: 12px;
}
.sitePanel--stats .topRole{
  border-radius: 20px;
  padding: 14px;
}
.sitePanel--stats .topRole__head{
  margin-bottom: 14px;
}
.sitePanel--stats .topSearch{
  min-width: min(340px, 100%);
}

/* Bases page */
.sitePanel--bases .basesFilters{
  justify-content: flex-end;
}
.sitePanel--bases .basesFilters .input{
  min-width: min(100%, 240px);
}
.sitePanel--bases .basesWinners,
.sitePanel--bases .basesTop,
.sitePanel--bases .basesList{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.sitePanel--bases .basesTop,
.sitePanel--bases .basesList{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sitePanel--bases .h2{
  margin: 0;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
}
.baseCard{
  border-radius: 18px;
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.14));
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.baseCard:hover{
  transform: translateY(-2px);
  border-color: rgba(240,140,40,.22);
  box-shadow: 0 18px 36px rgba(0,0,0,.30);
}
.baseCard__cover,
.baseCard__cover img{
  border-radius: 18px 18px 0 0;
}
.baseCard__body{
  padding: 12px;
  gap: 8px;
}
.baseCard__title{
  font-size: 15px;
  font-weight: 800;
}
.baseCard__ownerRow,
.baseCard__counts{
  gap: 10px;
}
.baseCard__counts .c,
.baseCard__score,
.baseCard__rmMore{
  background: rgba(255,255,255,.04);
}

/* Map page */
.sitePanel--map .mapEmbed{
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,.26);
}
.sitePanel--map .panel__actions .btn{
  min-width: 0;
}

/* Footer */
.siteFooter{
  margin-top: 28px;
  background: linear-gradient(180deg, rgba(10,10,12,.14), rgba(10,10,12,.56));
  border-top: 1px solid rgba(255,255,255,.08);
}
.siteFooter .wrap{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 28px;
}
.footerWidgets{
  gap: 14px;
}
.footerWidgetCard{
  border-radius: 18px;
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.footerWidgetBody{
  line-height: 1.55;
}
.footerMain{
  gap: 20px;
  align-items: start;
}
.footerLogo{
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: .02em;
}
.footerMeta,
.footerContactValue,
.footerContent{
  line-height: 1.6;
}



/* =========================================================
   Public UI P2.9 — profile/player deep alignment
   Goal: make the heaviest public pages feel like one system
   without touching routes or JS hooks.
========================================================= */
.sitePanel--profile .panel-body,
.sitePanel--player .panel-body{
  padding-top: 18px;
}

.profilePage__head,
.playerPage__head{
  gap: 14px 18px;
  align-items: flex-end;
}
.profilePage__head > :first-child,
.playerPage__head > :first-child{
  max-width: 760px;
}

.profilePage__body,
.playerPage__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profileBanners{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}

.profileHead{
  gap: 14px 18px;
  align-items: flex-end;
}
.profileHeadRight{
  flex: 0 0 auto;
}
.profileMiniTop{
  display:none;
  min-width: 296px;
  max-width: 420px;
}

.profileLayout{
  gap: 18px;
  align-items: start;
}
.profileAside{
  position: sticky;
  top: 88px;
  align-self: start;
  gap: 14px;
}
.profileNav{
  padding: 12px;
  gap: 9px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 58%),
    rgba(0,0,0,.18);
}
.profileNav--side{
  max-height: calc(100vh - 120px);
  overflow: auto;
  scrollbar-width: thin;
}
.profileNav--side::-webkit-scrollbar{
  width: 8px;
}
.profileNav--side::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
.pTab{
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 14px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pTab:hover{
  transform: translateY(-1px);
}
.pTab:focus-visible,
.playerTabBtn:focus-visible,
.playerSection__toggle:focus-visible{
  outline: 2px solid rgba(255,106,0,.36);
  outline-offset: 2px;
}
.pTab.is-active{
  box-shadow: 0 0 0 1px rgba(255,106,0,.16) inset;
}
.pTabBadge{
  margin-left: auto;
}

.profileCard{
  padding: 14px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 56%),
    rgba(0,0,0,.18);
}
.profileCard__top{
  gap: 12px;
  margin-bottom: 10px;
}
.profileAvatarBig{
  width: 58px;
  height: 58px;
  border-radius: 16px;
}
.profileCard__name{
  font-size: 17px;
}
.profileCard__meta{
  gap: 8px;
}
.profileQuickActions{
  flex-wrap: wrap;
  margin-top: 10px;
}
.profileQuickActions .btn{
  min-height: 42px;
}

.profileMain{
  gap: 14px;
}
.profileMain .card{
  padding: 16px;
  border-radius: 22px;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    var(--card-bg);
}
.profileMain .card__head{
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.profileMain .card__head > :first-child{
  min-width: 0;
}
.profileMain .panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.profileMain .grid2{
  align-items: stretch;
}
.profilePanel__footerActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.profileSubHint{
  margin-bottom: 8px;
  font-weight: 800;
}
.profileDeviceHint{
  margin-top: 10px;
  line-height: 1.55;
}
.profileLikesToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px 14px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.profileLikesSearch{
  width: min(360px, 100%);
}
.profileLikesSearch .input{
  min-height: 42px;
}
.profileLikesSearch .btn{
  min-height: 42px;
}
.myBasesBlock{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.myBasesBlock__head{
  gap: 6px;
  margin-bottom: 10px;
}
.toggleList{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.playerPage .panel__head{
  margin-bottom: 0;
}
.playerHero__card{
  padding: 16px;
  border-radius: 22px;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 58%),
    rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.playerHero__avatar{
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.playerHero__top{
  gap: 12px 14px;
}
.playerHero__right{
  flex-wrap: wrap;
  justify-content: flex-end;
}
.playerHero__status,
.playerLikes{
  min-height: 38px;
}
.playerHero__meta{
  margin-top: 12px;
  gap: 10px;
}
.playerHero__metaItem{
  min-height: 42px;
}

.playerTabs{
  margin-top: 0;
}
.playerTabs__row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.playerTabBtn{
  min-height: 44px;
  padding: 11px 15px;
  border-radius: 14px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.playerTabBtn:hover{
  transform: translateY(-1px);
}
.playerTabBtn.is-active{
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.playerTabPanels{
  margin-top: 0;
}
.playerTabPanel{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.playerTabPanel__head{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin: 0;
}

.playerFeatured,
.playerQuick,
.playerGlobalSearch,
.playerResources .simpleSection,
.playerResources,
.playerSection,
.playerBuilding,
.playerAccuracy,
.playerEvents{
  margin-top: 0;
}
.playerFeatured{
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.playerFeatured__title{
  margin: 0 0 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .82;
}
.playerQuick .statTile,
.playerResources .simpleSection,
.playerSection,
.buildingHero,
.buildingList,
.accuracyCard,
.accuracySilhouette,
.accuracyMain,
.accuracyBreakdown{
  border-color: rgba(255,255,255,.08);
}
.playerQuick .statTile,
.playerResources .simpleSection{
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.12);
}
.playerSections{
  margin-top: 0;
  gap: 12px;
}
.playerGlobalSearch{
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.playerGlobalSearch__row{
  flex-wrap: wrap;
}
.playerGlobalSearch .input{
  min-height: 42px;
}
.playerSection{
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    var(--bg800);
}
.playerSection__head{
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.playerSection__toggle{
  width: 32px;
  height: 32px;
  border-radius: 12px;
}
.playerSection__title{
  font-size: 15px;
}
.playerSection__tools{
  flex: 1 1 320px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.playerSection__search{
  flex: 1 1 210px;
  justify-content: flex-end;
}
.playerSection__search .input,
.playerSection__sort .select,
.playerGlobalSearch .input{
  border-radius: 13px;
}
.playerSection__search .input{
  width: min(220px, 100%);
  min-height: 38px;
}
.playerSection__total{
  margin-left: auto;
  font-weight: 800;
}
.itemTile{
  padding: 12px;
  border-radius: 16px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.itemTile:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.itemTile__img{
  margin-bottom: 8px;
}
.simpleSection{
  border-radius: 20px;
  padding: 14px;
}
.simpleSection__head{
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.simpleSection__title,
.buildingHero__title,
.accBreakHead{
  letter-spacing: .02em;
}

@media (max-width: 1100px){
  .profileMiniTop{
    min-width: 260px;
  }
  .profilePage__head,
  .playerPage__head,
  .profileHead{
    align-items: stretch;
  }
}
@media (max-width: 980px){
  .profileAside{
    position: static;
  }
  .profileNav--side{
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 760px){
  .playerTabs__row{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .playerTabBtn{
    flex: 0 0 auto;
  }
  .playerSection__tools,
  .playerSection__search{
    flex-basis: 100%;
    justify-content: stretch;
  }
  .playerSection__search .input,
  .playerGlobalSearch .input{
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 720px){
  .profileMain .card,
  .playerHero__card,
  .playerSection,
  .playerFeatured,
  .playerGlobalSearch,
  .simpleSection,
  .buildingHero,
  .buildingList,
  .accuracyCard,
  .accuracySilhouette,
  .accuracyMain,
  .accuracyBreakdown{
    border-radius: 18px;
  }
  .profileLikesToolbar{
    padding: 10px;
  }
  .profileLikesSearch{
    width: 100%;
  }
}
@media (max-width: 560px){
  .profilePage__body,
  .playerPage__body{
    gap: 12px;
  }
  .profileNav{
    padding: 10px;
  }
  .profileNav--side{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .pTab{
    padding: 9px 12px;
  }
  .profileCard,
  .profileMain .card,
  .playerHero__card,
  .playerSection,
  .playerFeatured,
  .playerGlobalSearch,
  .simpleSection,
  .buildingHero,
  .buildingList,
  .accuracyCard,
  .accuracySilhouette,
  .accuracyMain,
  .accuracyBreakdown{
    padding: 12px;
  }
  .playerHero__top,
  .playerHero__right{
    align-items: flex-start;
  }
  .playerHero__name{
    white-space: normal;
  }
  .profileMiniTop{
    min-width: 0;
    max-width: 100%;
  }
}

/* Tablet / mobile refinements */
@media (max-width: 980px){
  .sitePanel__head{
    align-items: stretch;
  }
  .sitePanel__head .panel__actions{
    justify-content: flex-start;
  }
  .profileWidget--guest{
    width: 100%;
  }
}
@media (max-width: 720px){
  .sitePanel .panel-body{
    padding: 14px;
  }
  .sitePanel--news-detail .newsBody{
    font-size: 14px;
    line-height: 1.66;
  }
  .sitePanel--bases .basesTop,
  .sitePanel--bases .basesList{
    margin-top: 18px;
    padding-top: 18px;
  }
}
@media (max-width: 520px){
  .profileWidget--guest{
    align-items: flex-start;
  }
  .profileGuestIcon{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 20px;
  }
  .sitePanel__head .h1{
    font-size: 20px;
  }
  .sitePanel--stats .topRole{
    padding: 12px;
  }
}


/* =========================================================
   Public UI P2.10 — market / bases / base / news detail alignment
   Goal: finish the heaviest public content pages and remove the last
   obvious layout mismatches without touching routes or JS hooks.
========================================================= */
.sitePanel--market .panel-body,
.sitePanel--base .panel-body,
.sitePanel--news-list .panel-body,
.sitePanel--news-detail .panel-body,
.sitePanel--bases .panel-body{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.marketPage__head,
.basesPage__head,
.baseViewPage__head,
.newsPage__head{
  gap: 14px 18px;
  align-items: flex-end;
}
.marketPage__head > :first-child,
.basesPage__head > :first-child,
.baseViewPage__head > :first-child,
.newsPage__head > :first-child{
  min-width: 0;
  flex: 1 1 auto;
}
.marketPage__actions,
.basesPage__actions,
.baseViewPage__actions,
.newsPage__actions{
  align-items:center;
}
.marketPage__meta,
.newsMetaRow,
.baseViewPage__metaRow{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
}
.marketPage__meta{
  min-height: 20px;
}
.newsPage__excerpt{
  margin-top: 8px !important;
}
.newsMetaRow .muted,
.baseViewPage__metaRow .muted{
  white-space: nowrap;
}

.sitePanel--market{
  background:
    radial-gradient(140% 130% at 0% 0%, rgba(96,165,250,.12), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(16,18,24,.72), rgba(12,14,20,.78));
}
.marketHero{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(96,165,250,.10), rgba(255,255,255,0) 58%),
    rgba(0,0,0,.18);
}
.marketHero__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.marketHeroStat{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.marketHeroStat__k{
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.66);
  text-transform: uppercase;
  letter-spacing:.08em;
}
.marketHeroStat__v{
  margin-top:6px;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight:950;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.marketHero__note{
  line-height:1.55;
  color: rgba(255,255,255,.78);
}
.sitePanel--market #marketApp.shopsApp{
  margin-top: 0;
}
.sitePanel--market .panel-body{
  padding-bottom: 14px;
}
.sitePanel--market .marketGroups,
.sitePanel--market .marketGroups--tiles,
.sitePanel--market .marketAll{
  margin-top: 8px;
}
.sitePanel--market .shopsEmpty.shopsEmptyCenter{
  margin: 8px 0 0;
  padding: 8px 0 0;
  min-height: 0;
}

.basesOverview,
.baseSummary{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.basesStat,
.baseSummaryStat{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.14);
}
.basesStat__k,
.baseSummaryStat__k{
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.64);
  text-transform: uppercase;
  letter-spacing:.08em;
}
.basesStat__v,
.baseSummaryStat__v{
  margin-top:6px;
  font-size: 15px;
  font-weight:900;
  line-height:1.35;
}
.basesSection__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px 12px;
  flex-wrap:wrap;
}
.basesSection__head .hint{
  margin:0;
  max-width: 72ch;
}
.sitePanel--bases .basesPager .btn{
  min-width: 120px;
}

.sitePanel--base{
  background:
    radial-gradient(140% 130% at 0% 0%, rgba(240,140,40,.10), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(16,18,24,.70), rgba(12,14,20,.78));
}
.baseStatusBadge{
  background: rgba(255,190,120,.12);
  border-color: rgba(255,190,120,.24);
  color: rgba(255,230,190,.96);
}
.baseViewPage__body{
  gap:18px !important;
}
.basePage{
  gap:20px;
}
.baseHero,
.baseInfoCard,
.sitePanel--base .newsComments__form{
  border-radius: 20px;
}
.baseThumb{
  border-radius: 14px;
}
.baseInfoCard{
  padding:14px;
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.16);
}
.baseInfoCard__desc{
  font-size:14px;
  line-height:1.6;
}
.baseMeta,
.baseVotes{
  border-radius:14px;
  background: rgba(255,255,255,.03);
}
.baseVotes__count .v{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
}
.baseActions .btn{
  min-height: 40px;
}
.roommateState{
  margin: 2px 0 12px 0;
}
.roommateSection--nested,
.roommateInvite{
  margin-top: 12px;
}
.roommateInvite{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.newsComments__actions--more{
  justify-content:flex-end;
  margin-top:10px;
}
.sitePanel--base .newsFooter__row{
  gap:14px;
}

.sitePanel--news-list .newsCard{
  background:
    radial-gradient(145% 130% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.16);
}
.sitePanel--news-detail .newsDetail{
  max-width: min(960px, 100%);
}
.sitePanel--news-detail .newsBody{
  padding: 2px 2px 0;
}
.sitePanel--news-detail .newsHero--detail{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 38px rgba(0,0,0,.26);
}
.sitePanel--news-detail .newsHero__img{
  display:block;
  width:100%;
  max-height:min(52vh, 460px);
  object-fit:cover;
}
.sitePanel--news-detail .newsFooter{
  padding:18px;
  border-radius:22px;
  background: rgba(255,255,255,.03);
}
.sitePanel--news-detail .newsFooter__row{
  gap:14px;
}

@media (max-width: 1100px){
  .marketHero__grid,
  .basesOverview,
  .baseSummary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px){
  .marketPage__head,
  .basesPage__head,
  .baseViewPage__head,
  .newsPage__head{
    align-items: stretch;
  }
  .basesSection__head,
  .sitePanel--news-detail .newsFooter__row{
    align-items:flex-start;
  }
}
@media (max-width: 640px){
  .marketHero,
  .baseInfoCard,
  .sitePanel--news-detail .newsFooter,
  .basesStat,
  .baseSummaryStat{
    border-radius: 18px;
  }
  .marketHero__grid,
  .basesOverview,
  .baseSummary{
    grid-template-columns: 1fr;
  }
  .sitePanel--bases .basesPager .btn{
    min-width: 0;
  }
}


/* =========================================================
   Public UI P2.11 — micro states / CTA rhythm / mobile density
   Goal: unify loading/empty/error shells and make touch layouts denser
   without touching routes or API contracts.
========================================================= */
.sitePanel .panel__actions .btn--accent,
.sitePanel .panel__actions .btn--primary,
.sitePanel .panel__actions .btn--primaryAccent{
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
.sitePanel .panel__actions .btn--ghost{
  background: rgba(0,0,0,.14);
}
.sitePanel .panel__actions > *{
  min-width: 0;
}
.sitePanel .panel__actions .pill{
  min-height: 36px;
  display:inline-flex;
  align-items:center;
}
.sitePanel .panel__actions .btn,
.profilePanel__footerActions .btn,
.newsFooter__actions .btn,
.state__actions .btn{
  white-space: nowrap;
}

.profileCard.stateMount,
#profileOverview.stateMount,
#playerHero.stateMount,
.playerResources.stateMount,
.playerEvents.stateMount,
.playerBuilding.stateMount,
.playerAccuracy.stateMount{
  min-height: 128px;
}

.webchat__loading,
.webchat__empty,
.webchat__unavailable{
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
}
.webchat__unavailable{
  border-style: solid;
  border-color: rgba(248,81,73,.28);
  background: rgba(248,81,73,.05);
}
.webchat__loading .state,
.webchat__empty .state,
.webchat__unavailable .state{
  background: transparent;
  border: 0;
  padding: 0;
}

.toggleList > .state,
#notifPrefsEvents > .state,
#notifPrefsDevice > .state{
  margin-top: 6px;
}

@media (max-width: 860px){
  .sitePanel__head{
    gap: 12px;
  }
  .sitePanel .panel__actions{
    width: 100%;
  }
  .sitePanel .panel__actions .btn,
  .sitePanel .panel__actions .pill,
  .sitePanel .panel__actions form{
    flex: 1 1 auto;
  }
  .sitePanel .panel__actions form .input,
  .sitePanel .panel__actions form .select,
  .sitePanel .panel__actions form select{
    width: 100%;
  }
}
@media (max-width: 720px){
  .btn,
  .btn-primary,
  .btn-ghost{
    min-height: 38px;
    padding: 9px 11px;
    gap: 8px;
    font-size: 13px;
  }
  .input,
  .select{
    min-height: 38px;
    padding: 9px 11px;
    font-size: 14px;
  }
  .state{
    padding: 13px 14px;
    gap: 10px;
  }
  .state__actions,
  .profilePanel__footerActions,
  .newsFooter__actions,
  .ctaRow,
  .actionRow{
    width: 100%;
  }
  .state__actions .btn,
  .profilePanel__footerActions .btn,
  .newsFooter__actions .btn,
  .ctaRow .btn,
  .actionRow .btn{
    flex: 1 1 100%;
  }
  .profileLikesToolbar,
  .myBasesBlock__head,
  .playerTabPanel__head,
  .sitePanel--news-detail .newsFooter__row,
  .basesSection__head{
    gap: 10px;
  }
}
@media (max-width: 560px){
  .stateMount{ min-height: 102px; }
  .stateMount--compact{ min-height: 80px; }
  .sitePanel .panel__actions{
    gap: 8px;
  }
  .sitePanel .panel__actions .btn,
  .sitePanel .panel__actions .pill,
  .sitePanel .panel__actions form,
  .profilePanel__footerActions .btn,
  .newsFooter__actions .btn,
  .state__actions .btn{
    width: 100%;
  }
}


@media (max-width: 860px){
  .siteForm__grid{
    grid-template-columns: 1fr;
  }
  .sitePager{
    align-items:flex-start;
  }
}
@media (max-width: 640px){
  .siteFilterForm,
  .siteForm__toolbar,
  .siteForm__actions{
    align-items:stretch;
  }
  .siteFilterForm__group,
  .siteFilterForm__group .select,
  .siteFilterForm__group .input{
    width:100%;
    min-width:0;
  }
  .sitePager .btn{
    flex: 1 1 calc(50% - 6px);
    justify-content:center;
  }
  .fileDrop__head{
    align-items:flex-start;
  }
}