/* Fridaquiz – utseende enligt Fridaskolans grafiska identitet: Frida Röd, Frida Blå och Frida Beige,
   Poppins i rubriker, Source Serif 4 i löptext, ordentligt rundade hörn och tunna blå linjer. */
:root{
  --rod:#E5004B;--bla:#16355A;--beige:#FCF8F4;--vit:#fff;--lila:#A84D97;--klarbla:#006399;--cyan:#009CB4;--gron:#00A96C;--gul:#FFCD1C;--orange:#F39200;
  --rubrik:"Poppins",Arial,sans-serif;--brod:"Source Serif 4","Source Serif Pro","Times New Roman",serif;
  --r-sm:8px;--r-lg:32px;--r-xl:48px;
  --line:rgba(22,53,90,.22);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--beige);color:var(--bla);font:17px/1.55 var(--brod)}
h1,h2,h3,legend,.btn,label,nav,th,.qmeta,summary,input,select,textarea,button{font-family:var(--rubrik)}
h1{font-size:40px;line-height:1.1;font-weight:700;margin:0 0 8px}
h2{font-size:24px;line-height:1.15;font-weight:700;margin:0 0 12px}
h3{font-size:20px;line-height:1.25;font-weight:600;margin:0 0 6px}
a{color:var(--klarbla)}
code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.85em}
.ingress{font:400 19px/1.45 var(--rubrik);margin:0 0 24px;max-width:60ch}
.small,.muted,small{font-size:14px;opacity:.8}
.muted{font-family:var(--rubrik)}
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 80px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row form{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2.top{align-items:start;margin-top:32px}
.grid2 .wide{grid-column:1/-1}
.stack{display:grid;gap:14px}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.headrow h1,.headrow .ingress{margin-bottom:0}

/* Knappar och fält */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--rod);background:var(--rod);color:#fff;font-weight:600;font-size:16px;line-height:1.2;padding:11px 22px;border-radius:999px;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(22,53,90,.18)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible,.gbtn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.link:focus-visible{outline:3px solid var(--klarbla);outline-offset:2px}
.btn.blue{background:var(--bla);border-color:var(--bla)}
.btn.ghost{background:transparent;color:var(--bla);border-color:var(--bla)}
.btn.ghostw{background:transparent;color:#fff;border-color:#fff}
.btn.danger{color:#B4003A;border-color:#B4003A}
.btn.small{font-size:14px;padding:6px 14px}
.btn.big{font-size:22px;padding:16px 38px;font-weight:700}
.link{background:none;border:0;color:var(--klarbla);font:600 14px var(--rubrik);cursor:pointer;padding:2px 4px;text-decoration:underline}
.link.danger{color:#B4003A}
.fld{display:grid;gap:5px;font-weight:600;font-size:14px}
.fld>span{letter-spacing:.01em}
input[type=text],input[type=password],input[type=number],input:not([type]),select,textarea{width:100%;font-size:16px;font-weight:400;padding:10px 14px;border:1.5px solid var(--bla);border-radius:var(--r-sm);background:#fff;color:var(--bla)}
input[type=range]{width:100%;accent-color:var(--rod)}
input[type=file]{font-size:14px}
textarea{resize:vertical;line-height:1.4}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:15px;cursor:pointer;line-height:1.35}
.chk input{width:20px;height:20px;accent-color:var(--rod);flex:none;margin-top:1px}
.flash{font:500 16px var(--rubrik);padding:12px 20px;border-radius:var(--r-sm);margin:16px auto;max-width:1132px;background:#E3F5EC;border-left:8px solid var(--gron)}
.flash.err{background:#FDE5EC;border-color:var(--rod)}
.flash.warn{background:#FFF4CC;border-color:var(--gul)}
.empty{font:400 18px var(--rubrik);padding:48px 0;text-align:center;opacity:.7}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;padding:24px}
.panel.narrowform{max-width:440px;margin-top:40px;display:grid;gap:14px}
dialog{border:0;border-radius:var(--r-lg);padding:28px;max-width:min(640px,92vw);width:100%;color:var(--bla);background:var(--beige)}
dialog::backdrop{background:rgba(22,53,90,.55)}
dialog form{display:grid;gap:12px}

/* Sidhuvud för lärare */
.top{display:flex;align-items:center;gap:24px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--rod);font:800 24px var(--rubrik)}
.logo{height:36px;width:auto;display:block}
.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.top nav a{font-weight:600;font-size:15px;color:var(--bla);text-decoration:none;padding:8px 14px;border-radius:999px}
.top nav a:hover{background:var(--beige)}
.top nav a.on{background:var(--bla);color:#fff}
.who{display:flex;align-items:center;gap:12px;font:500 14px var(--rubrik)}

/* Kort för quiz */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:6px}
.qcard p{margin:0;font-size:15px;flex:1}
.qmeta{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--klarbla)}
.qinfo{font:400 13px var(--rubrik);opacity:.75;margin:6px 0 10px}
.filter{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.filter input{max-width:320px}.filter select{max-width:240px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-sm);overflow:hidden;font-size:15px}
.tbl th{text-align:left;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;border-bottom:2px solid var(--bla)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--rubrik)}
.preview{display:grid;gap:14px;padding-left:24px}
.preview ul{margin:4px 0;padding-left:20px;font-size:15px}
.preview .right{font-weight:700;color:#00774C}

/* Inställningar */
fieldset.set{border:0;border-top:2px solid var(--bla);margin:0 0 28px;padding:14px 0 0}
fieldset.set legend{font-size:20px;font-weight:700;padding:0 12px 0 0}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px 28px;align-items:end}
.stickybar{position:sticky;bottom:0;background:var(--beige);padding:14px 0;border-top:1px solid var(--line)}
.allset{margin-top:36px}
.allset>summary{font-size:20px;font-weight:700;cursor:pointer;padding:12px 0}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mode input{position:absolute;opacity:0}
.mode>div{background:#fff;border:3px solid var(--line);border-radius:var(--r-lg);padding:24px;height:100%;cursor:pointer}
.mode p{margin:0;font-size:16px}
.mode input:checked+div{border-color:var(--rod);box-shadow:0 6px 0 var(--rod)}
.mode input:focus-visible+div{outline:3px solid var(--klarbla);outline-offset:3px}
.modeart{height:110px;border-radius:20px;background:var(--bla);margin-bottom:16px;display:grid;padding:14px;gap:8px}
.modeart.classic{grid-template-columns:1fr 1fr}
.modeart.classic i{border-radius:8px}.modeart.classic i:nth-child(1){background:var(--rod)}.modeart.classic i:nth-child(2){background:var(--klarbla)}.modeart.classic i:nth-child(3){background:var(--gul)}.modeart.classic i:nth-child(4){background:var(--gron)}
.modeart.live i{border-radius:999px;height:16px;align-self:center}.modeart.live i:nth-child(1){background:var(--gul);width:82%}.modeart.live i:nth-child(2){background:var(--rod);width:55%}.modeart.live i:nth-child(3){background:var(--cyan);width:68%}
.startrow{margin:28px 0 0;gap:24px}

/* Quizeditor */
.qedit{margin-top:18px;display:grid;gap:12px}
.qhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--rubrik)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm)}
.opt input[type=radio]{width:22px;height:22px;accent-color:var(--bla);flex:none}
.opt.c0{background:var(--rod)}.opt.c1{background:var(--klarbla)}.opt.c2{background:var(--gul)}.opt.c3{background:var(--gron)}
.opt input[type=text]{border-color:transparent}
.qextra{justify-content:space-between;font:500 14px var(--rubrik)}
.qextra input[type=number]{width:84px;padding:6px 8px}
.addrow{margin:22px 0}

/* Frågebanken */
.bank{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.bank aside{display:grid;gap:14px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.areahead{display:flex;justify-content:space-between;align-items:center;font-family:var(--rubrik);border-top:1px solid var(--line);padding-top:12px}
.areas{display:grid;gap:8px}
.areas small{display:block;opacity:.7;font-size:12px}
.quick{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;font:500 15px var(--rubrik);margin-bottom:16px;border-color:var(--bla)}
.quick input{width:84px}
.pickbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0;position:sticky;top:0;background:var(--beige);z-index:2;border-bottom:1px solid var(--line)}
.pickbar select{max-width:240px;padding:6px 10px}
.brows{display:grid;margin-bottom:20px}
.brow{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.brow input{width:20px;height:20px;accent-color:var(--rod);margin-top:4px;flex:none}
.bq{font:600 17px/1.35 var(--rubrik)}
.ba{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:15px;margin:4px 0}
.ba b{color:#00774C}.ba b::before{content:"✓ "}
.bmeta{font:400 12px var(--rubrik);opacity:.7}

/* Startsida och inloggning */
body.center{min-height:100vh;display:grid;place-items:center;padding:24px;overflow-x:hidden}
.card{background:#fff;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 0;padding:40px;border:1px solid var(--line);position:relative}
.card.narrow{width:min(480px,100%)}
.card .logo{margin-bottom:16px}
.alli{position:absolute;left:0;top:40px;width:10px;height:72px;background:var(--rod);border-radius:0 0 10px 0}
.landing{background:var(--rod);color:#fff}
.joinbox{position:relative;z-index:1;text-align:center;display:grid;gap:18px;justify-items:center;width:min(440px,100%)}
.biglogo{height:64px;background:#fff;padding:10px 18px;border-radius:16px}
.wordmark{font:800 clamp(48px,12vw,72px)/1 var(--rubrik);letter-spacing:-.01em;margin:0}
.joinform{background:#fff;color:var(--bla);border-radius:var(--r-xl) var(--r-xl) 0 var(--r-xl);padding:28px;display:grid;gap:14px;width:100%}
.joinform label{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.joinform input,.pjoin input{font:700 32px var(--rubrik);text-align:center;letter-spacing:.08em;padding:14px;border-width:2px;border-radius:16px}
.landing .small a{color:#fff}
.deco{position:fixed;border-radius:50%;pointer-events:none}
.d1{width:46vmax;height:46vmax;background:#C90042;left:-18vmax;bottom:-22vmax}
.d2{width:22vmax;height:22vmax;background:var(--bla);right:-8vmax;top:-9vmax}
.d3{width:12px;height:40vh;background:var(--gul);right:12vw;bottom:0;border-radius:12px 0 0 0}

/* ================= Spelskärmar ================= */
body.game{font-family:var(--rubrik);min-height:100vh;min-height:100dvh;overflow:hidden;
  --bg:var(--beige);--ink:var(--bla);--panel:#fff;--pink:var(--bla);--soft:rgba(22,53,90,.08);--deco:var(--rod);--deco2:var(--gul);
  --a0:#E5004B;--a0t:#fff;--a1:#006399;--a1t:#fff;--a2:#FFCD1C;--a2t:#16355A;--a3:#00A96C;--a3t:#16355A;
  background:var(--bg);color:var(--ink)}
body.theme-fridabla{--bg:#16355A;--ink:#fff;--panel:#fff;--soft:rgba(255,255,255,.12);--deco:#E5004B;--deco2:#009CB4}
body.theme-rod{--bg:#E5004B;--ink:#fff;--soft:rgba(255,255,255,.16);--deco:#16355A;--deco2:#FFCD1C}
body.theme-hav{--bg:#006399;--ink:#fff;--soft:rgba(255,255,255,.14);--deco:#009CB4;--deco2:#FCF8F4}
body.theme-skog{--bg:#0B5D43;--ink:#fff;--soft:rgba(255,255,255,.13);--deco:#00A96C;--deco2:#FFCD1C}
body.theme-sol{--bg:#FFCD1C;--ink:#16355A;--soft:rgba(22,53,90,.1);--deco:#F39200;--deco2:#E5004B}
body.theme-natt{--bg:#0C1A2E;--ink:#FCF8F4;--soft:rgba(255,255,255,.1);--deco:#A84D97;--deco2:#009CB4}
body.theme-tavla{--bg:#22302A;--ink:#FCF8F4;--soft:rgba(255,255,255,.1);--deco:#FCF8F4;--deco2:#FFCD1C}
body.pal-varm{--a1:#A84D97;--a2:#F39200;--a3:#009CB4}
body.pal-pastell{--a0:#F7A8C0;--a0t:#16355A;--a1:#A9CCEC;--a1t:#16355A;--a2:#FFE58A;--a3:#A8E0C4}
body.pal-kontrast{--a0:#000;--a1:#fff;--a1t:#000;--a2:#FFCD1C;--a2t:#000;--a3:#16355A;--a3t:#fff}
.a0{background:var(--a0);color:var(--a0t)}.a1{background:var(--a1);color:var(--a1t)}.a2{background:var(--a2);color:var(--a2t)}.a3{background:var(--a3);color:var(--a3t)}
.mark{display:inline-grid;place-items:center;flex:none;font-weight:800}
.mark svg{width:1em;height:1em;fill:currentColor;display:block}
body.host::before,body.host::after{content:"";position:fixed;z-index:0;pointer-events:none;opacity:.5}
body.host::before{width:44vmax;height:44vmax;border-radius:50%;background:var(--soft);left:-14vmax;bottom:-20vmax}
body.host::after{width:10px;height:22vh;background:var(--deco2);left:0;top:14vh;border-radius:0 0 10px 0;opacity:.9}
body.host.anim::before{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(18vw,-12vh) scale(1.25)}}
#app{position:relative;z-index:1;height:100vh;height:100dvh;display:flex;flex-direction:column}
.gbar{display:flex;align-items:center;gap:2vw;padding:1.2vh 2vw;border-bottom:1px solid var(--soft);flex:none}
.gbrand{display:flex;align-items:center;gap:12px;font-size:clamp(16px,1.5vw,24px)}
.gbrand b{font-weight:800;color:var(--ink)}
.gbrand .logo{height:clamp(24px,3.6vh,40px);background:#fff;border-radius:8px;padding:3px 8px}
.gbrand span{opacity:.75;font-weight:500;max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gjoin{flex:1;text-align:center;font-size:clamp(14px,1.4vw,22px)}
.gjoin b{font-weight:700;letter-spacing:.02em}
.gbtns{display:flex;gap:8px;align-items:center;margin-left:auto}
.gbtn{font:600 14px var(--rubrik);background:transparent;color:var(--ink);border:1.5px solid currentColor;border-radius:999px;padding:6px 14px;cursor:pointer;opacity:.85}
.gbtn:hover{opacity:1;background:var(--soft)}
.pill{font-weight:700;font-size:15px;background:var(--soft);padding:6px 14px;border-radius:999px;white-space:nowrap}
#stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
#stage>section{flex:1;min-height:0;display:flex;flex-direction:column;padding:2.5vh 3vw;animation:phin .35s ease-out}
@keyframes phin{from{opacity:0;transform:translateY(14px)}}
.nextbtn{position:absolute;right:3vw;top:2.2vh;z-index:5;font-size:clamp(16px,1.5vw,24px)}
.nextbtn.subtle{background:transparent;color:var(--ink);border-color:var(--ink);opacity:.6;font-size:15px;padding:7px 16px}

/* Väntrum */
.lobby{flex-direction:row!important;gap:4vw;align-items:center}
.joincard{background:#fff;color:var(--bla);border-radius:var(--r-xl) var(--r-xl) 0 var(--r-xl);padding:3.5vh 2.6vw;text-align:center;width:min(34vw,560px);flex:none;position:relative;box-shadow:0 10px 0 var(--soft)}
.joinhow span,.pinrow span{display:block;font-size:clamp(13px,1.1vw,18px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.joinhow b{font-size:clamp(16px,1.7vw,28px);font-weight:700;word-break:break-all;line-height:1.2}
.pinrow{margin:1.6vh 0}
.pin{font-size:clamp(48px,6.4vw,112px);font-weight:800;line-height:1;color:var(--rod);letter-spacing:.02em;white-space:nowrap}
.qr{width:min(100%,34vh);margin:0 auto}
.qr svg{width:100%;display:block}
.joincard p{margin:.6vh 0 0;font-size:clamp(13px,1.1vw,17px);opacity:.8}
.lobbyside{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.modehint{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(13px,1.2vw,19px);opacity:.8}
.lobbyside h1{font-size:clamp(32px,4.2vw,72px);font-weight:800;margin:.5vh 0 2vh}
.names{flex:1;min-height:0;overflow:auto;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.chip{font:600 clamp(16px,1.7vw,28px) var(--rubrik);background:var(--panel);color:var(--bla);border:0;border-radius:999px;padding:.35em .9em;cursor:pointer;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.chip:hover{background:var(--rod);color:#fff;text-decoration:line-through}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.waiting{font-size:clamp(14px,1.2vw,19px);opacity:.75;margin:1vh 0}
.lobbyact{display:flex;gap:16px;justify-content:flex-end;align-items:center;padding-top:1vh}
.lobbyact .btn.big{font-size:clamp(20px,2.2vw,36px);padding:.6em 1.6em}
body.theme-rod .btn:not(.ghostw){background:var(--bla);border-color:var(--bla)}
body.theme-frida .lobbyact .ghostw,body.theme-sol .lobbyact .ghostw{color:var(--bla);border-color:var(--bla)}
.headline{text-align:center}
.headline h1{font-size:clamp(36px,5vw,84px);font-weight:800;margin:0}
.headline p{font-size:clamp(16px,1.7vw,26px);margin:.6vh 0 2vh;opacity:.85}
.tgrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(150px,15vw,260px),1fr));gap:1.4vw;align-content:start}
.tcard{background:#fff;color:var(--bla);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;padding:1.6vh 1.2vw;text-align:center;border-top:12px solid var(--c);animation:pop .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*70ms)}
.temo{font-size:clamp(36px,4.4vw,72px);line-height:1.1}
.tcard h2{font-size:clamp(17px,1.7vw,28px);margin:0 0 4px}
.tcard p{margin:0;font-size:clamp(14px,1.3vw,21px);line-height:1.35;font-weight:500}

/* Fråga */
.qintro{justify-content:center;align-items:center;text-align:center;gap:4vh}
.qno{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(14px,1.4vw,22px);opacity:.8}
.qtext{font-size:clamp(28px,4.2vw,76px);font-weight:700;line-height:1.12;margin:0;text-wrap:balance}
.qtext.long{font-size:clamp(24px,3.1vw,56px)}.qtext.xlong{font-size:clamp(20px,2.3vw,40px)}
body.ts-stor .qtext{font-size:clamp(32px,5vw,92px)}body.ts-xl .qtext{font-size:clamp(36px,5.8vw,108px)}
body.ts-stor .qtext.long,body.ts-xl .qtext.long{font-size:clamp(26px,3.6vw,64px)}
.qintro .qtext{max-width:80vw}
.introbar{width:min(60vw,900px);height:14px;border-radius:999px;background:var(--soft);overflow:hidden}
.introbar i{display:block;height:100%;background:var(--deco);border-radius:999px;animation:fill linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.qscreen{gap:1.6vh}
.qtop{text-align:center;padding:0 12vw;display:grid;gap:.6vh;justify-items:center}
.timebar{height:16px;border-radius:999px;background:var(--soft);overflow:hidden;flex:none}
.timebar i{display:block;height:100%;background:var(--deco);border-radius:999px}
.qmid{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:3vw}
.clock{width:clamp(90px,17vh,210px);aspect-ratio:1;position:relative;display:grid;place-items:center;flex:none}
.clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cbg{fill:none;stroke:var(--soft);stroke-width:12}.cfg{fill:none;stroke:var(--deco);stroke-width:12;stroke-linecap:round}
.clock b{font-size:clamp(34px,7vh,92px);font-weight:800;position:relative}
.clock.hurry b{animation:pulse .5s ease-in-out infinite alternate}
.clock.dold{visibility:hidden}
@keyframes pulse{to{transform:scale(1.18)}}
.midspace{flex:1;display:grid;place-items:center}
.dblbadge{background:var(--gul);color:var(--bla);font-weight:800;font-size:clamp(18px,2.2vw,36px);padding:.3em 1em;border-radius:999px;transform:rotate(-4deg)}
.answered{width:clamp(90px,17vh,210px);text-align:center;flex:none}
.answered b{display:block;font-size:clamp(34px,7vh,92px);font-weight:800;line-height:1}
.answered span{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(13px,1.3vw,20px)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh 1vw;flex:none}
.tiles.n2{grid-template-columns:1fr 1fr}.tiles.n3 .tile:last-child{grid-column:1/-1}
.tile{display:flex;align-items:center;gap:1.2vw;min-height:clamp(64px,13.5vh,170px);padding:1vh 1.6vw;border-radius:20px;font-weight:700;font-size:clamp(20px,2.5vw,46px);line-height:1.15;box-shadow:inset 0 -8px 0 rgba(0,0,0,.14);transition:opacity .4s,transform .4s;position:relative}
.tile .mark{font-size:1.25em}
.ttext{flex:1;min-width:0;overflow-wrap:anywhere}
.ttext.long{font-size:.72em}.ttext.xlong{font-size:.55em}
body.ts-stor .tile{font-size:clamp(22px,2.9vw,54px)}body.ts-xl .tile{font-size:clamp(24px,3.3vw,62px)}
.tiles.reveal .wrong{opacity:.28;transform:scale(.97)}
.tiles.reveal .right{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{50%{transform:scale(1.04)}}
.check{font-size:1.4em;font-weight:800}
body.pal-kontrast .tile.a1{outline:3px solid #000;outline-offset:-3px}
.dist{flex:1;height:100%;display:flex;justify-content:center;align-items:flex-end;gap:2.4vw;padding-top:1vh}
.dbar{width:clamp(60px,8vw,150px);height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:none!important;color:var(--ink)!important;opacity:.45}
.dbar.right{opacity:1}
.dbar b{font-size:clamp(20px,2.6vw,44px);font-weight:800}
.dbar i{display:block;width:100%;min-height:10px;border-radius:14px 14px 0 0;animation:grow .6s ease-out backwards}
.dbar.a0 i,.dbar.a0 .mark{background:var(--a0);color:var(--a0t)}.dbar.a1 i,.dbar.a1 .mark{background:var(--a1);color:var(--a1t)}.dbar.a2 i,.dbar.a2 .mark{background:var(--a2);color:var(--a2t)}.dbar.a3 i,.dbar.a3 .mark{background:var(--a3);color:var(--a3t)}
.dbar .mark{width:100%;padding:6px 0;font-size:clamp(16px,1.8vw,28px);border-radius:0 0 10px 10px}
@keyframes grow{from{height:0!important}}

/* Ställning */
.boardview{align-items:center}
.boardview h1{font-size:clamp(32px,4.4vw,76px);font-weight:800;margin:0 0 2vh}
.board{list-style:none;margin:0;padding:0;width:min(1100px,86vw);display:grid;gap:1.2vh;flex:1;align-content:start;overflow:auto}
.board li{display:grid;grid-template-columns:2.2em 1fr auto auto auto;align-items:center;gap:1.4vw;background:#fff;color:var(--bla);border-radius:999px 999px 999px 0;padding:1vh 2.2vw 1vh 1vw;font-size:clamp(18px,2.3vw,40px);font-weight:700;animation:slidein .5s ease-out backwards;animation-delay:calc(var(--i)*90ms)}
.board li:first-child{background:var(--gul)}
.board li.out{opacity:.5}
@keyframes slidein{from{opacity:0;transform:translateX(-40px)}}
.brank{width:2em;height:2em;border-radius:50%;background:var(--bla);color:#fff;display:grid;place-items:center;font-size:.8em}
.bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bname em{font-style:normal;font-size:.5em;background:var(--rod);color:#fff;border-radius:999px;padding:.2em .8em;vertical-align:middle;margin-left:.6em}
.bmove{font-size:.55em}.bmove.up{color:#00774C}.bmove.down{color:#B4003A}
.blast{font-size:.6em;opacity:.75;font-weight:600}
.bscore{font-weight:800;font-variant-numeric:tabular-nums}

/* Frida Live – loppet */
.racehead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.5vh}
.racehead h1{font-size:clamp(26px,3.4vw,60px);font-weight:800;margin:0}
.rclock{font-size:clamp(26px,3.4vw,60px);font-weight:800;font-variant-numeric:tabular-nums}
.lanes{flex:1;min-height:0;display:grid;gap:1vh;grid-auto-rows:1fr}
.race.many .lanes{grid-template-columns:1fr 1fr;gap:1vh 3vw}
.race.huge .lanes{grid-template-columns:1fr 1fr 1fr;gap:.6vh 2vw}
.lane{display:grid;grid-template-columns:minmax(150px,22%) 1fr;align-items:center;gap:1.2vw;min-height:0}
.race.many .lane{grid-template-columns:minmax(130px,32%) 1fr}
.lname{display:flex;align-items:center;gap:.8vw;min-width:0}
.emo{font-size:clamp(22px,3.6vh,56px);line-height:1}
.lname b{display:block;font-size:clamp(15px,1.8vw,32px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race.many .lname b{font-size:clamp(14px,1.3vw,24px)}.race.huge .lname b{font-size:clamp(12px,1.1vw,18px)}
.lname small{display:block;font-size:clamp(11px,.95vw,16px);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.race.huge .lname small,.race.huge .emo{display:none}
.track{position:relative;height:min(68%,56px);min-height:14px;background:var(--soft);border-radius:999px;margin:0 2.4vw 0 3vw}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);border-radius:999px;transition:width .6s cubic-bezier(.3,1.3,.5,1)}
.runner{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);height:150%;aspect-ratio:1;min-height:26px;border-radius:50%;background:#fff;color:var(--bla);border:4px solid var(--c);display:grid;place-items:center;font-weight:800;font-size:clamp(12px,1.5vw,26px);transition:left .6s cubic-bezier(.3,1.3,.5,1)}
.lane.done .runner{background:var(--gul)}
.lane.miss .track{animation:shake .5s}
.lane.miss .runner{border-color:#B4003A;background:#FDE5EC}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* Prisutdelning */
#stage.ph-podium{background:var(--bla);color:#fff}
body.host:has(.podium)::after,body.host:has(.podium)::before{display:none}
.podium{position:relative;overflow:hidden;align-items:center;padding-bottom:0!important}
.spot{position:absolute;left:50%;top:-30vh;width:70vw;height:120vh;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(255,205,28,.28),transparent 62%);pointer-events:none;opacity:0;transition:opacity 1.2s}
.podium.won .spot{opacity:1}
.ptitle{font-size:clamp(30px,4.4vw,80px);font-weight:800;margin:0;text-align:center;position:relative;z-index:3;max-width:64vw;line-height:1.05}
.pstage{display:flex;align-items:flex-end;justify-content:center;gap:1vw;flex:1;min-height:0;width:min(1000px,58vw);position:relative;z-index:2}
.pcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;max-width:360px;height:100%}
.pcol.empty{visibility:hidden}
.pwho{text-align:center;transition:transform .9s cubic-bezier(.2,1.4,.4,1),opacity .5s;position:relative}
.pcol.hid .pwho{transform:translateY(60vh);opacity:0}
.pwho h2{font-size:clamp(20px,2.6vw,46px);margin:0;font-weight:800;overflow-wrap:anywhere;line-height:1.05}
.pwho p{margin:.2vh 0 1vh;font-size:clamp(13px,1.3vw,22px);opacity:.9;font-weight:500}
.pemo{font-size:clamp(40px,7vh,96px);line-height:1}
.pfigs{display:flex;justify-content:center}
.pfigs .fig{width:clamp(48px,9vh,120px);margin:0 -6px}
.p1 .pfigs .fig{width:clamp(60px,12vh,160px)}
.crown{position:absolute;left:50%;top:-5.5vh;transform:translateX(-50%);font-size:clamp(34px,6.5vh,84px);color:var(--gul);line-height:1;animation:spin 3s linear infinite;text-shadow:0 0 30px rgba(255,205,28,.7)}
.p1 .pemo+.pfigs+.crown{top:-6vh}
@keyframes spin{50%{transform:translateX(-50%) scale(1.25) rotate(18deg)}}
.pblock{width:100%;border-radius:24px 24px 0 0;display:grid;place-items:start center;padding-top:1.4vh;transition:height .9s cubic-bezier(.2,1.2,.4,1)}
.pblock b{font-size:clamp(34px,6vh,84px);font-weight:800;line-height:1}
.p1 .pblock{height:30vh;background:var(--gul);color:var(--bla)}
.p2 .pblock{height:21vh;background:#E9EEF3;color:var(--bla)}
.p3 .pblock{height:14vh;background:var(--orange);color:var(--bla)}
.pcol.hid .pblock{height:3vh}
.crowd{position:absolute;bottom:0;z-index:1;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-content:flex-start;gap:1.6vh .5vw;pointer-events:none;width:calc((100vw - min(1000px,58vw))/2 - 1.5vw);max-height:62vh}
.crowd.L{left:.8vw}.crowd.R{right:.8vw}
.crowd .fig{width:clamp(34px,6.4vh,84px);opacity:.95}
.crowd.dense .fig{width:clamp(26px,4.6vh,58px)}
.fig{display:flex;flex-direction:column;align-items:center;animation:bob 1.6s ease-in-out infinite;animation-delay:var(--d)}
.fig svg{width:100%;display:block;overflow:visible}
.fig span{font-size:clamp(9px,1vw,14px);font-weight:600;white-space:nowrap;max-width:9ch;overflow:hidden;text-overflow:ellipsis;order:-1;background:rgba(255,255,255,.14);padding:0 6px;border-radius:999px}
.fig .armL,.fig .armR{transform-box:fill-box;animation:waveL .8s ease-in-out infinite alternate;animation-delay:var(--d)}
.fig .armL{transform-origin:100% 100%}.fig .armR{transform-origin:0 100%;animation-name:waveR}
@keyframes bob{50%{transform:translateY(-6%)}}
@keyframes waveL{to{transform:rotate(-22deg)}}@keyframes waveR{to{transform:rotate(22deg)}}
.crowd.cheer .fig{animation:jump .55s cubic-bezier(.3,0,.4,1) infinite alternate;animation-delay:var(--d)}
.fig.win{animation:jump .5s cubic-bezier(.3,0,.4,1) infinite alternate}
@keyframes jump{to{transform:translateY(-22%)}}
.pact{position:absolute;right:1.4vw;top:2vh;z-index:6;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.pact[hidden]{display:none}
.pact .btn{font-size:14px;padding:8px 16px}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
#overlay{position:fixed;inset:0;background:rgba(12,26,46,.7);z-index:50;display:grid;place-items:center;padding:4vh 4vw}
#overlay[hidden]{display:none}
.ovcard{background:var(--beige);color:var(--bla);border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 0;padding:28px;width:min(900px,100%);max-height:100%;display:flex;flex-direction:column}
.ovhead{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--bla);padding-bottom:10px}
.ovhead h1{margin:0}
.ovbody{overflow:auto}
table.full{width:100%;border-collapse:collapse;font-size:clamp(16px,1.6vw,24px)}
table.full th{text-align:left;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:8px}
table.full td{padding:8px;border-bottom:1px solid var(--line)}
table.full td:first-child{font-weight:800;width:2.4em}
table.full small{font-weight:400;font-size:.7em;opacity:.8}
table.full tr.out{opacity:.5}

/* ================= Elevens skärm ================= */
body.player{overflow:auto}
body.player #app{height:auto;min-height:100dvh}
.pwrap{flex:1;display:flex;flex-direction:column;min-height:100dvh}
.pjoin{margin:auto;padding:24px;width:min(440px,100%);display:grid;gap:16px;text-align:center;justify-items:center}
.pjoin .logo{height:48px;background:#fff;border-radius:10px;padding:6px 12px}
.pjoin h1{font-size:32px;margin:0}.pjoin .wordmark{color:var(--rod);font-size:52px}
body.theme-rod .pjoin .wordmark{color:#fff}
.pjoin form{display:grid;gap:14px;width:100%}
.pjoin label{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px}
.ptitle2{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px;margin:0;opacity:.8}
.perr{background:#FDE5EC;color:#8A002D;border-radius:var(--r-sm);padding:10px 14px;font-weight:600;margin:0;width:100%}
.phead{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:clamp(17px,2.6vw,22px);background:var(--soft);flex:none}
.phead span{font-weight:700;font-variant-numeric:tabular-nums}
.pmsg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
.pmsg h1{font-size:clamp(36px,10vw,64px);font-weight:800;margin:0}
.pmsg p{font-size:clamp(19px,2.8vw,26px);margin:0;font-weight:500;max-width:32ch}
.pmsg.small{flex:none;padding:16px}
.pmsg.good{background:#00A96C;color:#16355A}
.pmsg.bad{background:#E5004B;color:#fff}
.pmsg.wait h1::after{content:"";display:block;width:64px;height:10px;border-radius:999px;background:var(--deco);margin:18px auto 0;animation:waitbar 1.2s ease-in-out infinite alternate}
@keyframes waitbar{from{transform:scaleX(.3)}to{transform:scaleX(1.4)}}
.pmsg.sent{color:var(--ink);background:var(--bg)}
.sentmark{width:120px;height:120px;border-radius:28px;display:grid;place-items:center;font-size:64px;background:inherit}
.pmsg.sent.a0 .sentmark{background:var(--a0);color:var(--a0t)}.pmsg.sent.a1 .sentmark{background:var(--a1);color:var(--a1t)}.pmsg.sent.a2 .sentmark{background:var(--a2);color:var(--a2t)}.pmsg.sent.a3 .sentmark{background:var(--a3);color:var(--a3t)}
.pts{font-size:clamp(26px,4vw,36px);font-weight:800;background:rgba(255,255,255,.9);color:var(--bla);padding:6px 22px;border-radius:999px}
.ctext{background:rgba(255,255,255,.92);color:var(--bla);border-radius:16px;padding:12px 18px;font-size:18px;max-width:34ch}
.streak{font-weight:700;font-size:18px}
.rank{font-size:clamp(22px,3.2vw,30px);font-weight:700;margin-top:8px}.behind{font-size:clamp(16px,2.2vw,20px);font-weight:500;opacity:.92}
.ptop{list-style:none;padding:0;margin:14px 0 0;width:min(480px,100%);display:grid;gap:6px}
.ptop li{display:grid;grid-template-columns:1.6em 1fr auto;gap:10px;background:rgba(255,255,255,.92);color:var(--bla);border-radius:999px;padding:6px 16px;font-size:clamp(16px,2.4vw,20px);text-align:left}
.ptop li.me{outline:3px solid var(--bla)}
.ptop i{font-style:normal;font-weight:700}
.medal{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:60px;font-weight:800;background:#fff;color:var(--bla);border:10px solid var(--bla)}
.medal.m1{background:var(--gul)}.medal.m2{background:#E9EEF3}.medal.m3{background:var(--orange)}
.pq{flex:1;display:flex;flex-direction:column;min-height:0}
.ptime{height:10px;background:var(--soft);flex:none}
.ptime i{display:block;height:100%;background:var(--deco);width:100%}
.pqtext{padding:14px 18px;font-size:clamp(18px,4.6vw,38px);font-weight:700;line-height:1.2;text-align:center;flex:none}
.pqtext.dim{font-size:16px;font-weight:500;opacity:.8}
.ptiles{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;min-height:0}
.ptiles.n3 .ptile:last-child{grid-column:1/-1}
.ptile{border:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:700 clamp(17px,4.4vw,42px)/1.15 var(--rubrik);padding:12px;cursor:pointer;box-shadow:inset 0 -8px 0 rgba(0,0,0,.16);min-height:110px;-webkit-tap-highlight-color:transparent;overflow-wrap:anywhere}
.ptile .mark{font-size:clamp(34px,9vw,96px)}
.ptile span.long{font-size:.75em}
.ptile:active{transform:translateY(3px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
.ptile:disabled{opacity:.35}.ptile.picked{opacity:1;outline:5px solid var(--ink);outline-offset:-5px}
body.pal-kontrast .ptile.a1{outline:3px solid #000;outline-offset:-3px}
.team{border-top:20px solid var(--c)}
.bigemo{font-size:96px;line-height:1.1}
.mates{list-style:none;padding:0;margin:8px 0 0;font-size:24px;font-weight:700;display:grid;gap:4px}
.lprog{display:flex;align-items:center;gap:12px;padding:10px 16px;flex:none}
.lpbar{flex:1;height:18px;border-radius:999px;background:var(--soft);overflow:hidden}
.lpbar i{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .5s}
.lprog b{font-size:18px;font-variant-numeric:tabular-nums}
.lq{flex:1;display:flex;flex-direction:column;padding:6px 14px 14px;gap:10px}
.lprompt{background:#fff;color:var(--bla);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;padding:22px;font-size:clamp(22px,5.6vw,40px);font-weight:700;line-height:1.15;text-align:center;border:2px solid var(--line)}
.lprompt.long{font-size:clamp(17px,4vw,26px)}
.lhint{margin:0;text-align:center;font-size:15px;opacity:.85;font-weight:500}
.lopts{display:grid;gap:10px;flex:1;align-content:start}
.lopt{font:600 clamp(18px,4.6vw,28px)/1.2 var(--rubrik);background:var(--bla);color:#fff;border:0;border-radius:18px;padding:18px;cursor:pointer;min-height:68px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.22);-webkit-tap-highlight-color:transparent;overflow-wrap:anywhere}
body.theme-fridabla .lopt,body.theme-natt .lopt,body.theme-hav .lopt{background:#fff;color:var(--bla)}
.lopt.long{font-size:17px}
.lopt:disabled{opacity:.4}.lopt.picked{opacity:1;outline:4px solid var(--rod)}
.pwrap.lv.ok .lprog{animation:okflash .9s}
@keyframes okflash{0%{background:#00A96C}100%{background:transparent}}
.pstand{flex:none;padding:8px 16px 14px;font-size:14px}
.pstand summary{font-weight:700;cursor:pointer;padding:6px 0}
.ps{display:grid;grid-template-columns:38% 1fr 2em;gap:8px;align-items:center;padding:3px 0}
.ps span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps.me span{font-weight:800}
.psbar{height:10px;background:var(--soft);border-radius:999px;overflow:hidden}.psbar i{display:block;height:100%;border-radius:999px}
.ps b{text-align:right}

@media (max-width:900px){
  .bank{grid-template-columns:1fr}.bank aside{position:static;max-height:none}
  .modes,.grid2,.opts{grid-template-columns:1fr}
  h1{font-size:32px}
  .lobby{flex-direction:column!important;overflow:auto}.joincard{width:100%}
  .gbrand span,.gjoin{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}