/* v9.3.1 Mobile UI (non-breaking, mobile-only via body.ft-mobile) */
:root{
  --ft-mobile-bar-h: 44px;
  --ft-mobile-z: 99999;
  --ft-mobile-bg: rgba(18,18,18,.78);
  --ft-mobile-bd: rgba(255,255,255,.10);
  --ft-mobile-tx: rgba(255,255,255,.92);
  --ft-mobile-sub: rgba(255,255,255,.70);
  --ft-mobile-ac: rgba(255,215,160,.95);
}

.ft-mobile-bar, .ft-mobile-drawer, .ft-mobile-backdrop{ display:none; }

/* ONLY when JS sets body.ft-mobile */
body.ft-mobile{ padding-top: var(--ft-mobile-bar-h); }

body.ft-mobile .ft-mobile-bar{
  position: fixed; top: 0; left: 0; right: 0; height: var(--ft-mobile-bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  background: var(--ft-mobile-bg);
  border-bottom: 1px solid var(--ft-mobile-bd);
  backdrop-filter: blur(10px);
  z-index: var(--ft-mobile-z);
  user-select: none;
}
body.ft-mobile .ft-mobile-left{ display:none; flex-direction:column; gap:2px; min-width: 140px;
  line-height: 1.05;
}
body.ft-mobile .ft-mobile-clock{ font-size: 12px; color: var(--ft-mobile-tx); letter-spacing: .2px; }
body.ft-mobile .ft-mobile-date{ font-size: 11px; color: var(--ft-mobile-sub); }
body.ft-mobile .ft-mobile-title{
  font-size: 13px;
  color: var(--ft-mobile-ac);
  letter-spacing: .6px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
body.ft-mobile .ft-mobile-actions{ display:flex; align-items:center; gap:8px; }
body.ft-mobile .ft-mobile-btn{
  width: 36px; height: 32px;
  border: 1px solid var(--ft-mobile-bd);
  background: rgba(255,255,255,.06);
  color: var(--ft-mobile-tx);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}
body.ft-mobile .ft-mobile-btn:active{ transform: scale(.98); }

body.ft-mobile .ft-mobile-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: calc(var(--ft-mobile-z) - 1);
}

body.ft-mobile .ft-mobile-drawer{
  position: fixed; top: var(--ft-mobile-bar-h); right: 0;
  width: min(86vw, 360px);
  height: calc(100vh - var(--ft-mobile-bar-h));
  background: rgba(20,20,20,.92);
  border-left: 1px solid var(--ft-mobile-bd);
  z-index: var(--ft-mobile-z);
  transform: translateX(102%);
  transition: transform .18s ease-out;
  display:flex;
  flex-direction: column;
}
body.ft-mobile.ft-mobile-menu-open .ft-mobile-backdrop{ display:block; }
body.ft-mobile.ft-mobile-menu-open .ft-mobile-drawer{ transform: translateX(0); }

body.ft-mobile .ft-mobile-drawer header{
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--ft-mobile-bd);
  display:flex; align-items:center; justify-content:space-between;
}
body.ft-mobile .ft-mobile-drawer h3{
  margin:0; font-size: 13px; color: var(--ft-mobile-ac); letter-spacing:.4px;
}
body.ft-mobile .ft-mobile-drawer .ft-mobile-close{ font-size: 16px; }
body.ft-mobile .ft-mobile-drawer .ft-mobile-content{
  padding: 12px;
  overflow: auto;
  display:flex;
  flex-direction: column;
  gap: 14px;
}
body.ft-mobile .ft-mobile-card{
  border: 1px solid var(--ft-mobile-bd);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px;
}
body.ft-mobile .ft-mobile-card h4{
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ft-mobile-tx);
  letter-spacing: .3px;
}
body.ft-mobile .ft-mobile-card p{
  margin: 0;
  font-size: 12px;
  color: var(--ft-mobile-sub);
  line-height: 1.5;
}
body.ft-mobile .ft-mobile-toggle{
  display:flex; align-items:center; justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,.12);
}
body.ft-mobile .ft-mobile-toggle:first-of-type{ border-top: none; padding-top: 0; }
body.ft-mobile .ft-mobile-toggle label{
  font-size: 12px; color: var(--ft-mobile-tx);
}
body.ft-mobile .ft-mobile-switch{
  width: 44px; height: 24px;
  border-radius: 999px;
  border: 1px solid var(--ft-mobile-bd);
  background: rgba(255,255,255,.08);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
body.ft-mobile .ft-mobile-switch::after{
  content:"";
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  position:absolute; top: 50%; left: 3px;
  transform: translateY(-50%);
  transition: left .14s ease-out;
}
body.ft-mobile .ft-mobile-switch.is-on{
  background: rgba(255,215,160,.20);
  border-color: rgba(255,215,160,.45);
}
body.ft-mobile .ft-mobile-switch.is-on::after{ left: 22px; background: rgba(255,215,160,.95); }

/* Animation OFF (used by mobile toggle too) */
body.ft-anim-off svg .branch,
body.ft-anim-off svg path{
  animation: none !important;
}


/* sub clock under title */
.ft-mobile-title{position:relative;}
.ft-mobile-subclock{display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; letter-spacing:.6px; opacity:.92; margin-top:6px; line-height:1; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22); box-shadow: inset 0 0 18px rgba(0,0,0,.35);}
/* Clan/List titles must keep original casing */
.clan-name,
.clan-title,
.clan-item-title,
#clansList h3,
#clansList .title {
  text-transform: none !important;
}