/* =========================================================
   English Nest — Listening Challenge
   Scoped to #listening-challenge-page only
   ========================================================= */

#listening-challenge-page{
  --lc-navy:#0d315f;
  --lc-navy-deep:#08264c;
  --lc-navy-soft:#173f70;
  --lc-gold:#d6b574;
  --lc-gold-soft:#ead5a7;
  --lc-cream:#f7f3ea;
  --lc-paper:#fffdfa;
  --lc-line:#e7dfd2;
  --lc-muted:#8996a7;
  --lc-green:#2f8a67;
  --lc-green-soft:#edf8f3;
  --lc-red:#c55d63;
  --lc-red-soft:#fff1f1;
  background:#f8f4ec;
}

#listening-challenge-page *{box-sizing:border-box}

#listening-challenge-page .lc-page{
  max-width:1120px;
  margin:0 auto;
  padding:34px 24px 90px;
}

/* ===== HERO ===== */
#listening-challenge-page .lc-hero{
  min-height:410px;
  padding:52px 56px;
  border-radius:30px;
  background:
    radial-gradient(circle at 90% 0%,rgba(214,181,116,.11),transparent 29%),
    radial-gradient(circle at 4% 110%,rgba(255,255,255,.07),transparent 31%),
    linear-gradient(135deg,#0a2a53,#123f74);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  align-items:center;
  gap:48px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 64px rgba(13,49,95,.14);
}

#listening-challenge-page .lc-hero::before{
  content:"";
  position:absolute;
  width:370px;
  height:370px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.055);
  left:-160px;
  bottom:-195px;
  box-shadow:
    0 0 0 50px rgba(255,255,255,.025),
    0 0 0 100px rgba(255,255,255,.015);
}

#listening-challenge-page .lc-hero-copy{position:relative;z-index:2}

#listening-challenge-page .lc-kicker{
  display:block;
  margin-bottom:12px;
  color:var(--lc-gold);
  font-size:12px;
  font-weight:900;
}

#listening-challenge-page .lc-hero h1{
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.8px;
}

#listening-challenge-page .lc-hero h1 span{color:#f1cf89}

#listening-challenge-page .lc-hero p{
  max-width:630px;
  margin:18px 0 0;
  color:#b4c2d4;
  font-size:16px;
  line-height:2;
}

#listening-challenge-page .lc-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
}

#listening-challenge-page .lc-hero-pills span{
  min-height:39px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#afbed0;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#listening-challenge-page .lc-hero-pills b{
  color:#fff;
  font-size:13px;
  direction:ltr;
}

/* ===== HERO ART ===== */
#listening-challenge-page .lc-hero-art{
  height:280px;
  position:relative;
  z-index:2;
}

#listening-challenge-page .lc-wave-card{
  position:absolute;
  width:258px;
  height:184px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
}

#listening-challenge-page .lc-wave-back{
  left:38px;
  top:58px;
  background:rgba(255,255,255,.025);
  transform:rotate(-5deg);
}

#listening-challenge-page .lc-wave-main{
  left:70px;
  top:38px;
  padding:26px 24px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(7px);
}

#listening-challenge-page .lc-wave-main > span{
  display:block;
  color:#d8ba7b;
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:2.5px;
  direction:ltr;
}

#listening-challenge-page .lc-wave{
  height:76px;
  margin-top:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

#listening-challenge-page .lc-wave i{
  width:5px;
  border-radius:999px;
  background:linear-gradient(#e6c67f,rgba(255,255,255,.28));
}

#listening-challenge-page .lc-play-symbol{
  position:absolute;
  left:22px;
  bottom:18px;
  width:31px;
  height:31px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:11px;
  direction:ltr;
}

#listening-challenge-page .lc-art-chip{
  position:absolute;
  min-height:31px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#8fa6c0;
  font:800 9px/1 Arial,sans-serif;
  letter-spacing:1.2px;
  direction:ltr;
}

#listening-challenge-page .lc-chip-a{right:1px;top:25px}
#listening-challenge-page .lc-chip-b{right:17px;bottom:49px}
#listening-challenge-page .lc-chip-c{left:3px;bottom:12px;color:#d8ba7b}

/* ===== ARENA ===== */
#listening-challenge-page .lc-arena{
  margin-top:22px;
  padding:34px;
  border:1px solid var(--lc-line);
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0%,rgba(214,181,116,.10),transparent 24%),
    #f1ede4;
}

#listening-challenge-page .lc-arena-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}

#listening-challenge-page .lc-arena-head > div > span{
  display:block;
  direction:ltr;
  color:#b18d48;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
}

#listening-challenge-page .lc-arena-head h2{
  margin:7px 0 0;
  color:var(--lc-navy);
  font-size:28px;
  font-weight:900;
}

#listening-challenge-page .lc-back-link{
  color:#7d8998;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  gap:9px;
  align-items:center;
}

#listening-challenge-page .lc-back-link > span{
  direction:rtl;
  letter-spacing:0;
  white-space:nowrap;
}

#listening-challenge-page .lc-back-link i{
  width:31px;
  height:31px;
  border:1px solid #dbe1e8;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--lc-navy);
  font-style:normal;
}

/* ===== APP ===== */
#listening-challenge-page .lc-app{
  min-height:620px;
  border:1px solid #e8e1d6;
  border-radius:25px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 36px rgba(13,49,95,.055);
  overflow:hidden;
  color:var(--lc-navy);
  position:relative;
}

#listening-challenge-page .lc-loading{
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  color:#9aa5b3;
  font-size:13px;
}

#listening-challenge-page .lc-loading-mark{
  width:34px;
  height:34px;
  border:2px solid #e5e8ec;
  border-top-color:var(--lc-gold);
  border-radius:50%;
  animation:lc-spin .8s linear infinite;
}

@keyframes lc-spin{to{transform:rotate(360deg)}}

#listening-challenge-page .lc-hidden{display:none!important}

/* ===== HUB ===== */
#listening-challenge-page .lc-hub{
  min-height:620px;
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
}

#listening-challenge-page .lc-hub-side{
  padding:34px 28px;
  background:
    radial-gradient(circle at 50% 30%,rgba(214,181,116,.14),transparent 34%),
    linear-gradient(160deg,#0d315f,#153d6b);
  color:#fff;
  position:relative;
  overflow:hidden;
}

#listening-challenge-page .lc-hub-side::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  left:-75px;
  bottom:-85px;
  box-shadow:0 0 0 30px rgba(255,255,255,.02);
}

#listening-challenge-page .lc-side-label{
  color:#d9bd83;
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:2px;
  direction:ltr;
}

#listening-challenge-page .lc-side-number{
  margin-top:85px;
  color:#fff;
  font:900 72px/.9 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-side-number small{
  display:block;
  margin-top:10px;
  color:#8fa4bc;
  font-size:10px;
  letter-spacing:3px;
}

#listening-challenge-page .lc-side-copy{
  position:relative;
  z-index:2;
  margin:34px 0 0;
  color:#91a6bf;
  font-size:11px;
  line-height:1.8;
}

#listening-challenge-page .lc-hub-main{
  padding:38px 40px;
}

#listening-challenge-page .lc-mini-label{
  display:block;
  margin-bottom:9px;
  color:#b18d48;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.6px;
  direction:ltr;
}

#listening-challenge-page .lc-hub-main h3{
  margin:0;
  color:var(--lc-navy);
  font-size:32px;
  font-weight:900;
}

#listening-challenge-page .lc-hub-copy{
  margin:9px 0 0;
  color:#8e99a7;
  font-size:13px;
  line-height:1.8;
}

#listening-challenge-page .lc-hub-filters{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:18px;
}

#listening-challenge-page .lc-filter{
  min-height:31px;
  padding:6px 12px;
  border:1px solid #e4ddd2;
  border-radius:999px;
  background:#fff;
  color:#8e99a6;
  font-family:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

#listening-challenge-page .lc-filter.active{
  background:var(--lc-navy);
  border-color:var(--lc-navy);
  color:#fff;
}

#listening-challenge-page .lc-hub-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
  max-height:440px;
  overflow:auto;
  padding-inline-end:5px;
}

#listening-challenge-page .lc-hub-item{
  min-height:92px;
  padding:14px;
  border:1px solid #e7e1d7;
  border-radius:16px;
  background:#fbfaf7;
  text-align:initial;
  cursor:pointer;
  transition:.17s ease;
  display:flex;
  gap:12px;
  align-items:flex-start;
  position:relative;
}

#listening-challenge-page .lc-hub-item:hover{
  transform:translateY(-2px);
  border-color:#cfb77f;
  box-shadow:0 8px 22px rgba(13,49,95,.07);
}

#listening-challenge-page .lc-hub-item.done{
  border-color:#a6cdbb;
  background:#f7fbf8;
}

#listening-challenge-page .lc-hub-num{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f0eadf;
  color:#9b7d47;
  display:grid;
  place-items:center;
  font:900 11px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-hub-item.done .lc-hub-num{
  background:#e4f2ea;
  color:#2e7b5d;
}

#listening-challenge-page .lc-hub-info{min-width:0;flex:1}

#listening-challenge-page .lc-hub-title{
  color:var(--lc-navy);
  font:800 13px/1.35 Arial,Helvetica,sans-serif;
  direction:ltr;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#listening-challenge-page .lc-hub-meta{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
  color:#9aa4af;
  font-size:9px;
}

#listening-challenge-page .lc-level{
  position:absolute;
  top:12px;
  left:12px;
  min-width:31px;
  min-height:23px;
  padding:5px 7px;
  border-radius:999px;
  background:#f1e7d3;
  color:#96753c;
  display:grid;
  place-items:center;
  font:900 9px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-hub-item.done .lc-level{
  background:#e4f2ea;
  color:#2e7b5d;
}

/* ===== CHALLENGE SCREEN ===== */
#listening-challenge-page .lc-challenge{
  min-height:620px;
  padding:28px 34px 36px;
}

#listening-challenge-page .lc-challenge-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#listening-challenge-page .lc-list-back{
  border:0;
  background:transparent;
  color:#8995a4;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  padding:0;
}

#listening-challenge-page .lc-status-row{
  display:flex;
  align-items:center;
  gap:8px;
}

#listening-challenge-page .lc-level-badge{
  min-height:31px;
  padding:7px 11px;
  border:1px solid #e4ddd2;
  border-radius:999px;
  background:#faf8f4;
  color:#9a7a3f;
  font:900 10px/1 Arial,sans-serif;
  direction:ltr;
  display:grid;
  place-items:center;
}

#listening-challenge-page .lc-timer{
  min-height:31px;
  padding:7px 11px;
  border:1px solid #dde3e9;
  border-radius:999px;
  background:#fff;
  color:var(--lc-navy);
  display:flex;
  align-items:center;
  gap:7px;
  font:900 11px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-timer .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6ca78d;
}

#listening-challenge-page .lc-timer.warn{
  border-color:#e0a6a8;
  background:#fff5f5;
  color:#ad4c51;
}

#listening-challenge-page .lc-timer.warn .dot{background:#c55d63}

#listening-challenge-page .lc-title-row{
  margin-top:20px;
  padding-bottom:18px;
  border-bottom:1px solid #eee8df;
}

#listening-challenge-page .lc-title-row h3{
  margin:0;
  direction:ltr;
  text-align:left;
  color:var(--lc-navy);
  font:900 30px/1.25 Arial,Helvetica,sans-serif;
}

#listening-challenge-page .lc-title-row p{
  margin:8px 0 0;
  color:#8f9aa7;
  font-size:12px;
  line-height:1.75;
}

/* ===== START PANEL ===== */
#listening-challenge-page .lc-start-panel{
  max-width:700px;
  margin:34px auto 0;
  padding:34px;
  border:1px solid #e6dfd4;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 130%,rgba(214,181,116,.11),transparent 45%),
    #fbfaf7;
  text-align:center;
}

#listening-challenge-page .lc-start-icon{
  width:70px;
  height:70px;
  margin:0 auto 17px;
  border-radius:50%;
  background:var(--lc-navy);
  display:grid;
  place-items:center;
  color:#e8c984;
}

#listening-challenge-page .lc-start-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#listening-challenge-page .lc-start-panel h4{
  margin:0;
  color:var(--lc-navy);
  font-size:22px;
  font-weight:900;
}

#listening-challenge-page .lc-start-panel p{
  max-width:520px;
  margin:9px auto 0;
  color:#929daa;
  font-size:12px;
  line-height:1.8;
}

#listening-challenge-page .lc-start-stats{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

#listening-challenge-page .lc-start-stats span{
  padding:7px 11px;
  border:1px solid #e5dfd5;
  border-radius:999px;
  background:#fff;
  color:#8e99a5;
  font-size:10px;
}

#listening-challenge-page .lc-btn{
  min-height:47px;
  padding:0 23px;
  border:0;
  border-radius:999px;
  background:var(--lc-navy);
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

#listening-challenge-page .lc-btn:hover{
  transform:translateY(-2px);
  background:#09294f;
  box-shadow:0 9px 22px rgba(13,49,95,.14);
}

#listening-challenge-page .lc-start-panel .lc-btn{margin-top:20px}

/* ===== PLAYER ===== */
#listening-challenge-page .lc-body{
  max-width:860px;
  margin:26px auto 0;
}

#listening-challenge-page .lc-player-card{
  padding:24px;
  border:1px solid #e6dfd4;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% -30%,rgba(214,181,116,.12),transparent 42%),
    #fbfaf7;
}

#listening-challenge-page .lc-speakers{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}

#listening-challenge-page .lc-speaker{text-align:center}

#listening-challenge-page .lc-avatar{
  width:48px;
  height:48px;
  margin:0 auto 6px;
  border:1px solid #dfe4e9;
  border-radius:50%;
  background:#fff;
  color:#8190a2;
  display:grid;
  place-items:center;
  font:900 14px/1 Arial,sans-serif;
  transition:.2s ease;
}

#listening-challenge-page .lc-speaker span{
  color:#9aa4af;
  font:700 9px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-speaker.active .lc-avatar{
  border-color:#caa967;
  background:#f6eddc;
  color:#8d6f37;
  box-shadow:0 0 0 5px rgba(214,181,116,.12);
  transform:scale(1.06);
}

#listening-challenge-page .lc-player-main{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:22px;
}

#listening-challenge-page .lc-play-btn{
  width:74px;
  height:74px;
  border:0;
  border-radius:50%;
  background:var(--lc-navy);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  position:relative;
  transition:.18s ease;
}

#listening-challenge-page .lc-play-btn:hover{transform:scale(1.04)}

#listening-challenge-page .lc-play-btn:disabled{
  opacity:.4;
  cursor:default;
  transform:none;
}

#listening-challenge-page .lc-play-btn svg{
  width:25px;
  height:25px;
  fill:currentColor;
}

#listening-challenge-page .lc-pulse{
  position:absolute;
  inset:-7px;
  border:1px solid #bfa16b;
  border-radius:50%;
  opacity:0;
}

#listening-challenge-page .lc-play-btn.playing .lc-pulse{
  animation:lc-pulse 1.35s ease-out infinite;
}

@keyframes lc-pulse{
  0%{opacity:.5;transform:scale(1)}
  100%{opacity:0;transform:scale(1.32)}
}

#listening-challenge-page .lc-track{
  min-width:0;
}

#listening-challenge-page .lc-track-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

#listening-challenge-page .lc-track-head strong{
  color:var(--lc-navy);
  font:800 11px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-progress-time{
  color:#9aa4af;
  font:800 9px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-progress-bar{
  height:5px;
  border-radius:999px;
  background:#e8e4dd;
  overflow:hidden;
}

#listening-challenge-page .lc-progress-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#c7a35f,#e4ca86);
  transition:width .12s linear;
}

#listening-challenge-page .lc-plays{
  min-width:94px;
  padding:9px 11px;
  border:1px solid #e5ded3;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

#listening-challenge-page .lc-plays strong{
  display:block;
  color:var(--lc-navy);
  font:900 18px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-plays span{
  display:block;
  margin-top:5px;
  color:#9aa4af;
  font-size:9px;
}

#listening-challenge-page .lc-audio-error{
  display:none;
  margin-top:12px;
  padding:9px 12px;
  border:1px solid #efc9ca;
  border-radius:11px;
  background:#fff5f5;
  color:#aa5054;
  font-size:10px;
  font-weight:800;
  text-align:center;
}

#listening-challenge-page .lc-audio-error.show{display:block}

/* ===== QUESTIONS ===== */
#listening-challenge-page .lc-questions{
  margin-top:18px;
}

#listening-challenge-page .lc-question{
  padding:19px;
  border:1px solid #e7e1d7;
  border-radius:18px;
  background:#fff;
}

#listening-challenge-page .lc-question + .lc-question{margin-top:10px}

#listening-challenge-page .lc-q-text{
  color:var(--lc-navy);
  font:800 14px/1.6 Arial,Helvetica,sans-serif;
  direction:ltr;
  text-align:left;
}

#listening-challenge-page .lc-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:11px;
}

#listening-challenge-page .lc-opt{
  min-height:52px;
  padding:10px 37px 10px 13px;
  border:1px solid #e4ded4;
  border-radius:13px;
  background:#fbfaf7;
  color:#244467;
  font:700 11px/1.45 Arial,Helvetica,sans-serif;
  direction:ltr;
  text-align:left;
  cursor:pointer;
  transition:.15s ease;
  position:relative;
}

#listening-challenge-page .lc-opt::before{
  content:attr(data-key);
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  width:21px;
  height:21px;
  border:1px solid #dfe3e7;
  border-radius:6px;
  display:grid;
  place-items:center;
  color:#9ea8b3;
  font:700 9px/1 Arial,sans-serif;
}

#listening-challenge-page .lc-opt:hover:not(:disabled){
  border-color:#cab077;
  transform:translateY(-1px);
}

#listening-challenge-page .lc-opt.selected{
  border-color:#c7a35f;
  background:#faf4e7;
  box-shadow:inset 0 0 0 1px #c7a35f;
}

#listening-challenge-page .lc-opt.correct{
  border-color:#7eb99f;
  background:var(--lc-green-soft);
  color:#267457;
}

#listening-challenge-page .lc-opt.correct::before{
  content:"✓";
  border-color:#89bea7;
  color:#267457;
}

#listening-challenge-page .lc-opt.incorrect{
  border-color:#dda0a3;
  background:var(--lc-red-soft);
  color:#a7474c;
}

#listening-challenge-page .lc-opt.incorrect::before{
  content:"×";
  border-color:#dda0a3;
  color:#b34f54;
}

#listening-challenge-page .lc-opt:disabled{cursor:default}

#listening-challenge-page .lc-submit-row{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

#listening-challenge-page .lc-submit-row .lc-btn{
  min-width:180px;
}

/* ===== RESULTS ===== */
#listening-challenge-page .lc-results{
  margin-top:18px;
  padding:22px;
  border:1px solid #e3ddd3;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% -20%,rgba(214,181,116,.12),transparent 42%),
    #faf8f4;
  text-align:center;
}

#listening-challenge-page .lc-score{
  color:var(--lc-navy);
  font:900 42px/1 Arial,sans-serif;
  direction:ltr;
}

#listening-challenge-page .lc-score-label{
  margin-top:7px;
  color:#929da9;
  font-size:10px;
}

#listening-challenge-page .lc-results-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:17px;
}

#listening-challenge-page .lc-ghost-btn{
  min-height:39px;
  padding:0 15px;
  border:1px solid #dfe4e9;
  border-radius:999px;
  background:#fff;
  color:var(--lc-navy);
  font-family:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

#listening-challenge-page .lc-transcript{
  margin-top:17px;
  padding:17px;
  border:1px solid #e3ddd3;
  border-radius:15px;
  background:#fff;
  color:#6f7f90;
  font:500 12px/1.85 Arial,Helvetica,sans-serif;
  direction:ltr;
  text-align:left;
}

#listening-challenge-page .lc-transcript b{
  color:#9b793c;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  #listening-challenge-page .lc-hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  #listening-challenge-page .lc-hero-art{height:245px}
}

@media(max-width:760px){
  #listening-challenge-page .lc-hub{grid-template-columns:1fr}
  #listening-challenge-page .lc-hub-side{min-height:180px}
  #listening-challenge-page .lc-side-number{margin-top:38px;font-size:58px}
  #listening-challenge-page .lc-hub-list{grid-template-columns:1fr;max-height:none}
}

@media(max-width:700px){
  #listening-challenge-page .lc-page{padding:22px 14px 70px}
  #listening-challenge-page .lc-hero{padding:32px 24px;border-radius:23px}
  #listening-challenge-page .lc-hero h1{font-size:36px}
  #listening-challenge-page .lc-hero-art{display:none}
  #listening-challenge-page .lc-arena{padding:16px;border-radius:23px}
  #listening-challenge-page .lc-arena-head{align-items:flex-start;flex-direction:column}
  #listening-challenge-page .lc-hub-main{padding:30px 22px}
  #listening-challenge-page .lc-challenge{padding:23px 17px 28px}
  #listening-challenge-page .lc-title-row h3{font-size:25px}
  #listening-challenge-page .lc-player-main{grid-template-columns:70px minmax(0,1fr)}
  #listening-challenge-page .lc-plays{grid-column:1/-1}
  #listening-challenge-page .lc-options{grid-template-columns:1fr}
}