.ttb-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ttb-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.ttb-title{
  font-size: 22px;
  font-weight: 900;
}

.ttb-actions{ display:flex; gap:8px; }

.ttb-btn{
  border: 0;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}
.ttb-btn-small{ padding: 8px 10px; font-size: 16px; }

.ttb-prompt{
  min-height: 26px;
  margin: 6px 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.ttb-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px){
  .ttb-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  .ttb-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ttb-card{
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  background: #fff;
  cursor:pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}
.ttb-card:active{ transform: scale(0.99); }

.ttb-card-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}

.ttb-card-label{
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 900;
  text-align:center;
}

.ttb-bigtext{
  margin-top: 14px;
  font-size: 34px;
  font-weight: 950;
  text-align:center;
}
.ttb-subtext{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  text-align:center;
  opacity: 0.82;
  min-height: 24px;
}

.ttb-reward{
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  font-size: 54px;
  z-index: 999999;
  pointer-events:none;
}
.ttb-pop{ animation: ttbPop 900ms ease-out; }
@keyframes ttbPop{
  0% { transform: translateX(-50%) scale(0.6); opacity: 0.0; }
  15% { opacity: 1.0; }
  45% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(0.9); opacity: 0.0; }
}

/* Teacher bubble */
.ttb-teacher{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0 10px;
}
.ttb-teacher-face{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
}
.ttb-eye{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #111;
}
.ttb-mouth{
  position:absolute;
  bottom: 11px;
  left: 50%;
  width: 16px;
  height: 8px;
  border: 3px solid #111;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  transform: translateX(-50%);
  border-radius: 0 0 14px 14px;
}
.ttb-bubble{
  background: #111;
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  min-height: 20px;
  flex: 1;
}
.ttb-talk .ttb-mouth{ animation: ttbTalk 300ms ease-in-out; }
@keyframes ttbTalk{ 0%{ transform: translateX(-50%) scaleY(1); } 50%{ transform: translateX(-50%) scaleY(0.3); } 100%{ transform: translateX(-50%) scaleY(1); } }

/* Parent panel */
.ttb-parentpanel{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.ttb-parentcard{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.ttb-parenttitle{
  font-size: 18px;
  font-weight: 950;
  margin-bottom: 10px;
}
.ttb-parentrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0;
}
.ttb-parentrow label{
  width: 110px;
  font-weight: 800;
}
.ttb-parentrow input, .ttb-parentrow select{
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-weight: 700;
}
.ttb-muted{ opacity: 0.7; font-weight: 700; }


/* 2-choice mode */
.ttb-card-big .ttb-card-label{ font-size: 18px; }
.ttb-card-big .ttb-card-img{ aspect-ratio: 4 / 3; }

.ttb-wrap[data-mode="twochoice"] .ttb-grid,
.ttb-wrap[data-mode="twochoice_findit"] .ttb-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px){
  .ttb-wrap[data-mode="twochoice"] .ttb-grid,
.ttb-wrap[data-mode="twochoice_findit"] .ttb-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 2-choice + Find mode */
.ttb-wrap[data-mode="twofind"] .ttb-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}