/* Tokens från Äventyrets designriktlinjer */
:root{
  --accent:#e2481e; --accent-text:#c43c14; --accent-hover:#9e2f0f; --accent-muted:#e86d4b;
  --ink:#222; --head:#000; --bg:#fff; --muted:#eeeeed; --sand:#e3e1db; --line:#ccc; --fine:#4d4d4d;
  --night:#100e16; --gold:#c19c61; --on-night:#ffffffa6;
  --btn-bg:#fff; --focus:#000; --focus-ring:#fff; --card:#fff;
  --replica:"Inter Tight","Manrope","Helvetica Neue",Arial,sans-serif;
  --script:"Caveat Brush","Kalam","Segoe Print","Comic Sans MS",cursive;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#ffffffa6; --head:#c19c61; --bg:#100e16; --muted:#1f1b27; --sand:#2a2531; --line:#3d3746; --fine:#ffffff8c;
    --accent-text:#e86d4b; --accent-hover:#f08f73; --btn-bg:#100e16; --focus:#fff; --focus-ring:#000; --card:#1a1721;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#ffffffa6; --head:#c19c61; --bg:#100e16; --muted:#1f1b27; --sand:#2a2531; --line:#3d3746; --fine:#ffffff8c;
  --accent-text:#e86d4b; --accent-hover:#f08f73; --btn-bg:#100e16; --focus:#fff; --focus-ring:#000; --card:#1a1721;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:400 1.125rem/1.5 var(--replica);letter-spacing:.004em;transition:background .5s}
body.night{background:var(--night);color:var(--on-night)}
h1,h2,h3{font-weight:300;color:var(--head);margin:0;letter-spacing:0}
h2{font-size:2.25rem;line-height:1.15}
p{margin:.5rem 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fine{color:var(--fine);font-size:.9375rem}
.script{font-family:var(--script);color:var(--accent);font-weight:400}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-ring)}

.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:46rem;margin:0 auto;padding:.75rem 1.125rem}
.brand{font-family:var(--script);font-size:1.75rem;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.top-r{display:flex;gap:.5rem;align-items:center}
select,input[type=text],input[type=password],input[type=file]{font:inherit;font-size:1rem;color:var(--ink);background:var(--btn-bg);border:1px solid var(--line);padding:.55rem .75rem;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
input[type=text],input[type=password]{width:100%}
main{max-width:46rem;margin:0 auto;padding:.5rem 1.125rem 3.75rem}
.screen{display:none}
.screen.active{display:block;animation:rise .5s ease .05s both}
@keyframes rise{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}

/* Knappar */
button{font:inherit;cursor:pointer}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;border-radius:2.25rem;padding:1rem 1.875rem;font-size:1.0625rem;
  background:var(--btn-bg);color:var(--accent-text);border:1px solid var(--accent);transition:background .2s}
.btn:hover{background:var(--muted)}
a.btn{text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.secondary{color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.wide{width:100%;margin-top:1.25rem}
.small{padding:.5rem 1rem;font-size:.9375rem}
/* Lämna spelet i onlinespelet: en diskret länk längst ned på skärmen, så att man inte lämnar av misstag.
   Svart i ljust läge, vit i mörkt läge. */
.leave-link{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:none;border:0;padding:.5rem;font:inherit;font-size:.9375rem;color:#000;
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leave-link{color:#fff}}
:root[data-theme="dark"] .leave-link{color:#fff}
/* Skärmarna med länken tonar bara in. Glider de in hamnar länken inte längst ned. */
#s-lobby.active,#s-wait.active{animation-name:fadein}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.stack{display:grid;gap:.75rem;margin-top:1.75rem}

/* Etikett med linje */
.lbl{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;margin:1.75rem 0 .6rem;color:var(--ink)}
.lbl::after{content:"";flex:1;height:1px;background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border-radius:2.25rem;padding:.5rem 1.1rem;border:1px solid var(--line);background:var(--btn-bg);color:var(--ink);font-size:1rem}
.chip[aria-pressed="true"],.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip:disabled{opacity:.5;cursor:default}
.diamonds{list-style:none;padding:0;margin:.5rem 0}
.diamonds li{position:relative;padding-left:1.25rem;margin:.35rem 0}
.diamonds li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.45rem;height:.45rem;background:var(--accent);transform:rotate(45deg)}
.err{color:var(--accent-text);min-height:1.5em}

/* Startsidan */
.hero{padding:2.5rem 0 .5rem;text-align:center} /* logga och slogan centrerade i sidled */
/* Loggan: transparent på ljus bakgrund, mörk variant i mörkt läge och på scenen */
.logo{display:block;height:auto}
.logo.dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo.light{display:none}
  :root:not([data-theme="light"]) .logo.dark{display:block}
}
:root[data-theme="dark"] .logo.light,body.night .logo.light{display:none}
:root[data-theme="dark"] .logo.dark,body.night .logo.dark{display:block}
.brand .logo{height:2.75rem;width:auto}
.hero h1 .logo{width:min(100%,28rem);margin-inline:auto}
.hero h1{font-family:var(--script);color:var(--accent);font-size:clamp(4.5rem,20vw,8rem);line-height:.9;font-weight:400}
/* Introtexten centrerad under loggan (samma bredd som loggan) och över knapparna */
.hero p{font-size:1.3125rem;line-height:1.45;width:min(100%,28rem);text-align:center;margin:1rem auto 0;color:var(--ink)}

/* Ritytan */
.turnhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.who{font-family:var(--script);color:var(--accent);font-size:1.6rem}
.sheet-wrap{display:flex;justify-content:center;margin-top:1rem}
/* Akvarellpapper: ljus gräddvit ton + upphöjd struktur (brus som belyses snett uppifrån).
   Canvasen målar vitt, och mix-blend-mode:multiply gör det vita genomskinligt mot papperet. */
.sheet{position:relative;filter:drop-shadow(0 6px 14px rgba(24,19,12,.18));
  background:
    linear-gradient(rgba(248,246,240,.5),rgba(248,246,240,.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23f6f3ec' surfaceScale='2.6' diffuseConstant='1.15'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    #ece9e2;
  background-size:auto,320px 320px,auto}
.sheet.v{width:100%}
.sheet.h{display:flex}
.paperclip{clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.dance-btn{border-color:var(--gold)!important;color:var(--gold)!important}
.dance-btn::before{content:"💃 "}
.dance-bar{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:36;transform:translateX(-50%);display:flex;gap:.75rem;align-items:center;width:max-content;max-width:calc(100% - 2rem);padding:.5rem .5rem .5rem 1rem;border-radius:999px;background:rgba(16,14,22,.85);color:#fff;font-size:.9375rem;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.dance-bar[hidden]{display:none}
body.dancing #postShow{opacity:.35;pointer-events:none}
body.dancing .figure{will-change:transform}
.zoom-badge{position:absolute;top:.4rem;right:.4rem;z-index:3;display:flex;gap:.3rem;align-items:center;padding:.3rem .6rem;border:0;border-radius:999px;background:rgba(16,14,22,.55);color:#fff;font:600 .8125rem/1 var(--replica);font-variant-numeric:tabular-nums;cursor:pointer;backdrop-filter:blur(2px)}
.zoom-badge[hidden]{display:none}
.zoom-badge:hover{background:rgba(16,14,22,.75)}
.stage-box{position:relative;overflow:hidden} /* klipper ritytan när man zoomar, annars blir sidan bredare och går att scrolla i sidled */
#pad{display:block;touch-action:none;cursor:crosshair;background:transparent;mix-blend-mode:multiply}
.sheet.v #pad{width:100%;aspect-ratio:600/340}
.sheet.h #pad{height:min(56vh,520px);aspect-ratio:340/600}
.foldline{position:absolute;pointer-events:none}
.sheet.v .foldline{left:0;right:0;bottom:calc(100% * 40 / 340);border-top:2px dashed #ccc}
.sheet.h .foldline{top:0;bottom:0;right:calc(100% * 40 / 340);border-left:2px dashed #ccc}
.tools{margin-top:1rem;display:grid;gap:.75rem}
.palette{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.sw{width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid var(--line);padding:0}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.customc{position:relative;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:#fff;cursor:pointer}   /* vit som pappret, så att pipetten syns i alla färger */
.customc[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.customc svg{width:1.35rem;height:1.35rem;pointer-events:none}
.customc input{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;opacity:0;cursor:pointer}
.customc:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.sizerow{display:flex;align-items:center;gap:.75rem;font-size:.9375rem}
.sizerow input{flex:1;accent-color:var(--accent)}
.dot{width:3rem;height:3rem;display:grid;place-items:center}
.dot i{display:block;border-radius:50%;background:#222}
.toolbtns{display:flex;flex-wrap:wrap;gap:.5rem}

/* Ansiktsvisning */
.face{display:grid;place-items:center;text-align:center;padding-top:1rem}
.face img{width:min(18rem,70vw);aspect-ratio:1;object-fit:cover;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);margin:1rem 0}
.count{font-family:var(--script);color:var(--accent);font-size:clamp(6rem,24vw,9rem);line-height:1}

/* Lobby */
.code{font-family:var(--script);color:var(--accent);font-size:clamp(4rem,18vw,6.5rem);letter-spacing:.08em;line-height:1}
.progress{display:flex;gap:.35rem;margin:1rem 0}
.progress span{flex:1;height:.4rem;background:var(--line)}
.progress span.done{background:var(--accent)}

/* Scenen */
.stage{position:relative;text-align:center;padding-top:1rem;min-height:70vh}
.stage h2{color:var(--gold)}
.stage .andnow{font-family:var(--script);color:var(--gold);font-size:clamp(3.4rem,14vw,5rem);line-height:1;margin:1rem 0}
.beam{position:fixed;top:-10vh;width:40vw;height:130vh;pointer-events:none;opacity:0;transition:opacity .8s;
  background:linear-gradient(to bottom,rgba(255,240,210,.28),rgba(255,240,210,0) 85%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);mix-blend-mode:screen}
.beam.l{left:-5vw;transform-origin:50% 0;transform:rotate(-18deg)}
.beam.r{right:-5vw;transform-origin:50% 0;transform:rotate(18deg)}
.stage.lit .beam{opacity:1}
.stage.lit .beam.l{animation:swayL 3s ease-in-out infinite alternate}
.stage.lit .beam.r{animation:swayR 3s ease-in-out infinite alternate}
@keyframes swayL{from{transform:rotate(-24deg)}to{transform:rotate(-8deg)}}
@keyframes swayR{from{transform:rotate(24deg)}to{transform:rotate(8deg)}}
/* Gubben står på en scen utan papper. Den ska få plats på skärmen utan att man scrollar:
   --fit-h är skärmhöjden minus sidhuvud, marginaler och scengolv. */
.podium{--fit-h:calc(100vh - 10rem);position:relative;margin:1rem auto 0}
@supports (height:100svh){.podium{--fit-h:calc(100svh - 10rem)}}
.figure-scroll{max-width:100%;display:flex;justify-content:center}
.figure{perspective:1600px;display:inline-flex;margin:0 auto;position:relative;isolation:isolate}
.figure.v{flex-direction:column;width:min(100%,34rem,calc(var(--fit-h) * 600 / (340 * var(--n) - 40 * (var(--n) - 1))))}
.figure.h{flex-direction:row;width:min(100%,calc(var(--n) * 14rem),calc(var(--fit-h) * (340 * var(--n) - 40 * (var(--n) - 1)) / 600))}
.figure canvas{display:block;background:transparent;filter:drop-shadow(0 0 1px var(--halo)) drop-shadow(0 0 2px var(--halo))}
/* Strålkastarljuset bakom gubben. Mörkt bläck får ett ljust sken, ljust bläck ett svagt guldsken.
   Konturen (--halo) har motsatt ton, så att även avvikande färger syns. */
.stage{--spot:rgba(193,156,97,.16);--halo:rgba(255,248,235,.55)}
.stage[data-ink="dark"]{--spot:rgba(255,244,224,.96);--halo:rgba(16,14,22,.45)}
.figure::before{content:"";position:absolute;inset:-5% -8%;z-index:-1;border-radius:28%;background:var(--spot);filter:blur(22px);opacity:0;transition:opacity .8s}
.stage.lit .figure::before{opacity:1}
/* Scengolvet som gubben står på */
.boards{height:clamp(1.5rem,6vw,2.5rem);width:min(100%,40rem);margin:-.2rem auto 0;
  background:
    radial-gradient(ellipse 28% 45% at 50% 18%,rgba(0,0,0,.45),rgba(0,0,0,0)),
    linear-gradient(transparent calc(100% - .4rem),#24140a calc(100% - .4rem)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 9%),
    linear-gradient(#7a5130,#3b2313);
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.figure.v canvas{width:100%}
/* Delarna överlappar med remsan nedanför vikningen (40 av 340 punkter), precis som på papper */
.figure.v canvas + canvas{margin-top:calc(-100% * 40 / 600)}
.figure.h canvas{flex:none;width:calc(100% * 340 / (340 * var(--n) - 40 * (var(--n) - 1)));height:auto}
.figure.h canvas + canvas{margin-left:calc(-100% * 40 / (340 * var(--n) - 40 * (var(--n) - 1)))}
.fold{transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .2s;backface-visibility:hidden}
.figure.v .fold{transform-origin:top center}
.figure.h .fold{transform-origin:left center}
.figure.v .fold.closed{transform:rotateX(-95deg);opacity:0}
.figure.h .fold.closed{transform:rotateY(95deg);opacity:0}
.figname{font-family:var(--script);color:var(--gold);font-size:clamp(2.6rem,10vw,4rem);line-height:1.05;margin-top:1.25rem;min-height:1.1em;filter:blur(0);transition:filter .6s,opacity .6s}
.figname.blur{filter:blur(8px);opacity:.3}
.place{color:var(--on-night);margin:.25rem 0}
body.night .btn{background:transparent;color:#fff;border-color:var(--gold)}
body.night .btn.primary{background:var(--accent);border-color:var(--accent)}
body.night input[type=text]{background:#1a1721;color:#fff;border-color:#3d3746}
.guess{max-width:26rem;margin:.75rem auto 0}
.guess p{color:var(--on-night);margin:0 0 .75rem}
.guess-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.guess-opts .btn{width:100%;padding-inline:.5rem}
body.night .guess-opts .btn.right{background:#2f7d4f;border-color:#2f7d4f}
body.night .guess-opts .btn.wrong{border-color:var(--accent);color:var(--accent)}
/* Party i närheten */
.invite{position:fixed;inset:0;z-index:38;display:grid;place-items:center;padding:1rem;background:rgba(16,14,22,.6);animation:fadein .25s ease}
.invite-card{width:100%;max-width:24rem;padding:1.75rem 1.5rem;text-align:center;background:var(--card);color:var(--ink);animation:rise .35s ease both}
.invite-from{margin:0;font-family:var(--script);font-size:1.6rem;color:var(--accent)}
.invite-card h2{margin:.25rem 0 .5rem}
/* På scenen (mörkt tema) blir knapparna annars vita på den vita rutan */
body.night .invite-card .btn:not(.primary){background:var(--btn-bg);color:var(--accent-text);border-color:var(--accent)}
body.night .invite-card h2{color:var(--head)}
.update-bar{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.6rem 1rem;background:var(--accent);color:#fff;font-weight:600;text-align:center}
.update-bar[hidden]{display:none}
.update-bar .btn{background:#fff;color:var(--accent);border-color:#fff}
.parts-info{font-weight:600;margin:.75rem 0;padding:.6rem .8rem;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Catchphrase-inspelningen före avtäckningen */
.voice{margin-top:1.25rem}
.voice .actions{margin-top:0}
.voice .btn.recording{background:var(--accent);border-color:var(--accent);color:#fff;animation:pulse 1.2s ease-in-out infinite}
#voiceAgain{margin-top:.5rem}
.decide{display:grid;gap:.4rem;max-width:26rem;margin:1rem auto 0;text-align:left}
.decide .actions{margin-top:.5rem}
.where-now{margin:.25rem 0 0;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.5rem}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40} /* över välkomstrutan, så att konfettin syns där */

/* Galleri */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin-top:1rem}
.filters label{font-size:.9375rem;display:grid;gap:.25rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10rem,40%),1fr));grid-auto-flow:row dense;align-items:start;gap:1.125rem;margin-top:1.5rem}
.card{background:none;border:0;padding:0;text-align:left;color:inherit}
.thumb{background:#fff;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
/* Hela gubben syns, centrerad och nedskalad så att den får plats i rutan */
.thumb{position:relative}
.thumb canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:.5rem}
.card b{display:block;font-weight:400;font-family:var(--script);color:var(--accent);font-size:1.4rem;line-height:1.1;margin-top:.4rem}
.card span{font-size:.875rem;color:var(--fine)}
/* Kartvyn */
/* Kartpanelen: tre lägen. --shown är hur mycket av panelen som syns. */
.mapsheet{--peek:4rem;--sheet-h:88svh;--shown:var(--peek);position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--shown);
  max-width:46rem;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-bottom:0;
  border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);
  transition:height .32s cubic-bezier(.2,.8,.2,1)}
.mapsheet[hidden]{display:none}
.mapsheet[data-pos="half"]{--shown:52svh}
.mapsheet[data-pos="full"]{--shown:var(--sheet-h)}
.mapsheet.dragging{transition:none}
.sheet-grip{flex:none;display:grid;justify-items:center;gap:.35rem;width:100%;height:var(--peek);padding:.5rem 1rem;background:none;border:0;color:var(--ink);cursor:grab;touch-action:none;font:inherit}
.sheet-grip:active{cursor:grabbing}
.grip-bar{width:2.75rem;height:5px;border-radius:3px;background:var(--line)}
.grip-text{font-size:.9375rem}
.grip-text span{color:var(--fine)}
.galmap{flex:1;min-height:0;background:var(--muted);z-index:0;padding-bottom:env(safe-area-inset-bottom,0px)}
body.has-sheet main{padding-bottom:6rem}
/* Med kartan uppe går det att rulla upp gubbarna ovanför den */
body.has-sheet[data-sheet="half"] main,body.has-sheet[data-sheet="full"] main{padding-bottom:56svh}
.pin.on span{background:var(--head);outline:3px solid var(--accent)}
@media (prefers-reduced-motion:reduce){.mapsheet{transition:none}}
.galmap>p{padding:1rem}
.pin{background:none;border:0}
.pin span{display:grid;place-items:center;width:36px;height:36px;background:var(--accent);color:#fff;font:600 .9375rem/1 var(--replica);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* Ansikten */
.facelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:1rem;margin-top:1rem}
.facelist figure{margin:0}
.facelist img{width:100%;aspect-ratio:1;object-fit:cover}
.facelist figcaption{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;margin-top:.25rem}
.linkbtn{background:none;border:0;color:var(--accent-text);padding:0;text-decoration:none}
.linkbtn:hover{text-decoration:underline}

@media (min-width:45rem){
  body{font-size:1.3125rem;line-height:1.43}
  h2{font-size:2.625rem}
}
@media (prefers-reduced-motion:reduce){
  .screen.active{animation:none}
  .fold{transition:none}
  .stage.lit .beam{animation:none}
}

/* Välkomstrutan med introljudet */
.intro{position:fixed;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:2.5rem;padding:1.5rem;
  background:var(--night);text-align:center;transition:opacity .45s ease}
.intro.gone{opacity:0;pointer-events:none}
/* Sidhuvudet med ljudknappen ligger ovanpå välkomstrutan, så att man kan stänga av ljudet innan Spela.
   Den lilla loggan döljs så länge rutan syns, eftersom den stora redan står där. */
.top{position:relative;z-index:35}
body:has(.intro:not([hidden]):not(.gone)) .brand{visibility:hidden}
.intro-credit{margin:-1.25rem 0 0;color:#ffffffa6;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.back-link{display:inline-flex;gap:.3rem;align-items:center;margin:.25rem 0 -.25rem;padding:.5rem 0;background:none;border:0;color:var(--accent-text);font:inherit;font-size:.9375rem;cursor:pointer}
.back-link::before{content:"←"}
.back-link:hover{text-decoration:underline}
.stage-back{position:absolute;left:0;top:.25rem;z-index:2;background:none;border:0;color:var(--gold);font:inherit;font-size:.9375rem;padding:.5rem .25rem;cursor:pointer}
.stage-back:hover{text-decoration:underline}
.more-below{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:35;transform:translateX(-50%);display:flex;gap:.4rem;align-items:center;padding:.6rem 1.1rem;border-radius:999px;border:0;background:var(--gold);color:#100e16;font:600 .9375rem/1 var(--replica);box-shadow:0 4px 18px rgba(0,0,0,.4);cursor:pointer;animation:nudge 1.4s ease-in-out infinite}
.more-below[hidden]{display:none}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}
@media (prefers-reduced-motion:reduce){.more-below{animation:none}}
.intro-logo{width:min(80vw,26rem);height:auto}
.intro .btn{font-size:1.25rem;padding:1.1rem 2rem;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.intro .btn{animation:none}.intro{transition:none}}

/* Öppna onlineomgångar */
.gamelist{display:grid;gap:.6rem}
.gamerow{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.8rem 1rem;border:1px solid var(--line);background:var(--card);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.gamerow b{display:block;font:400 1.5rem/1.1 var(--script);color:var(--accent-text)}
.gamerow span{display:block;font-size:.875rem;color:var(--fine)}
.gamerow .seats{color:var(--ink);font-weight:600;margin-top:.15rem}
.gamerow .btn{flex:none}
#backToList{margin-top:1rem}
.gamerow .who-in{color:var(--ink)}

/* Galleriet: bläddra mellan sidorna */
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin:2rem 0 1rem;font-variant-numeric:tabular-nums}
.pager[hidden]{display:none}
.pager .chip:disabled{opacity:.4}

/* Timern när man ritar */
.timer{margin-left:auto;padding:.2rem .7rem;border-radius:999px;background:var(--muted);color:var(--ink);font:600 1rem/1.3 var(--replica);font-variant-numeric:tabular-nums}
.timer[hidden]{display:none}
.timer.low{background:var(--accent);color:#fff;animation:tick 1s steps(2) infinite}
.timer.over{background:#5c7a99;color:#fff}
@keyframes tick{50%{opacity:.55}}
.timer-line{font-weight:600;font-variant-numeric:tabular-nums}
.timer-line.over{color:#5c7a99}

/* Händerna */
.hands-note{margin:.5rem 0;padding:.5rem .8rem;border-left:4px solid var(--gold);background:var(--muted);font-size:.9375rem}
.hands-note.todo{border-color:var(--accent);font-weight:600}
.hands-note[hidden]{display:none}
.hands-ask{display:grid;gap:.6rem;margin-top:.5rem}
.hands-ask[hidden]{display:none}
.hands-q{font-family:var(--script);color:var(--accent);font-size:1.6rem;text-align:center;margin:.2rem 0}
.link-btn{background:none;border:0;color:var(--fine);text-decoration:underline;font:inherit;font-size:.9375rem;padding:.4rem;cursor:pointer}

/* Musiken som delas mellan telefonerna i samma rum */
.band-note{font-style:italic}
.band-note[hidden]{display:none}

/* Gubbar från galleriet som dansar på ett discogolv medan man väntar (js/vantdans.js) */
.mini{display:flex}
.mini.v{flex-direction:column;width:5.5rem}
.mini.v canvas{width:100%;display:block}
.mini.v canvas + canvas{margin-top:calc(-100% * 40 / 600)}
.mini.h canvas{height:6rem;width:auto;display:block}
.mini.h canvas + canvas{margin-left:calc(-6rem * 40 / 600)}
.dancers{position:relative;height:17rem;margin:1.5rem 0 4.5rem;border-radius:1.25rem;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 70% at 50% 0,#2a1d45 0,#120d1f 60%,#07050c 100%)}
.dancers:empty{display:none}
/* Dansgolvet: rutor som lyser i olika färger */
.disco-floor{position:absolute;left:-10%;right:-10%;bottom:0;height:4.2rem;transform:perspective(14rem) rotateX(55deg);transform-origin:50% 100%;
  background:repeating-conic-gradient(from 0deg,#ff3fa4 0 25%,#3fd0ff 0 50%) 0 0/2.6rem 2.6rem;opacity:.35;animation:floor 1.97s steps(1) infinite}
@keyframes floor{50%{filter:hue-rotate(140deg)}}
/* Discokulan: speglande rutor som snurrar */
.disco-ball{position:absolute;top:-.5rem;left:50%;width:3.6rem;height:3.6rem;margin-left:-1.8rem;border-radius:50%;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 .32rem,rgba(0,0,0,.35) .32rem .38rem),repeating-linear-gradient(0deg,transparent 0 .32rem,rgba(0,0,0,.35) .32rem .38rem),
  radial-gradient(circle at 35% 30%,#fff 0,#d9dbe6 22%,#8a8fa3 55%,#3b3d4a 100%);background-size:200% 100%,100% 100%,100% 100%;
  box-shadow:0 0 1.5rem rgba(255,255,255,.45);animation:ball 3s linear infinite}
.disco-ball::before{content:"";position:absolute;left:50%;top:-2rem;width:1px;height:2rem;background:#aaa}
@keyframes ball{to{background-position:200% 0,0 0,0 0}}
/* Ljusprickar från kulan som far runt i rummet */
.disco-dots{position:absolute;left:50%;top:1.3rem;width:46rem;height:46rem;margin:-23rem 0 0 -23rem;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0 .14rem,transparent .2rem) 0 0/3.1rem 3.4rem,radial-gradient(circle,rgba(255,220,120,.7) 0 .12rem,transparent .18rem) 1.4rem 1.7rem/4.3rem 3.9rem;
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 62%);mask:radial-gradient(circle,#000 30%,transparent 62%);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Strålkastare i olika färger som sveper över golvet */
.disco-beam{position:absolute;top:-2rem;width:7rem;height:22rem;margin-left:-3.5rem;transform-origin:50% 0;z-index:1;mix-blend-mode:screen;filter:blur(6px);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);opacity:.5}
.disco-beam.a{left:12%;background:linear-gradient(#ff3fa4,transparent 90%);animation:beamA 3.9s ease-in-out infinite alternate}
.disco-beam.b{left:88%;background:linear-gradient(#3fd0ff,transparent 90%);animation:beamB 3.1s ease-in-out infinite alternate}
.disco-beam.c{left:50%;background:linear-gradient(#ffe14a,transparent 90%);animation:beamC 4.6s ease-in-out infinite alternate;opacity:.35}
@keyframes beamA{from{transform:rotate(-35deg)}to{transform:rotate(25deg)}}
@keyframes beamB{from{transform:rotate(35deg)}to{transform:rotate(-30deg)}}
@keyframes beamC{from{transform:rotate(-40deg)}to{transform:rotate(40deg)}}
/* Dansarna flyttar sig i sidled (js/vantdans.js) och byter plats med varandra */
.dancer-spot{position:absolute;bottom:.6rem;left:50%;z-index:3;transition:left 1.8s cubic-bezier(.45,0,.4,1);transform:translateX(-50%)}
.dancer{margin:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;animation:bop .98s ease-in-out infinite;transform-origin:50% 100%}
.dancer .mini canvas{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.8))}
.dancer .mini.v canvas{transform-origin:50% 0;animation:wig .49s ease-in-out infinite alternate}
.dancer .mini.h canvas{transform-origin:0 50%;animation:wig .49s ease-in-out infinite alternate}
.dancer figcaption{font-family:var(--script);color:#ffe9b8;text-shadow:0 0 .4rem #ff3fa4;font-size:1.05rem;line-height:1;max-width:7rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes bop{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-.5rem) rotate(4deg)}}
@keyframes wig{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.dancer,.dancer .mini canvas,.disco-ball,.disco-dots,.disco-beam,.disco-floor{animation:none}.dancer-spot{transition:none}}

.disco-gang{position:absolute;top:3.6rem;left:0;right:0;z-index:4;margin:0;text-align:center;font-family:var(--script);font-size:1.5rem;color:#ffe9b8;text-shadow:0 0 .5rem #ff3fa4}
.dancer .mini.h canvas{height:var(--h,6rem)}
.dancer .mini.h canvas + canvas{margin-left:calc(-1 * var(--h,6rem) * 40 / 600)}

/* Power-läget: gruppbilden */
.group-figs{display:flex;justify-content:center;align-items:flex-end;margin:1.5rem 0;perspective:1600px}
.gfig{position:relative;z-index:2;flex:none;transition:transform .4s}
.gfig.behind{z-index:1;transform:translateY(-6%) scale(.92)}
.gfig .mini.v,.gfig .mini.h{width:100%}
.gfig .mini.h canvas{height:auto;width:calc(100% * 340 / (340 * var(--n,3) - 40 * (var(--n,3) - 1)))}
.gfig .mini canvas{transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s;filter:drop-shadow(0 0 1px var(--halo)) drop-shadow(0 0 2px var(--halo))}
.gfig .mini.h canvas + canvas{margin-left:calc(-100% * 40 / (340 * var(--n,3) - 40 * (var(--n,3) - 1)))}
.gfig .mini.v canvas.closed{transform:rotateX(-95deg);opacity:0}
.gfig .mini.h canvas.closed{transform:rotateY(95deg);opacity:0}
/* Gänget dansar tillsammans */
.group-figs.dancing .gfig{animation:bop .98s ease-in-out infinite;transform-origin:50% 100%}
.group-figs.dancing .gfig.behind{animation-name:bopBack}
.group-figs.dancing .mini.v canvas{transform-origin:50% 0;animation:wig .49s ease-in-out infinite alternate}
.group-figs.dancing .mini.h canvas{transform-origin:0 50%;animation:wig .49s ease-in-out infinite alternate}
@keyframes bopBack{0%,100%{transform:translateY(-6%) scale(.92) rotate(4deg)}50%{transform:translateY(-10%) scale(.92) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.group-figs.dancing .gfig,.group-figs.dancing .mini canvas{animation:none}}
#groupPost .figname{margin-top:.5rem}
#groupPre[hidden],#groupPost[hidden],#groupDecide[hidden],#groupActions[hidden],#powerRow[hidden]{display:none}

/* Galleriet: gruppbilder från power-läget tar två kolumner */
.card.group{grid-column:span 2}
.card.group .thumb{aspect-ratio:3/2}
.card .thumb{width:100%}

/* Admin i galleriet */
.admin-row{margin:2rem 0 1rem;text-align:center;font-size:.875rem;color:var(--fine)}
.card-cell{display:flex;flex-direction:column;gap:.5rem;align-self:stretch}
.card-cell .card{width:100%}
.card-cell .admin-tools{margin-top:auto}
.card-cell.group{grid-column:span 2}
.admin-tools{display:flex;gap:.4rem;flex-wrap:wrap}
.chip.small{padding:.3rem .7rem;font-size:.8125rem}
.chip.danger{border-color:var(--accent);color:var(--accent-text)}
/* Kort lapp längst ned, till exempel "Länken är kopierad" */
.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,1rem);opacity:0;pointer-events:none;z-index:60;
  padding:.6rem 1.1rem;border-radius:999px;background:#100e16;color:#fff;font-size:.9375rem;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}