/* ---------- Charts (Chart.js boxes) ---------- */
.chart-box {
  position: relative;
  width: 100%;
  padding: 10px 8px 6px;
}
.chart-box > canvas.viz {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ---------- Effects ---------- */
.float-xp {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  font: 900 20px var(--sans);
  text-shadow:
    0 2px 0 var(--bg),
    0 -2px 0 var(--bg),
    2px 0 0 var(--bg),
    -2px 0 0 var(--bg);
}
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--amber-edge);
  box-shadow: 0 4px 0 var(--amber-edge);
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}
.toast svg {
  width: 30px;
  height: 30px;
  animation: flicker 0.6s ease-in-out infinite alternate;
  transform-origin: 50% 90%;
}
.toast b {
  color: var(--amber-ink);
  font-size: 17px;
  font-weight: 900;
}
.toast span {
  color: var(--text-dim);
}
.stat b,
.fb-v,
.boss-meta b {
  display: inline-block;
  transform-origin: 0% 60%;
}
.stat b.flash {
  animation: statFlash 700ms ease-out;
}
@keyframes statFlash {
  0% {
    color: var(--blue);
  }
  100% {
  }
}

@media (prefers-reduced-motion: reduce) {
  .flowdot {
    display: none;
  }
  .toast svg {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-fill {
    animation: none;
  }
}
.surface-gl {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, var(--panel) 0%, var(--panel-2) 100%);
  overflow: hidden;
  touch-action: pan-y;
}
.surface-gl canvas {
  display: block;
}
.surface-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.surface-labels span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 2px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

/* Tap targets: at least 44px for anything you press (WCAG 2.5.5 / Duolingo-sized) */
.pl-x,
.pl-ref {
  width: 44px;
  height: 44px;
}
.modal-x {
  width: 44px;
  height: 44px;
}
.rn-b {
  min-width: 44px;
  height: 44px;
}
.seg button,
.qc-row button,
.qo-pool .chip-btn,
.qc-seg button {
  min-height: 44px;
}
/* touch screens: buttons and the small controls inside demos and labs reach a comfortable size without growing on desktop */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
  .btn.small {
    min-height: 40px;
  }
  summary.btn.small,
  .wk-hint > summary,
  .node-pop .np-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .cl-extab {
    min-width: 40px;
    min-height: 40px;
  }
  .tb-logo {
    padding: 14px 6px;
    margin: -14px -2px -14px -6px; /* a larger hit area without moving anything */
  }
  .tb-btn {
    min-width: 40px;
    justify-content: center;
  }
  /* switches, sliders and ticks inside demos: a 44px row to press, without redrawing the control */
  label.field {
    min-height: 44px;
  }
  input[type="range"] {
    height: 44px;
  }
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .pf-sw::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }
}
/* toast text stacks beside its icon instead of squeezing into a tall column on phones */
.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 0;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  line-height: 1.3;
}
.toast:not(:has(> svg, > .mascot, > .emo)) {
  grid-template-columns: minmax(0, 1fr);
}
.toast > svg,
.toast > .mascot,
.toast > .emo {
  grid-row: span 2;
  align-self: center;
}
.toast b,
.toast span {
  grid-column: -2;
}