/* Listening exercises on cartoon episode pages (public/assets/le-episode.js). */

.le-ep-ex {
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 22px;
  box-shadow: 0 4px 14px rgba(28, 39, 76, 0.06);
}

.le-ep-ex > ol {
  margin: 0;
  padding-left: 22px;
}

.le-ep-q {
  padding: 10px 0 14px;
  border-bottom: 1px dashed #E6E9F2;
}

.le-ep-q:last-child {
  border-bottom: 0;
}

.le-ep-en {
  font-weight: 800;
  color: #1A1F36;
  margin: 0 0 2px;
}

.le-ep-ru {
  color: #64748B;
  font-size: 14px;
  margin: 0 0 10px;
}

.le-ep-say {
  border: 0;
  background: #EEF2FF;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 30px;
  padding: 0;
  vertical-align: middle;
}

.le-ep-say:hover {
  background: #DCE3FF;
}

.le-ep-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.le-ep-opt,
.le-ep-step {
  border: 2px solid #E6E9F2;
  background: #F5F7FC;
  border-radius: 12px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  color: #1A1F36;
  cursor: pointer;
  text-align: left;
}

.le-ep-opt:hover:not(:disabled),
.le-ep-step:hover {
  border-color: #4C6EF5;
}

.le-ep-opt:disabled {
  cursor: default;
}

.le-ep-opt.le-correct {
  border-color: #12B76A;
  background: #ECFDF5;
  color: #067647;
}

.le-ep-opt.le-wrong {
  border-color: #E11D48;
  background: #FEF2F2;
  color: #B42318;
}

.le-ep-why {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #F5F7FC;
  font-size: 14px;
  color: #1A1F36;
}

.le-ep-q.is-right .le-ep-why {
  background: #ECFDF5;
}

.le-ep-q.is-wrong .le-ep-why {
  background: #FFF7ED;
}

.le-ep-hint {
  color: #64748B;
  font-size: 14px;
  margin: 0 0 10px;
}

.le-ep-done {
  margin: 0 0 12px;
  padding-left: 24px;
  font-weight: 700;
  color: #067647;
}

.le-ep-done li {
  margin-bottom: 4px;
}

.le-ep-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.le-ep-score {
  margin: 14px 0 8px;
  font-weight: 800;
  font-size: 17px;
  color: #1A1F36;
}

.le-ep-again {
  margin-top: 4px;
}

.le-shake {
  animation: le-ep-shake 0.35s;
  border-color: #E11D48;
}

@keyframes le-ep-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* the safety rule from the end of the episode */
.le-ep-rule {
  background: #FFF8E6;
  border-left: 4px solid #FFB020;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
}

.le-ep-rule p {
  margin: 0 0 6px;
}

.le-ep-rule p:last-child {
  margin-bottom: 0;
}

.le-ep-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.le-ep-steps li {
  background: #F5F7FC;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
}

.le-ep-steps strong {
  display: block;
  color: #3B5BDB;
}

.le-ep-series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.le-ep-series a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #E6E9F2;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #1A1F36;
  background: #fff;
  font-weight: 700;
}

.le-ep-series a:hover {
  border-color: #4C6EF5;
}

.le-ep-series span {
  display: block;
  font-weight: 400;
  color: #64748B;
  font-size: 13px;
  margin-top: 2px;
}

.le-ep-series .is-current {
  border: 2px solid #4C6EF5;
  border-radius: 12px;
  padding: 10px 14px;
  background: #EEF2FF;
  font-weight: 700;
}

@media print {
  .le-ep-say, .le-ep-again, .le-ep-score { display: none !important; }
}