/* ===== Eventyr-designsystemet =====
   Fonter: Lilita One (overskrifter, store tall og bokstaver) og Nunito (tekst). Filene ligger i fonts/.
   Farger er variabler på :root, med egne verdier for mørk modus (natthimmel).
   Knapper er «3D»: en gradient og en mørkere kant nederst som trykkes inn når man trykker. */
@font-face{font-family:'Lilita One';src:url(fonts/lilita-one-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin.woff2) format('woff2');font-weight:200 1000;font-display:swap}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--fd:'Lilita One',system-ui,sans-serif;--fb:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
--bg:#e4f4ff;--card:#fff6df;--edge:#d9c08a;--soft:#f0e2c2;--ink:#2b2140;--mut:#6b6080;--pri:var(--theme,#7c4dff);--ok:#1fb86a;--bad:#ef4565;--hot:#ff8a1f;--line:#eadbbd;--gold:#ffd23f;
--sky:linear-gradient(#8fd0ff 0%,#c4e8ff 45%,#e4f4ff 70%,#c9eeb2 88%,#a5dc84 100%);--glass:rgba(20,20,60,.35);--dim:rgba(20,10,60,.55);
--g-ok:linear-gradient(#5ff08f,#1fb86a);--e-ok:#128a4d;--g-hot:linear-gradient(#ffb057,#ff8a1f);--e-hot:#c25e00;--g-bad:linear-gradient(#ff8a8a,#ef4565);--e-bad:#a3203d;
--g-pri:linear-gradient(color-mix(in srgb,var(--pri) 60%,#fff),var(--pri));--e-pri:color-mix(in srgb,var(--pri) 55%,#000)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1544;--card:#2a2150;--edge:#15102e;--soft:#3a2f66;--ink:#f3eefc;--mut:#b4aad2;--pri:color-mix(in srgb,var(--theme,#7c4dff) 80%,#fff);--ok:#2ed585;--bad:#ff5d7a;--hot:#ffa043;--line:#3d3270;--sky:linear-gradient(#0f0c33 0%,#1b1544 50%,#25205a 78%,#1f4a33 92%,#2f6b45 100%);--glass:rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bg:#1b1544;--card:#2a2150;--edge:#15102e;--soft:#3a2f66;--ink:#f3eefc;--mut:#b4aad2;--pri:color-mix(in srgb,var(--theme,#7c4dff) 80%,#fff);--ok:#2ed585;--bad:#ff5d7a;--hot:#ffa043;--line:#3d3270;--sky:linear-gradient(#0f0c33 0%,#1b1544 50%,#25205a 78%,#1f4a33 92%,#2f6b45 100%);--glass:rgba(0,0,0,.35)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-weight:600;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--sky)}
h1,h2,h3,.hn,.ban{font-family:var(--fd);font-weight:400;letter-spacing:.3px}
#app{max-width:480px;margin:0 auto;padding:16px}
h1{margin:0;font-size:28px}h3{margin:18px 0 8px;font-size:21px}
.ic{vertical-align:middle;flex:none}
.hd{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.srow{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.x.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.logo{display:flex;gap:8px;align-items:center}
.lvb{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:5px 12px;font-weight:800;font-size:14px}
.hero{display:flex;align-items:center;gap:14px;margin:14px 0 8px;padding:18px;border-radius:24px;color:#fff;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#ff5cd6));position:relative}
.hn{font-size:48px;font-weight:900;line-height:1}.hs{font-weight:700;opacity:.9}
.rec{display:inline-block;margin-top:6px;background:rgba(255,255,255,.2);border-radius:14px;padding:3px 10px;font-weight:800;font-size:13px}
.fav{margin-left:auto;background:rgba(255,255,255,.22);border-radius:50%;width:88px;height:88px;display:grid;place-items:center}.fav:empty{display:none}
.pb{font:inherit;color:var(--ink);cursor:pointer;position:relative}.nt{animation:bob 1.1s ease-in-out infinite alternate}@keyframes bob{to{transform:translateY(-4px)}}
#st{position:relative}.bub{position:absolute;top:8px;right:8px;background:var(--pri);color:#fff;font-weight:800;font-size:11px;padding:3px 10px;border-radius:14px 14px 3px 14px;animation:pop .3s both}.bub:empty{display:none}
.pn{display:flex;flex-direction:column;align-items:center;transform:translateX(var(--x));width:max-content;max-width:60%;margin:10px auto;text-align:center}
.nd{width:68px;height:68px;border-radius:50%;border:0;border-bottom:6px solid rgba(0,0,0,.25);font:inherit;font-weight:900;font-size:24px;color:#fff;background:var(--pri);cursor:pointer;display:grid;place-items:center;margin-bottom:4px}
.nd.dn{background:var(--ok)}.nd.lk{background:var(--line);color:var(--mut);cursor:default}.nd.cur{animation:pls 1.3s ease-in-out infinite}
@keyframes pls{50%{transform:scale(1.1)}}
.nov{position:fixed;inset:0;background:var(--bg);overflow:auto;z-index:98;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.nbox{max-width:480px;margin:0 auto;padding:16px}
.lv .cnt{text-align:center;font-weight:800;min-width:60px;font-size:15px;color:var(--mut)}.lv .cnt b{font-size:28px;color:var(--ok);line-height:1}.lv .cnt small{font-size:10px;font-weight:600}
.mv{transform-origin:50% 95%}.mv.wig{animation:wig 1.2s ease-in-out infinite}.mv.hop{animation:hop .8s ease-in-out infinite}.mv.sway{animation:sway 2s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10%)}}@keyframes sway{0%,100%{transform:rotate(-3deg) scaleY(1)}50%{transform:rotate(3deg) scaleY(1.04)}}
.mv.dance{animation:dance 3.2s ease-in-out infinite;transform-origin:50% 60%}
@keyframes dance{0%,100%{transform:translateY(0) rotate(0) scaleX(1)}10%{transform:translateY(0) rotate(-8deg) scaleX(1)}20%{transform:translateY(-5%) rotate(8deg) scaleX(1)}30%{transform:translateY(0) rotate(-8deg) scaleX(1)}40%{transform:translateY(-5%) rotate(8deg) scaleX(1)}50%{transform:translateY(-10%) rotate(0) scaleX(1)}60%{transform:translateY(-12%) rotate(0) scaleX(0)}70%{transform:translateY(-12%) rotate(0) scaleX(-1)}80%{transform:translateY(-10%) rotate(0) scaleX(0)}90%{transform:translateY(0) rotate(0) scaleX(1)}}
.tut{position:fixed;inset:0;background:var(--dim);z-index:100;display:grid;place-items:center;padding:16px;overflow:auto}
.tbox{background:var(--card);border-bottom:9px solid var(--edge);border-radius:30px;padding:22px;max-width:400px;width:100%;text-align:center;animation:pop .35s cubic-bezier(.3,1.5,.5,1) both}.tbox h2{margin:8px 0;font-size:28px}.tbox p{color:var(--mut);line-height:1.45;margin:0 0 12px}.tic{display:flex;justify-content:center}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--pri)}
.stk{position:sticky;top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 0;z-index:5}.nov .stk{top:0}
.pt.sel{border-color:var(--pri)}.fv{position:absolute;top:2px;right:4px}
.note{text-align:center;color:var(--mut);font-weight:600;font-size:14px;margin-bottom:10px}
.card{background:var(--card);border:0;border-bottom:6px solid var(--edge);border-radius:22px;padding:12px;margin:10px 0}
.eggc{display:flex;gap:12px;align-items:center}.eggc>div{flex:1}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lv{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--card);color:var(--ink);border:0;border-bottom:6px solid var(--c);border-radius:20px;padding:12px;font:inherit;text-align:left;cursor:pointer}
.lv:active{transform:translateY(2px)}.lv b{font-family:var(--fd);font-weight:400;font-size:19px}.lv small{color:var(--mut)}
.ib{width:50px;height:50px;border-radius:16px;background:color-mix(in srgb,var(--c) 18%,transparent);display:grid;place-items:center}
.pets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pt{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 2px;text-align:center;font-size:10px;font-weight:700;display:flex;flex-direction:column;align-items:center}
.pt.no{opacity:.5}.q{font-size:34px;font-weight:900;color:var(--mut);height:52px;line-height:52px}
.top{display:flex;gap:8px;margin:12px 0}
.pill{flex:1;background:var(--card);border:0;border-bottom:5px solid var(--edge);border-radius:18px;padding:8px;text-align:center;font-family:var(--fd);font-weight:400;font-size:22px}
.pill small{display:block;color:var(--mut);font-family:var(--fb);font-weight:800;font-size:11px}
.hud{display:flex;justify-content:space-between;align-items:center;font-weight:800;gap:8px}
.x{background:var(--card);color:var(--ink);border:0;border-bottom:4px solid var(--edge);border-radius:16px;padding:10px 14px;min-height:44px;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:var(--pri);width:0}
svg{max-width:100%}.card svg{width:100%;height:auto;display:block}
.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.keys button{padding:14px 0;font-family:var(--fd);font-weight:400;font-size:26px;border:0;border-radius:16px;background:var(--g-pri);color:#fff;border-bottom:6px solid var(--e-pri);text-shadow:0 2px 0 rgba(0,0,0,.2);cursor:pointer}
.keys button:active{transform:translateY(2px)}.keys button:disabled{opacity:.45}.keys.pk{grid-template-columns:1fr 1fr 2fr}
.mvs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mvs .x{padding:8px 2px;font-size:13px}
.mv.spin{animation:spin 2.4s ease-in-out infinite;transform-origin:50% 55%}@keyframes spin{0%,15%{transform:rotate(0)}65%,100%{transform:rotate(360deg)}}
.bdg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}.bd{background:var(--bg);border-radius:14px;padding:8px 2px;display:flex;flex-direction:column;gap:1px;align-items:center;text-align:center;cursor:pointer;border:2px solid transparent}.bd b{font-size:12px;line-height:1.1}.bd small{font-size:11px;color:var(--mut)}.bd.ok{border-color:#ffd23f;background:color-mix(in srgb,#ffd23f 20%,var(--bg))}.bd.no svg{opacity:.5;filter:grayscale(1)}.card .bd svg{width:40px;height:40px;flex:none}.keys button.ok{background:var(--g-ok);border-bottom-color:var(--e-ok)}.keys button.bad{background:var(--g-bad);border-bottom-color:var(--e-bad)}
.btn{display:block;width:100%;padding:14px;margin-top:10px;font-family:var(--fd);font-weight:400;font-size:21px;letter-spacing:.3px;border:0;border-bottom:6px solid var(--e-pri);border-radius:20px;background:var(--g-pri);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);cursor:pointer;transition:transform .08s}
.btn:active:not(:disabled),.keys button:active:not(:disabled),.x:active,.nav button:active{transform:translateY(3px)}
.btn.g{background:var(--soft);color:var(--ink);border:0;border-bottom:5px solid var(--edge);font-family:var(--fb);font-weight:900;font-size:16px;text-shadow:none}.btn.ok{background:var(--g-ok);border-bottom-color:var(--e-ok)}.btn.hot{background:var(--g-hot);border-bottom-color:var(--e-hot)}.btn:disabled{opacity:.45}
.msg{text-align:center;font-weight:800;min-height:26px;margin:6px 0}
.center{text-align:center}.rowi{display:flex;justify-content:center;gap:4px;margin:12px 0}
.flash{animation:f .4s}@keyframes f{50%{transform:scale(1.04)}}
.egg{display:flex;justify-content:center;margin:20px 0;cursor:pointer}
.mx{background:color-mix(in srgb,var(--c) 20%,transparent);border-radius:10px;padding:2px 8px;font-size:12px;font-weight:800}
.sw{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:6px 0 24px}
.swb{width:44px;height:44px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 2px var(--line);cursor:pointer}
.swb.on{box-shadow:0 0 0 4px var(--ink)}
.tabs{display:flex;gap:4px;background:var(--glass);border-radius:16px;padding:4px;margin-bottom:8px}
.tabs button{flex:1;border:0;background:none;color:#fff;font:inherit;font-weight:800;font-size:12.5px;padding:5px 0;border-radius:10px;cursor:pointer}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--edge)}
.eggs2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.eg1{background:var(--bg);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.eggr{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px}.eggr>div{width:100%}
.eggr .note{text-align:center!important}.eg1 .btn{margin:8px 0 0!important;font-size:14px}
.pets.big{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pets.big .pt b{overflow-wrap:anywhere;line-height:1.15}.pets.big .pt{font-size:11px;padding:6px 2px}.pets.big .q{height:56px;line-height:56px}
.shk{animation:shk .5s}@keyframes shk{20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.pop{display:flex;justify-content:center;margin:16px 0;animation:pop .7s both}
.ov{--w:min(90vw,520px);position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}
.cf{position:absolute;top:-20px;width:10px;height:14px;animation:fall linear forwards}
.st{position:absolute;top:-40px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}
.ban{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:86vw;text-align:center;font-size:18px;line-height:1.2;color:var(--pri);background:var(--card);border:2px solid color-mix(in srgb,var(--pri) 35%,transparent);border-radius:999px;padding:7px 16px;box-shadow:0 4px 14px rgba(0,0,0,.15);animation:banIn .3s both,banOut .4s 1.9s forwards}@keyframes banIn{from{opacity:0;transform:translate(-50%,-14px)}}@keyframes banOut{to{opacity:0;transform:translate(-50%,-14px)}}
.rb{position:absolute;left:50%;bottom:0;width:var(--w);height:calc(var(--w)/2);margin-left:calc(var(--w)/-2);transform-origin:50% 100%;background:var(--g);animation:rbIn 1.1s cubic-bezier(.2,1.5,.4,1) both,rbFx 1.3s ease-in-out 1.1s 2 alternate,rbOut 1s ease-in 3.8s forwards}
.rb::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);background-size:300% 100%;background-position:150% 0;-webkit-mask:var(--g);mask:var(--g);animation:rbShine 1.3s ease-in-out .9s 2}
@keyframes rbIn{0%{transform:scale(.1) rotate(-12deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes rbFx{0%{filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) brightness(1)}50%{filter:drop-shadow(0 0 24px rgba(255,255,255,.95)) brightness(1.25) saturate(1.5)}100%{filter:drop-shadow(0 0 16px #ffd23f) brightness(1.1) hue-rotate(35deg)}}
@keyframes rbOut{to{transform:scale(1.12) translateY(-10%);opacity:0;filter:blur(6px)}}
@keyframes rbShine{to{background-position:-50% 0}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.gl{pointer-events:none}.gs{animation:tw 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tw{0%,100%{opacity:.1;transform:scale(.3)}50%{opacity:1;transform:scale(1.15)}}
.fpet{position:fixed;left:10px;bottom:10px;pointer-events:none;z-index:5}
.fpet.jump{animation:jmp .6s}@keyframes jmp{40%{transform:translateY(-28px) rotate(-8deg)}70%{transform:translateY(0)}}
.fpet.sad{animation:sadd .8s}@keyframes sadd{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.vis{position:fixed;right:-110px;bottom:90px;z-index:98;pointer-events:none;text-align:center;animation:vis 2.3s ease-in-out forwards}
@keyframes vis{0%{transform:translateX(0)}18%,80%{transform:translateX(-130px)}100%{transform:translateX(0)}}
.fbub{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:3px 8px;font-size:12px;font-weight:800;margin-bottom:2px;white-space:nowrap}
.nav{position:fixed;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:calc(100% - 20px);max-width:460px;display:flex;align-items:center;background:rgba(20,20,60,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;z-index:10}
.nav{padding:6px;gap:4px}
.nav button{flex:1;border:0;border-radius:18px;background:none;color:#fff;font:inherit;font-weight:900;font-size:12px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.nav button:active{transform:translateY(2px)}
.nav button.on{background:rgba(255,255,255,.18);color:var(--gold)}.nav button.hm{flex:1.25;background:var(--g-hot);border-bottom:6px solid var(--e-hot);color:#fff;margin-top:-26px;padding:12px 0 8px;font-size:13px;box-shadow:0 6px 14px rgba(255,138,31,.4)}.nav button.hm.on{color:#fff;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(255,138,31,.45)}
.ni{position:relative;display:flex}.dot{position:absolute;top:-3px;right:-6px;width:13px;height:13px;border-radius:50%;background:#ff4d6d;border:2px solid #fff}
.hd .x{border-color:var(--pri);color:var(--pri)}
.lv:active{transform:translateY(2px)}
.cmp{grid-template-columns:1fr}.cmp .lv{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:0;align-items:center;padding:10px 12px}
.cmp .ib{grid-row:1/3}.cmp .lv b{grid-column:2;grid-row:1}.cmp .lv small{grid-column:2;grid-row:2}.cmp .mx{grid-column:3;grid-row:1/3}
.tut.nv{place-items:end center;background:rgba(20,10,40,.1);z-index:102}.tut.nv .tbox{padding:12px 16px}.tut.nv .tic svg{width:36px;height:36px}.tut.nv h2{margin:4px 0;font-size:20px}.tut.nv p{font-size:14px;margin-bottom:8px}.tut.nv .btn{padding:10px;margin-top:6px}.tut.nv .x{margin-top:6px!important;min-height:36px;padding:6px 12px}
.hl{position:relative;z-index:101;pointer-events:none;outline:4px solid var(--pri);outline-offset:3px;border-radius:18px;animation:hlp 1.2s ease-in-out infinite}
@keyframes hlp{50%{outline-color:#ffd23f}}
.wheel{position:fixed;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));width:64px;height:64px;border-radius:50%;background:var(--card);border:0;padding:0;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:11;cursor:pointer;color:var(--ink)}
.wl{position:absolute;top:-6px;left:-6px;min-width:24px;height:24px;border-radius:12px;background:#ffc93c;color:#2b2140;font-size:13px;font-weight:900;display:grid;place-items:center;padding:0 5px;border:2px solid var(--card)}
.wheel svg{position:absolute;inset:0;transform:rotate(-90deg)}.wheel b{position:absolute;inset:0;display:grid;place-content:center;font-weight:900;line-height:1}.wheel small{font-size:9px;color:var(--mut);font-weight:800;text-align:center}
.btn.go{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:14px;margin:12px 0 4px;font-size:17px;border-bottom:5px solid rgba(0,0,0,.25);animation:gop 2s ease-in-out infinite}
.btn.go small{font-size:13px;font-weight:700;opacity:.9}
@keyframes bnc{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px) rotate(-6deg)}}
.bnc{display:flex;animation:bnc 1.2s ease-in-out infinite}.bnc svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.btn.go .ic{color:#fff}
@keyframes gop{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--pri) 30%,transparent)}}
.flow{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0}.flow>div{flex:1;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px}.flow>span{font-size:26px;font-weight:900;color:var(--pri)}
.steps{display:grid;gap:8px;margin-top:8px}.steps>div{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:14px;line-height:1.35}
.steps i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;font-style:normal;font-weight:900;display:grid;place-items:center;font-size:13px}
.hg{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:50%;background:#ef4565;border:2px solid var(--card)}
.kmap{display:block;width:100%;height:auto;border-radius:20px;margin-top:8px}
.mring{transform-box:fill-box;transform-origin:center;animation:mrp 1.2s ease-in-out infinite}@keyframes mrp{0%,100%{transform:scale(.9);opacity:1}50%{transform:scale(1.15);opacity:.5}}
.fgt{display:flex;gap:14px;align-items:center;background:transparent;border:0;border-radius:18px;padding:4px 12px;margin:4px 0}.fgt>div:last-child{flex:1}.fgt .pop{margin:0}
.ft{display:inline-block;animation:bob 1.3s ease-in-out infinite alternate}.ft.chg{animation:chg .25s linear infinite alternate}@keyframes chg{from{transform:translateX(-4px) scale(1)}to{transform:translateX(4px) scale(1.12)}}
.ft.lgU{animation:lgU .45s}@keyframes lgU{40%{transform:translateY(-34px) scale(1.25)}}.ft.lgD{animation:lgD .45s}@keyframes lgD{40%{transform:translateY(34px) scale(1.3)}}
.ft.hurt{animation:hurt .5s}@keyframes hurt{20%{transform:translateX(-18px) rotate(-20deg) scale(.9);filter:brightness(2) sepia(1) saturate(6) hue-rotate(-30deg)}50%{transform:translateX(12px) rotate(10deg);filter:brightness(1.6)}80%{transform:translateX(-5px)}}
.ft.ko{animation:ko .9s forwards}@keyframes ko{to{transform:translateY(30px) rotate(100deg) scale(.6);opacity:.2}}
.flsh{animation:flsh .4s}@keyframes flsh{40%{background:color-mix(in srgb,var(--bad) 30%,var(--card))}}
.bst{position:fixed;z-index:60;font-size:60px;line-height:60px;pointer-events:none;animation:bst .5s forwards}@keyframes bst{from{transform:scale(.3)}40%{transform:scale(1.6) rotate(15deg)}to{transform:scale(2);opacity:0}}
.thr{position:fixed;z-index:60;width:72px;height:120px;pointer-events:none}.thr svg{filter:drop-shadow(0 0 2px #fff)}.tfl{animation:tfl .12s infinite alternate;transform-box:view-box}@keyframes tfl{to{opacity:.8}}.twk{animation:tw .6s infinite}
.emb{position:fixed;z-index:59;width:14px;height:14px;border-radius:50%;background:radial-gradient(#ffe066,#ff6a00);pointer-events:none;animation:emb .42s forwards}@keyframes emb{to{transform:translateY(-14px) scale(.1);opacity:0}}
.proj{position:fixed;z-index:60;font-size:30px;line-height:32px;width:32px;transition:transform .35s ease-in;pointer-events:none}
.dmg{position:fixed;z-index:60;font:400 28px var(--fd);pointer-events:none;text-shadow:0 2px 0 #fff,0 0 6px #fff;animation:dmg .9s forwards}@keyframes dmg{from{transform:translateY(0) scale(.6)}30%{transform:translateY(-18px) scale(1.4)}to{transform:translateY(-60px) scale(1);opacity:0}}
body.qk #app{animation:qk .4s}@keyframes qk{20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.fgt.me{flex-direction:row}
.arena #st{width:230px;margin:-6px auto 0;padding:0 2px;border-radius:20px;position:relative;box-shadow:0 4px 0 #0002;border:2px solid #fff;background:#fffffff2;animation:pp .6s cubic-bezier(.3,1.8,.5,1)}
.arena #st::after{content:'';position:absolute;bottom:-14px;left:50%;margin-left:-9px;border:9px solid transparent;border-top:12px solid #fffffff2;border-bottom:0}
.arena #st::before{content:'';position:absolute;top:-16px;left:0;right:0;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 20'%3E%3Cg fill='%23ffb300'%3E%3Cpath transform='translate(23 2) scale(.4)' d='M16 2c1 8 4 11 12 14-8 3-11 6-12 14-1-8-4-11-12-14 8-3 11-6 12-14z'/%3E%3Cpath transform='translate(108 2) scale(.4)' d='M16 2c1 8 4 11 12 14-8 3-11 6-12 14-1-8-4-11-12-14 8-3 11-6 12-14z'/%3E%3Cpath transform='translate(193 2) scale(.4)' d='M16 2c1 8 4 11 12 14-8 3-11 6-12 14-1-8-4-11-12-14 8-3 11-6 12-14z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
@keyframes pp{from{transform:scale(.2);opacity:0}}
#dk{margin:8px 0}
.arena{background:linear-gradient(#9fdcff,#dff4ff 55%,#c8ecb0 55%,#a5dc84);border-radius:20px;padding:6px 0 14px;margin:6px 0;color:#222;overflow:hidden}.arena .fgt{padding-left:24px}.arena .hpb{background:#fff8}.arena .msg{color:#222}
.stand{position:relative;z-index:0;display:inline-block;padding-bottom:6px}.stand::after{content:'';position:absolute;left:-16px;right:-16px;bottom:-4px;height:26px;border-radius:50%;background:radial-gradient(#8fe06a 50%,#4fae38);box-shadow:0 3px 0 #3c8a2c;z-index:-1}
/* Barnemodus: hundehus, lek og søvn */
.yard{background:linear-gradient(#bfe6ff 0 40%,#a5dc84 40%);border-radius:18px;padding:8px 6px 6px;margin-bottom:8px}.yard.night{background:linear-gradient(#25205a 0 40%,#2f6b45 40%)}.yard .pt{background:color-mix(in srgb,var(--card) 90%,transparent)}
.dhw{position:relative;width:220px;height:170px;margin:0 auto}.pk2{position:absolute;left:78px;top:100px}.dhn{text-align:center;font-size:13px;font-weight:800;color:#222;margin:2px 0 8px}.yard.night .dhn{color:#fff}.moon{position:absolute;right:-10px;top:0;font-size:28px}
.zz svg{filter:brightness(.7)}.zzz{position:absolute;right:-6px;top:-14px;font:400 22px var(--fd);color:#7c4dff;animation:zzf 2s ease-in-out infinite;pointer-events:none}.zzz small{font-size:15px;margin-left:1px}.yard .zzz{color:#fff;right:6px;top:70px}@keyframes zzf{50%{transform:translateY(-8px);opacity:.5}}
.pbig{position:relative;display:inline-block}.pbig.pl1{animation:wig .35s 3}.pbig.pl2{animation:wig .12s 8}.pbig.pl3{animation:hop .45s 3}
.fh{position:absolute;bottom:60%;font-size:20px;pointer-events:none;animation:fhf 1.2s forwards}@keyframes fhf{from{transform:translateY(0) scale(.5);opacity:1}to{transform:translateY(-70px) scale(1.2);opacity:0}}
.sm{height:16px;border-radius:8px;background:var(--line);overflow:hidden;margin:6px 0}.sm i{display:block;height:100%;border-radius:8px;transition:width .4s}
.rbw{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin:20px 0 14px}.rbg{display:flex;gap:4px}.rs{position:relative;width:var(--sw);height:calc(var(--sw)*1.2);border-radius:10px;display:grid;place-items:center;font:normal 400 calc(var(--sw)*.62) var(--fd);border-bottom:4px solid rgba(0,0,0,.15);box-sizing:border-box}.rs.l{background:var(--card);color:var(--ink)}.rs.n{background:var(--g-pri);color:#fff;border-bottom-color:var(--e-pri)}.rs.act{background:var(--gold);color:#2b2140;border-bottom-color:#c98a00;animation:rsb 1.2s ease-in-out infinite}.rs.act::before{content:"";position:absolute;left:50%;top:-14px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top:10px solid var(--gold);animation:bnc 1s ease-in-out infinite}.rs.ok{background:color-mix(in srgb,var(--ok) 20%,var(--card));color:var(--ok);border-bottom-color:var(--ok);animation:pop .4s both}@keyframes rsb{50%{box-shadow:0 0 0 6px rgba(255,210,63,.35)}}
.rbtip{display:flex;align-items:center;gap:8px;background:var(--glass);color:#fff;border-radius:16px;padding:8px 12px;margin-top:10px;font-weight:900;line-height:1.25}.rbtip svg{flex:none}.rbbig{width:min(300px,82%);margin:0 auto 6px;padding:6px 10px;cursor:pointer;animation:lin .3s ease-out}.rbword{text-align:center;font:400 40px var(--fd);color:var(--ok);letter-spacing:2px;margin:6px 0;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.pgr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;perspective:600px}.pgc{position:relative;height:96px;border-radius:18px;border:0;border-bottom:6px solid var(--e-pri);background:var(--g-pri);color:#fff;font:400 30px var(--fd);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:2px;overflow:hidden}.pgc:not(.up):not(.ok)::before{content:"";position:absolute;inset:7px;border-radius:12px;border:3px dashed rgba(255,255,255,.35)}.pgc svg{width:100%;height:auto;color:#2b2140}.pgc.up{background:var(--card);color:var(--pri);border-bottom-color:var(--edge);animation:pgf .25s ease-out}.pgc.up svg,.pgc.ok svg{color:var(--ink)}.pgc.ok{background:color-mix(in srgb,var(--ok) 20%,var(--card));color:var(--ok);border-bottom-color:var(--ok)}.pgc b{font-size:46px;font-weight:400}.pgc .pgq{font-size:40px;text-shadow:0 3px 0 rgba(0,0,0,.25)}@keyframes pgf{from{transform:rotateY(90deg)}to{transform:none}}
.tapall{cursor:pointer;-webkit-tap-highlight-color:transparent}.tapall:active{transform:scale(.97);border-color:var(--pri)}
.helper{display:flex;align-items:center;gap:8px;margin:8px 0}.helper .sb{flex:1;margin:0;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:8px 12px;position:relative;text-align:left;font-size:16px}.helper .sb::before{content:'';position:absolute;left:-9px;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:var(--line);border-left:0}.sh.jump{animation:jmp .6s}.sh.sad{animation:sadd .8s}
.stickb{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:column;gap:6px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));margin-top:8px}.stickb .btn{margin:0;padding:12px 8px}.mst svg{max-height:120px}.mpi svg{max-height:84px}
.cgw{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:60px;margin:6px 0}.cgs{position:absolute;left:0;top:0;pointer-events:none;z-index:1}.cgcol{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}.cgc{height:92px;border-radius:18px;border:0;border-bottom:6px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;overflow:hidden;font:inherit}.cgc svg{width:100%;height:auto}.cgc.cgl{background:var(--g-pri);border-bottom-color:var(--e-pri);color:#fff}.cgc.cgl b{font:400 42px var(--fd);text-shadow:0 2px 0 rgba(0,0,0,.2)}.cgc.sel{box-shadow:0 0 0 4px var(--gold);animation:pls 1s ease-in-out infinite}.cgc.ok{border-bottom-color:var(--ok)!important}.cgc.cgl.ok b{text-shadow:none}
.hpb{height:14px;border-radius:7px;background:var(--line);overflow:hidden;margin:5px 0}.hpb i{display:block;height:100%;background:var(--ok);transition:width .4s,background .4s}
.atk{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.atk i{display:block;height:100%;width:0;background:var(--hot)}
.lnk{color:var(--pri);text-decoration:underline;font-weight:900;cursor:pointer}
.lkw{position:relative;display:flex;justify-content:center;width:100%}.lkw>span:first-child{display:block;width:100%}.lkb{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;color:#2b2140;opacity:.6;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff)}
/* Forsiden (Hjem): figur på en gressøy, én stor Spill!-knapp, løypa som en tynn stripe og ett kort under */
.htop{display:flex;align-items:center;gap:8px}
.hpl{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;background:var(--glass);color:#fff;border-radius:16px;padding:6px 12px 6px 8px;font-family:var(--fd);font-size:18px}.hpl b{font-weight:400}
.hx{min-width:44px;padding:8px 10px;font-family:var(--fd);font-weight:400;font-size:20px}
.hscene{position:relative;isolation:isolate;height:290px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin-top:6px}
.hscene::after{content:'';position:absolute;bottom:0;left:50%;width:250px;height:46px;margin-left:-125px;border-radius:50%;background:radial-gradient(#8fe06a 55%,#4fae38);box-shadow:0 6px 0 #3c8a2c;z-index:-1}
.hbub{position:relative;max-width:300px;background:#fff;color:#2b2140;border-radius:22px;border-bottom:5px solid #c9d8ea;padding:10px 16px;text-align:center;font-weight:900;font-size:17px;line-height:1.3;margin-bottom:20px;animation:pop .35s both}
.hbub::after{content:'';position:absolute;left:50%;bottom:-17px;margin-left:-10px;border:10px solid transparent;border-top-color:#fff}
.hmas{display:flex;margin-bottom:16px;animation:bnc 1.6s ease-in-out infinite}.hmas svg{filter:drop-shadow(0 8px 3px rgba(0,0,0,.25))}
.hgo{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;margin:16px 0 0;border-radius:30px;border-bottom-width:9px}
.hgo::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);background-size:250% 100%;background-repeat:no-repeat;animation:hshine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes hshine{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.hgo1{display:flex;align-items:center;gap:10px;font-size:44px;line-height:1}.hgo1 svg{width:34px;height:34px}
.hgo2{font-family:var(--fb);font-weight:900;font-size:15px;background:rgba(0,0,0,.18);border-radius:10px;padding:2px 10px;text-shadow:none}
.hpath{display:flex;align-items:center;gap:8px;width:calc(100% - 40px);margin:14px auto 0;border:0;border-radius:14px;background:var(--glass);color:#fff;font:inherit;font-weight:900;font-size:13px;padding:8px 12px;cursor:pointer}
.hpb2{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}.hpb2 i{display:block;height:100%;background:var(--gold)}
.hcard{display:flex;align-items:center;gap:10px;padding:10px 12px}.hcard>b{flex:1;min-width:0;font-size:15px;line-height:1.2}.hcard .btn{width:auto;flex:none;margin:0;padding:10px 12px;font-size:16px;border-bottom-width:5px}.hci{display:flex;flex:none}.hci svg{width:36px;height:36px}
/* Leksjonsintro: steg-prikker øverst, oransje bånd med navnet, Susi forklarer */
.lhd{display:flex;align-items:center;gap:10px}.lhd .x{min-width:44px;font-family:var(--fd);font-weight:400;font-size:22px;padding:6px 12px}
.ldots{flex:1;display:flex;gap:6px}.ldots i{flex:1;height:12px;border-radius:6px;background:var(--glass);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}.ldots i.on{background:var(--gold)}
.rib{display:inline-block;margin:14px 0 6px;background:var(--g-hot);border-bottom:5px solid var(--e-hot);border-radius:16px;padding:4px 16px;color:#fff;font-family:var(--fd);font-size:20px;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.lstep{animation:lin .35s ease-out}@keyframes lin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.lin1{display:flex;flex-direction:column;gap:10px;margin-top:8px}.lill{margin:0}.glo{animation:glo 1.6s ease-in-out infinite}@keyframes glo{50%{opacity:.45}}
.lsay{display:flex;flex-direction:column;align-items:center;gap:8px}.lsay .ft{display:flex}
.lbub{position:relative;background:var(--card);color:var(--ink);border-radius:24px;border-bottom:6px solid var(--edge);padding:16px 18px;font-size:18px;font-weight:800;line-height:1.4;text-align:center}
.lbub::before{content:'';position:absolute;left:50%;top:-14px;margin-left:-12px;border:12px solid transparent;border-top:0;border-bottom:14px solid var(--card)}
.lh{margin:6px 0 2px}.lnn{font-family:var(--fd);font-weight:400;font-size:24px;display:flex;align-items:center;justify-content:center;gap:6px}
/* Runden: tilbake, tittel og knapper på én rad, fremdrift og kombo under */
.qhud{display:flex;align-items:center;gap:8px}.qhud .x{padding:8px 12px}.qhud>.x:first-child{min-width:44px;font-family:var(--fd);font-weight:400;font-size:22px;padding:6px 12px}
.qt{flex:1;display:flex;justify-content:center;align-items:center;font-family:var(--fd);font-size:22px;white-space:nowrap}
.qbar{display:flex;align-items:center;gap:8px;margin:8px 0 4px}.qbar .bar{flex:1;height:14px;margin:0;border-radius:8px;background:var(--glass)}.qbar .bar i{background:linear-gradient(#ffe27a,#f0a500);border-radius:8px;transition:width .3s}
.qbar b{font-family:var(--fd);font-weight:400;font-size:17px;min-width:40px;text-align:right}.qcombo{display:inline-flex;align-items:center;font-family:var(--fd);font-size:17px;color:var(--hot);animation:pop .3s both}
.helper .sb{background:var(--card);border:0;border-bottom:4px solid var(--edge);border-radius:18px;font-weight:900}.helper .sb::before{border-right-color:var(--card)}
.bub{background:var(--g-pri);border-radius:12px;font-weight:900}
/* Resultat: stjerner som spretter inn én og én, med stråler som snurrer bak */
.res{position:relative;isolation:isolate;padding:14px 0 4px}
.res.win::before{content:'';position:absolute;left:50%;top:50px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:repeating-conic-gradient(rgba(255,210,63,.35) 0deg 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:rspin 16s linear infinite;z-index:-1}
@keyframes rspin{to{transform:rotate(360deg)}}
.res h1{font-size:40px;text-shadow:0 3px 0 rgba(0,0,0,.12);animation:pop .45s cubic-bezier(.3,1.6,.5,1) .5s both}
.rstars svg{filter:drop-shadow(0 4px 0 rgba(0,0,0,.15));animation:rstar .5s cubic-bezier(.3,1.8,.5,1) both}.rstars svg:nth-child(2){animation-delay:.2s}.rstars svg:nth-child(3){animation-delay:.4s}
.res.win .rstars svg:nth-child(2){margin-top:-18px}
@keyframes rstar{from{transform:scale(0) rotate(-40deg);opacity:0}to{opacity:1}}
.keys.pk #chk{background:var(--g-ok);border-bottom-color:var(--e-ok)}
/* Faneoverskrift: navnet på fanen, nivå, ? og tannhjul på én rad */
.thd{display:flex;align-items:center;gap:8px}.thd h1{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:27px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.qcnt{min-width:52px;text-align:center;background:var(--glass);color:#fff;border-radius:14px;padding:8px 10px;font-family:var(--fd);font-size:17px}
/* Øv fritt: fargede bånd over hver del, nivåfliser i to kolonner med XP-merke, kremfargede kort for akkorder og Plasser noten */
.sech{display:flex;align-items:center;gap:8px;margin:20px 0 8px}.sech>span:last-child{font-size:13px;font-weight:800;line-height:1.2}
.secr{flex:none;background:var(--c);border-bottom:4px solid color-mix(in srgb,var(--c) 60%,#000);border-radius:12px;padding:3px 14px;color:#fff;font-family:var(--fd);font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.lvt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;min-height:138px;border:0;border-radius:22px;padding:12px;background:linear-gradient(color-mix(in srgb,var(--c) 65%,#fff),var(--c));border-bottom:7px solid color-mix(in srgb,var(--c) 60%,#000);color:#fff;font:inherit;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:8px;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.3);transition:transform .08s}
.tile:active,.ctile:active,.wide:active,.dbeat:active{transform:translateY(3px)}
.tile>svg,.tic2 svg{filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.tbg{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.18);border-radius:10px;padding:2px 8px;font-weight:900;font-size:13px;text-shadow:none}
.tic2{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.3);display:grid;place-items:center}
.tic2.flt{animation:flt 2.4s ease-in-out infinite}@keyframes flt{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.ttx b{display:block;font-family:var(--fd);font-weight:400;font-size:22px;line-height:1.1}.ttx small{display:block;font-size:12px;font-weight:800;opacity:.95;line-height:1.2}
.wide{width:100%;min-height:80px;border:0;border-radius:22px;padding:10px 14px;background:var(--card);border-bottom:7px solid var(--edge);color:var(--ink);font:inherit;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;transition:transform .08s}.wide .ttx{flex:1}.wide .ttx b{font-size:20px}.wide .ttx small{color:var(--mut);opacity:1}.wic{display:flex}
.lbg{display:inline-block;background:color-mix(in srgb,var(--c) 24%,var(--card));color:var(--ink);border-radius:10px;padding:2px 8px;font-weight:900;font-size:13px;white-space:nowrap}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ctile{min-height:112px;border:0;border-radius:20px;background:var(--card);border-bottom:6px solid var(--edge);color:var(--ink);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:8px 4px;text-align:center;transition:transform .08s}.ctile b{font-size:14px;font-weight:900;line-height:1.1}
.tile.tsm{min-height:112px;align-items:center;justify-content:center;text-align:center;gap:4px;padding:8px 4px}.tile.tsm b{font-size:14px;font-weight:900;line-height:1.1}
.tbg2{display:inline-flex;align-items:center;gap:3px;background:rgba(0,0,0,.18);border-radius:8px;padding:2px 7px;font-weight:900;font-size:12px;color:#fff;text-shadow:none;white-space:nowrap}
/* Dueller: kveldshimmel og et tårn. Låste motstandere øverst, neste motstander som et stort kort, slåtte nederst i grønt */
.dusk{position:fixed;inset:0;z-index:-1;background:linear-gradient(#2a1a6b 0%,#c23a5a 55%,#ff8a5c 100%)}
.dinfo{margin:10px 0 0;background:rgba(20,10,40,.35);color:#fff;border-radius:16px;padding:8px 12px;font-size:13px;font-weight:800;line-height:1.35}
.tower{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.dlock{display:flex;align-items:center;gap:12px;margin:0 10px;min-height:96px;border-radius:24px;background:rgba(20,10,40,.45);border:2px dashed rgba(255,255,255,.35);padding:0 14px;color:#fff}.dlock .ttx{flex:1;opacity:.8}.dlock .ttx b{font-size:18px}.dlock .tbg2{background:rgba(255,255,255,.15);opacity:.85}
.dpic2{width:66px;height:66px;flex:none;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center}.dlock .dpic2 svg{opacity:.7;filter:brightness(0) invert(1)}
.dnext{background:var(--card);border-bottom:8px solid var(--edge);border-radius:28px;color:var(--ink);padding:14px;box-shadow:0 14px 30px rgba(20,10,40,.35);animation:pop .4s cubic-bezier(.3,1.5,.5,1) both}
.dnr{display:flex;align-items:center;gap:12px}.dnr b{display:block;font-family:var(--fd);font-weight:400;font-size:24px}.dnr small{display:block;font-size:13px;font-weight:800;color:var(--mut);margin-bottom:6px}
.dpic{width:96px;height:96px;flex:none;border-radius:26px;background:linear-gradient(#ffe1e8,#ffc2cf);display:grid;place-items:center}.dpic svg{animation:bnc 1.4s ease-in-out infinite}
.btn.dgo{background:var(--g-bad);border-bottom-color:var(--e-bad);font-size:26px;margin-top:12px;animation:dpl 1.6s ease-in-out infinite}@keyframes dpl{0%,100%{box-shadow:0 0 0 0 rgba(239,69,101,.6)}50%{box-shadow:0 0 0 12px rgba(239,69,101,0)}}
.dbeat{display:flex;align-items:center;gap:12px;margin:0 10px;min-height:92px;border:0;border-radius:24px;background:var(--g-ok);border-bottom:6px solid var(--e-ok);padding:0 14px;color:#fff;font:inherit;text-align:left;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.25);transition:transform .08s}.dbeat .dpic2{background:rgba(255,255,255,.3)}.dbeat .ttx{flex:1}.dbeat .ttx b{font-size:20px}
/* Melodier: lilla bakgrunn, vanskelighetsgrad som brikker, melodikort med plate */
.mpurple{position:fixed;inset:0;z-index:-1;background:linear-gradient(#5b2fd6 0%,#8b5cf6 45%,#c3a6ff 100%)}
.mdt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.mdt button{height:56px;border:0;border-radius:16px;background:rgba(255,255,255,.2);color:#fff;font:inherit;font-weight:900;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;padding:0 2px;transition:transform .15s}
.mdt button.on{background:var(--gold);border-bottom:5px solid #c98a00;color:#4a2a00;transform:translateY(-3px)}.mdt button.lk{background:rgba(20,10,60,.3);color:rgba(255,255,255,.6)}.mdt button.lk.on{color:#4a2a00;background:color-mix(in srgb,var(--gold) 70%,#888)}
.minfo{display:flex;align-items:center;gap:10px;margin-top:12px;background:rgba(20,10,60,.3);color:#fff;border-radius:18px;padding:10px 12px;font-weight:900;font-size:15px;line-height:1.25}.minfo svg{flex:none}.minfo small{display:block;font-weight:700;font-size:13px;opacity:.85}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.mcard{position:relative;min-height:128px;border:0;border-radius:22px;background:var(--card);border-bottom:6px solid var(--edge);color:var(--ink);font:inherit;padding:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;transition:transform .08s}.mcard:active{transform:translateY(3px)}.mcard b{font-size:15px;font-weight:900;line-height:1.15}.mcard.off{opacity:.6;cursor:default}
.vinyl{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,var(--v) 0 18%,#2b2140 19% 100%);box-shadow:inset 0 0 0 4px #3e3456,inset 0 0 0 10px #2b2140,inset 0 0 0 11px #45395e;display:grid;place-items:center}.vinyl svg{filter:brightness(0) invert(1);opacity:.8}
.vinyl.spin{animation:vspin 3s linear infinite}@keyframes vspin{to{transform:rotate(360deg)}}.vinyl.big{width:120px;height:120px;box-shadow:inset 0 0 0 6px #3e3456,inset 0 0 0 22px #2b2140,inset 0 0 0 24px #45395e,0 8px 0 rgba(0,0,0,.15)}
.mbg{position:absolute;right:10px;top:10px;background:#fff1c2;color:#2b2140;border-radius:10px;padding:2px 8px;font-weight:900;font-size:12px}.mbg.ok{background:#d5f7e6;color:#128a4d}
.mnew{position:absolute;left:52px;top:4px;background:var(--hot);color:#fff;border-radius:8px;padding:1px 7px;font-weight:900;font-size:11px;animation:mnew 1.4s ease-in-out infinite}@keyframes mnew{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.15) rotate(6deg)}}
.mqt{flex-direction:column;line-height:1.05;font-size:19px;white-space:normal;text-align:center}.mqt small{font-family:var(--fb);font-weight:900;font-size:12px;opacity:.75}
.mend{display:flex;justify-content:center;margin:6px 0 10px}
/* Duellen: himmel og gress, motstanderen øverst til høyre, noten i en snakkeboble, ditt dyr nederst til venstre */
.dsky{position:fixed;inset:0;z-index:-1;background:linear-gradient(#3a8dff 0%,#9fdcff 44%,#a5e07f 44.2%,#4fae38 100%)}
.dsky+.qhud .qt{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.arena2{display:flex;flex-direction:column;gap:6px;margin-top:6px;color:#fff}
.dop,.dme{display:flex;align-items:flex-end;gap:10px;padding:0 4px;margin:0;border-radius:20px}.dop{justify-content:flex-end}.dop .dbar{width:min(210px,55%);align-self:flex-start;margin-top:6px}.dme .dbar{flex:1;padding-bottom:24px}
.dop .ft svg{transform:scaleX(-1)}
.dnm{display:flex;justify-content:space-between;font-weight:900;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.hps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:4px 0}.hps i{height:12px;border-radius:6px;background:rgba(20,20,60,.25);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);transition:background .3s}.hps i.on{background:#2ed585}.hps i.lo{background:#ef4565}
.dbar .atk{height:7px;border-radius:4px;background:rgba(20,20,60,.25)}.dbar .atk i{background:var(--hot)}
.stand2{position:relative;display:flex;flex-direction:column;align-items:center;z-index:0}.stand2::after{content:'';width:130px;height:22px;margin-top:-14px;border-radius:50%;background:radial-gradient(#8fe06a 50%,#4fae38);box-shadow:0 4px 0 #3c8a2c;z-index:-1}
.dcw{position:relative;margin:4px 26px 0}
.dcard{background:#fffffff2;color:#2b2140;border:3px solid #fff;border-radius:24px;padding:6px 8px;box-shadow:0 6px 0 rgba(0,0,0,.12);animation:pp .5s cubic-bezier(.3,1.8,.5,1)}.dcard svg{display:block;width:100%;height:auto}
.dcw::after{content:'';position:absolute;left:50%;bottom:-13px;margin-left:-11px;border:11px solid transparent;border-bottom:0;border-top:14px solid #fff}
.tw{position:absolute;top:-12px;width:22px;height:22px;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 6 5 10 11 11-6 1-10 5-11 11-1-6-5-10-11-11 6-1 10-5 11-11z' fill='%23ffb300'/%3E%3C/svg%3E") center/contain no-repeat;animation:dtw 1.4s ease-in-out infinite}.tw.t1{left:24px}.tw.t2{left:50%;margin-left:-12px;width:26px;height:26px;top:-14px;animation-delay:.3s}.tw.t3{right:24px;animation-delay:.6s}
@keyframes dtw{0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.dmsg{min-height:52px;margin-top:10px;padding:0 10px;text-align:center;font-family:var(--fd);font-size:22px;line-height:1.15;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.dkeys{margin-top:8px}.dkeys button{padding:20px 0;font-size:28px}
/* Klekking: solnedgang med stråler og glød bak egget, egget vugger, lamper for trykkene og en rad med dyrene fra egget */
.hsun{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(90% 60% at 50% 42%,#ffb057 0%,#ff7a3d 45%,#9a2f6b 100%)}
.hsun::before{content:'';position:absolute;left:50%;top:42%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:repeating-conic-gradient(rgba(255,240,180,.25) 0deg 10deg,transparent 10deg 24deg);animation:rspin 18s linear infinite}
.hsun::after{content:'';position:absolute;left:50%;top:42%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;background:radial-gradient(rgba(255,240,180,.6),transparent 65%)}
.hch{color:#fff;padding-top:24px}.hch h1{font-size:34px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25)}.hch .note{color:#fff;opacity:.9}
.hmsg{font-family:var(--fd);font-size:22px;margin-top:6px;color:#fff3c4;min-height:28px}.hpop{animation:pop .35s ease-out}
.hstage{position:relative;display:flex;justify-content:center;margin:20px 0 8px}
.hegg{margin:0;transform-origin:50% 90%;animation:hwob 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 6px rgba(80,20,40,.35))}.hegg svg{width:200px;height:200px}
@keyframes hwob{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-6deg)}84%{transform:rotate(5deg)}92%{transform:rotate(-3deg)}}
.hegg.shk{animation:shk .5s}
.htap{position:absolute;left:calc(50% + 58px);bottom:-6px;pointer-events:none;animation:htap 1s ease-in-out infinite}@keyframes htap{50%{transform:translate(-6px,-8px)}}
.hpips{display:flex;justify-content:center;gap:8px;margin:8px 0 18px}.hpips i{width:40px;height:12px;border-radius:6px;background:rgba(255,255,255,.3);transition:background .2s,box-shadow .2s}.hpips i.on{background:var(--gold);box-shadow:0 0 12px rgba(255,210,63,.9)}
.hrow{background:rgba(60,10,40,.35);border-radius:22px;padding:10px 12px;margin-top:10px}.hrt{font-weight:900;font-size:13px;margin-bottom:6px}
.hrg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.hrg span{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.15);display:grid;place-items:center}.hrg svg{width:80%;height:80%}
.hrg b{font-family:var(--fd);font-weight:400;font-size:26px;color:rgba(255,255,255,.7)}.hrg span.nw{background:rgba(255,210,63,.35);box-shadow:0 0 0 3px var(--gold);animation:pop .5s cubic-bezier(.3,1.6,.5,1) .6s both}
.hrev{display:flex;justify-content:center;margin:14px 0 6px;animation:hrev .7s ease-out both}@keyframes hrev{0%{transform:scale(.2) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:none}}
.hres{font-family:var(--fd);font-size:26px;text-shadow:0 3px 0 rgba(0,0,0,.25)}.hfrom{font-weight:800;opacity:.9}
.hbadge{background:var(--gold);color:#6b3a00;border-radius:14px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.btn.hlater{background:rgba(255,255,255,.2);border-bottom-color:rgba(0,0,0,.15);color:#fff}
/* Egg og dyr: varm bakgrunn, faner som segmentert knapp, egg- og kistekort, samling med merker */
.zbg{position:fixed;inset:0;z-index:-1;background:linear-gradient(#ff9d5c 0%,#ffcf7a 40%,#ffe7b0 100%)}
:root[data-theme="dark"] .zbg{background:linear-gradient(#5a2a1a 0%,#6b3a1f 40%,#2a1d14 100%)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .zbg{background:linear-gradient(#5a2a1a 0%,#6b3a1f 40%,#2a1d14 100%)}}
.ztabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:rgba(140,60,0,.18);border-radius:18px;padding:5px;margin:12px 0 0}.ztabs button{height:42px;font-size:14px;border-radius:14px}.ztabs button.on{border-bottom:4px solid var(--edge);box-shadow:none}
.zxp{display:flex;justify-content:flex-end;margin:10px 0 0}.zxp span{background:rgba(255,255,255,.75);color:#2b2140;border-radius:14px;padding:5px 12px;font-weight:900;font-size:14px}
.eggs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ecard{min-height:184px;border-radius:24px;background:var(--card);border-bottom:6px solid var(--edge);padding:8px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ecard.lk{background:color-mix(in srgb,var(--card) 60%,transparent);border-bottom-color:color-mix(in srgb,var(--edge) 60%,transparent)}
.eimg{position:relative;height:78px;width:100%;display:flex;justify-content:center;align-items:flex-end}.eimg>i{position:absolute;bottom:0;left:50%;width:84px;height:18px;margin-left:-42px;border-radius:50%}.eimg>span{position:relative;display:flex;margin-bottom:4px}
.ewob{animation:hwob 2.4s ease-in-out infinite;transform-origin:50% 90%}
.elk{opacity:.9}.elk>svg{filter:grayscale(.5)}.elk b{position:absolute;inset:0;display:grid;place-items:center;color:#2b2140;opacity:.7}
.enm{font-size:14px;font-weight:900;line-height:1.15}.est{font-size:12px;font-weight:800;color:var(--mut);line-height:1.2}.est.okc,.okc{color:var(--ok)!important}.est.hot{color:#c25e00}
.ebar{width:100%;height:10px;border-radius:5px;background:var(--line);overflow:hidden}.ebar i{display:block;height:100%;background:linear-gradient(#ffe27a,#f0a500);border-radius:5px}.ebar.full i{background:var(--g-ok)}
.ebtn{margin-top:auto;width:100%;height:40px;border:0;border-radius:14px;background:var(--soft);color:var(--mut);font-family:var(--fd);font-size:16px;cursor:pointer;transition:transform .08s}.ebtn:disabled{cursor:default;opacity:.8}
.ebtn.ok{background:var(--g-ok);border-bottom:5px solid var(--e-ok);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2)}.ebtn.hot{background:var(--g-hot);border-bottom:5px solid var(--e-hot);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);animation:eglow 1.4s ease-in-out infinite}
.ebtn:active:not(:disabled){transform:translateY(3px)}@keyframes eglow{0%,100%{box-shadow:0 0 0 0 rgba(255,138,31,.6)}50%{box-shadow:0 0 0 10px rgba(255,138,31,0)}}
.zc{background:var(--card);border-radius:26px;border-bottom:7px solid var(--edge);padding:12px;margin-top:14px}.zch{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.zch b{font-family:var(--fd);font-weight:400;font-size:20px}.zch span{font-weight:900;font-size:13px;color:var(--mut);text-align:right}
.bdg2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.bd2{border:0;background:none;font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:0}.bd2 b{font-size:13px;line-height:1.1}.bd2 small{font-size:11px;font-weight:800;color:var(--mut)}
.medal{position:relative;overflow:hidden;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#f0a500);border-bottom:6px solid #b87800;display:grid;place-items:center;box-sizing:border-box}.medal svg{filter:brightness(0) invert(1) drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.medal::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:250% 100%;background-repeat:no-repeat;animation:hshine 3s ease-in-out infinite}
.ring{width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--hot) 0 var(--p),var(--line) var(--p) 100%);display:grid;place-items:center}.ring>span{width:60px;height:60px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.zsecs{display:flex;flex-direction:column;gap:14px}.zsh{display:flex;justify-content:space-between;align-items:center}.zsh b{font-size:16px;font-weight:900}.zsh span{font-weight:900;font-size:13px;color:var(--mut)}.zsec .ebar{margin:6px 0 8px}
.zg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.zt{aspect-ratio:1;border-radius:14px;background:color-mix(in srgb,var(--edge) 22%,var(--card));display:grid;place-items:center}.zt svg{width:84%;height:84%}
.zt.no{font-family:var(--fd);font-size:22px;color:color-mix(in srgb,var(--edge) 80%,var(--card))}.zt.sh{background:#fff3c4;box-shadow:0 0 0 2px var(--gold)}
.pets.big .pt{background:var(--card);border:0;border-bottom:5px solid var(--edge);border-radius:18px}.pets.big .pt b{font-size:12px}
/* Nytt merke: egen feiring rett etter klekkingen */
.bdgr{position:fixed;inset:0;z-index:120;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:calc(54px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));background:radial-gradient(circle at 50% 36%,#6a3fd6 0%,#2a1a6b 55%,#140c3a 100%);color:#fff;text-align:center}
.bflash{position:absolute;inset:0;background:#fff;opacity:0;animation:bfl .9s ease-out 1.05s;pointer-events:none}@keyframes bfl{10%{opacity:.9}100%{opacity:0}}
.brays{position:absolute;left:50%;top:300px;width:760px;height:760px;margin:-380px 0 0 -380px;animation:brin 1.4s ease-out .9s both;pointer-events:none}.brays div{width:100%;height:100%;border-radius:50%;background:repeating-conic-gradient(rgba(255,210,63,.32) 0deg 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:rspin 18s linear 2.3s infinite}
@keyframes brin{from{transform:rotate(0) scale(.4);opacity:0}15%{opacity:1}to{transform:rotate(200deg) scale(1);opacity:1}}
.bban{position:relative;background:var(--g-hot);border-bottom:5px solid var(--e-hot);border-radius:16px;padding:4px 20px;font-family:var(--fd);font-size:22px;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.2);animation:lin .5s ease-out .3s both}
.bmed{position:relative;width:200px;height:240px;margin-top:10px;perspective:800px}.bmi{position:relative;width:100%;height:100%;animation:bdrop 1.3s cubic-bezier(.3,.7,.4,1) .5s both}
@keyframes bdrop{0%{transform:translateY(-520px) rotateY(0) scale(.5)}55%{transform:translateY(20px) rotateY(720deg) scale(1.1)}70%{transform:translateY(-14px) rotateY(720deg) scale(.96)}85%{transform:translateY(4px) rotateY(720deg) scale(1.02)}100%{transform:translateY(0) rotateY(720deg) scale(1)}}
.mrib{position:absolute;top:0;width:40px;height:110px;transform-origin:top}.mrib.r1{left:56px;background:#ef4565;transform:skewX(8deg)}.mrib.r2{right:56px;background:#3a8dff;transform:skewX(-8deg)}
.disc{position:absolute;left:10px;top:60px;width:180px;height:180px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#fff0a0,#ffd23f 45%,#f0a500);box-shadow:0 6px 0 #c98a00,inset 0 0 0 14px rgba(255,243,176,.5);display:grid;place-items:center}
.disc .inner{width:116px;height:116px;border-radius:50%;background:#7c4dff;border:6px solid #fff6df;display:grid;place-items:center}.disc .inner svg{width:72px;height:72px}
.disc .shine{position:absolute;top:-20px;left:0;width:34px;height:240px;background:rgba(255,255,255,.55);transform:translateX(-160px) rotate(25deg);animation:bshine 1.1s ease-in-out 1.8s both}@keyframes bshine{to{transform:translateX(220px) rotate(25deg)}}
.bconf{position:absolute;left:50%;top:330px;width:0;height:0;pointer-events:none}.bconf i{position:absolute;border-radius:2px;opacity:0;animation:bconf 1.6s cubic-bezier(.2,.7,.4,1) both}@keyframes bconf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.bname{position:relative;margin:14px 0 0;font-size:48px;line-height:1;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35);animation:pop .5s ease-out 1.5s both}
.bdesc{position:relative;margin-top:6px;font-weight:900;font-size:18px;color:#ffe27a;animation:lin .4s ease-out 1.75s both}
.bpets{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}.bpets span{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.14);border:2px solid rgba(255,210,63,.6);display:grid;place-items:center;animation:pop .4s ease-out both}
.bcnt{position:relative;margin-top:10px;font-weight:900;font-size:14px;opacity:.85;animation:lin .4s ease-out 2.8s both}
.bbtns{position:relative;margin-top:auto;width:100%;max-width:440px;animation:lin .4s ease-out 3s both}.bbtns .btn.g{background:rgba(255,255,255,.14);border-bottom-color:rgba(0,0,0,.2);color:#fff}
@media(max-width:400px){.thd .nvw{display:none}}
/* Dialoger: kremkort med oransje bånd, hvite rader, 3D-brytere, Susi som titter over kanten */
:root{--row:#fff}:root[data-theme="dark"]{--row:#33295e}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--row:#33295e}}
.tbox.dlg{position:relative;padding:22px 16px 16px}.tbox.dlg p{color:var(--ink)}
.dttl{display:inline-flex;align-items:center;gap:8px;background:var(--g-hot);border-bottom:6px solid var(--e-hot);border-radius:18px;padding:6px 22px;font-family:var(--fd);font-size:26px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);white-space:nowrap}
.dttl svg{filter:brightness(0) invert(1)}
.sdlg{padding-top:34px;margin-top:22px}.sdlg .dttl{position:absolute;left:50%;top:-22px;transform:translateX(-50%)}.tut:has(.sdlg){padding-top:40px}
.dx{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:14px;background:var(--soft);color:var(--mut);display:grid;place-items:center;cursor:pointer}
.srow2{display:flex;align-items:center;gap:12px;background:var(--row);border-radius:18px;padding:10px 12px;margin-bottom:10px;text-align:left}.srow2 b{flex:1;font-size:17px}
.sico{width:32px;height:32px;display:grid;place-items:center;flex:none}.sico svg{width:30px;height:30px}.sico.let{border-radius:10px;background:color-mix(in srgb,var(--pri) 18%,var(--row));font-family:var(--fd);font-size:18px;color:var(--pri)}
.tgl{position:relative;width:84px;height:42px;flex:none;border:0;border-radius:21px;background:#e6dccb;border-bottom:5px solid #c7b89e;color:#8a7a62;font:inherit;font-weight:900;font-size:14px;text-align:right;padding:0 14px 0 0;cursor:pointer;transition:background .2s}
.tgl i{position:absolute;left:4px;top:3px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.15);transition:left .2s}
.tgl.on{background:var(--g-ok);border-bottom-color:var(--e-ok);color:#fff;text-align:left;padding:0 0 0 12px}.tgl.on i{left:calc(100% - 36px)}
.sbtn{height:42px;border:0;border-radius:14px;background:var(--g-pri);border-bottom:5px solid var(--e-pri);color:#fff;padding:0 16px;font-family:var(--fd);font-size:17px;cursor:pointer;max-width:55%}
.sblk{background:var(--row);border-radius:18px;padding:10px 12px;margin-bottom:10px;text-align:left}.sblk b{font-size:17px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}.seg .x{height:44px;padding:0;background:var(--soft);border-bottom:5px solid var(--edge);color:var(--ink);font-size:15px}.seg .x.on{background:var(--g-ok);border-bottom-color:var(--e-ok);color:#fff}
.sw2{display:flex;justify-content:space-between;margin-top:12px;padding:0 4px}.sw2 .swb{width:40px;height:40px;border:0;border-radius:12px;transform:rotate(45deg) scale(.9);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c));box-shadow:0 4px 0 rgba(0,0,0,.15);cursor:pointer}.sw2 .swb.on{box-shadow:0 0 0 3px var(--row),0 0 0 6px var(--ink)}
.peek{margin-top:96px}.hpeek{position:absolute;left:50%;top:-100px;margin-left:-60px;display:flex;animation:bnc 1.8s ease-in-out infinite}.peek h2{margin:8px 0 0;font-size:30px}
.dtxt{font-size:17px;font-weight:800;line-height:1.4;margin:12px 0 0!important}
.dots i{transition:width .2s}.dots i.on{width:20px;border-radius:4px}
.tsheet{text-align:left;padding:14px 16px}.tsh{display:flex;align-items:center;gap:10px}.tsi{width:48px;height:48px;flex:none;border-radius:16px;background:var(--row);display:grid;place-items:center}
.tpg{display:inline-block;background:color-mix(in srgb,var(--pri) 18%,var(--row));color:var(--pri);border-radius:10px;padding:1px 8px;font-size:12px;font-weight:900}.tsheet h2{margin:2px 0 0;font-size:22px;line-height:1.1}.tsheet .dtxt{font-size:15px;margin:8px 0 0!important}
.tsb{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:12px}.tsb .btn{margin:0;padding:12px 6px}
.tbk{display:block;margin:8px auto 0;border:0;background:none;color:var(--mut);font:inherit;font-weight:900;font-size:14px;cursor:pointer}
/* XP-oversikten */
.xdlg{text-align:left;max-height:calc(100vh - 32px);overflow:auto}.xtop{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding-top:4px;text-align:center}
.xrays{position:absolute;top:-10px;left:50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:repeating-conic-gradient(rgba(255,210,63,.35) 0deg 12deg,transparent 12deg 28deg);animation:rspin 14s linear infinite;z-index:-1}
.xnum{font-family:var(--fd);font-size:48px;line-height:1}.xsub{font-weight:900;color:var(--mut)}
.xrow{display:flex;align-items:center;gap:12px;background:var(--row);border-radius:18px;padding:10px 12px;margin-top:8px}.xrow>div{flex:1;min-width:0}.xrow b{display:flex;align-items:center;gap:4px;font-size:16px}.xrow small{display:block;font-size:12px;font-weight:800;color:var(--mut);line-height:1.3}
.xring{width:52px;height:52px;flex:none;border-radius:50%;background:conic-gradient(var(--pri) 0 var(--p),color-mix(in srgb,var(--pri) 15%,var(--row)) var(--p) 100%);display:grid;place-items:center}.xring span{width:40px;height:40px;border-radius:50%;background:var(--row);display:grid;place-items:center;font-family:var(--fd);font-size:18px;color:var(--pri)}
.xico{width:52px;height:52px;flex:none;border-radius:16px;background:#fff1de;display:grid;place-items:center}.xico.gold{background:#fff7cc}
.xbar{margin-top:4px;height:8px}.xbar.pur i{background:linear-gradient(#a98bff,#6a3fd6)}
.xtwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.xtwo .xrow{align-items:flex-start}
/* Barnemodus: hundehuset som en liten verden med dag og natt */
.kyard{margin-top:10px}
.ksc{position:relative;height:290px;border-radius:26px;overflow:hidden;background:linear-gradient(#3a8dff 0%,#8fd3ff 45%,#c8ecff 100%)}.kyard.night .ksc{background:linear-gradient(#141043 0%,#25205a 45%,#3a3a7a 100%)}
.kbg{position:absolute;left:0;bottom:0;width:100%;height:100%}.kcl{animation:kcl 8s ease-in-out infinite alternate}@keyframes kcl{to{transform:translateX(30px)}}
.khouse{position:absolute;left:50%;bottom:6px;width:240px;margin-left:-120px}.khouse svg{display:block;width:100%;height:auto}
.kdoor{position:absolute;left:50%;bottom:4px;margin-left:-42px;display:flex;transform-origin:50% 100%;animation:wig 1.2s ease-in-out infinite}.kdoor.zz{animation:kbr 3s ease-in-out infinite}.kdoor.zz svg{filter:brightness(.7)}
@keyframes kbr{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
.kyard .zzz{position:absolute;right:28px;top:96px;font:400 26px var(--fd);color:#fff}
.kcap{display:flex;justify-content:center;margin-top:-18px;position:relative;z-index:1}.kcap span{background:rgba(20,20,60,.6);color:#fff;border-radius:14px;padding:4px 14px;font-weight:900;font-size:15px}
.ktray{background:var(--card);border-radius:26px;border-bottom:7px solid var(--edge);padding:12px;margin-top:10px}.kyard.night .pt.zz svg{filter:brightness(.7)}
/* Stell dyret: himmel og gress, stort dyr med snakkeboble */
.ksky{position:fixed;inset:0;z-index:-1;background:linear-gradient(#3a8dff 0%,#8fd3ff 40%,#8ee08a 40.2%,#5bbf63 100%)}.ksky.night{background:linear-gradient(#141043 0%,#25205a 45%,#2f6b45 45.2%,#285c3b 100%)}
.kpet{position:relative;padding-top:8px}
.kbub{position:relative;display:inline-block;max-width:280px;background:#fff;color:#2b2140;border-radius:22px;border-bottom:5px solid #c9d8ea;padding:10px 18px;font-family:var(--fd);font-size:22px;animation:pop .35s ease-out}
.kbub::after{content:'';position:absolute;left:50%;bottom:-17px;margin-left:-10px;border:10px solid transparent;border-top-color:#fff}
.kbob{animation:bob 1.6s ease-in-out infinite alternate}.kpn{display:block;font-family:var(--fd);font-weight:400;font-size:30px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.kcard{background:var(--card);border-radius:30px;border-bottom:9px solid var(--edge);padding:16px;margin-top:12px}
.kfull{display:flex;align-items:center;gap:8px}.kfull b{width:54px;font-size:14px}.kfull .sm{flex:1;margin:0}
.kplay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.kpb{height:76px;border:0;border-radius:20px;color:#fff;font:inherit;font-weight:900;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.25);transition:transform .08s}.kpb:active{transform:translateY(3px)}
.kpb.kp0{background:linear-gradient(#ff9ab0,#ff5c8a);border-bottom:6px solid #c2305d}.kpb.kp1{background:linear-gradient(#ffe27a,#f0b400);border-bottom:6px solid #b07f00}.kpb.kp2{background:linear-gradient(#7cd0ff,#2f9bff);border-bottom:6px solid #1a63b8}
.btn.kwake{margin-top:14px}
.kname{display:flex;gap:8px;margin-top:14px}.kname input{flex:1;min-width:0;font:inherit;font-size:15px;font-weight:800;padding:10px 12px;border:3px solid var(--line);border-radius:16px;background:var(--row);color:var(--ink)}
.kbtn{height:48px;border:0;border-radius:16px;background:var(--g-hot);border-bottom:5px solid var(--e-hot);color:#fff;padding:0 16px;font-family:var(--fd);font-size:18px;cursor:pointer}
/* Eventyrkartet: blått toppfelt */
.kmhd{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;justify-content:space-between;margin:-16px -16px 8px;padding:12px;background:linear-gradient(#2a4bd7,#3a6cf0);border-bottom:5px solid #1d2f9a;border-radius:0 0 18px 18px}
.kmhd .x{background:rgba(255,255,255,.18);border-bottom-color:rgba(0,0,0,.2);color:#fff}.kmn{display:inline-flex;align-items:center;gap:6px;background:var(--glass);color:#fff;border-radius:16px;padding:8px 14px;font-family:var(--fd);font-size:20px}
/* Store stråler og innglidende steg skal ikke gi sideveis rulling på mobil */
html,body{overflow-x:clip}
/* Forsiden tilpasser seg skjermhøyden, så kortet under Spill! får plass over menyen på telefoner med kort skjerm.
   XP står i toppen her (med nivået som gult merke), så XP-hjulet skjules på forsiden. */
.hxpb{position:relative;border:0;cursor:pointer;font:inherit;font-family:var(--fd);font-size:18px}.hxpb small{font-family:var(--fb);font-size:11px;font-weight:900;opacity:.85}
.hlv{position:absolute;right:-8px;top:-9px;min-width:22px;height:22px;border-radius:11px;background:#ffc93c;color:#2b2140;font:normal 900 12px var(--fb);display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
body:has(.hscene) #wheel{display:none}
.hscene{height:clamp(150px,31vh,290px);height:clamp(150px,31dvh,290px)}
.hmas svg{width:clamp(96px,18vh,170px);width:clamp(96px,18dvh,170px);height:auto}
.hmas{margin-bottom:clamp(8px,2dvh,16px)}.hbub{font-size:clamp(15px,2.4dvh,17px);margin-bottom:clamp(12px,2.2dvh,20px)}
.hgo{margin-top:clamp(8px,1.8dvh,16px);padding:clamp(10px,1.8dvh,16px) 10px}.hgo1{font-size:clamp(34px,6dvh,44px)}.hgo1 svg{width:clamp(26px,4.5dvh,34px);height:auto}
.hpath{margin-top:clamp(8px,1.6dvh,14px)}
.hcard>b small{display:block;font-family:var(--fb);font-size:12px;font-weight:800;color:var(--mut);margin-top:2px}