:root { --bg:#e9f7ef; --card:#fff; --fg:#1b4332; --muted:#5c7a6b; --green:#2bb673; --dgreen:#1f8a57;
        --yellow:#ffd23f; --orange:#ff9f1c; --red:#ef476f; --blue:#118ab2; --purple:#8e5bd8; --shadow:0 4px 0 rgba(0,0,0,.12); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; }
body { font-family:"Nunito","Comic Sans MS","Segoe UI Rounded",system-ui,sans-serif; background:var(--bg); color:var(--fg);
       min-height:100vh; padding:calc(14px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
       background-image:radial-gradient(circle at 10% 10%,#d3f2df 0 80px,transparent 81px),radial-gradient(circle at 95% 30%,#fff3c4 0 60px,transparent 61px); }
main { max-width:620px; margin:0 auto; }
.screen { display:none; flex-direction:column; gap:16px; animation:in .25s ease; }
.screen.on { display:flex; }
@keyframes in { from { opacity:0; transform:translateY(8px); } }
h1 { margin:0; font-size:2rem; text-align:center; }
h2 { margin:0; font-size:1.4rem; }
h3 { margin:0; font-size:1.1rem; }
p { margin:0; }
.muted { color:var(--muted); }
.card { background:var(--card); border-radius:22px; padding:16px; box-shadow:var(--shadow); }
button { font:inherit; font-weight:800; border:0; border-radius:18px; padding:14px 16px; cursor:pointer; color:var(--fg);
         background:#fff; box-shadow:var(--shadow); transition:transform .08s; touch-action:manipulation; }
button:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.12); }
button.primary { background:var(--green); color:#fff; }
button.danger { background:var(--red); color:#fff; }
button.big { font-size:1.25rem; padding:18px; }
button.small { padding:8px 12px; font-size:.9rem; border-radius:12px; }
button:disabled { opacity:.45; cursor:default; }
.row { display:flex; gap:10px; align-items:center; }
.row.between { justify-content:space-between; }
.row.wrap { flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.back { background:transparent; box-shadow:none; padding:8px 4px; color:var(--muted); }
.linkbtn { background:transparent; box-shadow:none; padding:6px 4px; color:var(--blue); text-decoration:underline; font-weight:700; }
a.back { color:var(--muted); text-decoration:none; font-weight:800; }
input[type=text], input[type=email], input[type=password] { font:inherit; font-size:1.15rem; font-weight:700; width:100%; padding:12px 14px;
  border-radius:16px; border:3px solid #cde8d8; color:var(--fg); background:#fff; }
input:focus { outline:none; border-color:var(--green); }
select { font:inherit; font-weight:700; padding:10px 12px; border-radius:14px; border:3px solid #cde8d8; background:#fff; color:var(--fg); width:100%; }
label { font-weight:700; font-size:.9rem; color:var(--muted); display:block; }
.form { display:flex; flex-direction:column; gap:10px; }
.form .field { display:flex; flex-direction:column; gap:4px; }
.checkrow { display:flex; gap:10px; align-items:flex-start; font-weight:700; font-size:.95rem; }
.checkrow input { width:22px; height:22px; margin-top:2px; flex:none; }
.code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.6rem; letter-spacing:4px; background:#f3f8f5; border-radius:14px; padding:10px 14px; text-align:center; font-weight:800; }
.prose { line-height:1.5; }
.prose h3 { margin-top:12px; }
.prose ul { margin:6px 0; padding-left:20px; }
a { color:var(--blue); }

/* utility (ersätter inline style-attribut, krävs av CSP) */
.tc { text-align:center; }
.hide { display:none !important; }
.flex1 { flex:1; }
.w100 { width:100%; }
.mt4 { margin-top:4px; } .mt6 { margin-top:6px; } .mt8 { margin-top:8px; } .mt10 { margin-top:10px; } .mt12 { margin-top:12px; } .mt14 { margin-top:14px; }
.mb6 { margin-bottom:6px; } .mb10 { margin-bottom:10px; }
.my6 { margin:6px 0 10px; } .my14 { margin:14px 0 8px; }
.fs8 { font-size:.8rem; } .fs10 { font-size:1rem; } .fs11 { font-size:1.1rem; } .fs14 { font-size:1.4rem; }
.bold { font-weight:800; }
.self-start { align-self:flex-start; }
.col10 { display:flex; flex-direction:column; gap:10px; }
.col6 { display:flex; flex-direction:column; gap:6px; }

/* Spelare */
.users { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
.user { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 8px; position:relative; }
.user.add { background:#fff6cc; }
.user .av { font-size:3rem; line-height:1; }
.user .nm { font-size:1.15rem; }
.user .lv { font-size:.8rem; color:var(--muted); }
.user .meds { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; font-size:.95rem; margin-top:4px; min-height:1.4em; }
.user .meds span { white-space:nowrap; }
.user .meds .none { font-size:.75rem; color:var(--muted); font-weight:700; }
.avatars { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.avatars button { font-size:1.7rem; padding:6px 0; border:3px solid transparent; }
.avatars button.sel { border-color:var(--green); background:#e3f7eb; }
.plist { display:flex; flex-direction:column; gap:8px; }
.prow { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#f3f8f5; flex-wrap:wrap; }
.prow .av { font-size:2rem; line-height:1; }
.prow .who { flex:1; min-width:120px; }
.prow .who b { display:block; font-size:1.05rem; }
.prow .who span { font-size:.8rem; color:var(--muted); font-weight:700; }
.prow .acts { display:flex; gap:6px; flex-wrap:wrap; }

/* Hem */
.hello { display:flex; align-items:center; gap:12px; }
.hello .av { font-size:3.2rem; line-height:1; }
#me-av { font-size:5rem; line-height:1; }
.hello .title { font-size:.9rem; color:var(--muted); font-weight:700; }
.bar { height:22px; background:#e3efe8; border-radius:12px; overflow:hidden; position:relative; }
.bar > div { height:100%; border-radius:12px; background:linear-gradient(90deg,var(--green),#7bd88f); width:0; transition:width .6s cubic-bezier(.3,1.4,.5,1); }
.bar.gold > div { background:linear-gradient(90deg,var(--orange),var(--yellow)); }
.bar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; }
.next { display:flex; gap:12px; align-items:center; }
.next .ic { font-size:2.4rem; filter:grayscale(1); opacity:.6; }
.next .txt { flex:1; display:flex; flex-direction:column; gap:6px; }
.modes button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 8px; font-size:1.1rem; }
.modes button .e { font-size:2.2rem; }
.modes .mul { background:#d8f3ff; } .modes .div { background:#ffe8d6; } .modes .mix { background:#efe2ff; }
.modes .race { background:#ffe3ea; } .modes .learn { background:#fff6cc; } .modes .badges { background:#dff7e6; }
.quest { background:#eef4ff; }
.qrow { display:flex; align-items:center; gap:10px; padding:8px 0; }
.qrow + .qrow { border-top:1px solid #dbe5f7; }
.qrow .ic { font-size:1.7rem; width:36px; text-align:center; }
.qrow .tx { flex:1; min-width:0; font-weight:700; }
.qrow .tx .bar { height:10px; margin-top:5px; }
.qrow .ok { font-size:1.4rem; width:30px; text-align:center; }
.qrow.done .tx { color:var(--muted); text-decoration:line-through; }
.qrow.go { cursor:pointer; }
.qhead { display:flex; justify-content:space-between; align-items:center; }
.qstreak { font-weight:900; color:var(--orange); }
.fix { background:#fff0f3; }
.fixchips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.fixchips span { background:#fff; border:2px solid #ffc2d1; border-radius:12px; padding:4px 10px; font-weight:800; }
.fixchips span.more { border-style:dashed; color:var(--muted); }
.q .fixed { color:var(--purple); }
.tables { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.tchip { display:flex; flex-direction:column; align-items:center; padding:8px 0 6px; border-radius:14px; background:#f3f8f5; font-weight:800; position:relative; }
.medal { position:absolute; top:-8px; right:-6px; font-size:1.3rem; line-height:1; }
.mbar { width:70%; height:5px; background:#dbe9e1; border-radius:3px; overflow:hidden; margin-top:4px; }
.mbar div { height:100%; background:linear-gradient(90deg,#cd7f32,#e8a33d); }
.pick button { position:relative; }
.legend { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; font-size:.8rem; color:var(--muted); font-weight:700; margin-top:8px; }
.tchip small { font-size:.7rem; letter-spacing:-1px; }
.tchip.done { background:var(--yellow); }

/* Välj tabeller */
.pick { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; user-select:none; }
.pick button { font-size:1.5rem; padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.pick button small { font-size:.65rem; letter-spacing:-1px; }
.pick button.sel { background:var(--blue); color:#fff; }

/* Spela */
.playtop { display:flex; justify-content:space-between; align-items:center; font-weight:800; }
.streak { font-weight:800; color:var(--orange); min-width:70px; text-align:right; }
.q { text-align:center; padding:22px 10px 18px; position:relative; }
.q .expr { font-size:3.4rem; font-weight:900; letter-spacing:1px; }
.q .ans { display:inline-block; min-width:110px; border-bottom:5px solid var(--green); color:var(--blue); }
.q.right { animation:pop .35s; background:#d8f7e3; }
.q.wrong { animation:shake .4s; background:#ffe1e8; }
.q .spinner { display:none; position:absolute; top:10px; right:12px; width:18px; height:18px; border:3px solid #cde8d8; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
.q.busy .spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pop { 50% { transform:scale(1.06); } }
@keyframes shake { 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
.fb { font-size:1.2rem; font-weight:800; min-height:1.6em; margin-top:8px; }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; user-select:none; }
.pad button { font-size:1.9rem; padding:14px 0; }
.pad .ok { background:var(--green); color:#fff; }
.pad .del { background:#ffe1e8; }
.pad .cancel { font-size:1rem; }
.hintbox { display:none; }
.hintbox.on { display:block; }
.dots { display:inline-flex; flex-direction:column; gap:4px; }
.dots .r { display:flex; gap:4px; align-items:center; }
.dot { width:16px; height:16px; border-radius:50%; background:var(--orange); display:inline-block; }
.dot.b { background:var(--blue); }
.dots .tot { margin-left:8px; font-size:.85rem; font-weight:800; color:var(--muted); min-width:28px; text-align:left; }
.dots .tot.hid { visibility:hidden; }
.hintsteps { display:flex; flex-direction:column; gap:10px; width:100%; }
.hintstep { background:#f3f8f5; border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:6px; align-items:center; animation:in .25s ease; }
.strategy .step { font-size:1.3rem; font-weight:900; color:var(--blue); }
.tip .strategy { text-align:center; }
.groups { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.group { border:3px dashed #b9dcc8; border-radius:14px; padding:6px; display:flex; flex-wrap:wrap; gap:3px; width:84px; justify-content:center; }
.hops { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.hops span { background:#d8f3ff; border-radius:10px; padding:4px 8px; font-weight:800; }
.explain { text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.timer { height:12px; }

/* Resultat & märken */
.st { color:var(--orange); } .st0 { color:#b9cfc2; }
.tchip.done .st { color:#c25e00; }
.pick button.sel .st, .pick button.sel .st0 { color:#fff; }
.stars { font-size:3rem; text-align:center; letter-spacing:6px; }
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.badge { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:14px 8px; }
.badge .ic { font-size:2.4rem; }
.badge .nm { font-weight:800; }
.badge .ds { font-size:.8rem; color:var(--muted); }
.badge.locked .ic { filter:grayscale(1); opacity:.35; }
.badge.locked .nm { color:var(--muted); }
.badge .bar { width:100%; height:10px; margin-top:4px; }
.newbadges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.newbadges span { background:var(--yellow); border-radius:14px; padding:8px 12px; font-weight:800; }

/* Lär dig */
.tip { background:#fff6cc; border-radius:16px; padding:12px 14px; font-weight:700; }
.learnrow { display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.learnrow .eq { font-size:1.5rem; font-weight:900; display:flex; justify-content:space-between; }
.learnrow .vis { display:none; text-align:center; }
.learnrow.open .vis { display:block; }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg button.sel { background:var(--blue); color:#fff; }
.segn { display:flex; gap:6px; flex-wrap:wrap; }
.segn button { padding:10px 12px; font-size:.95rem; }
.segn button.sel { background:var(--blue); color:#fff; }

.pinwrap { align-items:center; text-align:center; }
.pinwrap .av { font-size:4rem; line-height:1; }
.pindots { display:flex; gap:16px; justify-content:center; margin:8px 0; }
.pindots span { width:26px; height:26px; border-radius:50%; border:4px solid var(--green); transition:background .1s; }
.pindots span.f { background:var(--green); }
.pindots.bad { animation:shake .4s; }
.pindots.bad span { border-color:var(--red); }
.pinwrap .pad { width:100%; max-width:360px; }
.statbtn { position:absolute; top:6px; left:6px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border-radius:12px; background:#eef6f1; }
.statgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat { background:#f3f8f5; border-radius:14px; padding:10px 4px; text-align:center; }
.stat b { display:block; font-size:1.35rem; }
.stat span { font-size:.72rem; color:var(--muted); font-weight:700; }
table.tt { width:100%; border-collapse:collapse; font-size:.9rem; }
table.tt th { font-size:.72rem; color:var(--muted); text-align:center; padding:4px 2px; }
table.tt td { text-align:center; padding:6px 2px; border-top:1px solid #e3efe8; }
table.tt td:first-child { font-weight:900; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; font-size:.72rem; color:var(--muted); font-weight:700; }
.days div { border-radius:10px; padding:6px 0; background:#f3f8f5; }
.days div.on { background:var(--green); color:#fff; }
.achlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; }
.achlist div { text-align:center; font-size:1.8rem; background:#f3f8f5; border-radius:14px; padding:6px 0; }
.achlist div small { display:block; font-size:.6rem; color:var(--muted); font-weight:700; line-height:1.1; padding:0 2px; }
.achlist div.locked { filter:grayscale(1); opacity:.3; }
.lb { display:flex; flex-direction:column; gap:8px; }
.lbrow { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#f3f8f5; }
.lbrow.me { background:#d8f3ff; outline:3px solid var(--blue); }
.lbrow.zero { opacity:.45; }
.lbrow .rk { width:34px; text-align:center; font-size:1.5rem; font-weight:900; }
.lbrow .av { font-size:2rem; line-height:1; }
.lbrow .who { flex:1; min-width:0; }
.lbrow .who b { display:block; font-size:1.1rem; }
.lbrow .who .bar { height:8px; margin-top:4px; }
.lbrow .who .qs { display:block; font-size:.75rem; color:var(--muted); font-weight:700; margin-top:2px; }
.lbrow .pts { text-align:right; font-weight:900; font-size:1.15rem; white-space:nowrap; }
.lbrow .pts small { display:block; font-size:.72rem; color:var(--muted); font-weight:700; }
.seg4 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.seg4 button { padding:12px 2px; font-size:.95rem; }
.seg4 button.sel { background:var(--blue); color:#fff; }
.toast { position:fixed; left:50%; top:16px; transform:translate(-50%,calc(-100% - 40px)); visibility:hidden; background:var(--fg); color:#fff; padding:12px 18px;
         border-radius:18px; font-weight:800; display:flex; gap:10px; align-items:center; z-index:20; transition:transform .4s cubic-bezier(.3,1.4,.5,1);
         max-width:92vw; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.toast.on { transform:translate(-50%,0); visibility:visible; }
.toast .ic { font-size:2rem; }
.toast .lbl { font-size:.8rem; opacity:.8; }
.toast.err { background:var(--red); }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:15; }
.err { color:var(--red); font-weight:700; text-align:center; min-height:1.2em; }
.msg { color:var(--dgreen); font-weight:700; text-align:center; min-height:1.2em; }
.form .err:empty, .form .msg:empty { display:none; }
.sound { background:transparent; box-shadow:none; font-size:1.4rem; padding:6px; }
.glist { display:flex; flex-direction:column; gap:10px; }
.gmembers { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.gmembers span { background:#fff; border-radius:12px; padding:4px 10px; font-weight:700; font-size:.9rem; border:2px solid #e3efe8; }
.gmembers span.mine { border-color:var(--blue); }
footer { text-align:center; font-size:.8rem; color:var(--muted); font-weight:700; margin-top:20px; }