/* Playable website preview of the current Tidbit question window.
   The component mirrors src/theme.css while remaining self-contained. */

[data-demo] { container-type: inline-size; }

.tb {
  --tbu: 19px;
  --tb-bg: #101014;
  --tb-surface: #181820;
  --tb-surface2: #22222c;
  --tb-line: #3a3a49;
  --tb-text: #fbfaff;
  --tb-muted-strong: #cbc8d6;
  --tb-accent: #4aa8ff;
  --tb-accent-deep: #2273bc;
  --tb-correct: #74e2ae;
  --tb-correct-deep: #279067;
  --tb-correct-mark: #164f3b;
  --tb-correct-mark-ink: #b7ffdc;
  --tb-wrong: #ff6d5f;
  --tb-wrong-deep: #b83d32;
  --tb-wrong-mark: #68251f;
  --tb-wrong-mark-ink: #ffd9d4;
  --tb-neutral-option: #343440;
  --tb-neutral-option-deep: #15151c;
  --tb-neutral-option-ink: #fbfaff;
  --tb-neutral-control: #d8d5e3;
  --tb-neutral-control-deep: #777283;
  --tb-neutral-control-ink: #1b1820;
  --tb-depth: calc(var(--tbu) * .2);
  --tb-radius: calc(var(--tbu) * .72);
  --tb-ease: cubic-bezier(.16, 1, .3, 1);

  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 31rem;
  overflow: hidden;
  border: 1px solid var(--tb-line);
  border-radius: calc(var(--tbu) * .55);
  background: var(--tb-bg);
  color: var(--tb-text);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: var(--tbu);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  user-select: none;
  outline: 0;
}

.tb-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--tbu) * 2.42);
  padding: 0 calc(var(--tbu) * .48) 0 calc(var(--tbu) * .62);
  border-bottom: calc(var(--tbu) * .1) solid var(--tb-line);
  background: var(--tb-surface);
}

.tb-brand { display: inline-flex; align-items: center; height: 100%; min-width: 0; }
.tb-brand img { display: block; width: auto; height: calc(var(--tbu) * 1.5); pointer-events: none; }
.tb-actions { display: flex; align-items: center; gap: calc(var(--tbu) * .24); padding-bottom: calc(var(--tbu) * .09); }

.tb-shell-button {
  display: grid;
  place-items: center;
  width: calc(var(--tbu) * 1.52);
  height: calc(var(--tbu) * 1.52);
  border: calc(var(--tbu) * .08) solid var(--shell-tone);
  border-radius: calc(var(--tbu) * .5);
  background: var(--shell-tone);
  color: #101116;
  box-shadow: 0 calc(var(--tbu) * .18) 0 var(--shell-depth);
  font-size: calc(var(--tbu) * .78);
}

.tb-shell-button--close { --shell-tone: var(--tb-wrong); --shell-depth: var(--tb-wrong-deep); }

.tb-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--tbu) * .46);
  min-height: 0;
  padding: calc(var(--tbu) * .66) calc(var(--tbu) * .88) calc(var(--tbu) * .72);
  background: var(--tb-bg);
}

.tb-head { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-height: calc(var(--tbu) * 2.9); }

.tb-cat {
  --subject-tone: #58b9ff;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tbu) * .34);
  max-width: 70%;
  min-height: calc(var(--tbu) * 1.45);
  padding: calc(var(--tbu) * .14) calc(var(--tbu) * .58) calc(var(--tbu) * .12);
  overflow: hidden;
  border: calc(var(--tbu) * .09) solid var(--subject-tone);
  border-radius: 99px;
  background: color-mix(in srgb, var(--subject-tone) 14%, var(--tb-surface));
  color: color-mix(in srgb, var(--subject-tone) 72%, white);
  font-size: calc(var(--tbu) * .59);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tb-cat i { flex: none; width: calc(var(--tbu) * .94); font-size: calc(var(--tbu) * .78); text-align: center; }
.tb-cat span { overflow: hidden; text-overflow: ellipsis; }

.tb-streak {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: calc(var(--tbu) * .17);
  min-height: calc(var(--tbu) * 1.45);
  margin-right: calc(var(--tbu) * .12);
  padding: 0 calc(var(--tbu) * .5) calc(var(--tbu) * .05);
  border: calc(var(--tbu) * .06) solid var(--tb-line);
  border-radius: 99px;
  background: var(--tb-surface2);
  color: var(--tb-muted-strong);
  box-shadow: 0 calc(var(--tbu) * .1) 0 var(--tb-neutral-option-deep);
  font-family: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--tbu) * .68);
  font-weight: 800;
  line-height: 1;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tb-streak-icon { display: none; color: #ff9d3f; font-size: calc(var(--tbu) * .82); }
.tb-streak-current { min-width: 1ch; color: inherit; font-weight: 900; text-align: center; }
.tb-streak-divider { color: var(--tb-line-strong, #545466); }
.tb-streak-best { color: var(--tb-muted-strong); }
.tb-streak.is-active {
  border-color: #a75d20;
  background: #342318;
  color: #ffad45;
  box-shadow: 0 calc(var(--tbu) * .1) 0 #6f3a12;
}
.tb-streak.is-active .tb-streak-icon { display: inline-block; animation: tb-streak-pop 280ms var(--tb-ease) both; }
.tb-streak.is-active .tb-streak-best { color: #d9ad79; }
@keyframes tb-streak-pop { 50% { transform: scale(1.18) rotate(-4deg); } }

.tb-q {
  margin: 0;
  color: var(--tb-text);
  font-size: calc(var(--tbu) * 1.15);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.tb-opts {
  display: grid;
  gap: calc(var(--tbu) * .48);
  margin-top: auto;
  padding-bottom: calc(var(--tbu) * .12);
}

.tb-opt {
  --option-tone: #58c7e8;
  --option-depth: #187493;
  --option-ink: #101116;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--tbu) * .35);
  width: 100%;
  min-height: calc(var(--tbu) * 2.28);
  padding: calc(var(--tbu) * .36) calc(var(--tbu) * .62);
  border: calc(var(--tbu) * .09) solid color-mix(in srgb, var(--option-tone) 68%, white);
  border-radius: var(--tb-radius);
  background: var(--option-tone);
  color: var(--option-ink);
  box-shadow: 0 var(--tb-depth) 0 var(--option-depth);
  font: inherit;
  font-size: calc(var(--tbu) * .9);
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease;
}

.tb-opt:nth-child(2) { --option-tone: #ae8dff; --option-depth: #6447b0; }
.tb-opt:nth-child(3) { --option-tone: #ffbd52; --option-depth: #a36716; }
.tb-opt:nth-child(4) { --option-tone: #ff789e; --option-depth: #a93562; }
.tb-opt:hover:not(:disabled) { transform: translateY(calc(var(--tbu) * -.08)); box-shadow: 0 calc(var(--tb-depth) + var(--tbu) * .08) 0 var(--option-depth); }
.tb-opt:active:not(:disabled) { transform: translateY(var(--tb-depth)); box-shadow: none; }
.tb-opt:disabled { cursor: default; }

.tb-key {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--tbu) * 1.5);
  height: calc(var(--tbu) * 1.5);
  border: calc(var(--tbu) * .1) solid color-mix(in srgb, var(--option-depth) 78%, #09090d);
  border-radius: calc(var(--tbu) * .47);
  background: color-mix(in srgb, var(--option-tone) 62%, white);
  color: var(--option-ink);
  box-shadow: inset 0 calc(var(--tbu) * -.08) 0 var(--option-depth);
  font-size: calc(var(--tbu) * .75);
  font-weight: 900;
}

.tb-label { flex: 1 1 auto; }

.tb-opts.answered .tb-opt.is-irrelevant {
  --option-tone: var(--tb-neutral-option);
  --option-depth: var(--tb-neutral-option-deep);
  --option-ink: var(--tb-neutral-option-ink);
  border-color: var(--tb-neutral-option);
  background: var(--tb-neutral-option);
  color: var(--tb-neutral-option-ink);
  box-shadow: 0 var(--tb-depth) 0 var(--tb-neutral-option-deep);
}

.tb-opt.is-correct {
  border-color: var(--tb-correct);
  background: var(--tb-correct);
  color: #0a2b20;
  box-shadow: 0 var(--tb-depth) 0 var(--tb-correct-deep);
  animation: tb-correct 360ms var(--tb-ease);
}

.tb-opt.is-correct .tb-key { border-color: var(--tb-correct-mark); background: var(--tb-correct-mark); color: var(--tb-correct-mark-ink); box-shadow: none; }

.tb-opt.is-chosen.is-wrong {
  border-color: var(--tb-wrong);
  background: var(--tb-wrong);
  color: #32100d;
  box-shadow: 0 var(--tb-depth) 0 var(--tb-wrong-deep);
  animation: tb-shake 360ms ease;
}

.tb-opt.is-chosen.is-wrong .tb-key { border-color: var(--tb-wrong-mark); background: var(--tb-wrong-mark); color: var(--tb-wrong-mark-ink); box-shadow: none; }
.tb-answer-mark { width: auto; margin-left: auto; font-size: calc(var(--tbu) * 1.15); line-height: 1; }
.tb-tick { color: var(--tb-correct-mark); }
.tb-wrongmark { color: var(--tb-wrong-mark); }

@keyframes tb-correct { 45% { transform: scale(1.018); } }
@keyframes tb-shake { 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }

.tb-reveal {
  display: none;
  flex-direction: column;
  gap: calc(var(--tbu) * .5);
  padding: calc(var(--tbu) * .56) 0 calc(var(--tbu) * .18);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: tb-rise 220ms var(--tb-ease) both;
}

.tb.answered .tb-reveal { display: flex; }
.tb.answered .tb-body {
  gap: calc(var(--tbu) * .3);
  padding-top: calc(var(--tbu) * .5);
  padding-bottom: calc(var(--tbu) * .45);
}
.tb.answered .tb-reveal { padding-top: calc(var(--tbu) * .45); padding-bottom: 0; }
.tb-exp { display: none; margin: 0; color: var(--tb-muted-strong); font-size: calc(var(--tbu) * .8); font-weight: 600; line-height: 1.42; }
.tb-reveal.has-explanation .tb-exp { display: block; }
.tb-reveal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--tbu) * .48); }
.tb-reveal.has-explanation .tb-reveal-actions { grid-template-columns: 1fr; }

.tb-action {
  --control-tone: var(--tb-neutral-control);
  --control-depth: var(--tb-neutral-control-deep);
  --control-ink: var(--tb-neutral-control-ink);
  min-height: calc(var(--tbu) * 2.28);
  padding: calc(var(--tbu) * .42) calc(var(--tbu) * .75);
  border: calc(var(--tbu) * .09) solid color-mix(in srgb, var(--control-tone) 68%, white);
  border-radius: var(--tb-radius);
  background: var(--control-tone);
  color: var(--control-ink);
  box-shadow: 0 var(--tb-depth) 0 var(--control-depth);
  font: inherit;
  font-size: calc(var(--tbu) * .83);
  font-weight: 900;
  cursor: pointer;
}

.tb-action--explain { --control-tone: var(--tb-accent); --control-depth: var(--tb-accent-deep); --control-ink: #101116; }
.tb-action:hover { transform: translateY(-1px); }
.tb-action:active { transform: translateY(var(--tb-depth)); box-shadow: none; }
@keyframes tb-rise { from { opacity: 0; transform: translateY(.4rem); } }

@container (min-width: 26rem) {
  .tb { min-height: 24rem; }
  .tb-opts { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-opt, .tb-reveal, .tb-streak-icon { animation: none !important; transition: none !important; }
}