:root {
  --indigo:#6366F1; --indigo-dark:#4F46E5; --indigo-light:#EEF2FF;
  --gold:#F59E0B; --gold-light:#FEF3C7;
  --green:#10B981; --green-light:#D1FAE5; --red:#EF4444; --red-light:#FEE2E2;
  --bg:#FFFBF0; --surface:#FFFFFF; --ink:#1E1B18; --muted:#78716C; --border:#E7E5E4;
  --add:#10B981; --sub:#F97316; --mul:#6366F1; --div:#EC4899;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); }
body { font-family:"Nunito",sans-serif; color:var(--ink); min-height:100dvh; }
button { font:inherit; color:inherit; }
a { color:inherit; }
[hidden] { display:none !important; }


.wrap { max-width:560px; margin:0 auto; padding:0 16px 6rem; }
.top { display:flex; align-items:center; gap:.6rem; padding:.9rem 0; }
.logo { display:flex; align-items:center; gap:.45rem; font-family:"Fredoka One",cursive; color:var(--indigo-dark); font-size:1.2rem; text-decoration:none; }
.logo img { width:38px; height:38px; }
.top .spacer { flex:1; }
.kid-chip { display:inline-flex; align-items:center; gap:.3rem; font-weight:800; font-size:.85rem; background:var(--surface); border:1.5px solid var(--border); border-radius:99px; padding:.35rem .75rem; cursor:pointer; }
.kid-chip.on { border-color:var(--indigo); background:var(--indigo-light); color:var(--indigo-dark); }
.kids { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }

/* Bunnmeny (Spill · Fremgang · Konto) */
.tabbar { position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1.5px solid var(--border); display:flex; justify-content:center; padding:.35rem 0 max(.35rem, env(safe-area-inset-bottom)); z-index:20; }
.tabbar a { flex:0 1 140px; display:flex; flex-direction:column; align-items:center; gap:.1rem; font-size:.75rem; font-weight:800; color:var(--muted); text-decoration:none; padding:.35rem; border-radius:.8rem; }
.tabbar a svg { width:24px; height:24px; }
.tabbar a.on { color:var(--indigo-dark); }
.tabbar a.on svg { stroke:var(--indigo); }

h1 { font-family:"Fredoka One",cursive; font-weight:400; color:var(--indigo-dark); font-size:clamp(1.6rem,7vw,2.1rem); line-height:1.15; margin:.3rem 0 .2rem; }
h2 { font-family:"Fredoka One",cursive; font-weight:400; font-size:1.25rem; margin:1.4rem 0 .6rem; display:flex; align-items:center; gap:.4rem; }
h2 small { font-family:"Nunito",sans-serif; font-size:.8rem; font-weight:800; color:var(--muted); margin-left:auto; }
.sub { color:var(--muted); font-weight:600; }

.maxrow { display:flex; gap:.75rem; align-items:flex-start; margin:.8rem 0; }
.maxrow img { width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.1); padding:3px; flex:none; }
.bubble { flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:1rem; padding:.7rem .95rem; font-weight:700; font-size:.95rem; line-height:1.45; }

.card { background:var(--surface); border:1.5px solid var(--border); border-radius:1.1rem; padding:1rem 1.1rem; margin-bottom:.7rem; }
.card.hero { border:2px solid var(--indigo); box-shadow:0 8px 28px rgba(79,70,229,.12); display:flex; align-items:center; gap:1rem; }
.card.hero .big { font-family:"Fredoka One",cursive; font-size:1.9rem; color:var(--add); line-height:1; white-space:nowrap; }
.card.hero .t { font-weight:900; font-size:1.05rem; }
.card.hero .s { color:var(--muted); font-weight:700; font-size:.85rem; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:.35rem; border:none; border-radius:.85rem; font-weight:900; font-size:.95rem; padding:.7rem 1.1rem; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--indigo); color:#fff; }
.btn-gold { background:var(--gold); color:var(--ink); box-shadow:0 4px 16px rgba(245,158,11,.3); }
.btn-ghost { background:var(--surface); border:2px solid var(--border); }
.btn-red { background:var(--surface); border:2px solid #FECACA; color:#B91C1C; }
.btn.block { display:flex; width:100%; margin-top:.6rem; white-space:normal; text-align:center; }
.ml-auto { margin-left:auto; }

/* Regneartkort på Hjem */
.ops { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.op { background:var(--surface); border:2px solid var(--border); border-radius:1.1rem; padding:.9rem 1rem; text-decoration:none; display:flex; flex-direction:column; gap:.25rem; position:relative; }
.op .sign { font-family:"Fredoka One",cursive; font-size:2rem; line-height:1; color:var(--c); }
.op .name { font-weight:900; }
.op .lvl { font-size:.8rem; font-weight:800; color:var(--muted); }
.op .bar { height:8px; border-radius:99px; background:var(--border); overflow:hidden; margin-top:.3rem; }
.op .bar div { height:100%; background:var(--c); border-radius:99px; }
.op .chip { position:absolute; top:.7rem; right:.7rem; font-size:.7rem; font-weight:900; background:var(--indigo-light); color:var(--indigo-dark); border-radius:99px; padding:.15rem .5rem; }
.op.locked .sign { color:#A8A29E; }

.row-card { display:flex; align-items:center; gap:.8rem; }
.row-card .ico { width:46px; height:46px; border-radius:.9rem; display:grid; place-items:center; font-size:1.5rem; flex:none; }
.row-card .t { font-weight:900; }
.row-card .s { color:var(--muted); font-weight:700; font-size:.85rem; }

/* Fremgang */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.stat { background:var(--surface); border:1.5px solid var(--border); border-radius:1rem; padding:.8rem .9rem; }
.stat .v { font-family:"Fredoka One",cursive; font-size:1.8rem; line-height:1.1; }
.stat .l { font-size:.75rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.stat .d { font-size:.78rem; font-weight:800; color:var(--green); }
.week { display:flex; align-items:flex-end; gap:.5rem; height:120px; padding-top:.5rem; }
.week div { flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; height:100%; justify-content:flex-end; }
.week i { width:100%; max-width:34px; border-radius:.5rem .5rem .2rem .2rem; background:linear-gradient(180deg,var(--indigo),#A5B4FC); }
.week i.zero { background:var(--border); height:4px !important; }
.week span { font-size:.72rem; font-weight:800; color:var(--muted); }
.subj { border-left:0; }
.subj-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.subj-head .sign { font-family:"Fredoka One",cursive; font-size:1.6rem; color:var(--c); width:2rem; text-align:center; }
.subj-head .t { font-weight:900; }
.subj-head .s { font-size:.8rem; font-weight:800; color:var(--muted); }
.acc { margin-left:auto; font-size:.78rem; font-weight:900; padding:.2rem .55rem; border-radius:99px; background:var(--green-light); color:#047857; }
.acc.mid { background:var(--gold-light); color:#B45309; }
.levels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.3rem; }
.lv { border-radius:.6rem; background:#F7F5F2; padding:.35rem .15rem; text-align:center; min-width:0; }
.lv b { display:block; font-size:.66rem; font-weight:900; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:clip; }
.lv .ss { display:flex; justify-content:center; gap:1px; margin-top:.15rem; }
.lv .ss .st { width:clamp(7px, 1.9vw, 11px); }
.lv.done { background:var(--gold-light); }
.lv.cur { background:var(--surface); outline:2px solid var(--c); }
.lv.locked { opacity:.45; }
.spark { width:100%; height:44px; margin-top:.6rem; }
.weak { display:flex; align-items:center; gap:.8rem; padding:.55rem 0; border-top:1px solid var(--border); }
.weak:first-of-type { border-top:0; }
.weak .q { font-family:"Fredoka One",cursive; font-size:1.25rem; min-width:5.5rem; }
.weak .s { font-size:.8rem; font-weight:700; color:var(--muted); flex:1; }
.insight { background:var(--indigo-light); border-color:#C7D2FE; }
.insight b { color:var(--indigo-dark); }

.st { position:relative; aspect-ratio:1; flex:none; display:block; }
.st svg { width:100%; height:100%; display:block; overflow:visible; }

/* Konto */
.kv { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px solid var(--border); font-weight:700; }
.kv:first-of-type { border-top:0; }
.kv span:first-child { color:var(--muted); }
.badge-ok { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:900; color:#047857; background:var(--green-light); border-radius:99px; padding:.2rem .6rem; }
.badge-free { display:inline-flex; font-size:.8rem; font-weight:900; color:var(--muted); background:#F1EFE8; border-radius:99px; padding:.2rem .6rem; }
.kid-row { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-top:1px solid var(--border); }
.kid-row:first-of-type { border-top:0; }
.kid-row .av { font-size:1.8rem; }
.kid-row .n { font-weight:900; }
.kid-row .s { font-size:.8rem; color:var(--muted); font-weight:700; }
.kid-row .ml-auto { display:flex; gap:.4rem; }
.small-btn { border:1.5px solid var(--border); background:var(--surface); border-radius:.6rem; padding:.35rem .6rem; font-weight:800; font-size:.8rem; cursor:pointer; }
.note { font-size:.8rem; color:var(--muted); font-weight:600; margin-top:.5rem; }
.new { display:inline-block; font-size:.65rem; font-weight:900; background:var(--gold); color:var(--ink); border-radius:99px; padding:.1rem .45rem; vertical-align:middle; margin-left:.3rem; }

/* Innlogging, ark og meldinger */
.loading { text-align:center; color:var(--muted); font-weight:700; padding:3rem 0; }
.sheet-bg { position:fixed; inset:0; background:rgba(30,27,24,.45); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet { background:var(--bg); width:100%; max-width:560px; border-radius:1.5rem 1.5rem 0 0; padding:1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)); max-height:92dvh; overflow-y:auto; }
.sheet h3 { font-family:"Fredoka One",cursive; font-weight:400; font-size:1.4rem; color:var(--indigo-dark); margin-bottom:.4rem; }
.sheet .close { float:right; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); }
label { display:block; font-weight:800; font-size:.9rem; margin:.7rem 0 .3rem; }
input[type=email], input[type=password], input[type=text] { width:100%; padding:.75rem .9rem; border:2px solid var(--border); border-radius:.75rem; font:inherit; font-size:1rem; background:var(--surface); }
input:focus { outline:none; border-color:var(--indigo); }
.msg { border-radius:.75rem; padding:.7rem .9rem; margin:.6rem 0; font-weight:700; font-size:.92rem; }
.msg.err { background:var(--red-light); color:#991B1B; }
.msg.ok { background:var(--green-light); color:#065F46; }
.msg.info { background:var(--indigo-light); color:var(--indigo-dark); }
.link { background:none; border:none; color:var(--muted); font-weight:700; text-decoration:underline; cursor:pointer; display:block; margin:.8rem auto 0; }
.avatars { display:flex; flex-wrap:wrap; gap:.4rem; }
.av-btn { width:46px; height:46px; font-size:1.5rem; border:2px solid var(--border); background:var(--surface); border-radius:.75rem; cursor:pointer; }
.av-btn.on { border-color:var(--indigo); background:var(--indigo-light); }
.empty { text-align:center; padding:1.5rem 1rem; }
.empty .e { font-size:2.5rem; }
a.card { color:inherit; text-decoration:none; display:block; }
a.card.row-card, a.card.hero { display:flex; }
.badge-new { display:inline-block; vertical-align:middle; margin-left:.25rem; font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg, #F59E0B, #F97316); border-radius:99px; padding:.1rem .45rem; }

/* Hjem: alle spillene som store bildekort – hvert kort går rett til spillet */
.games { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; }
.game { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; text-decoration:none; color:var(--ink);
  border-radius:1.2rem; padding:.9rem .6rem .8rem; border:3px solid #fff; background:var(--g, var(--surface));
  box-shadow:0 4px 0 rgba(30,27,24,.07), 0 8px 18px rgba(30,27,24,.07); transition:transform .12s; }
.game:active { transform:scale(.97); }
.game .gi { width:3.4rem; height:3.4rem; border-radius:1rem; background:#fff; display:grid; place-items:center; font-family:"Fredoka One",cursive; font-size:1.35rem;
  color:var(--gc, var(--indigo)); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.game b { font-family:"Fredoka One",cursive; font-weight:400; font-size:1.05rem; line-height:1.1; }
.game small { font-size:.75rem; font-weight:800; color:var(--muted); }
.game.wide { grid-column:1 / -1; flex-direction:row; text-align:left; gap:.8rem; padding:.8rem 1rem; }
.game.wide .gt { min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.game .badge-new { position:absolute; top:-.55rem; right:.6rem; margin:0; }
.guest-login { display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.guest-login .t { font-weight:900; } .guest-login .s { color:var(--muted); font-weight:700; font-size:.85rem; }