/* Билим Арена — Portal (кыргызча) */
:root{
  --bg:#0b1020;
  --bg2:#070b16;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.085);
  --line: rgba(230,235,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --shadow: 0 18px 55px rgba(0,0,0,.38);
  --shadow2: 0 30px 90px rgba(0,0,0,.55);

  --radius: 22px;

  --cyan:#00c8ff;
  --magenta:#ff2fb3;

  --easeOut: cubic-bezier(.2,.85,.2,1);
}

/* Scoped portal styles: all non-variable rules are prefixed with .ba-portal */

.ba-portal *{box-sizing:border-box}
.ba-portal{height:100%}
.ba-portal{
  margin:0;
  font-family: Inter,"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);

  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(0,200,255,.20), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,47,179,.16), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));

  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  min-height: 100vh;
}

/* Light */
.ba-portal:not(.dark){
  --bg:#f6f8ff;
  --bg2:#fbfcff;
  --panel: rgba(18,20,39,.06);
  --panel2: rgba(18,20,39,.08);
  --line: rgba(16,20,40,.12);
  --text: rgba(18,20,39,.92);
  --muted: rgba(18,20,39,.70);

  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(0,200,255,.12), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,47,179,.10), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

.ba-portal a{color:inherit;text-decoration:none}

/* ===== Background FX (modern) ===== */
.ba-portal .bgFX{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.ba-portal .bgBlob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(18px);
  opacity:.55;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.ba-portal .bgBlob.b1{
  left:-160px; top:-120px;
  background: radial-gradient(circle at 30% 30%, rgba(0,200,255,.35), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,47,179,.22), transparent 62%);
  animation: blob1 14s var(--easeOut) infinite alternate;
}
.ba-portal .bgBlob.b2{
  right:-190px; bottom:-180px;
  background: radial-gradient(circle at 30% 30%, rgba(255,47,179,.30), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(0,200,255,.20), transparent 62%);
  animation: blob2 16s var(--easeOut) infinite alternate;
}
@keyframes blob1{
  from{ transform: translate(-10px, -10px) scale(1); }
  to  { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes blob2{
  from{ transform: translate(10px, 10px) scale(1); }
  to  { transform: translate(-70px, -40px) scale(1.10); }
}
.ba-portal .bgGrain{
  position:absolute; inset:-40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode: overlay;
  transform: rotate(8deg);
}

/* Stack context so content above bg */
.ba-portal .baTop,
.ba-portal .wrap,
.ba-portal .modal,
.ba-portal .pageFade{
  position: relative;
  z-index: 2;
}

/* ===== Topbar ===== */
.ba-portal .baTop{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
}
.ba-portal:not(.dark) .baTop{
  background: linear-gradient(to bottom, rgba(255,255,255,.86), rgba(255,255,255,0));
}

.ba-portal .baBrand{display:flex; align-items:center; gap:12px; min-width:0}
.ba-portal .baLogo{
  width:44px;height:44px;border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(0,200,255,.90), transparent 60%),
    radial-gradient(14px 14px at 70% 70%, rgba(255,47,179,.88), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow);
}
.ba-portal .brandText{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.ba-portal .baTitle{font-weight:1000;letter-spacing:.7px}
.ba-portal .baSub{margin-top:2px;font-size:12px;font-weight:850;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ba-portal .baTopActions{display:flex;align-items:center;gap:10px}

/* ===== Buttons (premium micro) ===== */
.ba-portal .btn,
.ba-portal .btnPrimary,
.ba-portal .btnGhost{
  -webkit-tap-highlight-color: transparent;
}
.ba-portal .btn{
  border:1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
  cursor: pointer;
  min-height: 44px;
  transition: transform .18s var(--easeOut), filter .18s var(--easeOut), box-shadow .18s var(--easeOut);
}
.ba-portal .btn.icon{min-width:44px; display:flex; align-items:center; justify-content:center}
.ba-portal .btn:hover{filter:brightness(1.06)}
.ba-portal .btn:active{transform: translateY(1px) scale(.98)}
.ba-portal .btn:focus-visible{outline: 3px solid rgba(0,200,255,.38); outline-offset: 2px}

.ba-portal .wrap{width:min(1180px,100%); margin:0 auto; padding: 0 14px 24px}

/* ===== HERO ===== */
.ba-portal .hero{padding: 14px 0 10px}
.ba-portal .heroCard{
  position:relative;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
  overflow:hidden;
}
.ba-portal .heroGlow{
  position:absolute; inset:-140px -200px auto auto;
  width:520px; height:520px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(0,200,255,.38), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,47,179,.30), transparent 60%);
  filter: blur(3px);
  pointer-events:none;
  animation: heroGlow 10s var(--easeOut) infinite alternate;
}
@keyframes heroGlow{
  from{ transform: translate(-10px, -10px) scale(1); opacity:.9; }
  to  { transform: translate(24px, 18px) scale(1.06); opacity:1; }
}
.ba-portal .heroTop{display:flex;gap:10px;flex-wrap:wrap}
.ba-portal .heroBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
}
.ba-portal .heroBadge.ghost{background:transparent}
.ba-portal .heroBadge.mini{padding:8px 10px; opacity:.95}

.ba-portal .h1{margin:10px 0 0;font-size:26px;font-weight:1000;letter-spacing:.2px}
.ba-portal .h2{margin:0;font-size:20px;font-weight:1000;letter-spacing:.2px}
.ba-portal .p{margin:8px 0 0;color: var(--muted); line-height:1.45; font-weight:750}
.ba-portal .p.small{font-size:12px}

.ba-portal .heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.ba-portal .btnPrimary{
  border:1px solid rgba(0,200,255,.35);
  background: linear-gradient(135deg, rgba(0,200,255,.28), rgba(255,47,179,.18));
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 1000;
  cursor: pointer;
  min-height: 46px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .18s var(--easeOut), filter .18s var(--easeOut), box-shadow .18s var(--easeOut);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.ba-portal .btnPrimary:hover{filter:brightness(1.06)}
.ba-portal .btnPrimary:active{transform: translateY(1px) scale(.99)}

.ba-portal .btnGhost{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 1000;
  cursor: pointer;
  min-height: 46px;
  transition: transform .18s var(--easeOut), filter .18s var(--easeOut);
}
.ba-portal .btnGhost:hover{filter:brightness(1.06)}
.ba-portal .btnGhost:active{transform: translateY(1px) scale(.99)}
.ba-portal .btnPrimary:focus-visible,
.ba-portal .btnGhost:focus-visible{
  outline: 3px solid rgba(0,200,255,.38);
  outline-offset: 2px;
}

/* ===== FACTS ===== */
.ba-portal .facts{padding: 8px 0 6px}
.ba-portal .factsHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.ba-portal .factsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px){ .ba-portal .factsGrid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 520px){ .ba-portal .factsGrid{grid-template-columns: 1fr;} }

.ba-portal .factCard{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(0,0,0,0) inset;
  padding: 14px;
  min-height: 108px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .52s var(--easeOut), opacity .52s var(--easeOut), filter .2s var(--easeOut);
}
.ba-portal .factCard.reveal-in{transform: translateY(0); opacity: 1;}
.ba-portal .factCard:hover{filter:brightness(1.06)}
.ba-portal .factCard.wide{grid-column: span 2; position:relative; overflow:hidden}
@media (max-width: 980px){ .ba-portal .factCard.wide{grid-column: span 2;} }
@media (max-width: 520px){ .ba-portal .factCard.wide{grid-column: span 1;} }

.ba-portal .factTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ba-portal .factIcon{font-size:20px}
.ba-portal .factNum{font-size:28px;font-weight:1000;letter-spacing:.2px;font-variant-numeric: tabular-nums}
.ba-portal .factText{margin-top:10px;font-weight:1000}
.ba-portal .factSub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px}

.ba-portal .factMarquee{
  font-weight: 1000;
  font-size: 14px;
  line-height: 1.35;
  transition: opacity .22s var(--easeOut), transform .22s var(--easeOut);
  opacity: 1;
}
.ba-portal .factMarquee.isFade{opacity:0; transform: translateY(2px)}
.ba-portal .factHint{
  margin-top:10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* ===== GAMES ===== */
.ba-portal .games{padding: 12px 0 0}
.ba-portal .gamesHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}

.ba-portal .grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px){ .ba-portal .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 520px){ .ba-portal .grid{grid-template-columns: 1fr;} }

.ba-portal .gameCard{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 200px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .52s var(--easeOut), opacity .52s var(--easeOut), filter .18s var(--easeOut), box-shadow .18s var(--easeOut);
  isolation:isolate;
}
.ba-portal .gameCard.reveal-in{transform: translateY(0); opacity: 1;}
.ba-portal .gameCard:hover{
  filter:brightness(1.05);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.ba-portal .gameCard:active{transform: translateY(0) scale(.99)}
.ba-portal .gameCard:focus-visible{outline:3px solid rgba(0,200,255,.35);outline-offset:2px}

.ba-portal .gameCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(0,200,255,.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(255,47,179,.18), transparent 55%);
  opacity:0;
  transform: rotate(10deg);
  transition: opacity .18s var(--easeOut);
  pointer-events:none;
  z-index: 1;
}
.ba-portal .gameCard:hover::before{opacity:1}

.ba-portal .gameImg{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transform: scale(1.04);
  filter:saturate(1.08) contrast(1.04);
  transition: transform .35s var(--easeOut);
}
.ba-portal .gameCard:hover .gameImg{transform: scale(1.08)}

.ba-portal .gameShade{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.15), transparent 60%);
  z-index: 2;
}
.ba-portal:not(.dark) .gameShade{
  background: linear-gradient(to top, rgba(18,20,39,.72), rgba(18,20,39,.10), transparent 60%);
}

.ba-portal .gameMeta{
  position:absolute; left:12px; right:12px; top:12px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  z-index: 3;
}
.ba-portal .chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
}
.ba-portal:not(.dark) .chip{
  color: rgba(18,20,39,.92);
  background: rgba(255,255,255,.60);
}
.ba-portal .chip .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(0,200,255,.9);
  box-shadow: 0 0 0 3px rgba(0,200,255,.20);
}
.ba-portal .chip.played .dot{
  background: rgba(255,47,179,.9);
  box-shadow: 0 0 0 3px rgba(255,47,179,.20);
}

.ba-portal .gameTitle{
  position:absolute; left:12px; right:12px; bottom:12px;
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: 16px;
  text-shadow: 0 12px 30px rgba(0,0,0,.55);
  z-index: 3;
}

/* ===== Footer ===== */
.ba-portal .footer{
  display:flex;justify-content:center;
  padding: 16px 0 6px;
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

/* ===== MODAL (animated open/close) ===== */
.ba-portal .modal{position:fixed; inset:0; display:none; z-index:50}
.ba-portal .modal[aria-hidden="false"]{display:block}
.ba-portal .modalBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  opacity: 0;
  animation: fadeIn .22s var(--easeOut) forwards;
}
@keyframes fadeIn{ to{opacity:1} }

.ba-portal .modalCard{
  position:relative;
  width: min(980px, calc(100% - 18px));
  margin: 14px auto;
  border-radius: 26px;
  overflow:hidden;
  background: linear-gradient(135deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  display:grid;
  grid-template-columns: 1.12fr 1fr;
  min-height: 540px;

  transform: translateY(10px) scale(.985);
  opacity: 0;
  animation: popIn .26s var(--easeOut) forwards;
}
@keyframes popIn{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
@media (max-width: 860px){ .ba-portal .modalCard{grid-template-columns:1fr; min-height:auto} }

.ba-portal .iconBtn{
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 1000;
  transition: transform .18s var(--easeOut), filter .18s var(--easeOut);
}
.ba-portal .iconBtn:hover{filter:brightness(1.06)}
.ba-portal .iconBtn:active{transform: translateY(1px) scale(.98)}
.ba-portal .iconBtn:focus-visible{outline: 3px solid rgba(0,200,255,.38); outline-offset: 2px}
.ba-portal:not(.dark) .iconBtn{ background: rgba(255,255,255,.58); }

.ba-portal .modalClose{position:absolute; top:10px; right:10px; z-index:3}

.ba-portal .modalMedia{position:relative; background: rgba(0,0,0,.10); display:flex}
.ba-portal .modalMedia img{width:100%; height:100%; object-fit:cover; display:block}
.ba-portal .modalRibbon{
  position:absolute; inset:auto 0 0 0; height: 130px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.ba-portal:not(.dark) .modalRibbon{
  background: linear-gradient(to top, rgba(18,20,39,.82), rgba(18,20,39,0));
}
.ba-portal .modalMediaHint{
  position:absolute; left:12px; bottom:12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: 12px;
  backdrop-filter: blur(10px);
}

.ba-portal .modalBody{padding: 16px 16px 14px; display:flex; flex-direction:column; gap:12px}
.ba-portal .modalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ba-portal .modalTitle{margin:0;font-size:20px;font-weight:1000}
.ba-portal .modalTag{
  font-size:12px;font-weight:1000;color:var(--muted);
  padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  white-space:nowrap
}
.ba-portal .modalDesc{margin:0;color:var(--muted);line-height:1.45;font-weight:750}

.ba-portal .modalBlock{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px;
}
.ba-portal .modalBlockTitle{font-weight:1000;margin-bottom:8px}
.ba-portal .modalList{margin:0;padding-left:18px;color:var(--muted);line-height:1.45;font-weight:750}
.ba-portal .modalList li{margin:6px 0}
.ba-portal .modalWhy{margin:0;color:var(--muted);line-height:1.45;font-weight:750}

.ba-portal .modalActions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.ba-portal .modalFootNote{margin-top:6px;color:var(--muted);font-weight:800;font-size:12px}

/* Page fade (when starting a game) */
.ba-portal .pageFade{
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 600px at 20% 10%, rgba(0,200,255,.25), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(255,47,179,.22), transparent 60%),
              rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--easeOut);
  z-index: 80;
}
.ba-portal .pageFade.on{opacity: 1; pointer-events: auto}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ba-portal .bgBlob{animation:none}
  .ba-portal .heroGlow{animation:none}
  .ba-portal .gameCard,
  .ba-portal .factCard,
  .ba-portal .btn,
  .ba-portal .btnPrimary,
  .ba-portal .btnGhost,
  .ba-portal .modalBackdrop,
  .ba-portal .modalCard,
  .ba-portal .pageFade{
    transition:none !important;
    animation:none !important;
  }
}
/* ===========================
   READABILITY PATCH (dark+light)
   paste at the END of portal.css
=========================== */

/* Better system rendering */
.ba-portal { color-scheme: light dark; }

/* Stronger base contrast */
.ba-portal{
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.78);
  --line: rgba(230,235,255,.14);
  --panel: rgba(255,255,255,.075);
  --panel2: rgba(255,255,255,.105);
}

/* Light mode: make cards truly light (more readable) */
.ba-portal:not(.dark){
  --text: rgba(12,14,28,.92);
  --muted: rgba(12,14,28,.72);
  --line: rgba(12,14,28,.14);
  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.90);
}

/* Topbar: stronger solid blur background (fix washed text) */
.ba-portal .baTop{
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.12));
}
.ba-portal:not(.dark) .baTop{
  background: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.72));
}

/* Hero / Fact / Game cards: slightly less transparent => higher readability */
.ba-portal .heroCard,
.ba-portal .factCard,
.ba-portal .gameCard{
  border-color: var(--line);
}

/* Game image shade: boost contrast for titles in BOTH modes */
.ba-portal .gameShade{
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.22), transparent 62%);
}
.ba-portal:not(.dark) .gameShade{
  background: linear-gradient(to top, rgba(10,12,24,.78), rgba(10,12,24,.18), transparent 62%);
}

/* Chips: in light mode chips must be solid light, not gray */
.ba-portal .chip{
  font-weight: 950;
}
.ba-portal:not(.dark) .chip{
  background: rgba(255,255,255,.88);
  border-color: rgba(12,14,28,.16);
}

/* Modal: make text area solid and readable */
.ba-portal .modalCard{
  background: linear-gradient(135deg, var(--panel2), var(--panel));
}

/* Important: modal body becomes solid surface (so text never “dies” on bright image) */
.ba-portal .modalBody{
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08));
}
.ba-portal:not(.dark) .modalBody{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
}

/* Modal blocks: stronger surfaces */
.ba-portal .modalBlock{
  background: rgba(255,255,255,.06);
}
.ba-portal:not(.dark) .modalBlock{
  background: rgba(0,0,0,.035);
}

/* Modal text: force clear contrast */
.ba-portal .modalTitle{ color: var(--text); }
.ba-portal .modalDesc,
.ba-portal .modalList,
.ba-portal .modalWhy,
.ba-portal .modalFootNote{ color: var(--muted); }

/* Modal tag: readable pill in both modes */
.ba-portal .modalTag{
  background: rgba(255,255,255,.07);
}
.ba-portal:not(.dark) .modalTag{
  background: rgba(0,0,0,.05);
}

/* Close button readable on light */
.ba-portal .iconBtn{
  background: rgba(0,0,0,.24);
}
.ba-portal:not(.dark) .iconBtn{
  background: rgba(255,255,255,.92);
  border-color: rgba(12,14,28,.16);
}

/* Improve paragraph readability */
.ba-portal .p{ line-height: 1.5; }