/* Staan of zitten — aanvulling op klastools.css */
.sz-intro, .sz-ask, .sz-reveal, .sz-end { flex-direction: column; gap: 3vh; text-align: center; }
.sz-fig svg { display: block; width: 100%; height: 100%; }
.sz-fig .p { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.sz-fig .p circle { fill: currentColor; stroke: none; }
.sz-fig .c { fill: none; stroke: #b7b2e6; stroke-width: 7; stroke-linecap: round; opacity: .7; }

/* uitleg vooraf */
.sz-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; }
.sz-rule {
  flex: 1 1 240px; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px;
  border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 6px var(--rc);
}
.sz-rule.ok { --rc: #2fd27a; }
.sz-rule.no { --rc: #ff6b6b; }
.sz-rule .sz-fig { width: min(20vh, 150px); aspect-ratio: 3 / 4; color: var(--rc); }
.sz-rule b { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vh, 40px); line-height: 1.1; }
.sz-rule span { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vh, 48px); line-height: 1.1; color: var(--rc); }
.sz-info { margin: 0; font-size: clamp(17px, 2.4vh, 22px); font-weight: 700; color: var(--muted); }
.sz-info b { color: var(--gold); }

/* stelling */
.sz-counter { padding: 6px 18px; border-radius: 99px; background: rgba(0,0,0,.3); font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2.6vh, 24px); color: var(--muted); }
.sz-card {
  width: min(1000px, 100%); padding: 4vh 24px 5vh; border-radius: 32px; background: #fff; color: #1a1640;
  box-shadow: 0 0 0 6px var(--gold), 0 24px 60px rgba(0,0,0,.45); animation: popin .4s cubic-bezier(.3,1.5,.5,1);
}
.sz-kicker { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 2.4vh, 22px); letter-spacing: .06em; text-transform: uppercase; color: #6d68a0; margin-bottom: 1vh; }
.sz-q { font-family: var(--font-display); font-weight: 800; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.sz-q.xl { font-size: clamp(34px, min(11vw, 15vh), 140px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-q.l { font-size: clamp(28px, min(6.5vw, 9vh), 84px); }
.sz-q.m { font-size: clamp(24px, min(4.8vw, 7vh), 60px); }
.sz-q b, .sz-res-q b { color: #d6336c; }

.sz-clock { position: relative; width: min(16vh, 130px); aspect-ratio: 1; display: grid; place-items: center; }
.sz-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sz-clock-bg { fill: rgba(0,0,0,.3); stroke: rgba(255,255,255,.12); stroke-width: 9; }
.sz-clock-ring { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.sz-clock span { position: relative; font-family: var(--font-display); font-weight: 800; font-size: min(9vh, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.sz-clock span.beat { animation: beat .35s ease; }
@keyframes beat { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* onthulling */
.sz-res { --rc: #2fd27a; display: flex; align-items: center; justify-content: center; gap: 4vw; width: min(1100px, 100%); padding: 3vh 4vw; border-radius: 32px; background: var(--panel); box-shadow: inset 0 0 0 8px var(--rc), 0 24px 60px rgba(0,0,0,.45); }
.sz-res[data-ok="false"] { --rc: #ff6b6b; }
.sz-fig-big { flex: none; width: min(26vh, 30vw, 240px); aspect-ratio: 3 / 4; color: var(--rc); animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.sz-res-text { display: flex; flex-direction: column; gap: 1.6vh; text-align: left; min-width: 0; }
.sz-verdict { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, min(10vw, 13vh), 130px); line-height: 1; color: var(--rc); }
.sz-res-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, min(3.6vw, 5vh), 44px); line-height: 1.15; overflow-wrap: anywhere; }
.sz-res-q b { color: var(--gold); }
.sz-res-q span { display: inline-block; margin-right: 8px; padding: 2px 12px; border-radius: 99px; background: var(--rc); color: #14112e; font-size: .6em; vertical-align: middle; }
.sz-why { margin: 0; font-size: clamp(19px, min(2.8vw, 3.6vh), 32px); font-weight: 700; line-height: 1.3; color: #e4e1ff; }
.sz-why b { color: var(--gold); }
.sz-autobar { width: min(600px, 100%); height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.sz-autobar i { display: block; height: 100%; width: 100%; background: var(--gold); border-radius: 99px; }

/* einde */
.sz-done { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 12vh, 120px); line-height: 1; color: var(--gold); animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.sz-list { list-style: none; margin: 0; padding: 0; width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; text-align: left; }
.sz-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--panel); font-weight: 700; font-size: 16px; line-height: 1.25; min-width: 0; }
.sz-list li span { min-width: 0; overflow-wrap: anywhere; }
.sz-list li b { color: var(--gold); }
.sz-list i { flex: none; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 99px; color: #14112e; }
.sz-list .ok i { background: #2fd27a; }
.sz-list .no i { background: #ff6b6b; }

.sz-h3 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--gold); }
.drawer .seg { flex-wrap: wrap; }
.drawer .seg button { flex: 1; }

@media (max-width: 700px) {
  .sz-res { flex-direction: column; gap: 2vh; }
  .sz-res-text { text-align: center; }
  .sz-fig-big { width: min(22vh, 42vw); }
}
@media (max-width: 560px) {
  .sz-hide-s { display: none; }
  .sz-rules { gap: 10px; }
  .sz-rule { flex-basis: 140px; padding: 14px 8px; border-radius: 20px; }
  .sz-card { padding: 3vh 14px 4vh; border-radius: 24px; }
  .sz-res { padding: 3vh 16px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-card, .sz-fig-big, .sz-done, .sz-clock span.beat { animation: none !important; }
  .sz-clock-ring { transition: none; }
}