@charset "UTF-8";
/* Most colors are controlled in assets/css/variables.css. Change color variables there. */
.streak-badge,.exercise-badge{display:flex;align-items:center;gap:5px;border-radius:20px;padding:5px 13px;font-size:.82rem;font-weight:600;line-height:1.25}
.streak-badge{background:var(--accent-light);color:var(--accent)}
.exercise-badge{background:var(--surface2);color:var(--text2)}
.exercise-badge #exercise-num{color:var(--text);font-weight:800}
#lang-switcher{display:flex;gap:4px}
.lang-btn{padding:5px 11px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--text2);letter-spacing:.04em;transition:all var(--tr);border:1.5px solid transparent}
.lang-btn:hover{color:var(--accent);border-color:var(--accent)}
.lang-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.level-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px 20px 24px;cursor:pointer;transition:all var(--tr);text-align:center;position:relative;overflow:hidden}
.level-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--card-hover-bg),transparent);opacity:0;transition:opacity var(--tr)}
.level-card:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.level-card:hover::before{opacity:1}
.level-badge{font-family:var(--font-display);font-size:2.6rem;color:var(--level-badge-color);display:block;margin-bottom:8px;position:relative}
.level-card h3{font-size:1rem;font-weight:600;margin-bottom:6px;position:relative}
.level-card p{font-size:.84rem;color:var(--text2);line-height:1.4;position:relative}
.btn-back{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text2);flex-shrink:0;transition:all var(--tr)}
.btn-back:hover{border-color:var(--accent);color:var(--accent)}
.topic-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all var(--tr);gap:12px}
.topic-card:hover{border-color:var(--card-hover-border);box-shadow:var(--shadow);transform:translateX(4px)}
.topic-info h3{font-size:1.05rem;font-weight:600;margin-bottom:3px}
.topic-info p{font-size:.83rem;color:var(--text2)}
.topic-meta{font-size:.8rem;color:var(--text2);white-space:nowrap}
.topic-arrow{color:var(--topic-arrow-color);font-size:1.2rem;margin-left:12px}
.lesson-tab{padding:8px 18px;border-radius:20px;border:1.5px solid var(--border);font-size:.88rem;font-weight:500;color:var(--text2);transition:all var(--tr);background:var(--surface)}
.lesson-tab:hover{border-color:var(--accent);color:var(--accent)}
.lesson-tab.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--button-bg);color:var(--button-text);border-radius:8px;padding:11px 22px;font-size:.9rem;font-weight:600;transition:all var(--tr);letter-spacing:.01em;text-decoration:none}
.btn:hover{background:var(--button-hover-bg);transform:translateY(-1px);box-shadow:var(--button-shadow)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:var(--button-secondary-bg);color:var(--button-secondary-text);border:1.5px solid var(--button-secondary-border)}
.btn.secondary:hover{border-color:var(--accent);color:var(--button-secondary-hover-text);background:var(--button-secondary-hover-bg);box-shadow:none}
.btn-icon{padding:2px;font-size:.95rem;opacity:.7;transition:opacity var(--tr),transform var(--tr);flex-shrink:0}
.btn-icon:hover{opacity:1;transform:scale(1.2)}
.btn-skip-word{display:block;width:fit-content;margin:6px auto 0;font-size:.8rem;color:var(--text2);text-decoration:underline;transition:color var(--tr)}
.btn-skip-word:hover{color:var(--danger)}
.feedback-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);padding:10px 28px;border-radius:30px;font-weight:700;font-size:1rem;pointer-events:none;z-index:100;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;opacity:0}
.feedback-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
.feedback-toast.correct{background:var(--accent);color:var(--on-accent)}
.feedback-toast.wrong{background:var(--danger);color:var(--on-accent)}
.cookie-banner{position:fixed;bottom:-260px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:600px;background:var(--cookie-bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-lg);z-index:200;transition:bottom .5s cubic-bezier(.34,1.56,.64,1)}
.cookie-banner.visible{bottom:24px}
.cookie-inner{display:flex;flex-direction:column;gap:14px}
.cookie-inner h4{font-weight:700;font-size:.95rem}
.cookie-inner p{font-size:.85rem;color:var(--cookie-text);line-height:1.5}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cookie-btns .btn{padding:8px 18px;font-size:.85rem}
.cookie-link{font-size:.85rem;color:var(--cookie-link);font-weight:600;text-decoration:none}
.cookie-link:hover{text-decoration:underline}
.topic-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.topic-info h3,
.topic-info p{
  margin:0;
  padding:0;
  text-align:left;
  text-indent:0;
}

/*
  Topic image cards
  ---------------------------------------------------------
  Add this block to the bottom of assets/css/components.css.

  Background image convention:
  assets/img/backgrounds/<level>_<topic-id>_bg.jpg

  Examples:
  assets/img/backgrounds/b1_weather_bg.jpg
  assets/img/backgrounds/b1_person-description_bg.jpg
*/

.topic-list,
.topic-list.topic-list-photo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
}

.topic-list .topic-card.topic-card-photo{
  position:relative;
  aspect-ratio:1 / 1;
  min-height:190px;
  overflow:hidden;
  padding:0;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--surface2),var(--accent-light));
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  text-align:left;
  box-shadow:var(--shadow);
  transform:translateY(0);
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1),
    border-color var(--tr);
}

.topic-list .topic-card.topic-card-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--topic-bg);
  background-color:var(--surface2);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.92;
  transform:scale(1);
  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
}

.topic-list .topic-card.topic-card-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.10) 38%,
      rgba(0,0,0,.68) 72%,
      rgba(0,0,0,.86) 100%);
  transition:background .35s ease;
}

.topic-list .topic-card.topic-card-photo:hover,
.topic-list .topic-card.topic-card-photo:focus-visible{
  border-color:var(--card-hover-border);
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}

.topic-list .topic-card.topic-card-photo:hover::before,
.topic-list .topic-card.topic-card-photo:focus-visible::before{
  transform:scale(1.055);
  opacity:1;
}

.topic-list .topic-card.topic-card-photo:hover::after,
.topic-list .topic-card.topic-card-photo:focus-visible::after{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.00) 0%,
      rgba(0,0,0,.08) 34%,
      rgba(0,0,0,.62) 70%,
      rgba(0,0,0,.88) 100%);
}

.topic-list .topic-card.topic-card-photo .topic-info,
.topic-list .topic-card.topic-card-photo .topic-meta-wrap{
  position:relative;
  z-index:2;
  padding-left:18px;
  padding-right:18px;
}

.topic-list .topic-card.topic-card-photo .topic-info{
  padding-top:18px;
  padding-bottom:4px;
}

.topic-list .topic-card.topic-card-photo .topic-info h3,
.topic-list .topic-card.topic-card-photo .topic-info p{
  margin:0;
  padding:0;
  text-align:left;
  text-indent:0;
}

.topic-list .topic-card.topic-card-photo .topic-info h3{
  color:#fff;
  font-size:1.08rem;
  line-height:1.18;
  font-weight:700;
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}

.topic-list .topic-card.topic-card-photo .topic-info p{
  color:rgba(255,255,255,.82);
  font-size:.86rem;
  line-height:1.35;
  margin-top:6px;
  text-shadow:0 2px 12px rgba(0,0,0,.38);
}

.topic-list .topic-card.topic-card-photo .topic-meta-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:16px;
}

.topic-list .topic-card.topic-card-photo .topic-meta{
  color:rgba(255,255,255,.72);
  font-size:.78rem;
  white-space:normal;
}

.topic-list .topic-card.topic-card-photo .topic-arrow{
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  margin-left:0;
  transition:transform var(--tr);
}

.topic-list .topic-card.topic-card-photo:hover .topic-arrow,
.topic-list .topic-card.topic-card-photo:focus-visible .topic-arrow{
  transform:translateX(4px);
}



@media(max-width:600px){
  .topic-list,
  .topic-list.topic-list-photo{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .topic-list .topic-card.topic-card-photo{
    min-height:160px;
  }

  .topic-list .topic-card.topic-card-photo .topic-info,
  .topic-list .topic-card.topic-card-photo .topic-meta-wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .topic-list .topic-card.topic-card-photo .topic-info h3{
    font-size:.98rem;
  }
}

@media(max-width:420px){
  .topic-list,
  .topic-list.topic-list-photo{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .topic-list .topic-card.topic-card-photo,
  .topic-list .topic-card.topic-card-photo::before,
  .topic-list .topic-card.topic-card-photo::after,
  .topic-list .topic-card.topic-card-photo .topic-arrow{
    transition:none;
  }
}