/* Udstyrsfeber – interaktiv film */
:root{--or-soft:#FFF1E4;--sky:#DCEBF2;--grass:#CFE3C4;--sand:#F3D9A4}
@media (prefers-color-scheme: dark){:root{--or-soft:#2B2418;--sky:#1D3440;--grass:#1E3527;--sand:#4A3D22}}
.ufilm{--or:var(--red);--on-or:var(--on-accent);max-width:560px;display:grid;gap:16px;margin-block:8px 24px}
.ufilm .label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ufilm .meter{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.ufilm .temp{font-family:var(--display);font-weight:900;font-size:48px;line-height:.9;font-variant-numeric:tabular-nums;min-width:4.2ch}
.ufilm .temp small{font-size:.42em;color:var(--muted)}
.ufilm .tube{position:relative;height:18px;background:var(--tube);border-radius:9px;overflow:hidden}
.ufilm .fill{position:absolute;inset:0 auto 0 0;width:9%;background:var(--or);border-radius:9px;transition:width .9s cubic-bezier(.2,.9,.3,1.25)}
.ufilm .bump{position:absolute;right:0;top:-26px;font-family:var(--mono);font-weight:600;font-size:14px;color:var(--or);opacity:0}
.ufilm .bump.go{animation:bump 1.2s ease-out}
@keyframes bump{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.ufilm .dots{grid-column:1/-1;display:flex;gap:6px}
.ufilm .dots i{height:5px;flex:1;border-radius:3px;background:var(--tube)}
.ufilm .dots i.on{background:var(--or)}
.ufilm .screen{background:var(--paper);border:2px solid var(--ink);border-radius:22px;overflow:hidden;display:grid}
.ufilm .art{position:relative;aspect-ratio:36/26;background:var(--sky);overflow:hidden;max-width:100%}
.ufilm .art svg{position:absolute;inset:0;width:100%;height:100%}
.ufilm .art .enter{animation:enter .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes enter{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.ufilm .bob{animation:bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ufilm .wig{animation:wig 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wig{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.ufilm .pop{animation:popin .5s .35s cubic-bezier(.2,.9,.3,1.4) both;transform-box:fill-box;transform-origin:center}
@keyframes popin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.ufilm .story{padding:18px 18px 20px;display:grid;gap:14px}
.ufilm .when{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.ufilm .text{font-size:19px;line-height:1.45;margin:0;min-height:3em}
.ufilm .text b{font-weight:700}
.ufilm .choices{display:grid;gap:10px}
.ufilm .choice{font:inherit;font-weight:600;font-size:17px;text-align:left;cursor:pointer;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:14px;padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;transition:background .12s}
.ufilm .choice:hover{background:var(--or-soft)}
.ufilm .choice:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.ufilm .choice span{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap}
.ufilm .choice.main{background:var(--ink);color:var(--bg)}
.ufilm .choice.main span{color:inherit;opacity:.7}
.ufilm .result{display:grid;gap:14px}
.ufilm .dx{display:inline-flex;align-items:center;gap:12px;background:var(--or);color:var(--on-or);border-radius:14px;padding:10px 16px;justify-self:start;font-family:var(--display);font-weight:900;font-size:34px;text-transform:uppercase;line-height:1}
.ufilm .dx svg{width:38px;height:38px}
.ufilm .row{display:flex;flex-wrap:wrap;gap:10px}
.ufilm .btn{font:inherit;font-weight:600;font-size:16px;cursor:pointer;border-radius:12px;padding:11px 16px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;display:inline-block}
.ufilm .btn.main{background:var(--or);border-color:var(--or);color:var(--on-or)}
.ufilm .btn:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.ufilm .journal{margin:0;padding:12px 14px;border:1.5px dashed var(--line);border-radius:12px;list-style:none;display:grid;gap:6px;font-size:15px}
.ufilm .journal li{display:flex;justify-content:space-between;gap:12px}
.ufilm .journal li span:last-child{font-family:var(--mono);color:var(--or);white-space:nowrap}
.ufilm .share{font-size:14px;color:var(--muted);min-height:1.4em}
.ufilm .foot{font-size:13px;color:var(--muted)}
.ufilm .pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ufilm .pk{font:inherit;cursor:pointer;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:16px;padding:14px;display:grid;gap:8px;justify-items:start;text-align:left}
.ufilm .pk:hover{background:var(--or-soft)}
.ufilm .pk:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.ufilm .pk svg{width:40px;height:40px;color:var(--or)}
.ufilm .pk b{font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.ufilm .pk span{font-size:14px;color:var(--muted);line-height:1.3}
@media (prefers-reduced-motion:reduce){.ufilm .bob,.ufilm .wig,.ufilm .pop,.ufilm .art .enter,.ufilm .bump.go{animation:none}.ufilm .fill{transition:none}}
.ufilm .pk b{font-size:22px}.ufilm .pk svg{width:34px;height:34px}.ufilm .pk{padding:12px}