@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(assets/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(assets/barlow-600.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:200 800;font-display:swap;src:url(assets/newsreader-opsz.woff2) format("woff2")}
:root{
--bord:#0f4034;--bord2:#0a2d25;--yta:#16493d;--yta2:#1e5748;--linje:rgba(232,240,226,.14);
--text:#f2f0e4;--matt:#a9bfb2;--accent:#eab94d;--accent-text:#2a1f05;
--papper:#fbf8ef;--papper-kant:#d8d2c0;--svart:#191c1e;--rod:#c4262e;--ruter:#c4262e;--klover:#191c1e;
--ease:cubic-bezier(.23,1,.32,1);--drawer:cubic-bezier(.32,.72,0,1);
--ui:Barlow,system-ui,-apple-system,sans-serif;--rubrik:Newsreader,Georgia,serif;
}
[data-bord=black]{--bord:#10294c;--bord2:#0a1a33;--yta:#17345c;--yta2:#20426f;--matt:#a7b8cf;--accent:#f1c65c}
[data-bord=tegel]{--bord:#4f1d1a;--bord2:#361210;--yta:#5f2622;--yta2:#70302b;--matt:#d0aea5;--accent:#f0bd5d}
[data-bord=skiffer]{--bord:#2b3a44;--bord2:#1c272e;--yta:#364853;--yta2:#425662;--matt:#adbcc4;--accent:#e9c46a}
[data-bord=massing]{--bord:#2a2418;--bord2:#191510;--yta:#383021;--yta2:#463c2a;--matt:#bfb193;--accent:#e6b94a}
.fyrfarg{--ruter:#1a5fc2;--klover:#177a41}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--bord2);color:var(--text);font:500 16px/1.4 var(--ui);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.ik{width:22px;height:22px;display:block;flex:none}
/* --- Hem --- */
#hem{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bord)}
#hem-inne{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top) + 12px) 16px 24px;width:100%;max-width:560px;margin:0 auto}
.hemtopp{display:flex;align-items:center;justify-content:space-between;height:52px;margin-bottom:10px}
h1{font:600 34px/1 var(--rubrik);letter-spacing:-.01em}
h2{font:600 28px/1.1 var(--rubrik);margin-bottom:6px}
.rund{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--yta);transition:transform .14s var(--ease)}
.rund:active{transform:scale(.94)}
.rund.liten{width:36px;height:36px}
.rund:disabled{opacity:.3}
.under{color:var(--matt);margin-bottom:14px;line-height:1.45}
.nivakort,.dagkort,.spelkort,.dagrad{display:block;width:100%;background:var(--yta);border-radius:16px;transition:transform .14s var(--ease),background-color .14s}
.nivakort:active,.dagkort:active,.spelkort:active,.dagrad:active,.rad:active{transform:scale(.985)}
.nivakort{padding:14px 16px 13px;margin-bottom:10px}
.nk-rad{display:flex;align-items:center;gap:12px}
.nk-niva{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font:600 22px/1 var(--ui);flex:none}
.nk-text{flex:1;min-width:0}
.nk-rubrik{font-weight:600;font-size:17px;margin-bottom:7px}
.bar{height:8px;border-radius:4px;background:rgba(0,0,0,.28);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .9s var(--ease)}
.nk-nasta{margin-top:11px;font-size:14px;color:var(--matt);line-height:1.4}
.nk-nasta b{color:var(--text);font-weight:600}
.dagkort{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:18px;background:var(--yta2)}
.dk-rubrik{font-weight:600;font-size:17px}
.dk-under{font-size:14px;color:var(--matt)}
.dk-prickar{display:flex;gap:5px;flex:none}
.dk-prickar i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.28)}
.dk-prickar i.p{background:var(--accent)}
.spellista{display:grid;gap:8px}
.spelkort{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;color:var(--text)}
.spelkort>.ik{color:var(--matt);width:18px;height:18px}
.st{flex:1;min-width:0;display:block}
.sn{display:block;font-weight:600;font-size:18px}
.sr{display:block;font-size:14px;line-height:1.3;color:var(--matt)}
.sr b{color:var(--accent);font-weight:600}
.fot{color:var(--matt);font-size:13px;text-align:center;padding:18px 8px 6px}
.flikar{display:flex;flex:none;background:var(--bord2);border-top:1px solid var(--linje);padding-bottom:env(safe-area-inset-bottom);justify-content:center}
.flik{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;font-size:12px;color:var(--matt)}
.flik.vald{color:var(--accent)}
/* --- Dagens --- */
.dagstat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.dagstat div{background:var(--yta);border-radius:12px;padding:10px 4px;text-align:center;min-width:0}
.dagstat b{display:block;font-size:18px;font-weight:600;white-space:nowrap}
.dagstat small{font-size:11.5px;color:var(--matt);display:block;line-height:1.2}
.sekt{font:600 15px/1.2 var(--ui);color:var(--matt);margin:18px 2px 8px}
.dagrad{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;margin-bottom:8px}
.dagrad>.ik{color:var(--matt);width:18px;height:18px}
.rt{flex:1;min-width:0;display:block}
.rt b{display:block;font-weight:600;font-size:17px}
.rt small{display:block;font-size:14px;color:var(--matt);line-height:1.35}
.malr{display:flex;gap:7px;align-items:center;margin-top:5px;font-size:13.5px}
.malr em{font-style:normal;color:var(--accent);margin-left:auto;white-space:nowrap;padding-left:6px}
.malr.klar{color:var(--text)}
.malr.last em{display:none}
.malr .ik{width:15px;height:15px;color:var(--accent)}
.malr.last .ik{color:var(--matt)}
.tomm{display:block;flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--linje)}
.manad{display:flex;align-items:center;justify-content:space-between;text-transform:capitalize;color:var(--text)}
.kalender{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.kalender>b{font-size:12px;color:var(--matt);font-weight:500}
.dg{aspect-ratio:1;display:grid;place-items:center;text-align:center;border-radius:10px;font-size:14px;background:var(--yta)}
.dg:disabled{background:none;color:var(--matt);opacity:.55}
.dg.klar{background:var(--accent);color:var(--accent-text);font-weight:600;opacity:1}
.dg.idag{box-shadow:inset 0 0 0 2px var(--text)}
.dg.vald{box-shadow:inset 0 0 0 2px var(--accent)}
/* --- Stegen --- */
.stegtext{margin:12px 2px 16px}
.stegen{list-style:none;padding:0;position:relative}
.stegen li{display:flex;gap:12px;padding:0 0 18px;position:relative}
.stegen li::before{content:"";position:absolute;left:18px;top:36px;bottom:-1px;width:2px;background:var(--linje)}
.stegen li:last-child::before{display:none}
.sn2{width:38px;height:38px;border-radius:50%;flex:none;background:var(--yta);display:grid;place-items:center;font-weight:600;color:var(--matt);z-index:1}
.stegen li.klar .sn2{background:var(--accent);color:var(--accent-text)}
.stegen li.klar .sn2 .ik{width:20px;height:20px}
.stegen li.nu .sn2{background:var(--text);color:var(--bord2)}
.stegen small{display:block;font-size:12px;color:var(--matt);letter-spacing:.02em}
.stegen b{display:block;font-weight:600;font-size:17px;line-height:1.25}
.stegen p{font-size:14px;color:var(--matt);line-height:1.4}
.stegen li:not(.klar):not(.nu) b{color:var(--matt)}
.stegen li.nu>div{background:var(--yta2);padding:10px 12px;border-radius:12px;margin-top:-6px;flex:1}
/* --- Statistik --- */
.statlista{display:grid;gap:6px}
.statrad{background:var(--yta);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--matt);line-height:1.4}
.statrad b{display:block;color:var(--text);font-size:15px;font-weight:600}
.statrad span{display:block}
.statrad.tom{opacity:.65}
/* --- Spelet --- */
#spel{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bord)}
.hud{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 4px) 8px 2px;flex:none}
.hud .rund{background:none;width:40px;height:40px}
.hud-mitt{flex:1;min-width:0}
#hud-namn{font-weight:600;font-size:15px;line-height:1.2}
#hud-tal{display:flex;gap:12px;font-size:13px;color:var(--matt);font-variant-numeric:tabular-nums}
#bord{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none;--w:50px;--h:70px;max-width:1100px;width:100%;margin:0 auto}
.platser,.kortlager{position:absolute;inset:0}
/* Kortlagret täcker hela bordet. Bara korten tar emot tryck, så att tomma platser (som talongen när den ska vändas) går att trycka på. */
.kortlager{pointer-events:none}
.kort{pointer-events:auto}
.plats{position:absolute;left:0;top:0;width:var(--w);height:var(--h);border-radius:calc(var(--w)*.1);background:rgba(0,0,0,.2);box-shadow:inset 0 2px 5px rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.2)}
.plats.tipsad{box-shadow:inset 0 2px 5px rgba(0,0,0,.42),0 0 0 3px var(--accent)}
.pm{width:48%;height:48%;fill:currentColor}
.pt{font:600 calc(var(--w)*.4)/1 var(--ui)}
.kort{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transition:transform .26s cubic-bezier(.16,1,.3,1),opacity .2s;transition-delay:var(--f,0ms);will-change:transform;touch-action:none;cursor:pointer}
.ingen-anim .kort,.ingen-anim .yta{transition:none}
.kort.dras{transition:none}
.kort.borta{opacity:0;pointer-events:none}
.yta{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(800px) rotateY(180deg);transition:transform .34s cubic-bezier(.3,.7,.2,1);transition-delay:var(--f,0ms)}
.kort.upp .yta{transform:perspective(800px) rotateY(0)}
.fram,.bak{position:absolute;inset:0;border-radius:calc(var(--w)*.1);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(0,0,0,.42),0 3px 5px -1px rgba(0,0,0,.34)}
.kort.flyger .fram,.kort.flyger .bak{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 8px -2px rgba(0,0,0,.32),0 12px 18px -4px rgba(0,0,0,.32)}
.kort.dras .fram,.kort.dras .bak{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 12px -3px rgba(0,0,0,.34),0 20px 28px -6px rgba(0,0,0,.42)}
.fram{background:linear-gradient(165deg,#fffdf7,var(--papper) 45%,#f3eddd);color:var(--svart);overflow:hidden}
.bak{transform:rotateY(180deg);background:var(--papper)}
.bak::before{content:"";position:absolute;inset:calc(var(--w)*.055);border-radius:calc(var(--w)*.055);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.bak::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--w)*.44);height:calc(var(--w)*.44);margin:calc(var(--w)*-.22) 0 0 calc(var(--w)*-.22);border-radius:50%;background:url("data:image/svg+xml,") center/contain no-repeat}
[data-bak=gitter] .bak::before{background:url("data:image/svg+xml,") 0 0/calc(var(--w)*.2) calc(var(--w)*.2),linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#1c3b6b}
[data-bak=rand] .bak::before{background:url("data:image/svg+xml,") 0 0/calc(var(--w)*.2) calc(var(--w)*.2),linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#7c2230}
[data-bak=vag] .bak::before{background:url("data:image/svg+xml,") 0 0/calc(var(--w)*.2) calc(var(--w)*.2),linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#14505c}
[data-bak=prick] .bak::before{background:url("data:image/svg+xml,") 0 0/calc(var(--w)*.2) calc(var(--w)*.2),linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#33363b}
[data-bak=guld] .bak::before{background:url("data:image/svg+xml,") 0 0/calc(var(--w)*.2) calc(var(--w)*.2),linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#3a2a0c}
.f1{color:var(--rod)}.f2{color:var(--ruter)}.f3{color:var(--klover)}
.v{position:absolute;left:6%;top:1.500%;font:600 calc(var(--w)*.42)/1.05 var(--ui);letter-spacing:-.05em}
.fram.bild .v{font-family:var(--rubrik);letter-spacing:0;font-size:calc(var(--w)*.42)}
.v2{display:none}
.s{position:absolute;right:6%;top:4%;width:calc(var(--w)*.3);height:calc(var(--w)*.3)}
.m{display:none;position:absolute;left:50%;bottom:9%;width:58%;height:calc(var(--w)*.58);transform:translateX(-50%)}
.pips{position:absolute;left:0;top:0;width:100%;height:100%}
.ess{position:absolute;left:14%;right:14%;bottom:9%;width:72%}
.bildram{position:absolute;left:11%;bottom:3.500%;width:78%;display:block}
.litet .m{display:block}
.litet .pips{display:none}
.litet .ess{left:8%;right:8%;width:84%;bottom:7%}
#bord:not(.litet) .v2{display:block;left:auto;right:6%;top:auto;bottom:1.500%;transform:rotate(180deg);font-size:calc(var(--w)*.2);letter-spacing:0}
#bord:not(.litet) .fram.bild .v2{display:none}
.kort.vilande .bildram,.kort.vilande .pips,.kort.vilande .m,.kort.vilande .ess{visibility:hidden}
.kort.vilande .fram::after{content:"";position:absolute;inset:0;background:rgba(16,28,22,.17)}
.kort.vald .fram{box-shadow:0 0 0 3px var(--accent),0 6px 10px -2px rgba(0,0,0,.45)}
.kort.tipsad .fram,.kort.tipsad .bak{box-shadow:0 0 0 3px var(--accent),0 4px 8px -1px rgba(0,0,0,.4)}
.kaskad{position:absolute;inset:0;width:100%;height:100%;z-index:7000;transition:opacity .25s;cursor:pointer}
#piller{flex:none;height:38px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;overflow:hidden;white-space:nowrap}
.pille{background:rgba(0,0,0,.42);color:var(--text);font-size:13px;padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pille.mal{color:var(--accent)}
.knappig{padding:7px 14px;background:var(--yta2);font-weight:600;transition:transform .14s var(--ease)}
.knappig:active{transform:scale(.96)}
.knappig.prim{background:var(--accent);color:var(--accent-text)}
.spelknappar{display:flex;flex:none;justify-content:center;background:rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom);position:relative;z-index:6001}
.vanster .spelknappar{flex-direction:row-reverse}
.spelknappar button{flex:1;max-width:150px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--text);transition:transform .14s var(--ease)}
.spelknappar button:active{transform:scale(.94)}
.spelknappar button:disabled{opacity:.32}
/* --- Ark och lappar --- */
#ark{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:8000;animation:tona .18s ease-out}
#ark-inne{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;background:var(--bord);border-radius:20px 20px 0 0;padding:22px 18px calc(env(safe-area-inset-bottom) + 18px);animation:upp .3s var(--drawer);box-shadow:0 -8px 30px rgba(0,0,0,.35)}
@keyframes tona{from{opacity:0}}
@keyframes upp{from{transform:translateY(40px);opacity:.4}}
.rad{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:var(--yta);border-radius:14px;margin-bottom:8px;min-height:56px;transition:transform .14s var(--ease)}
.rad>.ik{color:var(--matt);width:18px;height:18px}
.rad.last{opacity:.62}
.knapp{display:block;text-align:center;font-weight:600;padding:14px 18px;border-radius:14px;background:var(--yta2);transition:transform .14s var(--ease);min-height:50px}
.knapp:active{transform:scale(.97)}
.knapp.hel{width:100%;margin-bottom:8px}
.knapp.primar{background:var(--accent);color:var(--accent-text)}
.knapp.diskret{background:none;color:var(--matt);margin-top:14px}
.knapp.fara{background:#b3261e;color:#fff}
.knapp.last,.knapp:disabled{opacity:.55}
.knappar{display:flex;gap:8px;margin-top:14px}
.knappar .knapp{flex:1}
.mellan{text-align:center;font-size:13px;color:var(--matt);margin:6px 0 10px}
.vaxel{width:48px;height:29px;border-radius:15px;background:rgba(0,0,0,.35);flex:none;position:relative;transition:background-color .16s}
.vaxel i{position:absolute;left:3px;top:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.vaxel.pa{background:var(--accent)}
.vaxel.pa i{transform:translateX(19px)}
.prover{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.prov{aspect-ratio:.8;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;padding:4px;box-shadow:inset 0 0 0 1px var(--linje);font-size:11.5px;color:#fff;text-align:center;line-height:1.1}
.prov span{text-shadow:0 1px 2px rgba(0,0,0,.8)}
.prov.vald{box-shadow:0 0 0 2.500px var(--accent)}
.prov:disabled{filter:saturate(.45);opacity:.7}
.pb-filt{background:#0f4034}.pb-black{background:#10294c}.pb-tegel{background:#4f1d1a}.pb-skiffer{background:#2b3a44}.pb-massing{background:#2a2418}
.pk-gitter{background:url("data:image/svg+xml,") 0 0/18px 18px,linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#1c3b6b}.pk-rand{background:url("data:image/svg+xml,") 0 0/18px 18px,linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#7c2230}.pk-vag{background:url("data:image/svg+xml,") 0 0/18px 18px,linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#14505c}.pk-prick{background:url("data:image/svg+xml,") 0 0/18px 18px,linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#33363b}.pk-guld{background:url("data:image/svg+xml,") 0 0/18px 18px,linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),#3a2a0c}
.kontoknapp{font-size:14px;font-weight:600;color:var(--accent);flex:none}
.vinst h2{font-size:34px;text-align:center}
.vinsttal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.vinsttal div{text-align:center;background:var(--yta);padding:9px 2px;border-radius:12px}
.vinsttal b{display:block;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.vinsttal small{color:var(--matt);font-size:12px}
.xpblock{background:var(--yta);border-radius:14px;padding:12px 14px;margin:8px 0}
.xpblock ul{list-style:none;padding:0;font-size:14px;color:var(--matt);margin-bottom:9px}
.xpblock li{display:flex;justify-content:space-between;padding:1px 0}
.xpblock b{color:var(--text);font-weight:600}
.xpsum{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}
.dagmal{list-style:none;padding:0;margin:0 0 8px;font-size:14px;color:var(--matt)}
.dagmal li{display:flex;gap:8px;align-items:center;padding:3px 0}
.dagmal li.klar{color:var(--text)}
.dagmal .ik{width:16px;height:16px;color:var(--accent)}
.dagmal .tomm{width:16px;height:16px}
.upplast{background:var(--accent);color:var(--accent-text);border-radius:14px;padding:12px 14px;margin:8px 0}
.upplast small{font-size:12.5px;display:block;font-weight:600;opacity:.8}
.upplast b{font-size:18px;display:block;font-weight:600}
.upplast p{font-size:14px;line-height:1.35}
#lapp{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 76px);transform:translateX(-50%);background:#111a18;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:9000;max-width:calc(100% - 32px);width:max-content;text-align:center;animation:tona .15s ease-out;box-shadow:0 4px 18px rgba(0,0,0,.4)}
@media (hover:hover) and (pointer:fine){
.spelkort:hover,.dagkort:hover,.nivakort:hover,.dagrad:hover,.rad:hover{background:var(--yta2)}
}
@media (prefers-reduced-motion:reduce){
#ark-inne{animation:tona .15s}
.bar i{transition:none}
}
/* --- Banor --- */
.banasum{display:flex;align-items:center;gap:5px;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.stjarnor{display:inline-flex;gap:1px;flex:none}
.stj{width:11px;height:11px;fill:rgba(0,0,0,.3);display:block}
.stj.p{fill:var(--accent)}
.banasum .stj,.dagmal.stort .stj{width:18px;height:18px}
.paket{background:var(--yta);border-radius:14px;padding:12px;margin-bottom:8px}
.paket.last{opacity:.62}
.paket small{font-size:13.5px;color:var(--matt)}
.pk-topp{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.paket.last .pk-topp{margin-bottom:3px}
.pk-topp b{font-weight:600;font-size:16px}
.pk-topp span{font-size:13px;color:var(--matt);font-variant-numeric:tabular-nums}
.pk-topp .ik{width:18px;height:18px;color:var(--matt)}
.pk-rutor{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pk-ruta{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;background:rgba(0,0,0,.2);border-radius:10px;transition:transform .14s var(--ease)}
.pk-ruta:active{transform:scale(.95)}
.pk-ruta b{font-weight:600;font-size:15px}
.dagmal.stort{font-size:16px;margin-bottom:14px}
.stort-stj{display:flex;justify-content:center;margin:6px 0 2px}
.stort-stj .stjarnor{gap:6px}
.stort-stj .stj{width:34px;height:34px}
.regler{padding-left:20px;margin:6px 0 12px;line-height:1.45}
.regler li{margin-bottom:7px}
.marken{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.marke{display:flex;gap:8px;background:var(--yta);border-radius:12px;padding:10px;min-width:0;color:var(--matt)}
.marke .ik{width:16px;height:16px;color:var(--accent);margin-top:2px}
.marke .tomm{margin-top:2px}
.marke b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.marke.klar b{color:var(--text)}
.marke small{font-size:12px;display:block;line-height:1.25}
/* --- Mobil liggande: höjden är det som saknas, så rubrik och knappar flyttar ut på sidorna --- */
@media (orientation:landscape) and (max-height:520px){
#spel{display:grid;grid-template-columns:calc(env(safe-area-inset-left) + 104px) minmax(0,1fr) calc(env(safe-area-inset-right) + 66px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud bord knappar" "piller bord knappar"}
.vanster #spel{grid-template-columns:calc(env(safe-area-inset-left) + 66px) minmax(0,1fr) calc(env(safe-area-inset-right) + 104px);grid-template-areas:"knappar bord hud" "knappar bord piller"}
.hud{grid-area:hud;flex-direction:column;align-items:flex-start;gap:0;padding:calc(env(safe-area-inset-top) + 2px) 4px 0 calc(env(safe-area-inset-left) + 4px)}
.hud-mitt{width:100%;padding-left:6px}
#hud-namn{font-size:13px}
#hud-tal{flex-direction:column;gap:0;font-size:12px;line-height:1.3}
#bord{grid-area:bord;height:100%;max-width:none}
#piller{grid-area:piller;height:auto;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:4px 4px calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 4px);white-space:normal;overflow:visible}
.pille{font-size:11.5px;padding:5px 7px;border-radius:9px;line-height:1.2;text-align:center}
.spelknappar{grid-area:knappar;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;justify-content:space-around}
.vanster .spelknappar{flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left)}
.spelknappar button{flex:1;max-width:none;min-height:0;font-size:11px}
.spelknappar .ik{width:20px;height:20px}
#lapp{bottom:12px}
}
/* --- Djup: filt, ljus och material --- */
html{scrollbar-color:var(--yta2) transparent}
::selection{background:var(--accent);color:var(--accent-text)}
#hem,#spel{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 34%,rgba(0,0,0,.3)),var(--fibrer,none) 0 0/256px,var(--bord)}
#spel::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 10px rgba(0,0,0,.34)}
#ark-inne{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.12)),var(--fibrer,none) 0 0/256px,var(--bord);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -10px 30px rgba(0,0,0,.42)}
#ark-inne::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:-10px auto 12px}
.nivakort,.dagkort,.spelkort,.dagrad,.rad,.paket,.statrad,.marke,.dagstat div,.vinsttal div,.xpblock{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 60%),var(--yta);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 12px -6px rgba(0,0,0,.55)}
.dagkort{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),var(--yta2)}
.nk-niva{background:linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%,rgba(0,0,0,.22)),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 3px rgba(70,45,0,.32),0 3px 6px rgba(0,0,0,.42);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.bar{height:9px;background:rgba(0,0,0,.34);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.07)}
.bar i{background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%,rgba(0,0,0,.14)),var(--accent)}
.dk-prickar i{box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.dk-prickar i.p{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.spelbild{width:64px;height:64px;flex:none;border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14)),var(--fibrer,none) 0 0/256px,var(--bord);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.09)}
.knapp{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0)),var(--yta2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 7px -3px rgba(0,0,0,.5)}
.knapp.primar{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%,rgba(0,0,0,.08)),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 9px -3px rgba(0,0,0,.55)}
.knapp.diskret{background:none;box-shadow:none}
.knapp.fara{background:#b3261e}
.knapp:active,.knappig:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.28)}
.flikar{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.34)),var(--bord2);border-top:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -5px 14px rgba(0,0,0,.3)}
.spelknappar{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.38)),var(--bord2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -4px 12px rgba(0,0,0,.28)}
.rund{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 7px -3px rgba(0,0,0,.5)}
.hud .rund{box-shadow:none}
.pk-ruta{box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06)}
.upplast{background:linear-gradient(170deg,rgba(255,255,255,.34),rgba(255,255,255,0) 50%,rgba(0,0,0,.08)),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -5px rgba(0,0,0,.55);animation:plakett .5s cubic-bezier(.16,1,.3,1) .35s backwards}
.stort-stj .stj.p{animation:stjarna .42s cubic-bezier(.16,1,.3,1) backwards}
.stort-stj .stj:nth-child(2).p{animation-delay:.14s}
.stort-stj .stj:nth-child(3).p{animation-delay:.28s}
.stj.p{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.vinst h2{text-shadow:0 2px 3px rgba(0,0,0,.35)}
@keyframes plakett{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes stjarna{from{opacity:0;transform:scale(.4) rotate(-25deg)}}
@media (prefers-reduced-motion:reduce){
.yta{transition:none}
.upplast,.stort-stj .stj.p{animation:none}
}