/* reuse theme vars idea */
:root{
  --bg1:#ff5a2e; --bg2:#ffb24a;
  --ink:#111827; --ink2:rgba(17,24,39,.75);
  --panel:rgba(255,255,255,.86);
  --panel2:rgba(255,255,255,.72);
  --stroke:rgba(17,24,39,.12);
  --shadow:0 18px 45px rgba(0,0,0,.18);
  --shadow2:0 12px 30px rgba(0,0,0,.14);
  --radius:22px;
}
body.theme-dark{
  --bg1:#0b1020; --bg2:#1b2a6b;
  --ink:#e5e7eb; --ink2:rgba(229,231,235,.78);
  --panel:rgba(17,24,39,.70);
  --panel2:rgba(17,24,39,.55);
  --stroke:rgba(255,255,255,.12);
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --shadow2:0 12px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);overflow-x:hidden;}

.lobby-page{min-height:100vh;position:relative;isolation:isolate;padding:80px 16px 60px;display:flex;justify-content:center;}
.lobby-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.lobby-sky{position:absolute;inset:0;background:linear-gradient(135deg,var(--bg1),var(--bg2));}
.lobby-clouds{
  position:absolute;inset:0;opacity:.85;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 0 18px, transparent 19px),
    radial-gradient(circle at 17% 20%, rgba(255,255,255,.95) 0 26px, transparent 27px),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.95) 0 20px, transparent 21px),
    radial-gradient(circle at 58% 18%, rgba(255,255,255,.90) 0 16px, transparent 17px),
    radial-gradient(circle at 63% 16%, rgba(255,255,255,.90) 0 24px, transparent 25px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.90) 0 18px, transparent 19px);
  animation:drift 34s linear infinite;filter:blur(.2px);
}
.lobby-clouds2{opacity:.55;transform:translateX(-35%);animation:drift 52s linear infinite reverse;}
@keyframes drift{from{transform:translateX(-20%);}to{transform:translateX(20%);}}
.lobby-ground{
  position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.22;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 18px, rgba(0,0,0,.10) 18px 36px);
  animation:groundMove 6.5s linear infinite;
}
@keyframes groundMove{from{background-position:0 0,0 0;}to{background-position:0 0,360px 0;}}

.lobby-wrap{width:min(1100px,100%);display:flex;flex-direction:column;gap:14px;}
.lobby-head{
  display:flex;gap:12px;align-items:center;
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(12px);
}
.badge{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 28px rgba(0,0,0,.14);
  font-size:22px;
}
.lobby-head h1{font-weight:950;font-size:28px;}
.sub{color:var(--ink2);margin-top:4px;}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;}
.panel{
  background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow2);backdrop-filter:blur(12px);
}
.panel.big{padding:18px;}
.panel h2{font-size:18px;font-weight:950;margin-bottom:10px;}

label{font-size:13px;font-weight:900;color:var(--ink2);display:block;margin-top:10px;}
input,select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  color:var(--ink);
  margin-top:8px;
}

.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.btn{
  padding:12px 14px;border-radius:999px;font-weight:950;
  border:1px solid var(--stroke);background:var(--panel);
  box-shadow:var(--shadow2);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 38px rgba(0,0,0,.18);}
.btn:active{transform:translateY(0) scale(.99);}
.btn::after{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-120%);opacity:.65;
}
.btn:hover::after{animation:shine .7s ease forwards;}
@keyframes shine{to{transform:translateX(120%);} }
.btn.primary{
  background:linear-gradient(135deg, rgba(255,122,0,.96), rgba(255,214,102,.92));
  color:#111827;border:1px solid rgba(255,255,255,.35);
}
body.theme-dark .btn.primary{
  background:linear-gradient(135deg, rgba(110,231,255,.96), rgba(167,139,250,.92));
  color:#0b1020;
}
.btn.ghost{background:var(--panel);}

.btn.start{
  min-width:180px;
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(250,204,21,.9));
  border:1px solid rgba(255,255,255,.35);
  color:#111827;
}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow2);}

/* ===== Lock Teams Toggle ===== */
.pill-lock{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  box-shadow:var(--shadow2);
  font-weight:950;
  color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
  min-width: 220px;
  justify-content:center;
}
.pill-lock:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.14); }
.pill-lock:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.lock-ic{ font-size:18px; }

/* locked visual */
.pill-lock.locked{
  background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(250,204,21,.18));
  border-color: rgba(239,68,68,.25);
}
body.theme-dark .pill-lock.locked{
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(110,231,255,.10));
}

/* ===== Captain crown styling ===== */
.captain{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.crown{
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,214,102,.9), rgba(255,122,0,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  animation: crownBob 1.6s ease-in-out infinite;
}
body.theme-dark .crown{
  background: linear-gradient(135deg, rgba(110,231,255,.9), rgba(167,139,250,.9));
}
@keyframes crownBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* ===== Animated Scoreboard Preview ===== */
.scoreboard{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bar{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 12px;
}
.bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:950;
  margin-bottom: 10px;
}
.bar-score{
  font-size: 18px;
}

.bar-track{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
}
body.theme-dark .bar-track{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2,.9,.2,1);
  position:relative;
  overflow:hidden;
}
.bar-fill::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%);
  animation: shine2 1.4s ease infinite;
  opacity:.55;
}
@keyframes shine2{ to{ transform: translateX(120%); } }

.bar.red .bar-fill{
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(250,204,21,.85));
}
.bar.blue .bar-fill{
  background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(110,231,255,.85));
}

@media(max-width:980px){
  .scoreboard{ grid-template-columns: 1fr; }
}



.hint{margin-top:10px;color:var(--ink2);font-weight:800;font-size:13px;}

.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.team{
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:12px;border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  font-weight:950;
  transition:transform .2s ease, box-shadow .2s ease;
}
.team:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.12);}
.team .dot{width:10px;height:10px;border-radius:50%;}
.team-red .dot{background:#ef4444;}
.team-blue .dot{background:#3b82f6;}
.team-random{grid-column:1 / -1;}

.team-status{margin-top:10px;font-weight:900;color:var(--ink2);}

.big-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.host-pill{
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  font-weight:950;color:var(--ink2);
}

.settings{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:8px;}
.settings .field{flex:1;min-width:220px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.list-card{
  background:var(--panel2);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:14px;
}
.list-card h3{font-size:16px;font-weight:950;margin-bottom:8px;}

ul{list-style:none;}
#player-list li, #team-red-list li, #team-blue-list li{
  padding:8px 0;border-bottom:1px solid rgba(0,0,0,.08);
  font-weight:800;color:var(--ink);
}
body.theme-dark #player-list li,
body.theme-dark #team-red-list li,
body.theme-dark #team-blue-list li{
  border-bottom:1px solid rgba(255,255,255,.10);
}

.teams-view{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.team-box{
  border-radius:18px;padding:12px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.35);
}
body.theme-dark .team-box{background:rgba(0,0,0,.22);}
.team-box.red{outline:2px solid rgba(239,68,68,.25);}
.team-box.blue{outline:2px solid rgba(59,130,246,.25);}
.t-title{font-weight:950;margin-bottom:8px;}

.msg{margin-top:12px;font-weight:950;}

@media(max-width:980px){
  .grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .teams-view{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .lobby-head{flex-direction:column;align-items:flex-start;}
  .big-head{flex-direction:column;align-items:flex-start;}
}

/* ===== Settings layout ===== */
.settings-grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 14px;
  margin-top: 12px;
}
@media(max-width:980px){
  .settings-grid{ grid-template-columns: 1fr; }
}

.settings-card{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tiny{ font-size: 12px; opacity:.8; }

.note{
  margin-top: 10px;
  font-size: 12px;
  opacity:.85;
}

/* ===== Subject cards + chips ===== */
.subject-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media(max-width:740px){
  .subject-grid{ grid-template-columns: 1fr 1fr; }
}
.subject-card{
  text-align:left;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  font-weight: 950;
}
.subject-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }
.subject-card .small{ display:block; font-size: 12px; opacity:.75; margin-top:4px; font-weight:700; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  font-weight: 900;
  font-size: 12px;
}
body.theme-dark .chip{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.chip button{
  width: 24px; height:24px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
body.theme-dark .chip button{ background: rgba(255,255,255,.10); }
.chip button:hover{ transform: translateY(-1px); }

/* ===== Drawer for subsubjects ===== */
.drawer{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:none;
}
.drawer.open{ display:block; animation: fadeSwap .22s ease both; }
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.drawer-title{ font-weight: 950; }
.xbtn{
  width: 34px; height:34px;
  border-radius: 12px;
  background: rgba(0,0,0,.08);
}
body.theme-dark .xbtn{ background: rgba(255,255,255,.10); }

.sub-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media(max-width:740px){
  .sub-grid{ grid-template-columns: 1fr 1fr; }
}
.sub-btn{
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sub-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }

/* ===== Segmented controls ===== */
.seg{
  display:flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap:wrap;
}
.seg-btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  font-weight: 950;
  transition: transform .2s ease, box-shadow .2s ease;
}
.seg-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }
.seg-btn.active{
  background: linear-gradient(135deg, rgba(255,122,0,.95), rgba(255,214,102,.92));
  color: #111827;
  border-color: rgba(255,255,255,.35);
}
body.theme-dark .seg-btn.active{
  background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.92));
  color: #0b1020;
}

.field{ margin-top: 12px; }
.field label{ font-weight: 900; display:block; margin-bottom: 6px; }

/* Timer UI */
.timer-row{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
}
.timer-ctrl{
  display:flex;
  align-items:center;
  gap: 10px;
  flex:1;
  min-width: 220px;
}
.timer-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  font-weight: 950;
  min-width: 54px;
  text-align:center;
}

.attempts{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
}
.attempt-pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  font-weight: 950;
}
body.theme-dark .attempt-pill{ background: rgba(255,255,255,.10); }
/* ===== Animations ===== */
@keyframes fadeSwap{
  from{ opacity:0; transform:scale(.98); }
  to{ opacity:1; transform:scale(1); }
}

/* =========================
   SUBJECT PICKER (screenshot vibe)
========================= */
.picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.picker-meta{ display:flex; align-items:center; gap: 10px; }
.tiny{ font-size: 12px; opacity:.8; }

.btn-mini{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  font-weight: 900;
  box-shadow: var(--shadow2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-mini:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }

.note{ margin-top: 10px; font-size: 12px; opacity:.85; }

/* Grid cards */
.subject-cards{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  padding: 8px 6px;
}
@media(max-width:1200px){ .subject-cards{ grid-template-columns: repeat(5, 1fr); } }
@media(max-width:900px){  .subject-cards{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width:540px){  .subject-cards{ grid-template-columns: repeat(2, 1fr); } }

.subject-card{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 12px 25px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
  padding:0;
  text-align: initial;
}
body.theme-dark .subject-card{
  background: rgba(17,24,39,.62);
  border: 1px solid rgba(255,255,255,.12);
}

.subject-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0,0,0,.16);
}

/* info circle like screenshot */
.subject-info{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 28px; height:28px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display:grid;
  place-items:center;
  font-weight: 1000;
  z-index: 3;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}
.subject-info:hover{ transform: scale(1.05); }

/* art area */
.subject-art{
  height: 130px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(180deg, rgba(66,133,244,.18), rgba(66,133,244,.05));
  display:grid;
  place-items:center;
}
body.theme-dark .subject-art{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08), transparent 50%),
    linear-gradient(180deg, rgba(110,231,255,.12), rgba(110,231,255,.02));
}
.subject-emoji{
  font-size: 52px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
}

/* orange name bar */
.subject-name{
  height: 46px;
  background: #ff8a3d;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing:.01em;
}

/* selected ring */
.subject-card.selected{
  outline: 3px solid rgba(255,138,61,.65);
  outline-offset: 2px;
}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  font-weight: 950;
  font-size: 12px;
}
body.theme-dark .chip{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.chip button{
  width: 24px; height:24px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
  font-weight: 950;
}
body.theme-dark .chip button{ background: rgba(255,255,255,.10); }

/* overlay for subsubjects (second card) */
.sub-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index: 9999;
  padding: 18px;
}
.sub-overlay.open{ display:grid; place-items:center; }

.sub-card{
  width: min(820px, 100%);
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  overflow:hidden;
  backdrop-filter: blur(10px);
  animation: fadeSwap .22s ease both;
}

.sub-top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  background: rgba(255,138,61,.15);
}
.sub-back{
  width: 40px; height:40px;
  border-radius: 14px;
  background: rgba(0,0,0,.08);
  font-weight: 1000;
}
body.theme-dark .sub-back{ background: rgba(255,255,255,.10); }

.sub-title{ font-weight: 1000; font-size: 16px; }

.sub-body{ padding: 12px; }

.sub-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media(max-width:680px){ .sub-grid{ grid-template-columns: repeat(2, 1fr); } }

.sub-btn{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  font-weight: 1000;
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sub-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0,0,0,.14);
}
.sub-btn.selected{
  outline: 3px solid rgba(255,138,61,.65);
  outline-offset: 2px;
}

.genbox{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.genrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.gentxt{ font-size: 14px; opacity:.95; }
.genpct{ font-size: 13px; opacity:.85; }

.genbar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
}
.genfill{
  height:100%;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  width:0%;
  transition: width .25s ease;
}
/* end subject picker */