:root{
  --tg-bg:#060b1f;
  --tg-text:#e7ecff;
  --tg-muted:#aab6d6;
  --tg-line:rgba(255,255,255,.16);
  --tg-glass:rgba(255,255,255,.12);
  --tg-glass-2:rgba(13,18,42,.56);
  --tg-ok:#34d399;
  --tg-err:#fb7185;
  /* Kid-friendly answer/clue palette (Kahoot-style) */
  --tg-kid-1a:#ef4444; --tg-kid-1b:#dc2626;
  --tg-kid-2a:#3b82f6; --tg-kid-2b:#1d4ed8;
  --tg-kid-3a:#f59e0b; --tg-kid-3b:#d97706;
  --tg-kid-4a:#22c55e; --tg-kid-4b:#16a34a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;
  color:var(--tg-text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 18%, #6366f1 0, transparent 38%),
    radial-gradient(circle at 82% 15%, #ec4899 0, transparent 35%),
    radial-gradient(circle at 50% 85%, #14b8a6 0, transparent 30%),
    var(--tg-bg);
  min-height:100vh;
}
.tg-shell{max-width:1050px;margin:0 auto;padding:1rem}
.tg-card{
  border:1px solid var(--tg-line);
  border-radius:18px;
  background:var(--tg-glass);
  backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(2,6,23,.42);
  padding:1rem;
}
.tg-muted{color:var(--tg-muted)}
.tg-grid{display:grid;gap:.8rem}
.tg-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-full{grid-column:1/-1}
.tg-row{display:flex;gap:.6rem;flex-wrap:wrap}
.tg-input,.tg-textarea,.tg-select{
  width:100%;padding:.65rem .75rem;border-radius:12px;
  border:1px solid var(--tg-line);background:var(--tg-glass-2);color:var(--tg-text);
}
.tg-textarea{min-height:84px;resize:vertical}
.tg-bubble{
  border:0;border-radius:999px;padding:.78rem 1.15rem;font-weight:800;cursor:pointer;
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#fb7185,#f59e0b,#22d3ee,#818cf8);
  color:#0f172a;font-size:clamp(.98rem,2.2vw,1.08rem);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 rgba(0,0,0,.2),0 10px 22px rgba(0,0,0,.22);
  transition:transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
.tg-bubble:hover{filter:brightness(1.04)}
.tg-bubble:active{
  transform:translateY(2px);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16),0 2px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.18);
}
.tg-bubble-alt{
  border:0;border-radius:999px;padding:.72rem 1.05rem;cursor:pointer;font-weight:800;
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#64748b,#475569);color:#fff;font-size:clamp(.95rem,2vw,1.05rem);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 4px 0 rgba(0,0,0,.22);
  transition:transform .08s ease, filter .08s ease;
  text-decoration:none;
}
.tg-bubble-alt:hover{filter:brightness(1.06)}
.tg-bubble-alt:active{transform:translateY(2px)}
.tg-choice{
  width:100%;text-align:left;border:1px solid var(--tg-line);
  border-radius:13px;padding:.72rem .82rem;background:rgba(30,41,59,.72);color:var(--tg-text);
}

/**
 * Multicolor “kid” controls: wrap sibling buttons/links in .tg-kid-palette.
 * Cycles red → blue → amber → green for clues, answers, and compact nav chips.
 */
.tg-kid-palette{display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch}
.tg-kid-palette.tg-grid{display:grid;gap:.85rem}
.tg-kid-palette.tg-row{align-items:center}
.tg-kid-palette > button.tg-choice,
.tg-kid-palette > button.tg-kid-btn,
.tg-kid-palette > a.tg-kid-link,
.tg-kid-palette > .tg-choice.tg-choice-block{
  flex:1 1 auto;
  min-width:min(100%,140px);
  min-height:52px;
  text-align:center;
  border:0;
  border-radius:16px;
  padding:.82rem 1rem;
  font-size:clamp(1rem,2.5vw,1.28rem);
  font-weight:800;
  letter-spacing:.015em;
  color:#fff;
  cursor:pointer;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 6px 0 rgba(0,0,0,.26),
    0 14px 28px rgba(0,0,0,.24);
  transition:transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
.tg-kid-palette > a.tg-kid-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-sizing:border-box;
}
.tg-kid-palette > button.tg-choice:disabled,
.tg-kid-palette > button.tg-kid-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.tg-kid-palette > button.tg-choice:hover:not(:disabled),
.tg-kid-palette > button.tg-kid-btn:hover:not(:disabled),
.tg-kid-palette > a.tg-kid-link:hover{
  filter:brightness(1.06);
}
.tg-kid-palette > button.tg-choice:active:not(:disabled),
.tg-kid-palette > button.tg-kid-btn:active:not(:disabled),
.tg-kid-palette > a.tg-kid-link:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 2px 0 rgba(0,0,0,.2),
    0 8px 18px rgba(0,0,0,.2);
}
.tg-kid-palette > button.tg-choice:nth-child(4n+1),
.tg-kid-palette > button.tg-kid-btn:nth-child(4n+1),
.tg-kid-palette > a.tg-kid-link:nth-child(4n+1),
.tg-kid-palette > .tg-choice.tg-choice-block:nth-child(4n+1){
  background:linear-gradient(180deg,var(--tg-kid-1a),var(--tg-kid-1b));
}
.tg-kid-palette > button.tg-choice:nth-child(4n+2),
.tg-kid-palette > button.tg-kid-btn:nth-child(4n+2),
.tg-kid-palette > a.tg-kid-link:nth-child(4n+2),
.tg-kid-palette > .tg-choice.tg-choice-block:nth-child(4n+2){
  background:linear-gradient(180deg,var(--tg-kid-2a),var(--tg-kid-2b));
}
.tg-kid-palette > button.tg-choice:nth-child(4n+3),
.tg-kid-palette > button.tg-kid-btn:nth-child(4n+3),
.tg-kid-palette > a.tg-kid-link:nth-child(4n+3),
.tg-kid-palette > .tg-choice.tg-choice-block:nth-child(4n+3){
  background:linear-gradient(180deg,var(--tg-kid-3a),var(--tg-kid-3b));
}
.tg-kid-palette > button.tg-choice:nth-child(4n+4),
.tg-kid-palette > button.tg-kid-btn:nth-child(4n+4),
.tg-kid-palette > a.tg-kid-link:nth-child(4n+4),
.tg-kid-palette > .tg-choice.tg-choice-block:nth-child(4n+4){
  background:linear-gradient(180deg,var(--tg-kid-4a),var(--tg-kid-4b));
}
/* Softer variant for secondary nav (still multicolor by position) */
.tg-kid-palette > a.tg-kid-link-soft{
  font-weight:750;
  font-size:clamp(.92rem,2.1vw,1.05rem);
  min-height:48px;
  opacity:.96;
  filter:saturate(.92);
}
.tg-kid-palette > .tg-choice.tg-choice-block{cursor:default}
.tg-kid-palette > .tg-choice.tg-choice-block:hover{filter:none}
.tg-kid-palette > .tg-choice.tg-choice-mark-correct{
  outline:3px solid rgba(52,211,153,.9);
  outline-offset:3px;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 6px 0 rgba(0,0,0,.22),
    0 0 0 2px rgba(52,211,153,.35),
    0 14px 28px rgba(0,0,0,.22);
}
.tg-kid-palette > .tg-choice.tg-choice-mark-wrong{
  outline:3px solid rgba(251,113,133,.85);
  outline-offset:3px;
}
@media (min-width:560px){
  .tg-play .tg-kid-palette.tg-grid.tg-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.tg-play h1{font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.05;margin:.1rem 0 .7rem}
.tg-play h2{font-size:clamp(1.45rem,3.1vw,2.2rem);line-height:1.2;margin:.55rem 0}
.tg-play h3{font-size:clamp(1.1rem,2.4vw,1.45rem);margin:.7rem 0 .45rem}
.tg-play .tg-muted,.tg-play .tg-pill{font-size:1.03rem}
.tg-play .tg-card{border-radius:22px}
.tg-play #answer_form .tg-kid-palette{gap:.95rem}
.tg-play #answer_form .tg-kid-palette > button.tg-choice{
  min-height:78px;
  font-size:clamp(1.08rem,2.6vw,1.42rem);
}
.tg-play .tg-bubble,.tg-play .tg-bubble-alt{
  min-height:54px;
  font-size:1.03rem;
  font-weight:800;
}
.tg-status{padding:.65rem .8rem;border-radius:12px}
.tg-status-ok{border:1px solid rgba(52,211,153,.45);background:rgba(52,211,153,.14)}
.tg-status-err{border:1px solid rgba(251,113,133,.45);background:rgba(251,113,133,.14)}
.tg-table{width:100%;border-collapse:collapse}
.tg-table th,.tg-table td{padding:.55rem .6rem;border-bottom:1px solid var(--tg-line);text-align:left}
.tg-pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--tg-line)}
.req{color:#ef4444;font-weight:800;margin-left:.2rem}
@media (max-width:860px){.tg-grid-2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.site-managed-footer{
  margin-top:.75rem;
  padding:0 1rem 1rem;
  font-size:.875rem;
  color:var(--tg-muted);
}
.site-managed-footer p{margin:0;}
.site-managed-footer a,.site-managed-footer a:visited{
  color:inherit;
  text-decoration:none;
}
.site-managed-footer a:hover{text-decoration:underline;}