/* demo-smeer.css · SMEER-skin voor de Smeer-check. Tokens = fallback; de engine zet dezelfde waarden uit KIT. */
:root{
  color-scheme:light;
  --c-ink:#0B0B0B;--c-ink-soft:#5A4630;--c-geel:#FAD294;--c-creme:#FFFDF7;--c-dop:#F4ECE3;
  --c-schaduw:#6D4716;--c-handdoek:#D8352A;--c-tube30:#FCD88E;--c-tube50:#F6B23E;--c-tube-klein:#FFF6E6;
  --c-bar:#1A120C;--c-bar-text:#FCFAF4;--c-bar-accent:#FF7A00;
  --bg:#F8DCA0;--p:.4333;--flip-p:.6;
  --track:linear-gradient(90deg,#EDE6D8 0%,#F6E2B0 20%,#F8DCA0 40%,#FAD294 60%,#F6B23E 80%,#F2992E 100%);
  --sh:2.7px;--sh-kleur:rgb(109 71 22 / .35);
  --shadow:var(--sh) calc(var(--sh) * 1.25) 0 var(--sh-kleur);
  --skew:-49.5deg;--schaal:.352;--blur:7.9px;--alpha:.285;
  --f-merk:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-ui:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --ease-plof:cubic-bezier(.34,1.56,.64,1);--ease-uit:cubic-bezier(.2,.8,.2,1);
}

/* zonnetje in de schuifknop */
.zon-schijf{fill:var(--c-ink)}
.zon-kern{fill:none;stroke:var(--c-geel);stroke-width:2.2}
.zon-stralen{fill:none;stroke:var(--c-geel);stroke-width:2.2;stroke-linecap:round}

/* startkop: stand A (reuzengetal) en stand B (de abri: "26° vandaag. Smeer 'm.") */
.scr-start .kicker{margin-top:6px}
.start-kop{display:block;margin-top:2px}
.kop-a,.kop-b{display:block}
.scr-start:not(.is-b) .kop-b,.scr-start.is-b .kop-a{display:none}
.reus{display:block;font:900 clamp(7rem,38cqi,13rem)/.85 var(--f-merk);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-left:-.04em}
.reus .deg{font-size:.5em;vertical-align:top;position:relative;top:.1em;margin-left:.02em}
.band{display:block;margin-top:6px;font:800 clamp(1.5rem,6.5cqi,2.2rem)/1.05 var(--f-merk);letter-spacing:-.03em;text-wrap:balance}
.klein-r{display:block;width:max-content;margin-top:10px;font:800 clamp(1.6rem,7cqi,2.6rem)/1 var(--f-merk);letter-spacing:-.03em}
.smeerm{display:block;margin-top:4px;font:900 clamp(3.4rem,16cqi,7rem)/.9 var(--f-merk);letter-spacing:-.04em}
.hint{max-width:34ch;margin-top:10px;font-size:15px;line-height:1.35}
.naar-tubes{margin-top:6px;text-align:center}

/* podium: tube met harde zonschaduw naar rechtsonder + klodder rechts voor de dop */
.podium{position:relative;height:var(--ph);width:calc(var(--ph) * .6);margin:14px 0 0 max(0px,calc(40% - var(--ph) * .3))}
.podium-start{--ph:clamp(120px,24dvh,240px)}
.podium-uit{--ph:clamp(180px,36dvh,320px);margin-top:18px}
.podium .tube{position:absolute;inset:0;z-index:2;width:100%;height:100%;transform-origin:50% 98%}
.tube-schaduw{position:absolute;inset:0;z-index:1;background:rgb(109 71 22 / var(--alpha));-webkit-mask:var(--tube-url) center bottom / contain no-repeat;mask:var(--tube-url) center bottom / contain no-repeat;transform-origin:50% 98%;transform:skewX(var(--skew)) scaleY(var(--schaal));filter:blur(var(--blur))}
html.kit-key .tube-schaduw{transition:transform .3s var(--ease-uit),filter .3s var(--ease-uit),background-color .3s}
.podium .klodder{position:absolute;z-index:3;left:74%;bottom:-3%;width:62%;height:auto}
.scr-start .klodder{opacity:0}
.scr-start.is-b .klodder{opacity:1}

/* uitslag */
.uit-kop{margin-top:2px}
.uit-kop .r1{font:900 clamp(2.75rem,13cqi,6rem)/.92 var(--f-merk);letter-spacing:-.04em}
.uit-kop .r2{margin-top:8px;font:800 clamp(1.5rem,6.5cqi,2.4rem)/1.05 var(--f-merk);letter-spacing:-.03em}

/* huid-iconen: rood en amber (nooit alleen kleur: de tekst zegt het ook) */
.ico .ico-rood{fill:var(--c-handdoek);stroke:none}
.ico .ico-amber{fill:var(--c-tube50);stroke:none}
.tegel[data-tile="klein"]{box-shadow:inset 0 0 0 2px rgb(11 11 11 / .12)}
.mini .tegel[data-tile="klein"]{box-shadow:inset 0 0 0 2px rgb(11 11 11 / .12),var(--shadow)}

.noscript{padding-block:24px;font:800 22px/1.2 var(--f-merk)}

@media(prefers-contrast:more){
  .tube-schaduw{display:none}
  .podium .tube{filter:drop-shadow(2px 0 0 var(--c-ink)) drop-shadow(-2px 0 0 var(--c-ink)) drop-shadow(0 2px 0 var(--c-ink)) drop-shadow(0 -2px 0 var(--c-ink))}
}