/* ===== LärLab · online-lager (konto, dueller, onboarding) ===== */
header{display:block;margin-bottom:22px}
.ll-brand{display:flex;justify-content:center;gap:.02em;padding:6px 0 2px;font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:700;
  font-size:clamp(2.6rem,9vw,5.4rem);letter-spacing:.06em;line-height:1;text-align:center;user-select:none}
.ll-brand i{display:inline-block;font-style:normal;background:linear-gradient(180deg,var(--brand),color-mix(in oklab,var(--brand) 55%,var(--cream)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ll-brand.wave i{animation:ll-wave 3.8s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
.ll-ptsbox{margin-bottom:12px}
.ll-ptsbox b{display:inline-block;font-family:"Sora",system-ui,sans-serif,sans-serif;font-size:28px;color:var(--brand);transition:transform .1s}
.ll-ptsbox b.bump{transform:scale(1.15)}
.ll-fly{position:fixed;z-index:200;left:0;top:0;transform:translate(-50%,-50%);font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:800;font-size:22px;white-space:nowrap;color:var(--brand);pointer-events:none;text-shadow:0 2px 10px var(--paper);opacity:0;transition:left .8s cubic-bezier(.35,.05,.4,1),top .8s cubic-bezier(.35,.05,.4,1),transform .8s,opacity .2s}
.ll-fly.show{opacity:1;transform:translate(-50%,-150%) scale(1.08)}
.ll-fly.go{transform:translate(-50%,-50%) scale(.5) rotate(360deg)}
@media(prefers-reduced-motion:reduce){.ll-fly{transition:none}}
@keyframes ll-wave{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-1.5deg)}
  50%{transform:translateY(1.5px) rotate(1deg)}75%{transform:translateY(-2px) rotate(-.5deg)}100%{transform:translateY(0)}}
.ll-tag{text-align:center;margin:6px 0 0;font-size:13px;color:color-mix(in oklab,var(--cream) 58%,transparent)}

/* --- knappar i kontrollpanelen --- */
.subject-shelf .ll-side{width:100%;margin-top:10px;padding:9px}

/* --- laddare --- */
.ll-load{display:flex;align-items:center;gap:12px;margin-top:14px;font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:600;color:var(--cream)}
.ll-spin{flex:none;width:26px;height:26px;border-radius:50%;border:3px solid color-mix(in oklab,var(--cream) 18%,transparent);
  border-top-color:var(--brand);animation:ll-spin .8s linear infinite}
@keyframes ll-spin{to{transform:rotate(360deg)}}
.ll-load b{font-weight:600}
.ll-load span{display:inline-block;animation:ll-bob 1.05s ease-in-out infinite;animation-delay:calc(var(--i) * 45ms)}
@keyframes ll-bob{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}70%{transform:translateY(2px)}}

/* --- overlays --- */
.ll-over{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(10,12,11,.72);backdrop-filter:blur(10px);padding:18px;overflow:auto}
.ll-over.on{display:grid}
.ll-sheet{width:100%;max-width:560px;border-radius:20px;border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);
  background:var(--paper);color:var(--cream);padding:24px;animation:pop .28s}
.ll-sheet h2,.ll-sheet h3{font-family:"Sora",system-ui,sans-serif,sans-serif;margin:0}
.ll-sheet p{color:color-mix(in oklab,var(--cream) 66%,transparent)}
.ll-in{width:100%;margin-top:10px;padding:13px 15px;border-radius:14px;font:inherit;color:var(--cream);
  border:1px solid color-mix(in oklab,var(--cream) 18%,transparent);background:color-mix(in oklab,var(--cream) 6%,transparent)}
.ll-in option,.ll-in optgroup{background:var(--paper);color:var(--cream)}
#llOnbSel{color:var(--cream);background:var(--paper);color-scheme:dark}
html:not([data-theme="dark"]) #llOnbSel{color-scheme:light}
.ll-btn{border:none;border-radius:999px;background:var(--brand);color:var(--ink);font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:700;
  padding:13px 22px;cursor:pointer;font-size:15px;margin-top:12px}
.ll-btn:disabled{opacity:.45;cursor:not-allowed}
.ll-btn.link{background:transparent;color:var(--cream);border:1px solid color-mix(in oklab,var(--cream) 18%,transparent)}
.ll-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ll-msg{margin-top:10px;font-size:14px;min-height:18px;color:color-mix(in oklab,var(--cream) 66%,transparent)}
.ll-msg.bad{color:var(--red)}
.ll-code{font-family:"Sora",system-ui,sans-serif,sans-serif;font-size:30px;font-weight:700;letter-spacing:.28em;color:var(--brand);text-align:center;
  border:1px dashed color-mix(in oklab,var(--brand) 55%,transparent);border-radius:16px;padding:14px 10px 14px 20px;margin-top:10px}
.ll-pick{display:grid;gap:8px;margin-top:10px;max-height:44vh;overflow:auto}
.ll-pick button{text-align:left;border-radius:13px;padding:12px 14px;font:inherit;cursor:pointer;color:var(--cream);
  border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);background:color-mix(in oklab,var(--cream) 5%,transparent)}
.ll-pick button.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 14%,transparent)}
.ll-lvs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ll-lvs button{border-radius:999px;padding:9px 16px;font:inherit;cursor:pointer;color:var(--cream);
  border:1px solid color-mix(in oklab,var(--cream) 16%,transparent);background:transparent}
.ll-lvs button.on{background:var(--brand);color:var(--ink);border-color:transparent}

/* --- tidslinje --- */
.ll-time{margin-top:18px}
.ll-timeval{font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:700;font-size:22px;text-align:center;color:var(--brand);margin-bottom:6px}
.ll-range{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:transparent}
.ll-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:color-mix(in oklab,var(--cream) 14%,transparent)}
.ll-range::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-7px;width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid var(--paper);cursor:pointer}
.ll-range::-moz-range-track{height:8px;border-radius:999px;background:color-mix(in oklab,var(--cream) 14%,transparent)}
.ll-range::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--paper);border-radius:50%;background:var(--brand);cursor:pointer}
.ll-ticks{display:flex;justify-content:space-between;font-size:11px;color:color-mix(in oklab,var(--cream) 50%,transparent);margin-top:2px}

/* --- duellspel (egen helskärmssida) --- */
.ll-game{position:fixed;inset:0;z-index:120;display:none;background:var(--ink);color:var(--cream);overflow:auto}
.ll-game.on{display:block}
.ll-game-in{max-width:760px;margin:0 auto;padding:22px 18px 60px}
.ll-score{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:12px}
.ll-p{border-radius:16px;padding:14px;border:1px solid color-mix(in oklab,var(--cream) 12%,transparent);background:color-mix(in oklab,var(--paper) 50%,transparent)}
.ll-p b{display:block;font-family:"Sora",system-ui,sans-serif,sans-serif;font-size:26px}
.ll-p small{display:block;font-size:12px;color:color-mix(in oklab,var(--cream) 60%,transparent)}
.ll-clock{font-family:"Sora",system-ui,sans-serif,sans-serif;font-weight:700;font-size:34px;text-align:center;min-width:92px}
.ll-q{font-family:"Sora",system-ui,sans-serif,sans-serif;font-size:23px;margin:22px 0 0;animation:rise .3s ease-out}
.ll-opt{display:block;width:100%;text-align:left;margin-top:10px;padding:14px 16px;border-radius:15px;font:inherit;cursor:pointer;color:var(--cream);
  border:1px solid color-mix(in oklab,var(--cream) 13%,transparent);background:color-mix(in oklab,var(--cream) 4%,transparent)}
.ll-opt.right{border-color:var(--correct)!important;background:color-mix(in oklab,var(--correct) 18%,transparent)!important}
.ll-opt.wrong{border-color:var(--red);background:color-mix(in oklab,var(--red) 16%,transparent)}
.ll-sec{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--cream) 12%,transparent)}
.ll-list{display:grid;gap:8px;margin-top:10px}
.ll-list div{border-radius:13px;padding:11px 13px;font-size:14px;border:1px solid color-mix(in oklab,var(--cream) 12%,transparent);
  background:color-mix(in oklab,var(--cream) 4%,transparent)}
.ll-banner{margin-top:14px;border-radius:14px;padding:13px 15px;border:1px dashed color-mix(in oklab,var(--brand) 50%,transparent);
  background:color-mix(in oklab,var(--brand) 10%,transparent);font-size:14px}

.ll-smile i.sw{position:absolute;left:.26em;top:-.62em;transform:translateX(-50%);font-style:normal;font-size:.3em;opacity:0;pointer-events:none;background:none;-webkit-text-fill-color:initial;color:initial;animation:none}
.ll-smile.dizzy i.sw{opacity:1;animation:ll-dizzy .8s linear infinite}
.ll-hihi{position:absolute;right:-.2em;top:-.7em;font-size:.2em;font-family:"Sora",system-ui,sans-serif,sans-serif;color:var(--brand);pointer-events:none;animation:ll-hihi 1.2s ease-out forwards}
@keyframes ll-hihi{0%{opacity:0;transform:translateY(6px)}20%{opacity:.8}100%{opacity:0;transform:translate(10px,-18px) rotate(8deg)}}