:root {
  --bg: #0e0e12;
  --panel: #17171d;
  --line: #2b2b34;
  --ink: #ecece f;
  --ink: #ececef;
  --dim: #9a9aa6;
  --accent: #f2c14e;
  --pad: clamp(14px, 4vw, 28px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* hidden-attributet har lag specificitet och overskrivs av vilken display-regel som
   helst - .cta { display: inline-flex } gjorde att knappen syntes trots hidden. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2 { line-height: 1.15; margin: 0; }
img, video, canvas { max-width: 100%; }

/* ---------- gemensamt ---------- */

.bar {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: var(--pad); border-bottom: 1px solid var(--line); background: var(--panel);
}
.bar h1 { font-size: clamp(19px, 4.5vw, 26px); }
.back { color: var(--dim); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--ink); }
.wrap { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: var(--pad); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 0 clamp(28px, 8vw, 54px);
  background: var(--accent); color: #16160f;
  border: 0; border-radius: 999px;
  font: inherit; font-size: clamp(18px, 4.6vw, 22px); font-weight: 650;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 26px -10px rgba(242,193,78,.7);
  -webkit-tap-highlight-color: transparent;
}
.cta:hover { filter: brightness(1.07); }
.cta:active { transform: translateY(1px); }
.cta.small { min-height: 48px; font-size: 16px; padding: 0 26px; }

.sound {
  background: rgba(22,22,27,.72); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 17px; font: inherit; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sound:hover { background: rgba(40,40,48,.85); }
.sound.floating { position: fixed; right: var(--pad); bottom: calc(var(--pad) + 42px); z-index: 3; }

.site-footer {
  padding: 18px var(--pad) 22px; border-top: 1px solid var(--line);
  background: var(--panel); text-align: center;
}
.site-footer nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
                   color: var(--dim); font-size: 13px; }
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- dansaren ---------- */

/* Videon ar en luma-matte: bild i ovre halvan, mask i den nedre. Canvasen visar
   resultatet, video-elementet ar bara textur och ska aldrig ses. */
.dancer { position: relative; width: 100%; height: 100%; }
.dancer canvas { display: block; width: 100%; height: 100%; }
.dancer video { position: absolute; width: 1px; height: 1px; opacity: 0;
                pointer-events: none; left: 0; top: 0; }

/* ---------- startsidan ---------- */

.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(16px, 4vh, 34px);
  padding: var(--pad); text-align: center;
}
.hero h1 {
  font-size: clamp(30px, 9vw, 62px); font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, #b9b9c6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Hojdbegransningen ligger inbakad i bredden (52vh * 9/16) i stallet for som
   max-height. Med aspect-ratio + max-height loste iOS Safari barnens height: 100%
   mot den OKLAMPADE hojden - canvasen blev hogre an rutan och la sig som ett
   osynligt lock over Installationer-knappen under. Nar bredden ar det enda som
   styr kan det aldrig handa, och rutan ar alltid exakt 9:16. */
.hero .stage {
  width: min(76vw, 300px, calc(52vh * 9 / 16));
  width: min(76vw, 300px, calc(52dvh * 9 / 16));
  aspect-ratio: 9 / 16;
}
/* Pa startsidan ar Hannes dekor: ytan (mest genomskinlig) ska inte fanga tryck. */
.hero .dancer { pointer-events: none; }

/* ---------- installationslistan ---------- */

.grid { list-style: none; margin: 0 0 34px; padding: 0;
        display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid li { position: relative; }
.grid a { display: block; border: 1px solid var(--line); border-radius: 12px;
          overflow: hidden; text-decoration: none; background: var(--panel); }
.grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.grid span { display: block; padding: 9px 11px; font-size: 14px; }
.grid li.empty { grid-column: 1/-1; color: var(--dim); border: 1px dashed var(--line);
                 border-radius: 12px; padding: 22px; text-align: center; }
.grid [data-del] { position: absolute; top: 7px; right: 7px;
                   background: rgba(14,14,18,.82); color: var(--dim);
                   border: 1px solid var(--line); border-radius: 8px;
                   padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.grid [data-del]:hover { color: #ff9c9c; border-color: #7a3535; }

.new h2 { font-size: 20px; }
.existing { margin-bottom: 8px; }
.newrow { margin: 4px 0 30px; }
.new { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 24px; }
.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line);
         border-radius: 999px; padding: 11px 18px; font: inherit; font-size: 14px;
         cursor: pointer; }
.ghost:hover { background: #22222a; color: var(--ink); }
.hint { color: var(--dim); font-size: 14px; margin: 6px 0 18px; }
.filerow { display: flex; gap: 10px; flex-wrap: wrap; }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn span { display: inline-block; border: 1px solid var(--line); background: #22222a;
                border-radius: 10px; padding: 12px 20px; cursor: pointer; }
.filebtn span:hover { background: #2c2c36; }
/* Kameraknappen visas bara dar den gor nytta. capture-attributet ignoreras pa
   skrivbord (man far en vanlig filvaljare, samma som "Valj bild"), sa dar doljs
   knappen: en pekare som kan hovra ar i praktiken mus/styrplatta. */
@media (hover: hover) and (pointer: fine) {
  .filebtn.camera { display: none; }
}

/* Inget antydde att bilden gick att dra, sa placeringen forblev osynlig bakom
   storleksreglaget. Nu ligger en instruktion over bilden tills man rort den, och
   Hannes far en ram medan man drar. */
/* touch-action: pan-y pa ytan, none bara pa Hannes sjalv.
   Med `none` pa hela bilden gick det inte att scrolla forbi den pa mobil, och nar
   bilden ar hog fanns ingen yta kvar att scrolla fran - spara-knappen blev onabar.
   Nu ar det Hannes som ar handtaget, och bilden slapper igenom vertikal scroll. */
.canvas { position: relative; margin: 14px 0; border-radius: 12px; overflow: hidden;
          background: #000; touch-action: pan-y; cursor: grab;
          outline-offset: 3px;
          max-width: 480px; }
.canvas:focus-visible { outline: 2px solid var(--accent); }
.canvas.dragging { cursor: grabbing; }
.canvas img { display: block; width: 100%; }
/* tomt fack innan en bild valts, sa reglagen och spara-knappen syns fran borjan */
.canvas.empty { aspect-ratio: 4/3; display: grid; place-items: center;
                border: 1px dashed var(--line); background: #101014; }
.canvas.empty img, .canvas.empty .dancer, .canvas.empty::before { display: none; }
.drop { color: var(--dim); font-size: 14px; margin: 0; }
.canvas:not(.empty) .drop { display: none; }
.canvas .dancer { position: absolute; width: 30%; left: 50%; top: 70%;
                  transform: translate(-50%, -50%);
                  touch-action: none;            /* handtaget: harifran dras han */
                  cursor: grab; }
.canvas.dragging .dancer { cursor: grabbing; }
.canvas .dancer canvas { filter: drop-shadow(0 3px 14px rgba(0,0,0,.5)); }

/* ram runt Hannes sa man ser vad man flyttar */
.canvas .dancer::after {
  content: ''; position: absolute; inset: -6px; border-radius: 8px;
  border: 1.5px dashed rgba(242,193,78,0); transition: border-color .15s;
  pointer-events: none;
}
.canvas:hover .dancer::after { border-color: rgba(242,193,78,.45); }
.canvas.dragging .dancer::after { border-color: rgba(242,193,78,.95); }

.canvas::before {
  content: 'Dra Hannes, eller använd reglagen nedan';
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 10px; text-align: center; font-size: 13px;
  color: rgba(255,255,255,.9); background: linear-gradient(transparent, rgba(0,0,0,.75));
  transition: opacity .2s; pointer-events: none;
}
.canvas.dragging::before, .canvas.touched::before { opacity: 0; }

.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 9px 0;
            max-width: 480px; }
.controls label { color: var(--dim); font-size: 14px; min-width: 118px; }
.controls input[type=range] { flex: 1; min-width: 150px; accent-color: var(--accent); }
.controls input[type=text] { flex: 1; min-width: 160px; background: #111; color: var(--ink);
                             border: 1px solid var(--line); border-radius: 8px;
                             padding: 11px 13px; font: inherit; }
.controls code { color: var(--dim); font-size: 13px; }
/* Fast i nederkanten, inte sticky.
   `position: sticky; bottom: 0` gjorde ingenting: raden ar sist i sin foralder, sa det
   finns inget utrymme kvar att fasta i - den lag kvar i flodet och hamnade utanfor
   viewporten pa lagre skarmar (matt: synlig pa 1440x900, utanfor pa 1280x720).
   Fixed ar forutsagbart pa alla storlekar. */
.saverow {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 12px var(--pad);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(14, 14, 18, .93);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* utrymme sa den fasta raden aldrig taecker sidans egen fot */
body.has-editor .wrap { padding-bottom: 92px; }
body.has-editor .site-footer { margin-bottom: 76px; }
#msg { font-size: 14px; }
#msg.err { color: #ff9c9c; }
#msg.ok { color: #b3e08a; }

/* ---------- en installation ---------- */

/* Fast hojd, inte bara min-height: annars vaxer scenen med en hog bild i stallet
   for att begransa den — contain-berakningen i dancer.js laser da av den redan
   uppsvallda scenhojden, och bilden blir avklippt utan scroll. Med hojden last
   till fonstret far scenen alltid ratt matt och hela bilden far plats. */
body.view { overflow: hidden; height: 100vh; height: 100dvh; }
/* Bilden beskärs aldrig: den visas hel och centrerad, med svarta fält där
   proportionerna inte stämmer med skärmen. Vill man se den större vänder man
   på telefonen. Ramen (#frame) får bildens visade mått av dancer.js, så att
   Hannes procentposition och procentbredd är relativa mot bilden — inte skärmen. */
.scene {
  flex: 1; position: relative; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.frame { position: relative; flex: none; max-width: 100%; max-height: 100%; }
.frame .bg { display: block; width: 100%; height: 100%; object-fit: contain; }
.scene .dancer { position: absolute; transform: translate(-50%, -50%); }
/* Navigering ovanpa installationen. Ligger overst till vanster sa den inte krockar
   med ljudknappen nere till hoger, och har egen bakgrund for att vara lasbar mot
   vilken uppladdad bild som helst. */
.overlay-nav { position: fixed; top: var(--pad); left: var(--pad); z-index: 4;
               display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
        background: rgba(18,18,23,.72); color: rgba(255,255,255,.92);
        border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
        font-size: 14px; text-decoration: none; white-space: nowrap;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        -webkit-tap-highlight-color: transparent; }
.pill:hover { background: rgba(38,38,46,.86); color: #fff; }
.pill:active { transform: translateY(1px); }
body.view .site-footer { position: relative; z-index: 4; }

.prose { max-width: 640px; }
.prose h1 { font-size: 26px; margin-bottom: 14px; }
.prose h2 { font-size: 17px; margin: 26px 0 6px; color: var(--accent); }
.prose p { margin: 0 0 12px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.placeholder { color: var(--dim); border-left: 3px solid var(--accent);
               padding-left: 14px; }

/* width/height star i markup sa webblasaren reserverar utrymmet innan bilden hunnit in
   och sidan inte hoppar till. */
.portrait { margin: 0 0 26px; max-width: 300px; }
.portrait.centered { margin-left: auto; margin-right: auto; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 12px;
                border: 1px solid var(--line); background: #101014; }
.portrait figcaption { margin-top: 9px; color: var(--dim); font-size: 13px; text-align: center; }

.prose { margin-left: auto; margin-right: auto; }
.prose .lead { font-size: clamp(17px, 4.2vw, 20px); line-height: 1.5; text-align: center;
               max-width: 30em; margin: 0 auto; color: var(--ink); }
/* Egen rad, dampad och med luft over: den ska lasas som en eftertanke, inte som
   poangen i en vits. */
.prose .aside { text-align: center; max-width: 30em; margin: 22px auto 0;
                color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .cta:active { transform: none; }
}