.reader{
  position:fixed; inset:0; z-index:200;
  display:none;
  background: rgba(11,15,20,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.reader.show{display:block}

.sheet{
  position:absolute; left:0; right:0; bottom:0;
  height: 90vh;
  border-radius: 26px 26px 0 0;
  background: rgba(14,20,28,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 -20px 60px rgba(0,0,0,.60);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.sheetTop{
  padding: 10px 12px;
  display:flex; align-items:center; gap:10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.handle{width:46px;height:5px;border-radius:999px;background: rgba(255,255,255,.22);margin:0 auto}
.close{
  margin-left:auto;
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
}
.close:active{transform:translateY(1px)}

.sheetBody{
  padding: 0 16px 16px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* sticky series header inside reader */
.seriesSticky{
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 0 10px;
  background: rgba(14,20,28,.98);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.seriesBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.seriesKicker{
  margin:0;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.2px;
  color: rgba(242,245,249,.78);
}
.seriesNumIn{
  margin-top:6px;
  font-size:14px;
  font-weight:990;
  letter-spacing:-.2px;
  color: rgba(242,245,249,.92);
  white-space:nowrap;
}
.seriesBarIn{
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  width: 42%;
  flex:0 0 auto;
}
.seriesBarIn i{
  display:block;
  height:100%;
  width:0%;
  background: var(--accent);
  border-radius:999px;
  box-shadow: 0 0 0 6px rgba(217,180,92,.10);
}

.articleTitle{
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 990;
  letter-spacing:-.4px;
  line-height:1.18;
}
.metaRow{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.metaPill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(242,245,249,.86);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.sheetBody p{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.62;
  color: rgba(242,245,249,.92);
}

.nav{
  position:sticky; bottom:0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,15,20,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex; gap:10px;
}

.linkClose{
  width:auto;
  height:auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:900;
  color: rgba(242,245,249,.80);
}
.linkClose:active{transform:translateY(1px)}

/* ===== Team badge in reader ===== */
.teamBadgeWrap{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}

.teamBadge{
  background:
    radial-gradient(60px 40px at 30% 30%, rgba(217,180,92,.18), transparent 60%),
    rgba(255,255,255,.06);	
  width:44px;
  height:44px;
  border-radius:50%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.teamBadge img{
  width:28px;
  height:28px;
  object-fit:contain;
}

.viralizeWrap{
  margin: 10px 0 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}