/* Blyantstafetten — designsystem "Skitseblok" (valgt i milepæl 2)
   Palette: papir, grafit, blyantgul, viskelæder-rosa, godkendt-grøn.
   Typografi: Caveat (håndskrift, overskrifter) + Nunito Sans (brødtekst). */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --papir: #faf7f0;
  --papir-kort: #fffdf8;
  --linje: #e2d9c8;
  --grafit: #3d3a36;
  --graa: #8a857c;
  --blyantgul: #f2b632;
  --blyantgul-moerk: #b07f10;
  --rosa: #e07a7a;
  --groen: #7da87b;
  --kraft: #e8dcc3;
  --app-height: 100vh;
}

/* jul-tema (skiftes pr. udfordring): julekalender-look */
.tema-jul {
  --papir: #f7f2ea;
  --blyantgul: #b23a3a;
  --blyantgul-moerk: #7d2020;
  --kraft: #9c3532;
  --groen: #4a6b4f;
}
.tema-jul .door.laast, .tema-jul .door.tidslaast, .tema-jul .door.ude {
  background: linear-gradient(145deg, #a83c38, #8c2b28);
  border: 2px solid #f2d9a4; border-style: solid; color: #f2d9a4;
  box-shadow: inset 0 0 0 3px rgba(140,43,40,0.8), 2px 3px 0 rgba(61,58,54,0.15);
}
.tema-jul .door .nr { color: #f2d9a4; }
.tema-jul .door .dato { color: #e8c98c; }
.tema-jul .kort h2::after { content: ' 🎄'; font-size: 0.75em; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--papir);
  background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(190,175,150,0.16) 31px, rgba(190,175,150,0.16) 32px);
  color: var(--grafit);
  min-height: var(--app-height);
  line-height: 1.45;
}

#app { max-width: 640px; margin: 0 auto; padding: 1rem 1.1rem 4.5rem; }

/* ---------- fælles byggesten ---------- */

.sketchy {
  background: var(--papir-kort);
  border: 2px solid var(--grafit);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 2px 3px 0 rgba(61,58,54,0.12);
}

h1, h2, h3, .haand { font-family: 'Caveat', cursive; font-weight: 700; }

.eyebrow {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--graa);
}

.knap {
  display: inline-block; font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem; font-weight: 800; color: var(--grafit);
  background: var(--blyantgul); border: 2px solid var(--grafit);
  border-radius: 40px 10px 35px 10px / 10px 35px 10px 40px;
  padding: 0.55rem 1.3rem; cursor: pointer; text-decoration: none;
  box-shadow: 2px 2px 0 rgba(61,58,54,0.25);
}
.knap:active { transform: translate(1px, 1px); box-shadow: none; }
.knap.sekundaer { background: var(--papir-kort); }
.knap.fare { background: var(--rosa); }
.knap:disabled { opacity: 0.45; cursor: default; }
.knap.lille { font-size: 0.8rem; padding: 0.3rem 0.8rem; }

input, select, textarea {
  font-family: 'Nunito Sans', sans-serif; font-size: 1rem; color: var(--grafit);
  background: #fff; border: 2px solid var(--grafit);
  border-radius: 12px 4px 10px 4px / 4px 10px 4px 12px;
  padding: 0.55rem 0.8rem; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(242,182,50,0.5); }
label { display: block; font-size: 0.8rem; font-weight: 800; margin: 0.9rem 0 0.25rem; }
label .valgfri { font-weight: 400; color: var(--graa); }

.felt-hjaelp { font-size: 0.75rem; color: var(--graa); margin-top: 0.2rem; }

.besked { padding: 0.7rem 1rem; margin: 0.8rem 0; font-size: 0.9rem; font-weight: 600;
  border: 2px dashed var(--grafit); border-radius: 12px; background: var(--papir-kort); }
.besked.fejl { border-color: var(--rosa); color: #a33; }
.besked.ok { border-color: var(--groen); color: #3c6b3a; }

/* ---------- topbjælke ---------- */

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 1.2rem; }
.topbar .pen { font-size: 1.35rem; transform: rotate(-20deg); }
.topbar h1 { font-size: 1.9rem; line-height: 1; }
@media (max-width: 430px) { .topbar h1 { font-size: 1.55rem; } .topbar .pen { font-size: 1.1rem; } }
.topbar h1 a { color: inherit; text-decoration: none; }
.topbar .hoejre { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.topbar .brugernavn { font-family: 'Caveat', cursive; font-size: 1.25rem; font-weight: 700; color: var(--blyantgul-moerk); }

/* ---------- kort / sektioner ---------- */

.kort { padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.4rem; position: relative; }
.kort.med-tape { margin-top: 1.1rem; }
.tape {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 110px; height: 26px; background: rgba(242,182,50,0.45);
  border-left: 1px dashed rgba(61,58,54,0.2); border-right: 1px dashed rgba(61,58,54,0.2);
}
.tema-jul .tape { background: rgba(178,58,58,0.35); }
.kort h2 { font-size: 1.9rem; line-height: 1.1; margin: 0.1rem 0 0.3rem; }
.kort .meta { font-size: 0.85rem; color: var(--graa); }
.kort .meta b { color: var(--grafit); }

h3.afsnit { font-size: 1.65rem; margin: 1.4rem 0 0.6rem 0.2rem; }
h3.afsnit .streg { display: block; width: 120px; height: 6px; margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M2 4 Q 30 1 60 3 T 118 3' stroke='%23f2b632' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }

/* ---------- udfordringsliste (forside) ---------- */

.uliste { list-style: none; }
.uliste li { margin-bottom: 1rem; }
.uliste a { display: block; text-decoration: none; color: inherit; padding: 0.9rem 1.1rem; }
.uliste h4 { font-family: 'Caveat', cursive; font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
.uliste .meta { font-size: 0.82rem; color: var(--graa); }
.uliste .badge { float: right; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0.15rem 0.55rem; border: 2px solid var(--grafit);
  border-radius: 20px 6px 18px 6px / 6px 18px 6px 20px; background: var(--blyantgul); }
.uliste .badge.graa { background: var(--kraft); }
.uliste .badge.groen { background: var(--groen); color: #fff; }

/* ---------- låge-væg ---------- */

.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 0.9rem; }
@media (min-width: 480px) { .doors { grid-template-columns: repeat(5, 1fr); } }
.door {
  aspect-ratio: 1; border-radius: 55px 8px 45px 8px / 8px 45px 8px 55px;
  border: 2px solid var(--grafit); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--papir-kort); cursor: default;
}
.door img { width: 100%; height: 100%; object-fit: cover; }
.door .check {
  position: absolute; right: 3px; bottom: 1px; font-size: 0.95rem;
  color: var(--groen); font-weight: 800; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.door.klikbar { cursor: pointer; }
.door.aktiv { border-color: var(--blyantgul); border-width: 3px; box-shadow: 0 0 0 3px rgba(242,182,50,0.35); }
.door.aktiv .maerkat, .door.afventer .maerkat, .door.afvist .maerkat {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-family: 'Caveat', cursive; font-size: 0.95rem; font-weight: 700;
  color: var(--blyantgul-moerk); text-shadow: 0 0 4px #fff, 0 0 4px #fff;
}
.door.afventer { border-color: var(--graa); }
.door.afventer .maerkat { color: var(--graa); }
.door.afvist .maerkat { color: var(--rosa); }
.door.laast, .door.tidslaast, .door.ude {
  background: var(--kraft); border-style: dashed; color: var(--graa); flex-direction: column;
}
.door .nr { font-family: 'Caveat', cursive; font-size: 1.7rem; font-weight: 700; }
.door .dato { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }

.taeller-visning { font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 700; margin-top: 0.5rem; }

/* ---------- hitliste ---------- */

.hitliste { padding: 0.4rem 0; }
.hitliste ol { list-style: none; }
.hitliste li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem;
  border-bottom: 1px dashed var(--linje); font-size: 0.93rem;
}
.hitliste li:last-child { border-bottom: none; }
.hitliste .plads { font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 700; width: 1.7rem; text-align: center; flex-shrink: 0; }
.hitliste li.foerste .plads { color: var(--blyantgul-moerk); position: relative; }
.hitliste li.foerste .plads::after {
  content: ''; position: absolute; inset: -3px -7px; border: 2px solid var(--rosa);
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; transform: rotate(-4deg);
}
.hitliste .navn { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.hitliste .navn small { display: block; font-weight: 400; color: var(--graa); font-size: 0.72rem; }
.hitliste .streak { font-size: 0.78rem; font-weight: 800; color: var(--rosa); white-space: nowrap; }
.hitliste .point { font-family: 'Caveat', cursive; font-size: 1.3rem; font-weight: 700; min-width: 2.4rem; text-align: right; }

/* ---------- galleri (tegninger) ---------- */

.galleri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 0.8rem; }
@media (min-width: 480px) { .galleri { grid-template-columns: repeat(3, 1fr); } }
.galleri figure { position: relative; }
.galleri img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: 2px solid var(--grafit); border-radius: 30px 6px 26px 6px / 6px 26px 6px 30px; background: #fff; }
.galleri figcaption { font-size: 0.75rem; color: var(--graa); margin-top: 0.15rem; padding-left: 0.2rem; }
.galleri .status-tag { position: absolute; top: 5px; right: 5px; font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 10px; background: #fff; border: 1.5px solid var(--grafit); }
.galleri .status-tag.afventer { color: var(--graa); }
.galleri .status-tag.afvist { color: var(--rosa); border-color: var(--rosa); }

/* ---------- reference-fremvisning + aflevering ---------- */

.ref-stor { text-align: center; }
.ref-stor img { max-width: 100%; max-height: 55vh; border: 2px solid var(--grafit);
  border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: #fff; }
.ref-stor .note { font-family: 'Caveat', cursive; font-size: 1.4rem; margin-top: 0.3rem; }

/* ---------- diverse ---------- */

.tom { text-align: center; color: var(--graa); padding: 1.6rem 1rem; font-size: 0.92rem; }
.tilbage { display: inline-block; font-size: 0.85rem; font-weight: 800; color: var(--grafit);
  text-decoration: none; margin-bottom: 0.7rem; }
.tilbage::before { content: '← '; }

.ver { position: fixed; bottom: 0.6rem; right: 0.85rem; font-size: 0.72rem; color: #aaa;
  background: rgba(250,247,240,0.85); padding: 0.1rem 0.4rem; border-radius: 8px; }
.ver a { color: #888; text-decoration: none; }

dialog { border: none; border-radius: 12px; padding: 1.4rem 1.6rem; max-width: 460px; width: calc(100% - 2rem);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2); background: var(--papir-kort); color: var(--grafit); }
dialog::backdrop { background: rgba(61,58,54,0.45); }
dialog h2 { font-size: 1.5rem; margin-bottom: 0.7rem; }
dialog .entry { margin-bottom: 1rem; }
dialog .entry b { font-size: 0.85rem; }
dialog .entry .date { color: #aaa; font-weight: 400; font-size: 0.75rem; margin-left: 0.4rem; }
dialog ul { margin: 0.3rem 0 0 1.1rem; }
dialog li { color: #555; font-size: 0.9rem; line-height: 1.5; }
dialog .close { margin-top: 0.6rem; }

.spinner { text-align: center; padding: 2rem; color: var(--graa); font-family: 'Caveat', cursive; font-size: 1.5rem; }

/* ---------- installér-prompt ---------- */

.ig-note { color: #555; font-size: 0.9rem; margin-bottom: 0.7rem; line-height: 1.5; }
#igSteps { margin: 0.5rem 0 0 1.2rem; line-height: 1.6; font-size: 0.92rem; color: #555; }
.install-banner { position: fixed; left: 50%; bottom: 2.6rem; transform: translateX(-50%);
  z-index: 1000; width: min(92vw, 420px); }
.ib-card { display: flex; align-items: center; gap: 0.7rem;
  background: var(--papir-kort); border: 2px solid var(--grafit);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 2px 4px 0 rgba(61,58,54,0.15), 0 8px 30px rgba(0,0,0,0.15);
  padding: 0.7rem 0.9rem; }
.ib-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ib-text b { font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.1; }
.ib-text span { font-size: 0.75rem; color: var(--graa); }
.ib-dismiss { background: none; border: 0; color: #999; cursor: pointer; font-size: 0.75rem;
  text-decoration: underline; padding: 0.2rem; }

@media (prefers-reduced-motion: no-preference) {
  .door.aktiv { animation: puls 2.4s ease-in-out infinite; }
  @keyframes puls { 50% { box-shadow: 0 0 0 6px rgba(242,182,50,0.2); } }
}