/* Getallenlijn springen — een kikker springt over de getallenlijn. Bovenop klastools.css. */
.gl-ranges { flex-wrap: wrap; justify-content: center; align-self: center; max-width: 100%; }
.gl-ranges button { padding: 9px 14px; }

.gl-stage { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.gl-say {
  min-height: calc(clamp(30px, min(8vw, 9vh), 96px) * 1.3); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .38em;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, min(8vw, 9vh), 96px); line-height: 1.15; text-align: center; text-wrap: balance;
}
.gl-say.chain { font-size: clamp(26px, min(5.6vw, 7vh), 76px); }
.gl-say.gl-sm { font-size: clamp(24px, min(5.5vw, 6.5vh), 64px); }
.gl-say b, .gl-say .ans { color: var(--gold); }
.gl-say .op { padding: 0 .12em; border-radius: .2em; transition: background .2s, color .2s; }
.gl-say .op.plus { color: var(--gold); }
.gl-say .op.min { color: #74c0fc; }
.gl-say .op.now { background: #fff; color: var(--bg); }
.gl-say .q { display: inline-block; min-width: 1.2em; padding: 0 .18em; border-radius: .2em; background: rgba(255,255,255,.12); }
.gl-say .ans { background: var(--gold); color: var(--gold-ink); animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.gl-say .ask { color: var(--gold); }

/* breuk boven elkaar */
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .6em; line-height: 1; margin: 0 .05em; }
.fr > span { padding: 0 .12em; }
.fr > span + span { border-top: .09em solid currentColor; padding-top: .05em; }

.gl-line { position: relative; flex: 1; min-height: 210px; max-height: calc(45vw + 170px); }
#line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#line text { font-family: var(--font-display); font-weight: 800; }
.gl-axis { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.gl-tick { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.gl-tick.s { stroke: rgba(255,255,255,.55); stroke-width: 2; }
.gl-lb { fill: #d9d5ff; }
.gl-lb line { stroke: #d9d5ff; stroke-width: 2.5; }
.gl-arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.gl-arc.plus { stroke: var(--gold); }
.gl-arc.min { stroke: #74c0fc; }
.gl-arclb.plus { fill: var(--gold); }
.gl-arclb.min { fill: #74c0fc; }
.gl-arclb line { stroke-width: 2.5; }
.gl-arclb.plus line { stroke: var(--gold); }
.gl-arclb.min line { stroke: #74c0fc; }
.gl-old { opacity: .3; }
.gl-pill rect { fill: #fff; }
.gl-pill text { fill: var(--bg); }
.gl-pill line { stroke: var(--bg); stroke-width: 2.5; }
.gl-pill.mid rect { fill: #b7b2e6; }
.gl-pill.end rect { fill: var(--gold); }
.gl-pill.end text { fill: var(--gold-ink); }
.gl-pill.end line { stroke: var(--gold-ink); }
.gl-pill.pop { animation: pillpop .45s cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: center; }
@keyframes pillpop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.gl-cd {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 2; min-width: 1.6em; padding: .05em .4em; border-radius: 99px;
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, min(11vw, 12vh), 110px); line-height: 1.1; text-align: center;
}
.gl-cd.beat { animation: beat .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes beat { 0% { transform: translateX(-50%) scale(.5); opacity: .2; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

.gl-opt { display: grid; gap: 8px; margin-top: 6px; }
.gl-opt h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.gl-opt .seg { flex-wrap: wrap; }
.gl-opt .seg button { flex: 1; }

@media (max-width: 560px) {
  #btnSet span { display: none; }
  .gl-ranges { gap: 3px; padding: 4px; }
  .gl-ranges button { padding: 7px 9px; font-size: 15px; }
  .controls .seg button { padding: 9px 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-say .ans, .gl-cd.beat, .gl-pill.pop { animation: none; }
  .gl-say .op { transition: none; }
}
#btnGo { min-width: 6.4em; }