@font-face{font-family:"Press Start 2P";src:url(/typsnitt/PressStart2P-Regular.ttf)format("truetype");font-display:block}@font-face{font-family:Fredoka;src:url(/typsnitt/Fredoka.ttf)format("truetype");font-weight:300 700;font-display:block}:root{--lila:#7b3cf5;--lila-mork:#5b22d0;--ram:#0b0b0f;--kropp-a:#8a4cff;--kropp-b:#6027e0;--knapp:#e6e6e6;--knapp-ljus:#f4f4f4;--knapp-mork:#c9c9c9;--knapp-kant:#111;--knapp-text:#666;--kant-bredd:4px;--etikett:#fff;--ok:#d8392c;--ok-text:#fff;--text:#f4f6ff;--bg:#0b0b0f}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;font-family:Fredoka,system-ui,sans-serif}#skal{background:linear-gradient(180deg, var(--kropp-a), var(--kropp-b));height:100%;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);flex-direction:column;align-items:stretch;display:flex}#mitt{background:var(--ram);flex-direction:column;flex:none;display:flex}#skarm{aspect-ratio:3/2;background:#000;width:100%;position:relative;overflow:hidden}#skarm canvas{display:block}#skarm[data-skala="1"] canvas{image-rendering:pixelated;image-rendering:crisp-edges}.ram{--ramh:40px;height:var(--ramh);background:var(--ram);border-radius:0 0 26px 26px;place-items:center;display:grid}.logotyp{letter-spacing:4px;color:#e9e9f4;font:700 13px/1 "Press Start 2P",monospace}.knapp{border:var(--kant-bredd) solid var(--knapp-kant);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;color:var(--knapp-text);background:radial-gradient(circle at 40% 35%, var(--knapp-ljus), var(--knapp) 65%);padding:0;box-shadow:0 4px 10px #00000059,inset 0 -3px #00000014}.knapp:active,.knapp.nedtryckt{background:var(--knapp-mork);transform:translateY(1px);box-shadow:inset 0 3px 8px #00000040}.knapp:focus-visible{outline-offset:3px;outline:3px solid #ffd23f;box-shadow:0 0 0 7px #111}.grupp{flex-direction:column;align-items:center;gap:6px;display:flex}.etikett{letter-spacing:.5px;color:var(--etikett);font:700 13px/1 Fredoka,system-ui,sans-serif}.styrkors{--s:min(180px, 44dvw);width:var(--s);height:var(--s);background:var(--styrkors-bild) center / 100% 100% no-repeat;filter:drop-shadow(0 4px 6px #00000059);display:block;position:relative}:root{--styrkors-bild:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M34 3h32a3 3 0 0 1 3 3v28h28a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3H69v28a3 3 0 0 1-3 3H34a3 3 0 0 1-3-3V66H6a3 3 0 0 1-3-3V37a3 3 0 0 1 3-3h25V6a3 3 0 0 1 3-3z%22 fill=%22%23e6e6e6%22 stroke=%22%23111%22 stroke-width=%224%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%229%22 fill=%22%23808080%22/%3E%3Cg fill=%22%23808080%22%3E%3Cpath d=%22M50 12l9 13H41z%22/%3E%3Cpath d=%22M50 88l-9-13h18z%22/%3E%3Cpath d=%22M12 50l13-9v18z%22/%3E%3Cpath d=%22M88 50l-13 9V41z%22/%3E%3C/g%3E%3C/svg%3E")}.kors,.nav{display:none}.riktning{width:38%;height:38%;box-shadow:none;background:0 0;border:0;border-radius:14px;position:absolute}.riktning:active,.riktning.nedtryckt{box-shadow:none;background:#00000026;transform:none}.upp{top:0;left:31%}.ner{bottom:0;left:31%}.vanster{top:31%;left:0}.hoger{top:31%;right:0}.spak{--s:min(180px, 44dvw);--grind:#2b2b30;--grind-inre:#3a3a41;width:var(--s);height:var(--s);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;filter:drop-shadow(0 4px 6px #00000059);position:relative}.spakgrind,.spakgrind:after{clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);position:absolute}.spakgrind{background:var(--grind);inset:4%}.spakgrind:after{content:"";background:var(--grind-inre);inset:9%}.spakknopp{pointer-events:none;background:repeating-radial-gradient(circle,#f4f4f4 0 9%,#dadada 9% 11%),#ececec;border-radius:50%;width:52%;height:52%;margin:-26% 0 0 -26%;transition:transform .12s ease-out;position:absolute;top:50%;left:50%;box-shadow:0 5px 10px #00000073,inset 0 -3px #00000014,inset 0 2px #fffc}.spakknopp.greppad{transition:none}.spakknopp:after{content:"";background:#222;border-radius:50%;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;position:absolute;top:50%;left:50%}body.styrning-kors .spak,body:not(.styrning-kors) .styrkors{display:none}.ab{flex-direction:row;align-items:center;gap:14px;display:flex}.rund{text-shadow:0 1px #ffffffb3;border-radius:50%;width:84px;height:84px;font:700 34px/1 Fredoka,system-ui,sans-serif}.a{margin-top:-56px}.b{margin-top:56px}.snabbval{justify-content:center;width:100%;display:flex}.cirklar{justify-content:center;gap:28px;display:flex}.rundliten{color:#6b6b6b;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:relative}.rundliten svg{width:20px;height:20px}.snabbval .grupp{gap:5px}.snabbval .etikett{font-size:10px}.axel{letter-spacing:.5px;border-radius:999px;height:34px;padding:0 20px;font:700 12px/1 Fredoka,system-ui,sans-serif}body.ljud-av [data-knapp=ljud]:after{content:"";background:var(--ok);border-radius:2px;width:62%;height:3px;margin-left:-31%;position:absolute;top:50%;left:50%;transform:rotate(-45deg)}.panel-topp{gap:0;padding:12px 16px 0}.panel-botten{gap:0;padding:0 16px 14px}.ram .snabbval{display:none}.panel.panel-fly{gap:0;padding:10px 16px 0;display:none}body.lage-strid .panel-fly{display:flex}.ram .flyknapp,.tillbakaknapp,body.lage-sten .flyknapp{display:none}body.lage-sten .panel-fly .tillbakaknapp{display:inline-block}.siffror{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:300px;display:none;position:relative}.siffra{aspect-ratio:1;color:#444;text-shadow:0 1px #ffffffb3;border-radius:18px;min-height:44px;font:700 28px/1 Fredoka,system-ui,sans-serif}.ok{background:radial-gradient(circle at 40% 35%, #ef6a5c, var(--ok) 65%);color:var(--ok-text);text-shadow:none;font-size:20px}.backsteg{font-size:24px}body.lage-strid .styrkors,body.lage-strid .spak,body.lage-strid .ab,body.lage-strid .panel-topp,body.lage-strid .panel-botten,body.lage-strid .snabbval{display:none}body.lage-strid .siffror{display:grid}body.lage-strid .panel-v{display:none}.guidepil{filter:drop-shadow(0 2px #111)drop-shadow(0 0 6px #ffd23f99);pointer-events:none;border-top:28px solid #ffd23f;border-left:22px solid #0000;border-right:22px solid #0000;width:0;height:0;margin:0 0 6px -22px;display:none;position:absolute;bottom:100%;left:50%}body.lage-strid.guide-pil .guidepil{animation:.6s ease-in-out infinite alternate guidepil;display:block}@media (prefers-reduced-motion:reduce){body.lage-strid.guide-pil .guidepil{animation:none}}@keyframes guidepil{0%{transform:translateY(-6px)}to{transform:translateY(2px)}}#kontroll{display:contents}.panel{flex-direction:column;justify-content:center;align-items:center;gap:18px;min-width:0;min-height:0;padding:18px 12px;display:flex}@media not all and (min-aspect-ratio:4/3){#mitt{align-self:center}#skarm{width:min(100dvw, calc((100dvh - 40px - 400px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.5))}#kontroll{flex-wrap:wrap;flex:auto;width:100%;min-height:0;display:flex}.panel{flex:auto;width:50%}.panel-topp,.panel-botten,.panel-fly{flex:none;width:100%}body.lage-strid #kontroll{flex-flow:column}body.lage-strid .panel-h{flex:1 1 0;justify-content:flex-end;width:100%;padding-top:40px;padding-bottom:24px;container-type:size}body.lage-strid .siffror{width:min(100%,300px,75cqh - 2.5px)}}@media (display-mode:standalone) and (orientation:portrait){#mitt{padding-top:28px}}@media (min-aspect-ratio:4/3){:root{--kant-bredd:3px;--c:clamp(116px, min(30dvh, 20dvw), 150px);--pw:calc(var(--c) * 1.25 + 32px);--sido:calc(env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px))}#skal{flex-direction:row;justify-content:center}#mitt{align-self:center}#skarm{width:max(200px, min(calc((100dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.5), calc(100dvw - var(--sido) - 2 * var(--pw))));height:auto}.ram{border-radius:0}.panel{height:100%;min-width:var(--pw);flex:1 1 0}.panel-v{order:-1}.styrkors{--s:var(--c)}.rund{width:calc(var(--c) * .5);height:calc(var(--c) * .5);font-size:calc(var(--c) * .2)}.a{margin-top:calc(var(--c) * -.28)}.b{margin-top:calc(var(--c) * .28)}.panel{gap:12px}.panel-topp,.panel-botten{display:none}.spak{--s:var(--c)}.ram{grid-template-columns:auto 1fr;width:0;min-width:100%;padding:0 12px}.logotyp{grid-column:1;justify-self:start}@media (max-width:900px){.logotyp{display:none}}.ram .snabbval{grid-column:2;justify-self:end;align-items:center;gap:14px;width:auto;display:flex}.ram .cirklar{gap:10px}.ram .snabbval .grupp{flex-direction:row;gap:6px}.ram .rundliten{width:22px;height:22px;color:var(--knapp-text)}.ram .rundliten svg{width:13px;height:13px}.ram .snabbval .etikett{font-size:11px}.ram .axel{height:22px;padding:0 10px;font-size:11px}body.lage-strid .panel-fly{display:none}body.lage-strid .ram .flyknapp,body.lage-sten .ram .tillbakaknapp{grid-column:2;justify-self:end;height:22px;padding:0 12px;font-size:11px;display:inline-block}body.lage-sten .ram .flyknapp{display:none}.siffra{border-radius:12px;font-size:22px}.siffror{gap:8px}body.lage-strid .panel-v{visibility:hidden;display:flex}body.lage-strid .panel-h{justify-content:center;padding:8px 12px}body.lage-strid .siffror{width:100%;width:min(100%, calc(var(--c) * 1.6), calc((100dvh - 16px - 24px) * .75 + 16px));grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.guidepil{border:22px solid #0000;border-left:28px solid #ffd23f;border-right:0;margin:-22px 8px 0 0;inset:50% 100% auto auto}body.lage-strid.guide-pil .guidepil{animation-name:guidepil-h}@keyframes guidepil-h{0%{transform:translate(-6px)}to{transform:translate(2px)}}body.lage-strid .siffra{border-radius:14px;min-height:0;font-size:26px}}@media (min-aspect-ratio:4/3) and (max-aspect-ratio:16/9) and (min-height:560px){:root{--rad:clamp(56px, 8dvh, 80px)}#skal{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--rad) + 16px)}#skarm{width:max(200px, min(calc((100dvh - 40px - var(--rad) - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.5), calc(100dvw - var(--sido) - 2 * var(--pw))))}body.lage-strid .siffror{left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:none;width:min(calc(100dvw - 16px), calc(var(--rad) * 12 + 66px));grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;position:fixed;transform:translate(-50%)}body.lage-strid .siffra{font-size:calc(var(--rad) * .4)}[data-knapp="1"]{order:1}[data-knapp="2"]{order:2}[data-knapp="3"]{order:3}[data-knapp="4"]{order:4}[data-knapp="5"]{order:5}[data-knapp="6"]{order:6}[data-knapp="7"]{order:7}[data-knapp="8"]{order:8}[data-knapp="9"]{order:9}[data-knapp="0"]{order:10}[data-knapp=backsteg]{order:11}[data-knapp=ok]{order:12}.guidepil{border:22px solid #0000;border-top:28px solid #ffd23f;border-bottom:0;margin:0 0 6px -22px;inset:auto auto 100% 50%}body.lage-strid.guide-pil .guidepil{animation-name:guidepil}}