/* --- RESET --- */
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}
body{background:#000;color:#fff;overflow:hidden;}
ul{list-style:none;}

/* --- LAYOUT --- */
.top-bar{
  position:fixed;top:0;left:0;right:0;
  height:50px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  z-index:20;
}
.logo{font-weight:bold;font-size:18px;}

.hamburger{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;gap:4px;}
.hamburger span{width:22px;height:3px;background:#fff;border-radius:2px;}

.feed-container{
  position:fixed;top:50px;bottom:40px;left:0;right:0;
  overflow:hidden;
}

/* --- UPDATED: TikTok-style paging --- */
.card-container{
  position:relative;
  width:100%;height:100%;
  overflow:hidden; /* no scroll */
}
/* When explanation is visible, shrink the image area */
.card.shrink-media .card-media {
  max-height: 18vh;     /* was ~30vh */
  transition: max-height .25s ease;
}

.card.shrink-media .card-image {
  max-height: 100%;
  object-fit: contain;
}
/* --- UPDATED: Cards stacked and sliding --- */
.card{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .35s ease-out;
}

/* --- CARD CONTENT --- */
.card-media {
  flex: 0 0 auto;
  max-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.card-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0; /* THIS FIXES THE OVERFLOW */
}

.card-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:14px;opacity:.8;
}
.tts-btn{background:none;border:0;font-size:20px;cursor:pointer;color:#fff;}
.tts-btn.speaking{animation:blink 0.6s infinite alternate;}
@keyframes blink{from{opacity:1;}to{opacity:.3;}}

.card-question{font-size:20px;font-weight:bold;line-height:1.3;}

.card-options li{
  padding:10px;border:1px solid #555;border-radius:6px;
  margin-bottom:8px;cursor:pointer;background:#111;
  transition:background .2s,border .2s;
}
.card-options li.correct{background:#0a0;border-color:#0f0;}
.card-options li.wrong{background:#600;border-color:#f00;}

.card-explanation{
  background:#111;padding:10px;border-radius:6px;
  border-left:4px solid #888;display:flex;gap:8px;
}
.info-icon{font-size:18px;}

/* --- DESKTOP NAV --- */
.desktop-only{display:none;}
@media (hover:hover){
  .desktop-only{display:flex;justify-content:space-between;margin-top:auto;}
  .desktop-only button{
    background:#222;border:1px solid #555;color:#fff;
    padding:6px 12px;border-radius:6px;cursor:pointer;
  }
}

/* --- RESULT BAR --- */
.result-bar{
  position:fixed;bottom:0;left:0;right:0;height:40px;
  background:#111;display:flex;align-items:center;
  justify-content:center;gap:12px;font-size:16px;z-index:30;
}
.hidden{display:none;}
#restart-btn{
  background:none;border:0;color:#fff;font-size:20px;cursor:pointer;
}

/* --- FOOTER HINT --- */
.bottom-hint{
  position:fixed;bottom:0;left:0;right:0;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:.6;pointer-events:none;
}

/* --- SIDE MENU --- */
.side-menu{
  position:fixed;top:0;right:0;width:200px;height:100%;
  background:#111;padding:16px;z-index:40;
}
.side-menu ul{margin-top:20px;}
.side-menu button{
  width:100%;padding:10px;background:#222;border:1px solid #444;
  color:#fff;border-radius:6px;cursor:pointer;
}
.side-close{
  background:none;border:0;color:#fff;font-size:20px;cursor:pointer;
}

/* --- ABOUT OVERLAY --- */
.about-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
}

/* --- FIX YOU ADDED (kept exactly) --- */
.about-overlay.hidden{
  display:none;
}

.about-content{
  background:#111;padding:20px;border-radius:8px;
  width:80%;max-width:350px;
}
.about-close{
  background:none;border:0;color:#fff;font-size:20px;
  float:right;cursor:pointer;
}
.about-content h2{margin-bottom:10px;}
.about-content p{font-size:14px;line-height:1.4;}