/* Layout: en mobilapp i en kolumn (max 480px), flöde i mitten, fast flikrad längst ner – som en kväll ute: mörk himmel, gatlyktsorange */
:root{
  --bg:#121126; --yta:#1C1B36; --yta2:#272647; --text:#F2EEF8; --tyst:#A6A2C2; --linje:#35345C;
  --land:#17202A; --accent:#FF8A3D; --accent-text:#1A0F05; --hjarta:#FF5C82; --ok:#5FD39A; --skugga:rgba(0,0,0,.45);
  --display:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --brod:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F5F3FA; --yta:#FFFFFF; --yta2:#ECE9F5; --text:#1A1830; --tyst:#646080; --linje:#DCD8EA;
  --land:#E7EEE2; --accent:#C85A10; --accent-text:#FFFFFF; --hjarta:#D81B56; --ok:#1E8A55; --skugga:rgba(40,30,80,.18); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F5F3FA; --yta:#FFFFFF; --yta2:#ECE9F5; --text:#1A1830; --tyst:#646080; --linje:#DCD8EA;
  --land:#E7EEE2; --accent:#C85A10; --accent-text:#FFFFFF; --hjarta:#D81B56; --ok:#1E8A55; --skugga:rgba(40,30,80,.18); color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--brod);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:480px;margin:0 auto;min-height:100%;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));position:relative}

/* topp */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.topp{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--linje)}
.logga{font:800 1.7rem/1 var(--display);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.logga svg{width:26px;height:26px}
.demo{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tyst);border:1px solid var(--linje);border-radius:999px;padding:4px 10px}
.sida{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 24px;display:grid;gap:18px}

/* ute nu-remsa */
.remsa{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.remsa::-webkit-scrollbar{display:none}
.remsa button{display:grid;justify-items:center;gap:5px;min-width:64px;font-size:.75rem;color:var(--tyst)}
.ring{padding:3px;border-radius:50%;background:conic-gradient(var(--accent),var(--hjarta),var(--accent))}
.ring.av{background:var(--linje)}
.ring .ava{border:3px solid var(--bg)}
.ava{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--display);color:#fff;flex:none}
.ava.liten{width:34px;height:34px;font-size:.8rem}
.ava.mini{width:26px;height:26px;font-size:.66rem;border:2px solid var(--yta)}
.ava.stor{width:84px;height:84px;font-size:1.7rem}

/* inlägg */
.inlagg{background:var(--yta);border-radius:20px;overflow:hidden;border:1px solid var(--linje)}
.ihuvud{display:flex;align-items:center;gap:10px;padding:12px 12px 10px}
.ihuvud .vem{flex:1;min-width:0;line-height:1.25}
.ihuvud b{font-weight:600}
.ihuvud small{display:block;color:var(--tyst);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prickar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--tyst)}
.prickar:hover{background:var(--yta2)}
.foto{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--yta2);user-select:none}
.foto svg,.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto .poff{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.6);transition:.25s}
.foto .poff.visa{opacity:1;transform:scale(1)}
.foto .poff svg{width:96px;height:96px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.taggar{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap}
.tagg{background:rgba(10,8,25,.62);color:#fff;font-size:.75rem;font-weight:600;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.ifot{padding:10px 14px 14px;display:grid;gap:6px}
.knappar{display:flex;gap:16px;align-items:center}
.knappar button{display:flex;align-items:center;gap:6px;font-weight:600}
.knappar svg{width:26px;height:26px}
.gillad svg{fill:var(--hjarta);stroke:var(--hjarta)}
.dryck{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--tyst);background:var(--yta2);padding:4px 10px;border-radius:999px;white-space:nowrap}
.text{margin:0;overflow-wrap:anywhere}
.text b{font-weight:600}
.kom{color:var(--tyst);font-size:.88rem;text-align:left}

/* ute nu */
.rubrik{font:700 1.5rem/1.1 var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.under{color:var(--tyst);margin:4px 0 0;font-size:.9rem}
.inchecka{border-radius:20px;padding:18px;display:grid;gap:12px;background:var(--yta);border:1px solid var(--linje)}
.inchecka.pa{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--yta))}
.inchecka h3{margin:0;font:700 1.15rem var(--display)}
.inchecka p{margin:0;color:var(--tyst);font-size:.9rem}
.bar{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--yta);border:1px solid var(--linje);text-align:left;width:100%}
.bar .namn{flex:1;min-width:0}
.bar b{display:block;font-weight:600}
.bar small{color:var(--tyst);font-size:.8rem}
.stapel{display:flex}
.stapel .ava{margin-left:-8px}
.stapel .ava:first-child{margin-left:0}
.puls{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:puls 2s infinite;flex:none}
@keyframes puls{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.karta{border-radius:20px;overflow:hidden;border:1px solid var(--linje);background:var(--yta);position:relative}
.karta .pin{cursor:pointer}
.karta .pin:focus-visible circle.bas{stroke:var(--accent);stroke-width:4}
.karta-info{position:absolute;left:10px;top:10px;font-size:.72rem;font-weight:600;background:color-mix(in srgb,var(--bg) 80%,transparent);padding:4px 10px;border-radius:999px;color:var(--tyst)}
.karta-oppna{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px var(--skugga)}
.karta-oppna svg{width:16px;height:16px}
.storkarta{position:fixed;inset:0;z-index:15;background:var(--land);overflow:hidden}
.sk-topp{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;
  padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.sk-topp>*{pointer-events:auto}
.sk-knapp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--text);box-shadow:0 4px 16px var(--skugga);border:1px solid var(--linje)}
.sk-knapp svg{width:22px;height:22px}
.sk-titel{background:var(--bg);border:1px solid var(--linje);border-radius:999px;padding:10px 16px;font-weight:700;box-shadow:0 4px 16px var(--skugga);font-size:.9rem}
.sk-sida{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:10px}
.sk-zoom{display:grid;border-radius:22px;overflow:hidden;background:var(--bg);border:1px solid var(--linje);box-shadow:0 4px 16px var(--skugga)}
.sk-zoom button{width:44px;height:44px;display:grid;place-items:center;font:700 1.4rem/1 var(--brod)}
.sk-zoom button+button{border-top:1px solid var(--linje)}
.nivaer{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.niva{display:grid;gap:3px;align-content:start;text-align:left;padding:12px;border-radius:16px;border:1px solid var(--linje);background:var(--yta)}
.niva b{font:700 1rem/1.15 var(--display)}
.niva small{font-weight:400;font-size:.74rem;line-height:1.3;color:var(--tyst)}
.niva[aria-pressed="true"]{border-color:var(--nf);box-shadow:0 0 0 1px var(--nf);background:color-mix(in srgb,var(--nf) 16%,var(--yta))}
.niva[aria-pressed="true"] b{color:var(--nf)}
.n-oskuld{--nf:#5FB7E8}.n-spicy{--nf:var(--accent)}.n-extra{--nf:var(--hjarta)}.n-skam{--nf:#B266F0}
.fragekort.n-spicy{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 30%,var(--yta)),var(--yta) 70%)}
.fragekort.n-oskuld{background:linear-gradient(160deg,color-mix(in srgb,#5FB7E8 26%,var(--yta)),var(--yta) 70%)}
.fragekort.n-skam{background:linear-gradient(160deg,color-mix(in srgb,#B266F0 38%,var(--yta)),color-mix(in srgb,var(--hjarta) 14%,var(--yta)) 75%)}
.fragekort.n-extra{background:linear-gradient(160deg,color-mix(in srgb,var(--hjarta) 36%,var(--yta)),var(--yta) 70%)}
.nivamärke{margin-top:4px;justify-self:start;font-size:.7rem;font-weight:700;color:var(--tyst);border:1px solid var(--linje);border-radius:999px;padding:2px 8px}
.spelgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spelgrid .spelkort:last-child:nth-child(odd){grid-column:1/-1;min-height:0}
.spelkort{display:grid;gap:6px;align-content:start;text-align:left;padding:16px;border-radius:20px;background:var(--yta);border:1px solid var(--linje);min-height:150px}
.spelkort .sym{font:800 2rem/1 var(--display);color:var(--accent)}
.spelkort b{font:700 1.08rem/1.2 var(--display)}
.spelkort small{color:var(--tyst);font-size:.82rem;line-height:1.35}
.lage{display:flex;background:var(--yta);border:1px solid var(--linje);border-radius:999px;padding:4px}
.lage button{flex:1;padding:9px 10px;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--tyst)}
.lage button[aria-pressed="true"]{background:var(--accent);color:var(--accent-text)}
.spel{display:grid;gap:16px}
.spel-topp{display:flex;align-items:center;gap:10px}
.tillbaka{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--yta);border:1px solid var(--linje)}
.tillbaka svg{width:20px;height:20px;transform:rotate(180deg)}
.spel-topp h1{flex:1;margin:0;font:700 1.35rem var(--display)}
.spel-topp small{color:var(--tyst);font-variant-numeric:tabular-nums}
.fragekort{min-height:300px;border-radius:26px;padding:28px 24px;display:grid;align-content:center;gap:14px;text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,var(--yta)),var(--yta) 70%);border:1px solid var(--linje);animation:in .3s ease}
.fragekort.vatten{background:linear-gradient(160deg,color-mix(in srgb,#3A9BD5 30%,var(--yta)),var(--yta) 70%)}
.fragekort .etikett{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tyst)}
.fragekort p{margin:0;font:700 1.55rem/1.25 var(--display);text-wrap:balance}
.fragekort small{color:var(--tyst);font-size:.9rem}
@keyframes in{from{transform:translateY(10px) scale(.98);opacity:.4}}
.spelkortet{width:150px;aspect-ratio:5/7;max-width:100%;margin:0 auto;border-radius:14px;background:#fff;color:#1A1830;box-shadow:0 10px 30px var(--skugga);display:grid;place-items:center;position:relative;font:800 3rem/1 var(--display)}
.spelkortet.rod{color:#D11F3F}
.spelkortet i{position:absolute;font-style:normal;font-size:1rem;line-height:1.05;text-align:center}
.spelkortet i:first-child{left:10px;top:10px}
.spelkortet i:last-child{right:10px;bottom:10px;transform:rotate(180deg)}
.kungar{display:flex;justify-content:center;gap:6px}
.kungar span{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--linje);font-weight:800;color:var(--tyst)}
.kungar span.dragen{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.notis{font-size:.82rem;color:var(--tyst);display:flex;gap:8px;align-items:flex-start}
.notis svg{width:18px;height:18px;flex:none;margin-top:1px}

/* knappar och formulär */
.knapp{background:var(--accent);color:var(--accent-text);font-weight:700;border-radius:999px;padding:13px 20px;text-align:center;width:100%}
.knapp.sek{background:var(--yta2);color:var(--text)}
.knapp.fara{background:transparent;color:var(--hjarta);border:1px solid var(--hjarta)}
.knapp:disabled{opacity:.45;cursor:not-allowed}
.falt{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.falt input,.falt select,.falt textarea{font:inherit;font-weight:400;color:var(--text);background:var(--yta);border:1px solid var(--linje);border-radius:14px;padding:12px 14px;width:100%}
.falt small{font-weight:400;color:var(--tyst)}
.val{display:grid;gap:8px}
.val label{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--linje);background:var(--yta);cursor:pointer}
.val label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.val input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.val span{display:grid;line-height:1.3}
.val small{color:var(--tyst);font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--linje);border-radius:999px;padding:7px 12px;font-size:.85rem;font-weight:600;background:var(--yta)}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.valjbild{aspect-ratio:1/1;max-width:100%;border-radius:20px;border:2px dashed var(--linje);display:grid;place-items:center;overflow:hidden;background:var(--yta);position:relative}
.valjbild img,.valjbild svg{width:100%;height:100%;object-fit:cover;display:block}
.valjbild .tom{display:grid;gap:10px;justify-items:center;color:var(--tyst);text-align:center;padding:20px}
.valjbild .tom svg{width:44px;height:44px}
.rad{display:flex;gap:10px}

/* profil */
.profil{display:grid;justify-items:center;gap:8px;text-align:center}
.profil h2{margin:4px 0 0;font:800 1.6rem var(--display)}
.siffror{display:flex;gap:28px;margin-top:6px}
.siffror div{display:grid;font-size:.8rem;color:var(--tyst)}
.siffror b{font:700 1.2rem var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.rutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:16px;overflow:hidden}
.rutnat button{aspect-ratio:1/1;max-width:100%;overflow:hidden;background:var(--yta2)}
.rutnat svg,.rutnat img{width:100%;height:100%;object-fit:cover;display:block}
.lista{background:var(--yta);border:1px solid var(--linje);border-radius:18px;overflow:hidden}
.lista button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;border-bottom:1px solid var(--linje)}
.lista button:last-child{border-bottom:0}
.lista button span{flex:1}
.lista button small{color:var(--tyst)}
.lista svg{width:20px;height:20px;color:var(--tyst)}
.lista .rod{color:var(--hjarta)}
.lista .rod svg{color:var(--hjarta)}

/* flikrad */
.flikar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:color-mix(in srgb,var(--yta) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linje);
  padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.flikar nav{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.flikar button{display:grid;justify-items:center;gap:2px;padding:10px 0 8px;font-size:.72rem;font-weight:600;color:var(--tyst)}
.flikar button[aria-current="page"]{color:var(--text)}
.flikar button[aria-current="page"] svg{color:var(--accent)}
.flikar svg{width:26px;height:26px}
.flikar .plus span{width:44px;height:32px;border-radius:12px;background:var(--accent);color:var(--accent-text);display:grid;place-items:center}
.flikar .plus svg{width:22px;height:22px;color:var(--accent-text)!important}

/* ark (bottom sheet) */
.skymt{position:fixed;inset:0;background:rgba(5,4,15,.55);z-index:20;opacity:0;transition:opacity .2s}
.skymt.visa{opacity:1}
.ark{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:480px;margin:0 auto;background:var(--bg);border-radius:24px 24px 0 0;max-height:86%;overflow:auto;
  padding-block:10px calc(22px + env(safe-area-inset-bottom,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));
  transform:translateY(100%);transition:transform .25s ease;box-shadow:0 -10px 40px var(--skugga);display:grid;gap:14px}
.ark.visa{transform:none}
.ark .grepp{width:40px;height:5px;border-radius:5px;background:var(--linje);justify-self:center}
.ark h3{margin:0;font:700 1.3rem var(--display)}
.ark p{margin:0;color:var(--tyst)}
.komrad{display:flex;gap:10px;align-items:flex-start}
.komrad p{margin:0;color:var(--text)}
.komrad small{color:var(--tyst)}
.kod{font:800 1.8rem/1 var(--display);letter-spacing:.06em;text-align:center;padding:18px;border-radius:16px;background:var(--yta);border:1px dashed var(--accent);user-select:all}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:30;background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem;opacity:0;transition:.25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.visa{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ===== Finputs: nattsken, mjukare ytor, svävande flikrad ===== */
:root{--glod1:#FF8A3D;--glod2:#FF4F79;--glas:color-mix(in srgb,var(--yta) 78%,transparent);--kant:color-mix(in srgb,var(--linje) 70%,transparent);--radie:24px}
body{background:
  radial-gradient(90% 50% at 85% -8%,color-mix(in srgb,var(--glod2) 22%,transparent),transparent 70%),
  radial-gradient(80% 45% at 0% 0%,color-mix(in srgb,var(--glod1) 18%,transparent),transparent 70%),
  var(--bg);background-attachment:fixed}
.app{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.topp{background:color-mix(in srgb,var(--bg) 62%,transparent);border-bottom-color:transparent;box-shadow:0 1px 0 var(--kant)}
.logga{font-size:1.85rem;letter-spacing:-.035em}
.logga span{background:linear-gradient(100deg,var(--glod1),var(--glod2));-webkit-background-clip:text;background-clip:text;color:transparent}
.demo{font-size:.64rem;padding:5px 10px;background:var(--glas)}
.sida{gap:20px}
.rubrik{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.under{font-size:.92rem}
.sekt{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tyst);margin-bottom:-8px}

/* ute nu-remsan */
.remsa{gap:12px;padding:2px 2px 6px}
.remsa button{min-width:66px;font-weight:600;color:var(--text)}
.ring{padding:2.5px;background:conic-gradient(from 200deg,var(--glod1),var(--glod2),#B266F0,var(--glod1))}
.ring .ava{width:58px;height:58px;font-size:1.1rem;border-width:3px}
.ring.av{background:var(--linje)}

/* inlägg */
.inlagg{background:var(--glas);border:1px solid var(--kant);border-radius:var(--radie);box-shadow:0 18px 40px -24px var(--skugga);backdrop-filter:blur(6px)}
.ihuvud{padding:14px 14px 12px}
.ihuvud b{font-size:.98rem}
.ihuvud small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.foto{margin:0 10px;border-radius:18px;overflow:hidden}
.taggar{left:12px;bottom:12px}
.tagg{font-size:.72rem;padding:5px 11px}
.ifot{padding:12px 16px 16px;gap:8px}
.knappar{gap:18px}
.knappar button{font-variant-numeric:tabular-nums}
.knappar svg{width:25px;height:25px}
.dryck{background:transparent;border:1px solid var(--kant);font-size:.74rem}
.text{line-height:1.45}

/* knappar */
.knapp{background:linear-gradient(110deg,var(--glod1),var(--glod2));color:#1A0F05;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--glod2) 80%,transparent);padding:14px 22px;letter-spacing:.01em}
.knapp:active{transform:scale(.98)}
.knapp.sek{background:var(--yta2);box-shadow:none;color:var(--text)}
.knapp.fara{background:transparent;box-shadow:none}

/* ute nu */
.inchecka{background:var(--glas);border-color:var(--kant);border-radius:var(--radie);padding:20px}
.inchecka.pa{background:linear-gradient(150deg,color-mix(in srgb,var(--ok) 20%,var(--yta)),var(--yta) 70%);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.karta{border-radius:var(--radie);border-color:var(--kant);box-shadow:0 18px 40px -24px var(--skugga)}
.karta-oppna{background:var(--bg);color:var(--text);border:1px solid var(--kant)}
.bar{background:var(--glas);border-color:var(--kant);border-radius:18px;padding:14px 16px}

/* formulär */
.falt input,.falt select,.falt textarea{background:var(--glas);border-color:var(--kant);border-radius:16px}
.valjbild{border-radius:var(--radie);background:var(--glas);border-color:var(--kant)}
.chip{background:var(--glas);border-color:var(--kant)}
.chip[aria-pressed="true"]{background:linear-gradient(110deg,var(--glod1),var(--glod2));border-color:transparent;color:#1A0F05}
.val label{background:var(--glas);border-color:var(--kant)}
.lage{background:var(--glas);border-color:var(--kant)}
.lage button[aria-pressed="true"]{background:linear-gradient(110deg,var(--glod1),var(--glod2));color:#1A0F05}

/* spel */
.spelkort{border:0;border-radius:var(--radie);min-height:160px;padding:18px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--s1),var(--s2));box-shadow:0 16px 30px -18px var(--s2)}
.spelkort::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12)}
.spelkort .sym{color:#fff;font-size:2.2rem;opacity:.95}
.spelkort small{color:rgba(255,255,255,.82)}
.spelkort .nivamärke{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(0,0,0,.15)}
.spelkort[data-spel="aldrig"]{--s1:#FF8A3D;--s2:#E5487A}
.spelkort[data-spel="trolig"]{--s1:#3A7BD5;--s2:#7C5CFF}
.spelkort[data-spel="sanning"]{--s1:#E5487A;--s2:#9B3FD1}
.spelkort[data-spel="kungen"]{--s1:#1F9D8B;--s2:#2B6CB0}
.spelkort[data-spel="impostor"]{--s1:#C2453A;--s2:#3B2A7A}
.niva{background:var(--glas);border-color:var(--kant);border-radius:18px}
.fragekort{border-radius:28px;border-color:var(--kant);min-height:340px;box-shadow:0 24px 50px -28px var(--skugga)}
.fragekort p{font-size:1.7rem;letter-spacing:-.015em}
.tillbaka{background:var(--glas);border-color:var(--kant)}

/* profil */
.profil{position:relative;padding-top:18px}
.profil::before{content:"";position:absolute;inset:0 -4px auto;height:92px;border-radius:var(--radie);z-index:-1;
  background:linear-gradient(110deg,color-mix(in srgb,var(--glod1) 55%,var(--yta)),color-mix(in srgb,var(--glod2) 55%,var(--yta)),color-mix(in srgb,#B266F0 50%,var(--yta)))}
.profil .ava.stor{border:4px solid var(--bg);box-shadow:0 10px 24px -10px var(--skugga)}
.siffror{gap:10px;width:100%;justify-content:center}
.siffror div{background:var(--glas);border:1px solid var(--kant);border-radius:16px;padding:10px 14px;min-width:88px}
.rutnat{gap:4px;border-radius:var(--radie)}
.lista{background:var(--glas);border-color:var(--kant);border-radius:var(--radie)}

/* flikrad som svävar */
.flikar{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));
  padding:0 6px;border:1px solid var(--kant);border-radius:28px;background:color-mix(in srgb,var(--yta) 82%,transparent);box-shadow:0 20px 40px -16px var(--skugga);max-width:468px;margin:0 auto}
.flikar button{padding:9px 0 8px;position:relative}
.flikar button[aria-current="page"]::before{content:"";position:absolute;top:4px;left:50%;width:46px;height:34px;transform:translateX(-50%);border-radius:14px;background:color-mix(in srgb,var(--glod1) 16%,transparent);z-index:-1}
.flikar button{z-index:0}
.flikar .plus span{width:46px;height:34px;background:linear-gradient(110deg,var(--glod1),var(--glod2));box-shadow:0 8px 18px -8px var(--glod2)}
.flikar .plus svg{color:#1A0F05!important}
.flikar .plus[aria-current="page"]::before{display:none}
.toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.ark{border-radius:28px 28px 0 0}

/* ===== Riktiga appen ===== */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
.karta-yta{height:240px;width:100%}
.karta .leaflet-container{background:var(--yta2)}
#storkarta-karta{position:absolute;inset:0}
.storkarta .leaflet-container{background:var(--yta2)}
.leaflet-control-attribution{font-size:9px!important}
.storkarta .leaflet-control-attribution{margin-bottom:calc(env(safe-area-inset-bottom,0px))!important}
.pinne{position:relative;display:grid;justify-items:center;gap:2px;transform:translate(-50%,-50%);width:max-content}
.pinne .bas{min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:grid;place-items:center;font:800 .85rem/1 var(--display);
  background:linear-gradient(110deg,var(--glod1),var(--glod2));color:#1A0F05;border:3px solid var(--yta);box-shadow:0 6px 16px -6px var(--skugga)}
.pinne.tom .bas{min-width:14px;width:14px;height:14px;padding:0;background:var(--tyst);border-width:2px}
.pinne.jag .bas{background:var(--ok)}
.pinne .ansikten{display:flex}
.pinne .ansikten .ava{margin-left:-6px}
.pinne .ansikten .ava:first-child{margin-left:0}
.pinne b{font:600 .72rem/1.1 var(--brod);color:var(--text);background:color-mix(in srgb,var(--yta) 85%,transparent);padding:2px 6px;border-radius:6px;white-space:nowrap}
.leaflet-div-icon{background:none!important;border:0!important}
.minprick{width:16px;height:16px;border-radius:50%;background:#3A9BD5;border:3px solid #fff;box-shadow:0 0 0 6px rgba(58,155,213,.25)}
.lagg-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:500;display:flex;gap:8px;width:max-content;max-width:calc(100% - 120px)}
.lagg-bar .knapp{width:auto;padding:12px 18px}
.sikte{position:absolute;left:50%;top:50%;z-index:450;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;
  border:3px solid var(--glod2);border-radius:50% 50% 50% 0;transform:rotate(-45deg) translate(6px,-6px);background:color-mix(in srgb,var(--glod2) 25%,transparent)}
.sk-topp,.sk-sida{z-index:600}
.ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ava{overflow:hidden}

/* inloggning */
.auth{min-height:100%;display:grid;align-content:center;gap:22px;max-width:420px;margin:0 auto;padding-block:32px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.auth .logga{font-size:3rem;justify-content:center}
.auth .logga svg{width:44px;height:44px}
.auth .slogan{text-align:center;color:var(--tyst);margin:-10px 0 0}
.auth form{display:grid;gap:14px}
.flikval{display:flex;background:var(--glas);border:1px solid var(--kant);border-radius:999px;padding:4px}
.flikval button{flex:1;padding:10px;border-radius:999px;font-weight:700;color:var(--tyst)}
.flikval button[aria-pressed="true"]{background:var(--yta2);color:var(--text)}
.fel{background:color-mix(in srgb,var(--hjarta) 16%,var(--yta));color:var(--text);border:1px solid color-mix(in srgb,var(--hjarta) 50%,transparent);padding:10px 14px;border-radius:14px;margin:0;font-size:.9rem}
.liten-text{font-size:.8rem;color:var(--tyst);text-align:center;margin:0}
.profilval{display:flex;align-items:center;gap:14px}
.profilval .ava{width:64px;height:64px;font-size:1.4rem}
.laddar{display:grid;place-items:center;min-height:40vh;color:var(--tyst)}
.tomt{padding:30px 20px;text-align:center;color:var(--tyst);background:var(--glas);border:1px dashed var(--kant);border-radius:var(--radie);display:grid;gap:10px;justify-items:center}
.tomt b{color:var(--text);font:700 1.15rem var(--display)}
.adminrad{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linje)}
.adminrad:last-child{border-bottom:0}
.adminrad .namn{flex:1;min-width:0}
.adminrad small{display:block;color:var(--tyst)}
.adminrad .smal{font-size:.8rem;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--kant)}
.adminrad .smal.rod{color:var(--hjarta);border-color:color-mix(in srgb,var(--hjarta) 50%,transparent)}
.anmald{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linje)}
.anmald img{width:72px;height:72px;object-fit:cover;border-radius:12px}
.anmald .rad{flex-wrap:wrap;gap:8px;margin-top:6px}
.vaxel{display:flex;align-items:center;gap:12px;padding:14px 16px}
.vaxel span{flex:1}
.vaxel input{width:44px;height:26px;accent-color:var(--glod1)}
.mer{justify-self:center}
.egenlista{display:grid;gap:8px;max-height:40vh;overflow:auto}
.egenlista div{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--glas);border:1px solid var(--kant);font-size:.9rem}
.egenlista span{flex:1}
.egenlista button{color:var(--hjarta);font-weight:700;font-size:.8rem}
.kopiera-rad{display:flex;gap:8px;align-items:center}
.kopiera-rad input{flex:1;min-width:0;font:inherit;font-size:.82rem;padding:10px 12px;border-radius:12px;border:1px solid var(--kant);background:var(--glas);color:var(--text)}
.kopiera-rad .knapp{width:auto;padding:10px 16px}
.forslag{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ok) 14%,var(--yta));border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);font-size:.9rem}
.forslag svg{width:20px;height:20px;flex:none;color:var(--ok)}
.lista .adminrad button.smal,.lista .anmald button.knapp{width:auto;display:inline-flex;align-items:center;flex:none;white-space:nowrap;border-bottom:1px solid var(--kant)}
.lista .adminrad button.smal{padding:7px 12px;border:1px solid var(--kant)}
.lista .adminrad button.smal.rod{border-color:color-mix(in srgb,var(--hjarta) 50%,transparent)}
.lista .anmald button.knapp{padding:8px 14px;border-bottom:0}
.adminrad{flex-wrap:wrap}
.adminrad .namn{flex:1 1 150px}
/* iPhone: sidan ritas under klockan – flytta ner allt så att rubriken inte täcker innehållet */
body{padding-top:env(safe-area-inset-top,0px)}
.topp .demo{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Flikraden sitter fast längst ner (som en vanlig app) – bakgrunden går ända ner till kanten */
.flikar{left:0;right:0;bottom:0;margin:0;max-width:none;border:0;border-top:1px solid var(--kant);border-radius:22px 22px 0 0;
  padding:4px max(8px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--yta) 88%,transparent);box-shadow:0 -10px 30px -18px var(--skugga)}
.flikar nav{max-width:480px}
.app{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* Ny version finns */
.ny-version{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));z-index:40;width:min(440px,calc(100% - 24px));
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:18px;background:var(--text);color:var(--bg);box-shadow:0 16px 40px -12px var(--skugga);animation:in .3s ease}
.ny-version span{flex:1;font-weight:600;font-size:.92rem;line-height:1.3}
.ny-version small{display:block;font-weight:400;opacity:.75}
.ny-version .knapp{width:auto;padding:10px 16px}
.ny-version .stang-x{color:var(--bg);opacity:.6;font-size:1.3rem;padding:0 4px}
/* iPhone/Safari: sidan ska alltid vara minst lika hög som hela skärmen, annars hamnar flikraden för högt på korta sidor */
html,body{height:auto;min-height:100%}
.app{min-height:100vh;min-height:calc(100lvh + 1px)}

/* knappar under vald bild */
#nyform .rad .knapp{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:11px 14px}
#nyform .rad .knapp svg{width:18px;height:18px}
.knapp.vaxla{cursor:pointer;user-select:none}
.knapp.vaxla input{width:18px;height:18px;margin:0;accent-color:var(--glod1)}
.knapp.vaxla.pa{box-shadow:inset 0 0 0 2px var(--glod1)}