/* =========================================================
   Likkle Coders — LIKKLE THINK styles (v441)
   Scoped to .lt-zone so nothing leaks into the rest of the app.
   ========================================================= */
.lt-zone{ --lt-ink:#0B2545; --lt-dim:#7A8AA0; --lt-line:#E6ECF5;
  --lt-purple:#6A3DFF; --lt-green:#14C76F; --lt-blue:#3A86FF;
  --lt-orange:#FF8C32; --lt-pink:#FF4D94; --lt-teal:#00B8B8; --lt-gold:#FFC93C; }
.lt-wrap{ max-width:640px; margin:0 auto; }

.lt-back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 12px;
  font-weight:800; color:var(--lt-ink); text-decoration:none; background:#fff;
  border:2px solid var(--lt-line); border-radius:999px; padding:7px 16px; }

/* ---- hero ---- */
.lt-hero{ position:relative; overflow:hidden; border-radius:28px; padding:26px 24px 24px;
  color:#fff; text-align:center;
  background:linear-gradient(135deg,#7C3AED 0%,#6A3DFF 45%,#3A86FF 100%);
  box-shadow:0 18px 40px rgba(60,30,160,.28); }
.lt-hero::after{ content:''; position:absolute; right:-40px; top:-50px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.14); }
.lt-hero-eyebrow{ font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.lt-zone .lt-hero h1{ font-size:2.1rem; font-weight:900; margin:.3rem 0 .2rem; color:#fff; letter-spacing:-.01em; }
.lt-tag{ font-size:1rem; font-weight:800; margin:0 0 .4rem; color:#FFE38A; }
.lt-sub{ font-size:.9rem; opacity:.94; margin:0 auto; max-width:44ch; line-height:1.5; }
.lt-hero-stats{ display:flex; justify-content:center; gap:16px; margin-top:14px; flex-wrap:wrap;
  font-size:.78rem; font-weight:700; }
.lt-hero-stats b{ font-size:1.1rem; display:block; }

/* ---- today's challenge ---- */
.lt-today{ display:flex; align-items:center; gap:14px; margin-top:16px; text-decoration:none;
  background:#fff; border:2px solid #FFE0B8; border-left:6px solid var(--lt-orange);
  border-radius:20px; padding:14px 16px; box-shadow:0 8px 20px rgba(11,37,69,.09); }
.lt-today-ico{ font-size:2rem; }
.lt-today strong{ display:block; color:var(--lt-ink); font-size:1.05rem; }
.lt-today small{ color:var(--lt-dim); font-size:.82rem; }
.lt-today-go{ margin-left:auto; font-weight:900; color:var(--lt-orange); white-space:nowrap; }

/* ---- tiles ---- */
.lt-h{ margin:22px 4px 12px; font-size:1rem; font-weight:800; color:var(--lt-ink); }
.lt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.lt-grid--2{ margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.lt-tile{ display:flex; flex-direction:column; gap:4px; text-decoration:none; padding:16px;
  border-radius:20px; background:#fff; border:2px solid var(--lt-line);
  border-top:5px solid var(--tc,var(--lt-purple)); box-shadow:0 6px 16px rgba(11,37,69,.08);
  transition:transform .15s ease, box-shadow .15s ease; }
.lt-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(11,37,69,.14); }
.lt-tile-ico{ font-size:1.9rem; line-height:1; }
.lt-tile strong{ color:var(--lt-ink); font-size:1rem; }
.lt-tile span:last-child{ color:var(--lt-dim); font-size:.8rem; line-height:1.35; }
.lt-tile--mistake{ --tc:#EF4444; } .lt-tile--detective{ --tc:#8B5CF6; }
.lt-tile--decide{ --tc:#F59E0B; }  .lt-tile--multi{ --tc:#14C76F; }
.lt-tile--debate{ --tc:#3A86FF; }  .lt-tile--explain{ --tc:#FF4D94; }
.lt-tile--profile{ --tc:#00B8B8; } .lt-tile--badges{ --tc:#FFC93C; }

/* ---- challenge card ---- */
.lt-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:22px;
  color:#fff; margin-bottom:14px; background:linear-gradient(135deg,#7C3AED,#3A86FF); }
.lt-head-ico{ font-size:2rem; }
.lt-eyebrow{ font-size:.66rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.lt-zone .lt-head h2{ margin:0; font-size:1.25rem; font-weight:900; color:#fff; }
.lt-head--mistake{ background:linear-gradient(135deg,#F87171,#DC2626); }
.lt-head--detective{ background:linear-gradient(135deg,#A78BFA,#6D28D9); }
.lt-head--decide{ background:linear-gradient(135deg,#FBBF24,#D97706); }
.lt-head--multi{ background:linear-gradient(135deg,#34D399,#059669); }
.lt-head--debate{ background:linear-gradient(135deg,#60A5FA,#1D4ED8); }
.lt-head--explain{ background:linear-gradient(135deg,#F472B6,#BE185D); }
.lt-head--profile{ background:linear-gradient(135deg,#2DD4BF,#0D9488); }
.lt-head--badges{ background:linear-gradient(135deg,#FBBF24,#B45309); }

.lt-card{ background:#fff; border:1px solid var(--lt-line); border-radius:22px; padding:18px;
  box-shadow:0 8px 22px rgba(11,37,69,.08); }
.lt-setup{ background:#F7FAFF; border-left:4px solid var(--lt-blue); border-radius:14px;
  padding:12px 14px; margin-bottom:14px; }
.lt-setup p{ margin:0 0 6px; font-size:.9rem; line-height:1.5; color:#243B53; white-space:pre-wrap; }
.lt-setup p:last-child{ margin:0; }
.lt-prompt{ font-size:1.06rem; font-weight:800; color:var(--lt-ink); line-height:1.4; margin-bottom:14px; }

.lt-opts{ display:flex; flex-direction:column; gap:9px; }
.lt-opt{ text-align:left; font:inherit; font-weight:700; cursor:pointer; padding:12px 16px;
  border-radius:14px; border:2px solid var(--lt-line); background:#fff; color:var(--lt-ink); }
.lt-opt:hover:not(:disabled){ border-color:var(--lt-purple); }
.lt-opt.sel{ border-color:var(--lt-purple); background:#F3EEFF; }
.lt-opt.right{ background:#E7F9F0; border-color:var(--lt-green); }
.lt-opt.wrong{ background:#FDECEC; border-color:#EF4444; }
.lt-opt:disabled{ cursor:default; }
.lt-picked{ margin-top:10px; font-weight:800; color:var(--lt-purple); }

.lt-input{ width:100%; font:inherit; font-size:.95rem; padding:12px 14px; border-radius:14px;
  border:2px solid var(--lt-line); resize:vertical; color:var(--lt-ink); background:#fff; }
.lt-input:focus{ outline:3px solid var(--lt-purple); outline-offset:1px; }
.lt-btn{ font:inherit; font-weight:800; cursor:pointer; border:0; border-radius:999px;
  padding:12px 22px; color:#fff; background:var(--lt-purple); text-decoration:none;
  display:inline-block; box-shadow:0 4px 0 rgba(0,0,0,.16); }
.lt-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.16); }
.lt-btn-ghost{ background:#fff; color:var(--lt-ink); border:2px solid var(--lt-line); box-shadow:none; }
.lt-mt{ margin-top:12px; }
.lt-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.lt-given{ font-size:.92rem; color:var(--lt-dim); margin-bottom:10px; }
.lt-given strong{ color:var(--lt-ink); }
.lt-ask{ margin:14px 0 8px; font-size:1rem; color:var(--lt-ink); }
.lt-fb{ margin:10px 0; padding:12px 14px; border-radius:14px; font-size:.92rem; line-height:1.5;
  background:#F4F7FC; border:1px solid var(--lt-line); color:#243B53; }
.lt-fb.ok{ background:#E7F9F0; border-color:#A7E8C8; }
.lt-fb.bad{ background:#FFF6E8; border-color:#FFD9A0; }
.lt-hintline{ font-size:.85rem; color:var(--lt-dim); margin:10px 0 0; }

/* hints */
.lt-hints{ margin-top:14px; }
.lt-hint-btn{ font:inherit; font-weight:800; font-size:.85rem; cursor:pointer;
  background:#FFF8E6; color:#B7791F; border:1px dashed #F0C97A; border-radius:999px; padding:9px 16px; }
.lt-hint-btn:disabled{ opacity:.7; cursor:default; }
.lt-hint{ margin:9px 0 0; font-size:.88rem; line-height:1.5; color:#243B53;
  background:#FFFDF5; border-left:4px solid var(--lt-gold); border-radius:10px; padding:9px 12px; }

/* model answer */
.lt-model{ margin-top:12px; background:#F3EEFF; border:1px solid #DCCEFF; border-radius:16px; padding:13px 15px; }
.lt-model-tag{ display:block; font-size:.66rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lt-purple); margin-bottom:5px; }
.lt-model p{ margin:0; font-size:.92rem; line-height:1.55; color:#243B53; }

/* celebration */
.lt-cel{ position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(11,37,69,.55); backdrop-filter:blur(3px); }
.lt-cel-card{ background:#fff; border-radius:26px; padding:26px 24px; text-align:center;
  max-width:330px; width:86%; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.lt-cel-pts{ font-size:2.6rem; font-weight:900; color:var(--lt-green); line-height:1; }
.lt-cel-card p{ margin:8px 0 12px; color:#243B53; font-size:.94rem; line-height:1.5; }
.lt-cel-badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px; }
.lt-badge-pop{ background:#FFF8E6; border:1px solid #F0C97A; border-radius:999px;
  padding:6px 12px; font-size:.8rem; font-weight:800; color:#B7791F; }

/* profile */
.lt-score{ background:#fff; border:2px solid var(--lt-line); border-radius:22px; padding:18px;
  text-align:center; box-shadow:0 8px 22px rgba(11,37,69,.08); }
.lt-score-label{ font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--lt-dim); }
.lt-score strong{ display:block; font-size:2.6rem; font-weight:900; color:var(--lt-purple); line-height:1.1; }
.lt-score p{ margin:6px 0 0; font-size:.9rem; color:#243B53; }
.lt-skills{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.lt-skill{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--lt-line);
  border-radius:16px; padding:12px 14px; }
.lt-skill-ico{ font-size:1.5rem; }
.lt-skill-body{ flex:1 1 auto; min-width:0; }
.lt-skill-body strong{ display:block; font-size:.93rem; color:var(--lt-ink); }
.lt-bar{ display:block; height:8px; border-radius:5px; background:#EEF1F6; overflow:hidden; margin-top:6px; }
.lt-bar > span{ display:block; height:100%; border-radius:5px; background:var(--lt-purple); }
.lt-skill-lv{ font-weight:900; font-size:.85rem; color:var(--lt-purple); white-space:nowrap; }
.lt-note{ margin-top:14px; font-size:.85rem; color:var(--lt-dim); line-height:1.5; text-align:center; }

/* badges */
.lt-badges{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.lt-badge{ background:#fff; border:2px solid var(--lt-line); border-radius:18px; padding:14px 12px;
  text-align:center; opacity:.5; filter:grayscale(1); }
.lt-badge.got{ opacity:1; filter:none; border-color:#F0C97A; box-shadow:0 8px 20px rgba(251,191,36,.22); }
.lt-badge-ico{ font-size:2rem; display:block; }
.lt-badge strong{ display:block; font-size:.9rem; color:var(--lt-ink); margin:4px 0 2px; }
.lt-badge span{ font-size:.75rem; color:var(--lt-dim); }

@media (max-width:520px){
  .lt-zone .lt-hero h1{ font-size:1.7rem; }
  .lt-grid{ grid-template-columns:1fr 1fr; }
  .lt-tile{ padding:13px; }
}
@media (prefers-reduced-motion:reduce){
  .lt-tile{ transition:none; } .lt-tile:hover{ transform:none; }
}

/* dashboard tile colour for Likkle Think (matches the other activity tiles) */
.bh-act--think{ --acc:#6A3DFF; }
.bh-act--think .bh-act-icon{ background:#6A3DFF; color:#fff; }