/* Junior Skak – styling. Alle stier er relative til denne fil. */

@font-face { font-family: 'Fredoka'; font-weight: 400; font-display: swap; src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }

:root {
  --nat: #24103A;
  --lilla: #3D1660;
  --lilla-2: #3A1B5F;
  --lilla-kant: #5B3383;
  --lilla-ramme: #4A2370;
  --rosa: #FF9CC8;
  --rosa-moerk: #B8467F;
  --rosa-lys: #FFE3F0;
  --guld: #F5C451;
  --tekst: #F3E6FA;
  --tekst-2: #CDB5DE;
  --tekst-3: #A88BC0;
  --moerk-tekst: #2A0F42;
  --fare: #FF6B8E;
  --board: 340px;
  --pad-t: max(10px, env(safe-area-inset-top));
  --pad-b: max(10px, env(safe-area-inset-bottom));
  --pad-l: max(14px, env(safe-area-inset-left));
  --pad-r: max(14px, env(safe-area-inset-right));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--nat);
  color: var(--tekst);
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
  font-weight: 500;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

body { background: var(--nat); }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--guld); outline-offset: 2px; }
svg { display: block; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { position: fixed; inset: 0; z-index: 1; }

.screen {
  position: absolute;
  inset: 0;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  display: flex;
  flex-direction: column;
}

/* ---------- Knapper ---------- */

.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease;
}
.knap svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.knap:active { transform: translateY(3px); }

.knap-primaer { border: none; background: var(--rosa); color: var(--moerk-tekst); box-shadow: 0 5px 0 var(--rosa-moerk); font-weight: 700; }
.knap-primaer:active { box-shadow: 0 2px 0 var(--rosa-moerk); }
.knap-primaer svg { fill: var(--moerk-tekst); stroke: var(--moerk-tekst); }
.knap-sekundaer { border: 2px solid var(--lilla-kant); background: var(--lilla-2); color: var(--tekst); }
.knap-sekundaer.fare { color: var(--fare); border-color: #7a3a63; }
.knap-stor { min-height: clamp(52px, 15vh, 66px); font-size: clamp(20px, 6vh, 27px); padding: 0 32px 0 26px; }
.knap-stor svg { width: 26px; height: 26px; }

.knap-raekke { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.rund-knap {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--lilla-kant); background: var(--lilla-2); color: var(--tekst);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rund-knap svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Logo ---------- */

.logo { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-weight: 700; }
.logo-label {
  display: inline-block; transform: rotate(-6deg); margin-left: 8px;
  padding: 5px 16px; border-radius: 999px; background: var(--rosa); color: var(--moerk-tekst);
  font-size: clamp(15px, 5vh, 22px); letter-spacing: 1px; box-shadow: 0 4px 0 var(--rosa-moerk);
}
.logo-tekst { font-size: clamp(56px, 24vh, 128px); letter-spacing: 4px; color: var(--rosa-lys); text-shadow: 0 6px 0 var(--rosa-moerk); margin-top: 2px; }
.logo-lille { align-items: center; }
.logo-lille .logo-tekst { font-size: clamp(36px, 12vh, 64px); text-shadow: 0 4px 0 var(--rosa-moerk); }
.logo-lille .logo-label { font-size: clamp(13px, 3.6vh, 17px); }

/* ---------- Stjerner ---------- */

.stjerne-ikon {
  display: inline-block; width: 22px; height: 22px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 L14.9 8.6 L21.5 9.3 L16.6 13.8 L18 20.3 L12 17 L6 20.3 L7.4 13.8 L2.5 9.3 L9.1 8.6 Z' fill='%23F5C451'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stjerne-ikon.lille { width: 15px; height: 15px; }
.stjerne-pille {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px;
  border-radius: 999px; background: var(--lilla-2); border: 2px solid var(--lilla-kant);
  font-size: 20px; font-weight: 600;
}

/* ---------- Avatarer ---------- */

.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar svg { width: 76%; height: 76%; }
.avatar-lille { width: 50px; height: 50px; }
.avatar-ugle { background: #E8D4F5; }
.avatar-ugle svg { width: 86%; height: 86%; }

/* ---------- Profiler ---------- */

#s-profiler { align-items: center; justify-content: center; gap: clamp(8px, 3vh, 20px); }
.skaerm-titel { margin: 0; font-size: clamp(22px, 7vh, 32px); font-weight: 600; text-align: center; }
.profil-liste { display: flex; gap: clamp(12px, 3vw, 24px); flex-wrap: wrap; justify-content: center; max-width: 100%; overflow-y: auto; padding: 6px; }
.profil-kort {
  width: clamp(104px, 28vh, 140px); padding: 12px 8px; border-radius: 22px;
  border: 2px solid var(--lilla-kant); background: var(--lilla-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.profil-kort .avatar { width: clamp(60px, 19vh, 92px); height: clamp(60px, 19vh, 92px); }
.profil-kort .navn { font-size: 17px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-kort .under { font-size: 14px; color: var(--tekst-2); display: flex; align-items: center; gap: 4px; }
.profil-kort.ny { border-style: dashed; color: var(--rosa); }
.profil-kort.ny .plus { width: clamp(60px, 19vh, 92px); height: clamp(60px, 19vh, 92px); border-radius: 50%; border: 3px dashed var(--rosa); display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; }

/* ---------- Ny spiller ---------- */

#s-ny { align-items: center; justify-content: center; gap: clamp(8px, 3vh, 20px); }
.ny-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 40px); width: min(760px, 100%); }
.ny-felt { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.felt-label { font-size: 18px; font-weight: 600; }
#ny-navn {
  width: 100%; height: 54px; padding: 0 18px; border-radius: 16px;
  border: 2px solid var(--lilla-kant); background: #fff; color: var(--moerk-tekst);
  font: 600 22px 'Fredoka', sans-serif; -webkit-user-select: text; user-select: text;
}
.lille-tekst { margin: 0; font-size: 14px; color: var(--tekst-2); }
.avatar-valg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.avatar-knap { border: 3px solid transparent; background: none; padding: 3px; border-radius: 50%; width: clamp(60px, 15vh, 120px); height: clamp(60px, 15vh, 120px); justify-self: center; flex-shrink: 0; }
.avatar-knap .avatar { width: 100%; height: 100%; }
.avatar-knap[aria-checked="true"] { border-color: var(--guld); }

/* ---------- Startskærm ---------- */

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topbar-hoejre { display: flex; gap: 10px; align-items: center; }
.spiller-chip {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 4px;
  border-radius: 999px; border: 2px solid var(--lilla-kant); background: var(--lilla-2);
  font-size: 17px; font-weight: 600; max-width: 220px;
}
.spiller-chip .avatar { width: 36px; height: 36px; }
.spiller-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.start-indhold { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 3vw; min-height: 0; }
.start-venstre { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 3.5vh, 22px); }
.start-venstre .knap-raekke { justify-content: flex-start; }

.podie { position: relative; width: clamp(200px, 36vw, 360px); height: clamp(150px, 56vh, 290px); flex-shrink: 0; }
.podie-plade { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; border-radius: 50%; background: var(--lilla-2); border: 3px solid var(--rosa); }
.podie-konge, .podie-dronning { position: absolute; bottom: 7%; }
.podie-konge { left: 4%; width: 52%; aspect-ratio: 1; animation: vip 3.5s ease-in-out infinite; }
.podie-dronning { right: 4%; width: 46%; aspect-ratio: 1; animation: vip 3.5s ease-in-out -1.7s infinite; }
.podie svg { width: 100%; height: 100%; }
@keyframes vip { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4%) rotate(-2deg); } }

/* ---------- Spillet ---------- */

#s-spil { padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l); }
.spil-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--board) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 24px);
  align-items: center;
}
.panel { height: var(--board); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; max-width: 300px; width: 100%; }
.panel-venstre { justify-self: end; }
.panel-hoejre { justify-self: start; }

.kort { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 20px; background: var(--lilla-2); border: 2px solid var(--lilla-kant); min-width: 0; }
.kort-hoved { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kort-navn { display: flex; flex-direction: column; min-width: 0; }
.kort-navn .navn { font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kort-navn .under { font-size: 14px; color: var(--tekst-2); display: flex; align-items: center; gap: 4px; }
.slaaet-titel { font-size: 13px; color: var(--tekst-2); }
.slaaet { min-height: 30px; border-radius: 10px; border: 2px dashed var(--lilla-kant); display: flex; flex-wrap: wrap; align-items: center; padding: 2px 4px; gap: 0; }
.slaaet:empty::after { content: 'Ingen endnu'; font-size: 13px; color: var(--tekst-3); margin: auto; }
.slaaet svg { width: 22px; height: 22px; margin-right: -4px; }
.niveau-linje { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--tekst-2); }

.prikker { display: inline-flex; gap: 5px; }
.prikker i { width: 12px; height: 12px; border-radius: 50%; background: var(--lilla-kant); display: block; }
.prikker i.til { background: var(--rosa); }

.status-raekke { display: flex; gap: 10px; align-items: stretch; }
.status-raekke .status { flex: 1; min-width: 0; }
.hjem-knap {
  width: 56px; flex-shrink: 0; border-radius: 18px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); color: var(--tekst);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
}
.hjem-knap svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hjem-knap:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.smal .hjem-knap { width: 46px; border-radius: 14px; }
.smal .hjem-knap svg { width: 24px; height: 24px; }
.meget-smal .status-raekke { flex-direction: column; gap: 6px; }
.meget-smal .hjem-knap { width: 100%; min-height: 44px; }
.status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 6px 12px; border-radius: 999px; text-align: center;
  background: var(--sb); color: var(--moerk-tekst); font-size: clamp(18px, 6vh, 25px); font-weight: 700;
  box-shadow: 0 5px 0 var(--rosa-moerk); position: relative; --sb: var(--rosa);
}
/* Lang tekst: knappen bliver til en taleboble med plads til to linjer */
.status.lang { border-radius: 22px; font-size: clamp(14px, 4.4vh, 19px); line-height: 1.15; padding: 6px 14px; overflow-wrap: anywhere; }
.status.lang::before { content: ''; position: absolute; left: 30px; top: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--sb); }
.status.lang.venter::before, .status.lang.faerdig::before { top: -12px; }
.status.venter { --sb: var(--lilla-2); background: var(--lilla-2); color: var(--tekst); box-shadow: 0 5px 0 #160828; border: 2px solid var(--lilla-kant); }
.status.venter::after { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--tekst-3); border-top-color: var(--rosa); animation: drej .9s linear infinite; }
.status.faerdig { --sb: var(--lilla-2); background: var(--lilla-2); color: var(--tekst); box-shadow: 0 5px 0 #160828; border: 2px solid var(--lilla-kant); }
.status.skak { --sb: var(--guld); background: var(--guld); box-shadow: 0 5px 0 #A9822A; }
@keyframes drej { to { transform: rotate(360deg); } }

.vaerktoej { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vaerktoej-knap {
  min-height: 64px; border-radius: 18px; border: 2px solid var(--lilla-kant); background: var(--lilla-2);
  font-size: 14px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px;
}
.vaerktoej-knap svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vaerktoej-knap.guld { border-color: var(--guld); color: var(--guld); }
.vaerktoej-knap:disabled { opacity: .45; cursor: default; }
.vaerktoej-knap:active:not(:disabled) { transform: translateY(2px); }

/* Smalle telefoner: kortere tekster */
.smal .kort { padding: 8px; gap: 6px; }
.smal .avatar-lille { width: 40px; height: 40px; }
.smal .kort-navn .navn { font-size: 16px; }
.smal .slaaet-titel { display: none; }
.smal .vaerktoej { gap: 6px; }
.smal .vaerktoej-knap { min-height: 52px; font-size: 12px; border-radius: 14px; }
.smal .vaerktoej-knap svg { width: 22px; height: 22px; }
.smal .status { font-size: 17px; min-height: 48px; }
.meget-smal .vaerktoej-knap span, .meget-smal .kort-navn .under, .meget-smal .niveau-linje span:first-child { display: none; }
.meget-smal .kort-hoved { justify-content: center; }
.meget-smal .kort-navn { display: none; }

/* ---------- Brættet ---------- */

.braet-ramme { padding: calc(var(--board) * 0.018); border-radius: 16px; background: var(--lilla-ramme); box-shadow: 0 7px 0 #160828; width: var(--board); height: var(--board); }
.braet { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); border-radius: 10px; overflow: hidden; touch-action: none; }

.felt {
  position: relative; border: none; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--felt-lys);
}
.felt.moerk { background: var(--felt-moerk); }
.felt.sidste { background: var(--sidste-lys); }
.felt.moerk.sidste { background: var(--sidste-moerk); }
.felt .piece { width: 88%; height: 88%; position: relative; z-index: 2; pointer-events: none; transition: transform .1s; }
.felt.valgt .piece { transform-origin: 50% 90%; animation: valgt-hop .45s ease-out, valgt-vugge 1.6s ease-in-out .45s infinite; }
.felt.valgt .pupil { transform-box: fill-box; transform: translateY(-0.7px); }
@keyframes valgt-hop { 0% { transform: none; } 45% { transform: translateY(-16%) scale(1.08); } 100% { transform: translateY(-6%) scale(1.06); } }
@keyframes valgt-vugge { 0%, 100% { transform: translateY(-6%) scale(1.06) rotate(0); } 30% { transform: translateY(-8%) scale(1.06) rotate(-4deg); } 70% { transform: translateY(-8%) scale(1.06) rotate(4deg); } }
.felt.loeftet .piece { opacity: .3; }

.felt .kord { position: absolute; font-size: calc(var(--board) * 0.026); font-weight: 600; line-height: 1; z-index: 1; color: var(--label-lys); pointer-events: none; }
.felt.moerk .kord { color: var(--label-moerk); }
.felt .kord.r { top: 3%; left: 5%; }
.felt .kord.f { bottom: 3%; right: 6%; }

.felt.valgt::before { content: ''; position: absolute; inset: 5%; border: 3px solid var(--guld); border-radius: 18%; z-index: 1; }
.felt.maal::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--guld); box-shadow: 0 0 0 4px rgba(245, 196, 81, .35); z-index: 3; pointer-events: none; }
.felt.maal.slag::after { width: auto; height: auto; inset: 6%; background: none; border: 4px solid var(--guld); border-radius: 50%; box-shadow: none; }
.felt.skak { background: radial-gradient(circle, #FF6B8E 0%, #FF6B8E 35%, transparent 72%), var(--felt-lys); }
.felt.moerk.skak { background: radial-gradient(circle, #FF6B8E 0%, #FF6B8E 35%, transparent 72%), var(--felt-moerk); }
.felt.hint::before { content: ''; position: absolute; inset: 4%; border: 4px solid var(--guld); border-radius: 18%; z-index: 1; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

.felt.ryst .piece { animation: ryst .35s; }
@keyframes ryst { 25% { transform: translateX(-8%); } 75% { transform: translateX(8%); } }

.spoegelse { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -60%) scale(1.15); filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.spoegelse svg { width: 100%; height: 100%; }

/* ---------- Dialoger ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 8, 34, .72);
  display: flex; align-items: center; justify-content: center;
  padding: max(2.5vh, env(safe-area-inset-top)) var(--pad-r) max(2.5vh, env(safe-area-inset-bottom)) var(--pad-l);
  animation: ind .22s ease-out;
}
@keyframes ind { from { opacity: 0; } }
@keyframes ud { to { opacity: 0; } }
.overlay > .dialog { animation: dialog-ind .34s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes dialog-ind { from { opacity: 0; transform: translateY(18px) scale(.92); } }
.overlay.lukker { animation: ud .22s ease-in forwards; pointer-events: none; }
.overlay.lukker > .dialog { animation: dialog-ud .22s ease-in forwards; }
@keyframes dialog-ud { to { opacity: 0; transform: translateY(10px) scale(.94); } }
.dialog {
  width: min(560px, 100%); max-height: 95vh; max-height: 95dvh; overflow-y: auto;
  background: var(--lilla-2); border: 2px solid var(--lilla-kant); border-radius: 26px;
  padding: clamp(14px, 4vh, 26px) clamp(16px, 4vw, 30px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.5vh, 14px); text-align: center;
  box-shadow: 0 10px 0 #160828;
}
.dialog h2 { margin: 0; font-size: clamp(21px, 6.5vh, 30px); font-weight: 700; }
.dialog p { margin: 0; font-size: 17px; color: var(--tekst-2); }

.niveau-valg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.niveau-kort {
  border: 2px solid var(--lilla-kant); background: var(--lilla); border-radius: 20px;
  padding: clamp(10px, 3vh, 18px) 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.niveau-kort strong { font-size: 22px; }
.niveau-kort small { font-size: 13px; color: var(--tekst-2); }
.niveau-kort:active { transform: translateY(2px); }
.niveau-kort .prikker i { width: 14px; height: 14px; }

.promo-valg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.promo-knap { border: 2px solid var(--lilla-kant); background: #F7EEF7; border-radius: 18px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--moerk-tekst); font-weight: 600; }
.promo-knap svg { width: 100%; max-width: 70px; aspect-ratio: 1; height: auto; }

/* Slutvinduet: to kolonner i liggende format */
.dialog-slut {
  position: relative; overflow-x: hidden;
  width: min(760px, 100%);
  flex-direction: row; align-items: center; gap: clamp(14px, 3vw, 30px);
}
.slut-venstre { flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slut-hoejre { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: clamp(8px, 2.4vh, 12px); }
.slut-hoejre .knap-raekke { justify-content: center; }
.slut-billede { width: clamp(44px, 14vh, 72px); aspect-ratio: 1; }
.slut-billede svg { width: 100%; height: 100%; }
.dialog-slut h2 { font-size: clamp(24px, 8vh, 36px); line-height: 1.1; }
.dialog-slut #slut-tekst { font-size: clamp(15px, 4.6vh, 18px); line-height: 1.35; }
#d-slut:not(.lukker) .slut-billede { animation: billede-ind .7s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
#d-slut:not(.lukker) .dialog-slut h2 { animation: titel-ind .5s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
#d-slut:not(.lukker) #slut-tekst { animation: li-ind .45s ease-out .45s both; }
@keyframes billede-ind { 0% { opacity: 0; transform: translateY(-30px) scale(.4) rotate(-15deg); } 60% { opacity: 1; transform: translateY(4px) scale(1.12) rotate(5deg); } }
@keyframes titel-ind { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } }
.stjerne-liste { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.stjerne-liste li { display: flex; justify-content: space-between; align-items: center; font-size: clamp(16px, 5.2vh, 20px); padding: 5px 14px; border-radius: 12px; background: var(--lilla); }
.stjerne-liste li span:last-child { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--guld); }
.stjerne-liste .stjerne-ikon.lille { width: 18px; height: 18px; }
.stjerne-liste li.ialt { background: none; font-size: clamp(20px, 6.6vh, 26px); font-weight: 700; padding-top: 2px; padding-bottom: 2px; }
.stjerne-liste li.ialt .stjerne-ikon.lille { width: 22px; height: 22px; }
.stjerne-liste .ialt-hop { animation: ialt-hop .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes ialt-hop { 40% { transform: scale(1.35) rotate(-4deg); } }
.lyst-univers .stjerne-liste li span:last-child { color: #A8740E; }

.menu-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); }
.menu-liste .knap { width: 100%; min-width: 0; padding: 0 12px; white-space: normal; line-height: 1.15; min-height: 50px; }
.menu-liste .knap.bred { grid-column: 1 / -1; }
.privatliv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 480px; }
.privatliv-liste li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.35; }
.privatliv-liste li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--rosa); }
.privatliv-liste li::after { content: ''; position: absolute; left: 6px; top: 6px; width: 7px; height: 4px; border-left: 2.5px solid var(--moerk-tekst); border-bottom: 2.5px solid var(--moerk-tekst); transform: rotate(-45deg); }
.version { margin-top: 4px; }

.fremgang { width: min(340px, 100%); height: 18px; border-radius: 999px; background: var(--lilla); border: 2px solid var(--lilla-kant); overflow: hidden; }
.fremgang div { height: 100%; background: var(--guld); border-radius: 999px; }

.konfetti { position: absolute; top: -20px; width: 14px; height: 14px; pointer-events: none; animation: fald linear forwards; }
@keyframes fald { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------- Universet: himmel, stjerner, måne ---------- */

.himmel { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--nat); transition: background-color .4s; }
.himmel-scene { position: absolute; inset: 0; }
.scene-himmel { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-jord { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.scene-venstre, .scene-hoejre { position: absolute; bottom: 0; height: 100%; width: auto; aspect-ratio: 2 / 3; max-width: 46%; }
.scene-venstre { left: 0; }
.scene-hoejre { right: 0; }

/* Små animationer i universerne */
.svaev { animation: svaev 8s ease-in-out infinite; }
@keyframes svaev { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.vug { transform-box: fill-box; transform-origin: 50% 100%; animation: vug 6s ease-in-out infinite; }
@keyframes vug { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.bobl { animation: bobl 6s linear infinite; }
@keyframes bobl { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-180px); opacity: 0; } }
.roeg { transform-box: fill-box; transform-origin: center; animation: roeg 5s ease-out infinite; }
@keyframes roeg { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-50px) scale(1.4); } }
.lys-puls { animation: lys-puls 4s ease-in-out infinite; }
@keyframes lys-puls { 50% { opacity: .35; } }
.flakker { transform-box: fill-box; transform-origin: 50% 100%; animation: flakker .5s ease-in-out infinite alternate; }
@keyframes flakker { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(1.18) rotate(3deg); } }
.svoem { animation: svoem 14s ease-in-out infinite; }
@keyframes svoem { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
.glimt { transform-box: fill-box; transform-origin: center; animation: glimt 3s ease-in-out infinite; }
@keyframes glimt { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.stjerneskud { position: absolute; width: 150px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 227, 240, 0), #FFE3F0); opacity: 0; }
.stjerneskud.flyv { animation: skud 1.3s ease-out forwards; }
@keyframes skud {
  0% { opacity: 0; transform: rotate(18deg) translateX(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(18deg) translateX(340px); }
}

.maane { position: fixed; z-index: 0; pointer-events: none; width: clamp(44px, 13vh, 76px); aspect-ratio: 1; top: calc(var(--pad-t) + 14px); right: calc(var(--pad-r) + 24px); animation: gloed 5s ease-in-out infinite; }
.maane svg { width: 100%; height: 100%; }
@keyframes gloed { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 217, 234, .3)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 217, 234, .75)); } }
body[data-skaerm="s-start"] #maane { top: max(76px, 17vh); right: auto; left: 50%; }
body[data-skaerm="s-installer"] #maane { right: auto; left: calc(var(--pad-l) + 16px); top: calc(var(--pad-t) + 12px); }
body[data-skaerm="s-spil"] #maane { display: none; }
body[data-skaerm="s-univers"] #maane { display: none; }

.maane-panel { position: static; align-self: center; width: clamp(40px, 15vh, 72px); }
.smal .maane-panel { width: 40px; }
.meget-smal .maane-panel { display: none; }

/* ---------- Avatarer: små liv ---------- */

.avatar svg { transform-origin: 50% 90%; }
.avatar .oeje, .avatar .pupil { transform-box: fill-box; transform-origin: center; }
.avatar.hop svg { animation: av-hop .7s ease; }
@keyframes av-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-14%) scale(1.04, .96); } 55% { transform: scale(1.06, .92); } 75% { transform: translateY(-4%); } }
.avatar.vip svg { animation: av-vip .8s ease-in-out; }
@keyframes av-vip { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.avatar.blink .oeje { animation: oeje-blink .28s ease-in-out; }
@keyframes oeje-blink { 50% { transform: scaleY(.1); } }
.avatar.kig .pupil { animation: kig 1s ease-in-out; }
@keyframes kig { 20%, 45% { transform: translateX(-1.2px); } 60%, 85% { transform: translateX(1.2px); } }

/* Uglen Olga reagerer */
.avatar-ugle.taenker svg { animation: ugle-tank 1.4s ease-in-out infinite; }
.avatar-ugle.taenker .pupil { transform: translate(1.4px, -1.4px); transition: transform .3s; }
@keyframes ugle-tank { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
.avatar.glad svg { animation: av-glad .9s ease; }
@keyframes av-glad { 0%, 100% { transform: none; } 20%, 60% { transform: translateY(-16%); } 40%, 80% { transform: none; } }
.avatar.overrasket svg { animation: av-overr .9s ease; }
.avatar.overrasket .pupil { animation: pupil-lille .9s ease; }
@keyframes av-overr { 0%, 100% { transform: none; } 25% { transform: scale(1.15); } 60% { transform: scale(1.08) rotate(4deg); } }
@keyframes pupil-lille { 20%, 70% { transform: scale(.55); } }

/* ---------- Slag: puf og glimmer ---------- */

.puf-brik { position: fixed; z-index: 30; pointer-events: none; transform: translate(-50%, -50%); animation: puf .5s ease-out forwards; }
.puf-brik svg { width: 100%; height: 100%; }
@keyframes puf { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(15deg); } }
.gnist { position: fixed; z-index: 31; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: gnist .6s ease-out forwards; }
@keyframes gnist { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }

/* ---------- Olgas træk ---------- */

.pil-lag { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .6; }
.felt.olga-maal::after, .felt.olga-maal-ud::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; border: 3px solid #7A4AA3; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); z-index: 1; animation: maal-ind .4s ease-out, maal-puls 1.1s ease-in-out .4s infinite; }
.felt.olga-maal-ud::after { animation: maal-ud .45s ease-in forwards; }
@keyframes maal-ind { from { opacity: 0; transform: scale(1.3); } }
@keyframes maal-ud { to { opacity: 0; transform: scale(.6); } }
@keyframes maal-puls { 50% { transform: scale(.88); opacity: .55; } }
.felt .piece.offer { position: absolute; z-index: 1; width: 88%; height: 88%; transition: opacity .3s ease; }
.felt .piece.offer.vaek { opacity: 0; }

/* ---------- Slag-show ---------- */

.fang-scene { position: fixed; inset: 0; z-index: 35; background: rgba(20, 8, 34, .62); animation: ind .25s ease-out; cursor: pointer; overflow: hidden; }
.fang-scene.ud { opacity: 0; transition: opacity .22s; }
.fang-scene.flyver { background: rgba(20, 8, 34, .25); transition: background .5s; }
.fang-straaler {
  position: absolute; left: 50%; top: 52%; width: min(120vh, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 156, 200, .55) 0%, rgba(255, 156, 200, .15) 28%, transparent 55%),
    repeating-conic-gradient(rgba(255, 227, 240, .16) 0deg 10deg, transparent 10deg 24deg);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 65%);
  mask-image: radial-gradient(circle, #000 25%, transparent 65%);
  animation: straaler 9s linear infinite;
}
.fang-scene.guld .fang-straaler {
  background:
    radial-gradient(circle, rgba(245, 196, 81, .6) 0%, rgba(245, 196, 81, .18) 28%, transparent 55%),
    repeating-conic-gradient(rgba(255, 233, 168, .2) 0deg 10deg, transparent 10deg 24deg);
}
.fang-scene.flyver .fang-straaler { opacity: 0; transition: opacity .3s; }
@keyframes straaler { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fang-brik { position: fixed; left: 0; top: 0; z-index: 36; transform-origin: center; filter: drop-shadow(0 0 14px rgba(255, 227, 240, .9)); will-change: transform; }
.fang-scene.guld .fang-brik { filter: drop-shadow(0 0 16px rgba(245, 196, 81, .95)); }
.fang-brik svg { width: 100%; height: 100%; }
.fang-boble {
  position: absolute; left: 50%; top: calc(var(--pad-t) + 4vh); transform: translate(-50%, -10px) scale(.9); opacity: 0;
  padding: 10px 22px; border-radius: 22px; background: #F3E6FA; color: var(--moerk-tekst);
  font-size: clamp(18px, 6vh, 28px); font-weight: 700; white-space: nowrap; box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.fang-scene.guld .fang-boble { background: var(--guld); }
.fang-scene.vis-boble .fang-boble { opacity: 1; transform: translate(-50%, 0) scale(1); }

.pil-lag line { animation: pil-loeb 1.4s linear infinite; }
@keyframes pil-loeb { to { stroke-dashoffset: -2.7; } }

/* Skak-advarsel */
.fang-scene.fare .fang-straaler {
  background:
    radial-gradient(circle, rgba(255, 107, 142, .6) 0%, rgba(255, 107, 142, .18) 28%, transparent 55%),
    repeating-conic-gradient(rgba(255, 210, 220, .18) 0deg 10deg, transparent 10deg 24deg);
  animation-duration: 6s;
}
.fang-scene.fare .fang-brik { filter: drop-shadow(0 0 16px rgba(255, 107, 142, .95)); }
.fang-scene.fare .fang-boble { background: #FF6B8E; color: var(--moerk-tekst); }
.felt.skak-blink::before { content: ''; position: absolute; inset: 4%; border-radius: 18%; border: 4px solid #FF6B8E; z-index: 1; animation: skak-ring .5s ease-in-out 4; }
@keyframes skak-ring { 50% { opacity: .2; transform: scale(.9); } }

.slaaet svg.skjult { visibility: hidden; }
.slaaet.lyser { animation: bakke-lys .9s ease-out; }
@keyframes bakke-lys { 0% { box-shadow: 0 0 0 0 rgba(245, 196, 81, .9); border-color: var(--guld); } 100% { box-shadow: 0 0 0 14px rgba(245, 196, 81, 0); } }
.slaaet svg.landet { animation: landet .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes landet { from { transform: scale(1.8); } }

/* Stjerne-optælling efter partiet */
.stjerne-liste li { animation: li-ind .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes li-ind { from { opacity: 0; transform: translateX(-22px) scale(.96); } }
.stjerne-liste .hop { animation: tal-hop .2s ease-out; }
@keyframes tal-hop { 50% { transform: scale(1.25); } }

/* ---------- Univers-skærmen ---------- */

#s-univers { gap: 8px; }
#s-univers .topbar .skaerm-titel { flex: 1; text-align: center; }
.univ-liste { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 52vh, 300px); gap: clamp(8px, 1.6vw, 16px); overflow-y: auto; padding: 4px 4px 12px; overscroll-behavior: contain; }
.univ-liste .univ-kort.valgt, .univ-liste .univ-kort { scroll-margin-top: 8px; }
.univ-kort { display: grid; grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; gap: 3px; padding: 7px 8px 8px; border-radius: 18px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); color: var(--tekst); min-height: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.univ-kort:active { transform: translateY(2px); }
.univ-kort:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.univ-kort.valgt { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa); }
.univ-kort:active { transform: translateY(2px); }
.univ-preview { position: relative; height: 100%; min-height: 60px; border-radius: 12px; overflow: hidden; transform: translateZ(0); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* Ældre Safari uden aspect-ratio: giv sidefigurerne en fast bredde */
@supports not (aspect-ratio: 1) { .scene-venstre, .scene-hoejre { width: 33%; } }
.univ-preview *, .slut-nyt-mini * { animation: none !important; }
.univ-mini-braet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.univ-mini-braet span { width: clamp(30px, 11vh, 54px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.univ-mini-braet svg { width: 84%; height: 84%; }
.univ-laas { position: absolute; inset: 0; background: rgba(10, 6, 20, .5); display: flex; align-items: center; justify-content: center; }
.univ-laas svg { width: 30px; height: 30px; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
.univ-navn { font-size: clamp(14px, 4.4vh, 18px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.univ-status { font-size: 13px; color: var(--tekst-2); display: flex; align-items: center; gap: 4px; }
.univ-status.valgt { color: var(--rosa); font-weight: 700; }
.lyst-univers .univ-status.valgt { color: var(--rosa-moerk); }
.fremgang.lille { display: block; width: 100%; height: 6px; border: none; background: rgba(0, 0, 0, .25); }
.fremgang.lille span { display: block; height: 100%; background: var(--guld); border-radius: 999px; }
.ryst-kort { animation: ryst-kort .4s; }
@keyframes ryst-kort { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-height: 360px) { .univ-status { font-size: 11px; } }

/* Nyt univers låst op (i slutdialogen) */
.slut-nyt { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; padding: 8px; border-radius: 16px; background: var(--lilla); border: 2px solid var(--guld); }
.slut-nyt-mini { position: relative; width: 76px; height: 50px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.slut-nyt-tekst { flex: 1; display: flex; flex-direction: column; text-align: left; font-size: 16px; }
.slut-nyt-tekst strong { color: var(--guld); }
.lyst-univers .slut-nyt-tekst strong { color: var(--rosa-moerk); }
.slut-nyt .knap { min-height: 40px; padding: 0 14px; font-size: 15px; }

/* Lyse universer: nogle farver skal være mørkere for at kunne ses */
.lyst-univers .vaerktoej-knap.guld { color: #A8740E; border-color: #E0A82E; }
.lyst-univers .logo-tekst { text-shadow: 0 6px 0 var(--rosa-moerk), 0 0 2px var(--rosa-moerk); }

/* ---------- Brikværkstedet ---------- */

#s-vaerksted { gap: 8px; }
#s-vaerksted .topbar .skaerm-titel { flex: 1; text-align: center; }
.knap.overrask { min-height: 48px; padding: 0 16px; }
.knap.overrask svg circle { fill: currentColor; stroke: none; }
.vaerk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(10px, 2vw, 20px); }
.vaerk-scene {
  min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px; border-radius: 22px; background: var(--lilla-2); border: 2px solid var(--lilla-kant);
}
.segment { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--lilla); }
.segment button { border: none; background: none; min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--tekst-2); }
.segment button[aria-selected="true"] { background: var(--rosa); color: var(--moerk-tekst); box-shadow: 0 3px 0 var(--rosa-moerk); }
.vaerk-preview { position: relative; flex: 1; min-height: 0; max-height: 400px; margin: auto 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding-bottom: 6px; }
.vaerk-preview::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 14px; border-radius: 50%; background: var(--lilla); border: 2px solid var(--rosa); z-index: 0; }
.vaerk-stor { position: relative; z-index: 1; height: min(100%, 360px); aspect-ratio: 1; }
.vaerk-stor svg, .vaerk-lille svg { width: 100%; height: 100%; }
.vaerk-stor.vrik { animation: vrik .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vrik { 0% { transform: scale(1); } 30% { transform: scale(1.1, .92) rotate(-4deg); } 60% { transform: scale(.96, 1.06) rotate(3deg); } 100% { transform: scale(1); } }
.vaerk-lille { position: relative; z-index: 1; height: min(42%, 150px); aspect-ratio: 1; border: none; background: none; padding: 0; opacity: .8; }
.vaerk-lille:active { transform: scale(.94); }
.vaerk-kontakter { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kontakt { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--lilla-kant); background: var(--lilla); font-size: 14px; font-weight: 600; }
.kontakt-prik { width: 30px; height: 18px; border-radius: 999px; background: var(--lilla-kant); position: relative; flex-shrink: 0; transition: background .2s; }
.kontakt-prik::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform .2s; }
.kontakt[aria-pressed="true"] .kontakt-prik { background: var(--rosa); }
.kontakt[aria-pressed="true"] .kontakt-prik::after { transform: translateX(12px); }
.vaerk-panel { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vaerk-faner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vaerk-faner button { min-height: 44px; border-radius: 14px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); font-size: 15px; font-weight: 600; padding: 0 4px; }
.vaerk-faner button[aria-selected="true"] { background: var(--rosa); border-color: var(--rosa); color: var(--moerk-tekst); }
.vaerk-dele { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 3px; }
.vaerk-del { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border-radius: 16px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); }
.vaerk-del:active { transform: translateY(2px); }
.vaerk-del-brik { width: clamp(42px, 14vh, 96px); aspect-ratio: 1; }
.vaerk-del-brik svg { width: 100%; height: 100%; }
.vaerk-del-navn { font-size: 13px; font-weight: 600; line-height: 1.1; text-align: center; }
.vaerk-del.valgt { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa); }
.vaerk-del.laast .vaerk-del-brik { opacity: .35; filter: grayscale(.7); }
.vaerk-del.laast .vaerk-del-navn { color: var(--tekst-3); font-size: 11px; }
.vaerk-laas { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; fill: none; stroke: var(--tekst-2); stroke-width: 2.2; stroke-linecap: round; }
.smal-vaerk .vaerk-faner button { font-size: 13px; }
@media (max-width: 720px) {
  .vaerk-faner button { font-size: 13px; min-height: 40px; }
  .knap.overrask span { display: none; }
  .kontakt { font-size: 12px; padding: 0 10px; }
}

/* Lås på "Mine brikker" og forhåndsvisning af låst værksted */
.laas-maerke { display: none; }
#start-brikker.laast .laas-maerke { display: block; width: 18px; height: 18px; opacity: .8; }
.laast-preview { display: flex; justify-content: center; gap: 10px; }
.laast-preview svg { width: clamp(56px, 18vh, 90px); height: auto; aspect-ratio: 1; }
.avatar-design { background: #FFE3F0; }
.avatar-design svg { width: 86% !important; height: 86% !important; }
.slut-nyt-mini { background: var(--lilla-2); }
.slut-nyt-scene { position: absolute; inset: 0; }
.slut-nyt-brikker { display: flex; justify-content: center; align-items: center; height: 100%; }
.slut-nyt-brikker svg { height: 92%; width: auto; aspect-ratio: 1; }

/* ---------- Testtilstand ---------- */

.test-knap { border: 2px dashed #F59A4A; background: rgba(245, 154, 74, .15); color: #F59A4A; }
.lyst-univers .test-knap { color: #A8540E; }
#indst-test { margin-top: 2px; }
.testtilstand::after {
  content: 'TEST'; position: fixed; left: 50%; bottom: max(4px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
  padding: 1px 10px; border-radius: 999px; background: #F59A4A; color: #2A0F42; font-size: 11px; font-weight: 700; letter-spacing: 1px; pointer-events: none; opacity: .85;
}
.dialog-test { width: min(720px, 100%); align-items: stretch; text-align: left; }
.dialog-test h2 { text-align: center; }
.dialog-test .test-info { text-align: center; font-size: 15px; }
.test-gruppe h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--tekst-2); }
.test-knapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.test-knapper .knap { min-height: 42px; font-size: 15px; padding: 0 8px; white-space: normal; line-height: 1.1; }

/* ---------- Vend telefonen ---------- */

.vend { display: none; position: fixed; inset: 0; z-index: 100; background: var(--nat); flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px; text-align: center; }
.vend svg { width: 110px; height: 110px; fill: none; stroke: var(--rosa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: vendt 2.4s ease-in-out infinite; }
.vend p { font-size: 22px; font-weight: 600; max-width: 320px; margin: 0; }
@keyframes vendt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { .vend { display: flex; } }
.installer .vend { display: none !important; }

/* ---------- Installér ---------- */

#s-installer { overflow-y: auto; }
.inst-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(16px, 4vw, 48px); align-items: center; width: min(1000px, 100%); margin: auto; padding: 8px 0; }
.inst-venstre { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 4vh, 28px); }
.inst-app { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 22px; background: rgba(20, 8, 34, .55); }
.inst-app img { width: clamp(64px, 20vh, 96px); height: auto; border-radius: 22%; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.inst-app span { font-size: 16px; }
.inst-hoejre { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 2.4vh, 14px); }
.inst-titel { margin: 0; font-size: clamp(22px, 7vh, 32px); font-weight: 700; line-height: 1.15; }
.inst-intro { margin: 0; font-size: clamp(15px, 4.4vh, 18px); color: var(--tekst-2); max-width: 520px; }
.inst-boks { width: 100%; }
.besked-boks { padding: 14px 18px; border-radius: 18px; background: var(--lilla-2); border: 2px solid var(--lilla-kant); display: flex; flex-direction: column; gap: 6px; }
.besked-boks p { margin: 0; font-size: 17px; }
.besked-boks.faerdig { border-color: var(--guld); }
.besked-boks.faerdig p:first-child { color: var(--guld); font-size: 22px; }

.inst-trin { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.inst-trin li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; background: var(--lilla-2); border: 2px solid var(--lilla-kant); font-size: clamp(15px, 4.4vh, 18px); }
.inst-trin li > span:nth-child(2) { flex: 1; }
.inst-trin strong { color: var(--rosa); font-weight: 700; }
.trin-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--rosa); color: var(--moerk-tekst); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.trin-ikon { width: 40px; height: 40px; border-radius: 10px; background: #F7EEF7; color: #1F6FEB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trin-ikon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trin-ikon svg circle { fill: currentColor; stroke: none; }
.trin-ikon img { width: 100%; height: 100%; border-radius: 10px; }
.trin-ikon.pulser { animation: pulser 1.6s ease-in-out infinite; }
@keyframes pulser { 50% { box-shadow: 0 0 0 6px rgba(245, 196, 81, .55); } }
.inst-trin li.trin-note { display: block; background: none; border: none; padding: 0 4px; font-size: 14px; color: var(--tekst-2); }

.inst-voksen { margin: 0; font-size: 15px; color: var(--tekst); }
.inst-fod { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--tekst-3); }
.link-knap { background: none; border: none; padding: 8px 0; font-size: 13px; color: var(--tekst-3); text-decoration: underline; min-height: 32px; }

@media (orientation: landscape) and (max-height: 460px) {
  .inst-intro { display: none; }
  .inst-trin { gap: 6px; }
  .inst-trin li { padding: 5px 10px; font-size: 16px; }
  .trin-ikon { width: 34px; height: 34px; }
  .trin-nr { width: 28px; height: 28px; }
}
@media (orientation: portrait), (max-width: 600px) {
  .inst-grid { grid-template-columns: minmax(0, 1fr); }
  .inst-venstre { flex-direction: row; justify-content: center; }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; top: calc(var(--pad-t) + 4px); transform: translateX(-50%); z-index: 60; pointer-events: none; /* må aldrig spærre for tryk på brættet */
  background: rgba(24, 10, 38, .94); color: #FFFFFF; padding: 10px 20px; border-radius: 999px;
  font-size: 17px; font-weight: 600; box-shadow: 0 4px 0 rgba(0,0,0,.3); max-width: 90vw; text-align: center;
}

.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* =====================================================================
   Spil med en ven (1.6.0)
   ===================================================================== */

/* Startskærmen: plads til to store knapper */
.start-venstre .logo-tekst { font-size: clamp(48px, 19vh, 112px); }
.start-venstre { gap: clamp(8px, 2.6vh, 18px); }
.start-venstre .knap-stor { min-height: clamp(46px, 13vh, 62px); font-size: clamp(18px, 5.4vh, 25px); }
.knap-ven { position: relative; min-height: clamp(44px, 12vh, 56px); font-size: clamp(17px, 4.8vh, 22px); padding: 0 24px 0 20px; }
.knap-ven svg { width: 24px; height: 24px; }
.ven-prik { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--guld); border: 2px solid var(--nat); animation: pulser 1.6s ease-in-out infinite; }

.topbar-plads { width: 48px; flex-shrink: 0; }
.topbar .skaerm-titel { flex: 1; }

/* Figurer i koden */
.figur { display: inline-flex; align-items: center; justify-content: center; border-radius: 22%; aspect-ratio: 1; flex-shrink: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .28); }
.figur svg { width: 78%; height: 78%; }
.figur.tom { background: rgba(0, 0, 0, .18); border: 3px dashed var(--lilla-kant); box-shadow: none; }
.figur.tom.naeste { border-color: var(--rosa); animation: blink 1.2s ease-in-out infinite; }
.figur.ind { animation: figur-ind .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.figur.pop { animation: figur-ind .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes figur-ind { from { opacity: 0; transform: scale(.3) rotate(-12deg); } }
.kode-figurer { display: flex; gap: clamp(6px, 1.6vw, 14px); justify-content: center; }
.kode-figurer .figur { width: clamp(46px, 14vh, 74px); }
.kode-figurer.stor .figur { width: clamp(56px, 19vh, 104px); }
.inv-navne { margin: 0; font-size: clamp(15px, 4.4vh, 19px); font-weight: 600; text-align: center; }
.inv-label { margin: 0; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); text-align: center; }

/* Lobbyen */
#s-ven, #s-inviter, #s-kode { gap: 8px; }
.ven-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 3vw, 32px); align-items: center; padding: 0 2vw; }
.ven-venstre { display: flex; flex-direction: column; align-items: stretch; gap: clamp(8px, 2.6vh, 16px); max-width: 420px; width: 100%; justify-self: center; }
.ven-venstre .knap-stor { width: 100%; }
.ven-info { text-align: center; }
.ven-hoejre { align-self: stretch; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 22px; background: var(--lilla-2); border: 2px solid var(--lilla-kant); margin: 4px 0; }
.ven-overskrift { margin: 0; font-size: 18px; font-weight: 600; }
.ven-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ven-tom { margin: auto 0; text-align: center; font-size: 15px; color: var(--tekst-2); padding: 0 10px; }
.ven-raekke { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 16px; background: var(--lilla); }
.ven-raekke .avatar { width: 44px; height: 44px; }
.ven-navn { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ven-udfordr { min-height: 40px; padding: 0 16px; font-size: 15px; }
.ven-fjern { width: 34px; height: 34px; border-radius: 50%; border: none; background: none; color: var(--tekst-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ven-fjern svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ven-fortsaet { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 18px; background: var(--lilla-2); border: 2px solid var(--guld); }
.ven-fortsaet-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--tekst-2); }
.ven-fortsaet-tekst strong { color: var(--tekst); font-size: 16px; }
.ven-fortsaet .knap { min-height: 42px; padding: 0 16px; font-size: 16px; }

/* Inviter */
.inv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: clamp(12px, 3vw, 32px); align-items: center; padding: 0 2vw; }
.inv-kode-boks { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 2vh, 12px); padding: clamp(10px, 3vh, 20px); border-radius: 24px; background: var(--lilla-2); border: 2px solid var(--lilla-kant); }
.inv-qr-boks { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.inv-qr { width: clamp(110px, 40vh, 200px); aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 5px 0 #160828; }
.inv-qr:empty { background: rgba(255, 255, 255, .15); }
.inv-qr svg { width: 100%; height: 100%; }
.inv-handling { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.inv-venter { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; font-size: 16px; color: var(--tekst-2); text-align: center; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--tekst-3); border-top-color: var(--rosa); animation: drej .9s linear infinite; flex-shrink: 0; }

/* Skriv kode */
.kode-indhold { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 4vh, 26px); }
.kode-top { display: flex; align-items: center; gap: 14px; }
.kode-top .rund-knap:disabled { opacity: .4; }
.kode-taster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 12px); width: min(880px, 100%); }
.kode-tast { border: 2px solid var(--lilla-kant); background: var(--lilla-2); border-radius: 18px; padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.kode-tast .figur { width: clamp(38px, 12vh, 84px); box-shadow: none; }
.kode-tast:active { transform: translateY(2px); }
#ven-inviter svg, #inv-del svg { fill: none; }
#kode-scan { min-height: 44px; padding: 0 14px; font-size: 16px; }

/* Online i spillet */
#s-spil.online .vaerktoej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kort { position: relative; }
.online-prik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tekst-3); margin-right: 2px; flex-shrink: 0; }
.online-prik.til { background: #7ED957; box-shadow: 0 0 0 3px rgba(126, 217, 87, .25); }
.status.net { font-size: clamp(14px, 4vh, 18px); }
.sticker-boble {
  position: absolute; z-index: 8; left: 50%; bottom: calc(100% - 8px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 18px; white-space: nowrap;
  background: #FFFFFF; color: var(--moerk-tekst); font-size: 17px; font-weight: 700; box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.sticker-boble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 9px solid transparent; border-top-color: #FFFFFF; }
.sticker-boble { bottom: auto; top: calc(100% + 8px); }
.sticker-boble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #FFFFFF; }
.sticker-boble.ind { animation: boble-ind .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boble-ind { from { opacity: 0; transform: translateX(-50%) scale(.4); } }
.sticker-ikon { font-size: 1.3em; line-height: 1; }
.sticker-valg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.sticker-knap { border: 2px solid var(--lilla-kant); background: var(--lilla); border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; }
.sticker-knap .sticker-ikon { font-size: 30px; }
.sticker-knap:active { transform: translateY(2px); }
.niveau-prikker.ven-status { display: none; }
#s-spil.online .niveau-linje { display: none; }
#s-spil.online .status.venter { font-size: clamp(15px, 4.6vh, 20px); line-height: 1.1; }
body[data-skaerm="s-kode"] #maane, body[data-skaerm="s-inviter"] #maane { display: none; }

/* Slutvinduet */
.slut-ven { margin: 0; font-size: 15px; color: var(--tekst-2); text-align: center; }
.slut-ven.omkamp { color: var(--guld); font-size: 18px; font-weight: 700; animation: titel-ind .5s cubic-bezier(.3, 1.5, .5, 1); }
.lyst-univers .slut-ven.omkamp { color: var(--rosa-moerk); }
.slut-billede.ven .avatar { width: 100%; height: 100%; }

/* Lodtrækning */
.dialog-lod { width: min(560px, 100%); }
.lod-scene { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 34px); width: 100%; }
.lod-spiller { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; font-size: 16px; font-weight: 600; transition: transform .3s; }
.lod-spiller span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lod-spiller .avatar { width: clamp(52px, 16vh, 76px); height: clamp(52px, 16vh, 76px); }
.lod-spiller.vinder { transform: scale(1.12); }
.lod-spiller.vinder .avatar { box-shadow: 0 0 0 4px var(--guld), 0 0 24px rgba(245, 196, 81, .7); }
.lod-moent-ramme { perspective: 600px; }
.lod-moent { position: relative; width: clamp(70px, 24vh, 110px); aspect-ratio: 1; transform-style: preserve-3d; }
.lod-side { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE9A8, var(--guld) 60%, #C99A2E); border: 4px solid #A9822A; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lod-side.bag { transform: rotateY(180deg); }
.lod-side svg { width: 74%; height: 74%; }
.lod-tekst { font-size: clamp(19px, 6vh, 26px) !important; font-weight: 700; color: var(--tekst) !important; }

/* Scan */
.dialog-scan { width: min(520px, 100%); }
.scan-ramme { position: relative; width: min(100%, 52vh, 360px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #000; }
.scan-ramme video { width: 100%; height: 100%; object-fit: cover; }
.scan-sigte { position: absolute; inset: 16%; border: 4px solid var(--rosa); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }

/* Udfordring fra en ven */
.udf-overlay { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(12, 4, 24, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: udf-moerk .3s ease-out; }
@keyframes udf-moerk { from { opacity: 0; } }
.udfordring {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 26px 14px; border-radius: 28px; max-width: min(420px, 100%);
  background: var(--lilla-2); border: 4px solid var(--guld); box-shadow: 0 10px 0 #160828, 0 20px 50px rgba(0,0,0,.45); animation: udf-ind .55s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes udf-ind { from { opacity: 0; transform: scale(.6) translateY(30px); } }
.udf-avatar .avatar { width: clamp(76px, 22vh, 120px); height: clamp(76px, 22vh, 120px); animation: av-hop 1.6s ease-in-out infinite; }
.udf-tekst { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 18px; color: var(--tekst-2); min-width: 0; }
.udf-tekst strong { font-size: 26px; color: var(--tekst); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udf-knapper { display: flex; gap: 10px; margin-top: 4px; }
.udfordring .knap { min-height: 50px; padding: 0 22px; font-size: 18px; }
.udf-senere { margin: 0; font-size: 12px; color: var(--tekst-3); }
@media (orientation: landscape) and (max-height: 460px) {
  .udfordring { padding: 12px 22px 10px; gap: 6px; }
  .udf-tekst strong { font-size: 22px; }
  .udfordring .knap { min-height: 44px; }
}

/* Bekræft vennen */
.besked-ven { display: flex; justify-content: center; }
.besked-ven .avatar { width: clamp(56px, 18vh, 84px); height: clamp(56px, 18vh, 84px); }

/* Navneforslag */
.navne-forslag { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.navne-forslag:empty { display: none; }
.forslag-chip { border: 2px solid var(--lilla-kant); background: var(--lilla); border-radius: 999px; min-height: 36px; padding: 0 12px; font-size: 15px; font-weight: 600; }
.forslag-chip:active { transform: translateY(2px); }
#ny-hint.fejl { color: var(--fare); font-weight: 600; }

/* Privatliv */
.privatliv-titel { margin: 8px 0 0; font-size: 18px; text-align: left; width: 100%; max-width: 480px; }

/* Invitationsside i browseren */
.invitation .inst-venstre > .logo, .invitation .inst-app { display: none; }
.inst-invitation { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 2vh, 12px); padding: clamp(10px, 3vh, 18px); border-radius: 24px; background: var(--lilla-2); border: 2px solid var(--guld); width: 100%; }
.inv-fra { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.invb-trin { margin: 0; padding-left: 22px; text-align: left; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.invb-trin strong { color: var(--rosa); }

@media (orientation: landscape) and (max-height: 460px) {
  .inv-grid { gap: 10px; }
  .ven-overskrift { font-size: 16px; }
  .kode-tast > span:last-child { display: none; }
}
@media (max-width: 760px) {
  .inv-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .inv-handling { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (orientation: portrait), (max-width: 600px) {
  .inst-invitation .kode-figurer .figur { width: 56px; }
}

/* ---------- 1.7.0 ---------- */
/* Vindmøllens vinger drejer */
.drej { animation: drej 7s linear infinite; }

/* Startskærmen: knapperne fylder venstre side, så universets ting samles til højre, hvor der er frit */
body[data-skaerm="s-start"] .scene-venstre { left: 38%; height: 60%; max-width: 22%; }

/* ---------- 1.7.1: Spil på samme skærm ---------- */
#s-spil.lokal .niveau-linje { display: none; }
#s-spil.lokal .status { font-size: clamp(15px, 4.6vh, 21px); line-height: 1.1; }
#s-spil.lokal .vaerktoej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#s-spil .panel .kort.tur { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa); }
.lokal-liste { max-height: 52vh; }
.lokal-kort { width: clamp(96px, 24vh, 124px); }
.lokal-kort .avatar { width: clamp(52px, 15vh, 76px); height: clamp(52px, 15vh, 76px); }
.ven-venstre .knap { width: 100%; }

/* =====================================================================
   1.8.0 – startskærm: konge og dronning ved logoet, dyr i hjørnet, vejr
   ===================================================================== */

.start-logo-raekke { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 22px); }
.start-logo-raekke .podie { position: relative; width: clamp(104px, 40vh, 230px); height: clamp(62px, 24vh, 138px); flex-shrink: 0; margin-bottom: 4px; }
.start-logo-raekke .podie-konge { left: 0; bottom: 0; width: 56%; }
.start-logo-raekke .podie-dronning { right: 0; bottom: 0; width: 50%; }
.start-indhold { justify-content: flex-start; }

/* Universets ting fra venstre side: i det frie felt til højre for knapperne */
body[data-skaerm="s-start"] .scene-venstre { left: 49%; height: 60%; max-width: 24%; }

/* Lille dyr nederst i højre hjørne – kun på startskærmen */
.forgrund { position: absolute; right: calc(var(--pad-r) + 1vw); bottom: 2px; width: clamp(74px, 25vh, 160px); aspect-ratio: 1; display: none; }
.forgrund svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); }
body[data-skaerm="s-start"] .forgrund { display: block; }
.fg-blink { animation: fg-blink 4.5s ease-in-out infinite; }
@keyframes fg-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.fg-nik { animation: fg-nik 4s ease-in-out infinite; }
@keyframes fg-nik { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
.fg-logre { animation: fg-logre .5s ease-in-out infinite alternate; }
@keyframes fg-logre { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.fg-vink { animation: fg-vink 1.2s ease-in-out infinite alternate; }
@keyframes fg-vink { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
.fg-knips { animation: fg-knips 1.2s ease-in-out infinite; }
@keyframes fg-knips { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(4deg); } }
.fg-gaa { animation: fg-gaa 6s ease-in-out infinite; }
@keyframes fg-gaa { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
.fg-svaev { animation: fg-svaev 5s ease-in-out infinite; }
@keyframes fg-svaev { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.fg-kig { animation: fg-kig 3.6s ease-in-out infinite; }
@keyframes fg-kig { 0%, 100% { transform: translateY(22px); } 35%, 70% { transform: translateY(0); } }
.fg-hop { animation: fg-hop 1.2s cubic-bezier(.3, 0, .5, 1) infinite; }
@keyframes fg-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-16px) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1); } }
.fg-bask { animation: fg-bask 1s ease-in-out infinite alternate; }
@keyframes fg-bask { from { transform: rotate(8deg); } to { transform: rotate(-22deg); } }

/* Vejr og tid på døgnet */
.vejr, .vejr-farve { position: absolute; inset: 0; pointer-events: none; display: none; overflow: hidden; }
body[data-skaerm="s-start"] .vejr, body[data-skaerm="s-start"] .vejr-farve { display: block; }
.vejr-farve { transition: background .6s; }
.vp { position: absolute; display: block; pointer-events: none; }
.vp.regn { top: -30px; width: 2px; border-radius: 2px; transform: rotate(var(--skraa)); animation: vp-regn linear infinite; }
@keyframes vp-regn { from { transform: translate(0, 0) rotate(var(--skraa)); } to { transform: translate(-18vh, 112vh) rotate(var(--skraa)); } }
.blaest .vp.regn { animation-duration: .45s !important; }
.vp.sne { top: -12px; border-radius: 50%; background: #FFFFFF; opacity: .9; animation: vp-sne linear infinite; }
@keyframes vp-sne { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, 28vh); } 50% { transform: translate(-6px, 56vh); } 75% { transform: translate(12px, 84vh); } 100% { transform: translate(0, 108vh); } }
.vp.sne.storm { animation-name: vp-storm; }
@keyframes vp-storm { from { transform: translate(-10vw, 0); } to { transform: translate(60vw, 108vh); } }
.vp.boble-op { bottom: -20px; border-radius: 50%; border: 2px solid rgba(220, 245, 255, .75); animation: vp-boble linear infinite; }
@keyframes vp-boble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(10px, -55vh); } 100% { transform: translate(-6px, -110vh); opacity: 0; } }
.vp.meteor { width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 230, 180, 0), #FFE9A8); opacity: 0; animation: vp-meteor ease-out infinite; }
@keyframes vp-meteor { 0% { opacity: 0; transform: rotate(150deg) translateX(0); } 8% { opacity: 1; } 30% { opacity: 0; transform: rotate(150deg) translateX(-50vw); } 100% { opacity: 0; transform: rotate(150deg) translateX(-50vw); } }
.vp.krymmel { top: -10px; width: 10px; height: 3.5px; border-radius: 2px; animation: vp-krymmel linear infinite; }
@keyframes vp-krymmel { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-4vw, 110vh) rotate(720deg); } }
.vp.blad { left: -20px; width: 12px; height: 7px; border-radius: 0 70% 0 70%; animation: vp-blad linear infinite; }
@keyframes vp-blad { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(55vw, -6vh) rotate(260deg); } 100% { transform: translate(112vw, 4vh) rotate(540deg); } }
.vp.nat-stjerne { width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; animation: glimt ease-in-out infinite; }
.vp.solstraaler { left: -30vh; top: -30vh; width: 90vh; height: 90vh; border-radius: 50%; opacity: .32;
  background: repeating-conic-gradient(from 0deg, rgba(255, 245, 190, .9) 0deg 6deg, rgba(255, 245, 190, 0) 6deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 70%); mask: radial-gradient(circle, #000 0 20%, transparent 70%);
  animation: drej 60s linear infinite; }

/* Blæst: træer, tang og flag vugger mere, skyer driver hurtigere */
body[data-skaerm="s-start"].blaest .himmel .vug { animation-duration: 1.4s !important; }
body[data-skaerm="s-start"].blaest .himmel .svaev { animation-duration: 3.2s !important; }
body[data-skaerm="s-start"].blaest .himmel .svoem { animation-duration: 5s !important; }
/* Aften og nat: lysene i vinduerne gløder mere */
body[data-skaerm="s-start"][data-tid="aften"] .himmel .lys-puls, body[data-skaerm="s-start"][data-tid="nat"] .himmel .lys-puls { filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 210, 120, .9)); }

@media (prefers-reduced-motion: reduce) { .vejr { display: none !important; } }

/* ---------- 1.9.0: Se igen ---------- */
.igen-knap { color: var(--guld); border-color: var(--guld); }
.lyst-univers .igen-knap { color: #A8740E; border-color: #E0A82E; }
.igen-knap:not([hidden]) { animation: igen-ind .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes igen-ind { from { transform: scale(.4); opacity: 0; } }

/* ---------- 1.9.0: Skakregler ---------- */
#s-regler { gap: 8px; }
.regler-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(130px, .8fr) auto minmax(0, 1.3fr); gap: clamp(10px, 2vw, 24px); align-items: center; }
.regler-kapitler { align-self: stretch; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.regler-kapitler button { text-align: left; min-height: 42px; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); font-size: 15px; font-weight: 600; line-height: 1.15; }
.regler-kapitler button[aria-current="true"] { background: var(--rosa); border-color: var(--rosa); color: var(--moerk-tekst); }
.regler-braet-ramme { padding: 6px; border-radius: 14px; background: var(--lilla-ramme); box-shadow: 0 6px 0 #160828; }
.regler-braet { width: min(calc(100vh - 120px), 38vw, 460px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 8px; overflow: hidden; }
.rfelt { position: relative; border: none; padding: 0; margin: 0; background: var(--felt-lys); display: flex; align-items: center; justify-content: center; cursor: default; }
.rfelt.moerk { background: var(--felt-moerk); }
.regler-braet.opgave .rfelt { cursor: pointer; }
.rfelt .rbrik { width: 86%; height: 86%; position: relative; z-index: 2; pointer-events: none; }
.rfelt .rbrik.offer { position: absolute; z-index: 1; }
.rfelt .rbrik.vaek { transition: opacity .25s, transform .25s; opacity: 0; transform: scale(1.4); }
.rfelt.sidste::before { content: ''; position: absolute; inset: 0; background: rgba(245, 196, 81, .35); }
.rfelt.valgt::before { content: ''; position: absolute; inset: 5%; border: 3px solid var(--guld); border-radius: 18%; }
.rfelt.prik::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: var(--guld); box-shadow: 0 0 0 3px rgba(245, 196, 81, .35); z-index: 3; animation: maal-ind .3s ease-out; }
.rfelt.slagprik::after { content: ''; position: absolute; inset: 6%; border: 4px solid var(--guld); border-radius: 50%; z-index: 3; }
.rfelt.fare::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #FF6B8E 0%, #FF6B8E 38%, transparent 74%); animation: blink 1s ease-in-out infinite; }
.rfelt.god::before { content: ''; position: absolute; inset: 6%; border: 4px solid #7ED957; border-radius: 20%; box-shadow: 0 0 10px rgba(126, 217, 87, .8); }
.regler-tekst-boks { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; overflow-y: auto; }
.regler-titel { margin: 0; font-size: clamp(20px, 6vh, 28px); }
.regler-tekst { margin: 0; font-size: clamp(15px, 4.4vh, 19px); line-height: 1.35; color: var(--tekst); }
.regler-olga { margin: 0; min-height: 2.6em; font-size: clamp(14px, 4.2vh, 18px); line-height: 1.3; color: var(--guld); font-weight: 600; }
.lyst-univers .regler-olga { color: #A8740E; }
.regler-olga.ny { animation: li-ind .4s ease-out; }
.regler-sider { display: flex; align-items: center; gap: 10px; }
.regler-sider .rund-knap { width: 42px; height: 42px; }
.regler-sider .rund-knap:disabled { opacity: .35; }
.regler-sider .vend svg { transform: scaleX(-1); }
.regler-knapper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.regler-knapper .knap { min-height: 44px; padding: 0 16px; font-size: 16px; }
@media (max-width: 760px) {
  .regler-grid { grid-template-columns: minmax(110px, .7fr) auto minmax(0, 1fr); }
  .regler-kapitler button { font-size: 13px; min-height: 36px; padding: 4px 8px; }
  .regler-knapper .knap { min-height: 38px; padding: 0 12px; font-size: 14px; }
}
.igen-knap { width: 50px; }
.status-raekke:has(#knap-igen:not([hidden])) .status { font-size: clamp(15px, 4.4vh, 21px); white-space: nowrap; padding: 6px 8px; }
.smal .igen-knap { width: 42px; }
.meget-smal .igen-knap { width: 100%; min-height: 40px; }

/* ---------- 1.10.0: i spillet står universets ting længere væk, ved horisonten ---------- */
body[data-skaerm="s-spil"] .scene-venstre, body[data-skaerm="s-spil"] .scene-hoejre { height: 50%; bottom: 21%; }
body[data-skaerm="s-spil"] .scene-jord { height: 34%; }

/* ---------- 1.10.0: Mine trofæer ---------- */
.trofae-pille { cursor: pointer; padding: 0 14px; gap: 6px; }
.trofae-pille svg { width: 24px; height: 24px; }
#s-trofae { gap: 8px; }
#s-trofae .topbar .skaerm-titel { flex: 1; text-align: center; }
.trofae-faner { align-self: center; }
.trofae-medaljer { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 4px; }
.medalje { border: 2px solid var(--lilla-kant); background: var(--lilla-2); border-radius: 16px; padding: 6px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.1; text-align: center; color: var(--tekst-3); }
.medalje > svg { width: clamp(40px, 13vh, 70px); height: auto; aspect-ratio: 6 / 7; }
.medalje.har { color: var(--tekst); border-color: var(--guld); }
.medalje:active { transform: translateY(2px); }
.medalje-stor > svg { width: clamp(70px, 26vh, 120px); height: auto; }
.trofae-tom { margin: auto; max-width: 440px; text-align: center; color: var(--tekst-2); font-size: 17px; }
.trofae-mat { flex: 1; min-height: 0; display: flex; }
.trofae-mat-vis { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(130px, .8fr) auto minmax(0, 1fr); gap: clamp(10px, 2vw, 24px); align-items: center; }
.trofae-mat-liste { align-self: stretch; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.mat-raekke { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); font-size: 14px; color: var(--tekst-2); }
.mat-raekke strong { color: var(--tekst); font-size: 15px; }
.mat-raekke.valgt { border-color: var(--rosa); box-shadow: 0 0 0 2px var(--rosa); }
.trofae-braet-ramme { padding: 6px; border-radius: 14px; background: var(--lilla-ramme); box-shadow: 0 6px 0 #160828; }
.trofae-braet { width: min(calc(100vh - 150px), 38vw, 440px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 8px; overflow: hidden; }
.tfelt { position: relative; background: var(--felt-lys); display: flex; align-items: center; justify-content: center; }
.tfelt.moerk { background: var(--felt-moerk); }
.tfelt .tbrik { width: 86%; height: 86%; position: relative; z-index: 2; }
.tfelt.sidste::before { content: ''; position: absolute; inset: 0; background: rgba(245, 196, 81, .35); }
.tfelt.mat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #FF6B8E 0%, #FF6B8E 38%, transparent 74%); animation: blink 1s ease-in-out infinite; }
.trofae-mat-tekst { margin: 0; font-size: clamp(20px, 6vh, 28px); font-weight: 700; color: var(--guld); }
.lyst-univers .trofae-mat-tekst { color: #A8740E; }
.trofae-shows { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: start; padding: 4px; }
.show-kort { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 18px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); text-align: center; }
.show-kort.valgt { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa); }
.show-kort.laast { opacity: .55; }
.show-knapper { display: flex; gap: 6px; }
.show-knapper .knap { min-height: 36px; padding: 0 12px; font-size: 14px; }
.show-laas { font-size: 13px; color: var(--tekst-2); }
.show-ikon { width: clamp(46px, 14vh, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--lilla); display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 7vh, 36px); }
.show-ikon-konfetti::after { content: '🎉'; } .show-ikon-fyrvaerkeri::after { content: '🎆'; } .show-ikon-regnbue::after { content: '🌈'; }
.show-ikon-stjerneregn::after { content: '🌟'; } .show-ikon-drage::after { content: '🐉'; } .show-ikon-kongedans::after { content: '👑'; } .show-ikon-guldregn::after { content: '🪙'; }
.slut-medalje { border-color: var(--guld); }
.slut-medalje-ikoner { display: flex; flex-shrink: 0; }
.slut-medalje-ikoner > svg { width: 40px; height: auto; margin-right: -8px; }
@media (max-width: 760px) { .trofae-medaljer { grid-template-columns: repeat(6, minmax(0, 1fr)); } .medalje span { font-size: 10.5px; } .trofae-shows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sejrsshows */
.sejrsshow { position: fixed; inset: 0; z-index: 70; pointer-events: auto; overflow: hidden; background: rgba(20, 8, 34, .25); animation: ind .3s ease-out; }
.sejrsshow.ud { animation: ud .3s ease-in forwards; }
.show-gnist { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); animation: show-gnist 1.1s ease-out forwards; box-shadow: 0 0 8px currentColor; }
@keyframes show-gnist { 0% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) scale(.3); opacity: 0; } }
.show-regnbue { position: absolute; left: 5%; right: 5%; bottom: 0; width: 90%; height: 80%; }
.show-regnbue path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: show-tegn 1.1s ease-out forwards; }
@keyframes show-tegn { to { stroke-dashoffset: 0; } }
.show-stjerne, .show-mont, .show-konfetti { position: absolute; top: -40px; animation: show-fald linear forwards; }
.show-stjerne { width: 30px; height: 30px; transform: scale(var(--s));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 L14.9 8.6 L21.5 9.3 L16.6 13.8 L18 20.3 L12 17 L6 20.3 L7.4 13.8 L2.5 9.3 L9.1 8.6 Z' fill='%23F5C451'/%3E%3C/svg%3E") center / contain no-repeat; }
.show-mont { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFD166 55%, #C99A2E); border: 2px solid #A07614; }
.show-konfetti { width: 14px; height: 14px; }
@keyframes show-fald { to { transform: translateY(115vh) rotate(540deg); } }
.show-glans { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 220, 120, .45), transparent 65%); animation: lys-puls 1.4s ease-in-out infinite; }
.show-drage { position: absolute; top: 18%; left: -30%; width: min(46vw, 360px); animation: show-flyv 3.4s ease-in-out forwards; }
.show-drage .vinge { transform-box: fill-box; transform-origin: 50% 100%; animation: show-bask .35s ease-in-out infinite alternate; }
@keyframes show-flyv { 0% { transform: translate(0, 0); } 50% { transform: translate(70vw, -6vh) rotate(-4deg); } 100% { transform: translate(140vw, 4vh); } }
@keyframes show-bask { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.show-konge { position: absolute; left: 50%; top: 50%; width: min(46vh, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); animation: show-dans .8s ease-in-out infinite; }
.show-konge svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
@keyframes show-dans { 0%, 100% { transform: translate(-50%, -50%) rotate(-10deg); } 25% { transform: translate(-50%, -62%) rotate(0); } 50% { transform: translate(-50%, -50%) rotate(10deg); } 75% { transform: translate(-50%, -62%) rotate(0); } }
.show-node { position: absolute; top: 60%; font-size: 48px; color: #FFD166; animation: show-node 1.6s ease-out infinite; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
@keyframes show-node { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-40vh) rotate(20deg); opacity: 0; } }

/* ---------- 1.10.1: flere hilsner ---------- */
.dialog-sticker { width: min(780px, 100%); gap: 6px; }
.dialog-sticker .sticker-valg { display: block; }
.sticker-gruppe { margin: 4px 0 4px; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--tekst-2); text-align: left; }
.sticker-gitter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dialog-sticker .sticker-knap { padding: 6px 4px; font-size: 13px; line-height: 1.1; gap: 2px; border-radius: 14px; min-height: 58px; }
.dialog-sticker .sticker-knap .sticker-ikon { font-size: 22px; }
#mod-under.pause { color: var(--guld); font-weight: 600; white-space: normal; line-height: 1.15; }
.lyst-univers #mod-under.pause { color: #A8740E; }
@media (max-width: 700px) { .sticker-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Lav kort – barnets eget invitationskort */
#s-kort { gap: 8px; }
#s-kort .topbar .skaerm-titel { flex: 1; text-align: center; }
.kort-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(10px, 2vw, 20px); }
.kort-venstre { min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.kort-canvas { width: 100%; height: auto; max-height: calc(100% - 64px); object-fit: contain; aspect-ratio: 1200 / 630; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: var(--lilla-2); }
.kort-canvas.pop { animation: kort-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kort-pop { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
.kort-handling { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kort-handling .knap { text-decoration: none; }
.kort-valg { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 3px 4px 10px; }
.kort-label { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.kort-knapper { display: flex; flex-wrap: wrap; gap: 6px; }
.kort-knap { position: relative; min-height: 42px; padding: 4px 12px; border-radius: 14px; border: 2px solid var(--lilla-kant); background: var(--lilla-2); color: inherit; font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.kort-knap:active { transform: translateY(2px); }
.kort-knap.valgt { background: var(--rosa); border-color: var(--rosa); color: var(--moerk-tekst); }
.kort-knap.laast { opacity: .55; }
.kort-knap.laast .laas-tekst { font-size: 11px; font-weight: 500; color: var(--tekst-3); }
.kort-knap .vaerk-laas { position: static; width: 15px; height: 15px; }
.kort-knapper.universer .kort-knap { width: 50px; height: 50px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; overflow: hidden; }
.kort-knapper.universer .kort-knap svg { width: 80%; height: 80%; }
.kort-knapper.universer .kort-knap.valgt { box-shadow: 0 0 0 3px var(--rosa); border-color: #fff; }
.ramme-prik { width: 18px; height: 18px; border-radius: 6px; border: 3px solid currentColor; }
@media (orientation: landscape) and (max-height: 460px) {
  .kort-knap { min-height: 36px; font-size: 13px; padding: 2px 10px; }
  .kort-knapper.universer .kort-knap { width: 42px; height: 42px; }
  .kort-label { font-size: 12px; }
}

/* Installér-siden: undertitel og links til forældre-siderne */
.inst-tagline { margin: 0; font-size: clamp(14px, 3.6vh, 17px); font-weight: 600; color: var(--tekst-2); text-align: center; }
.inst-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.inst-links a { color: var(--tekst-2); text-decoration: underline; text-underline-offset: 3px; }

/* Event-universer: ekstra animationer */
.ev-flagre { transform-box: fill-box; transform-origin: center; animation: ev-flagre .35s ease-in-out infinite alternate; }
@keyframes ev-flagre { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.ev-dingel { animation: ev-dingel 4s ease-in-out infinite; }
@keyframes ev-dingel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(46px); } }
.ev-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: ev-hop 1.3s ease-in-out infinite; }
@keyframes ev-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-34px) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1, 1); } }
.ev-vrik { transform-box: fill-box; transform-origin: 50% 100%; animation: ev-vrik 2.4s ease-in-out infinite; }
@keyframes ev-vrik { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-3deg) translateY(-6px); } 40% { transform: rotate(2deg) translateY(0); } 60% { transform: rotate(-1deg) translateY(-3px); } }
.ev-blink { animation: ev-blink 1.4s steps(2, jump-none) infinite; }
@keyframes ev-blink { 0% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ev-flagre, .ev-dingel, .ev-hop, .ev-vrik, .ev-blink { animation: none; } }

/* Event-univers på Universer-skærmen */
.univ-kort.event { border-color: var(--guld); box-shadow: 0 0 0 2px var(--guld); }
.univ-kun-nu { background: var(--guld); color: #2A1406; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 999px; animation: pulser 1.6s ease-in-out infinite; }

/* Brikken, der truer kongen (binding eller skak), blinker rødt */
.felt.trussel::before { content: ''; position: absolute; inset: 4%; border-radius: 18%; border: 4px solid #FF4F6D; box-shadow: 0 0 14px rgba(255, 79, 109, .7); z-index: 1; animation: skak-ring .45s ease-in-out 4; }
.status-raekke:has(#knap-igen:not([hidden])) .status.lang { white-space: normal; font-size: clamp(13px, 4vh, 17px); }

/* Vennens seneste hilsen som lille ikon i panelet */
.sidste-hilsen { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; animation: av-hop 1.6s ease-in-out 2; }
.sticker-boble { cursor: pointer; }