/*
 * Lila's Slikverden — grænseflade.
 *
 * Stilen: tykke afrundede piller, hvide kanter, hårde offset-skygger,
 * store trykflader til små fingre, og en lille hoppe-animation på alt
 * man rører. Ingen skarpe hjørner nogen steder.
 */

:root {
  --ink: #3d3240;
  --cream: #fff8ec;
  --paper: #fffdf7;
  --pink: #e2718f;
  --pink-d: #b8506c;
  --yellow: #f4d06a;
  --yellow-d: #cba644;
  --mint: #8ecfc4;
  --mint-d: #629d94;
  --green: #8ec98a;
  --green-d: #669c64;
  --lilac: #a884d6;
  --lilac-d: #7f5eab;
  --sky: #8fcfe0;
  --sky-d: #609fb2;
  --orange: #f0a35c;

  --pill: 999px;
  --r-lg: 30px;
  --r-md: 22px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --font: ui-rounded, 'Nunito', 'Baloo 2', 'Segoe UI Variable', 'Segoe UI',
    system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #2d2632;
  font-family: var(--font);
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------- HUD */

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.hud > * { pointer-events: auto; }

/* Spalten i venstre hjørne: badges, banenavn, "hvad mangler du her".
   Se kommentaren i ui.js — de skal ligge i en spalte, ikke oven i hinanden. */
.top-left {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: calc(12px + var(--safe-l));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 62vw;
  pointer-events: none;
}
.top-left > * { pointer-events: auto; }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 15px 0 8px;
  border-radius: var(--pill);
  background: var(--paper);
  border: 3.5px solid #fff;
  box-shadow: 0 4px 0 rgba(61, 50, 64, 0.28), 0 8px 18px rgba(61, 50, 64, 0.18);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.2px;
  color: var(--ink);
  white-space: nowrap;
}
.badge .glyph {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px;
  background: var(--yellow);
  border: 2.5px solid #fff;
  box-shadow: inset 0 -2px 0 rgba(61, 50, 64, 0.16);
}
.badge.candy .glyph { background: var(--pink); }
.badge.sticker .glyph { background: var(--lilac); }
.badge.friends .glyph { background: var(--mint); }
/* Missionsbadget er et helt canvas: portræt, ikon og prikker i én. */
.badge.mission { padding: 0 10px 0 4px; }
.badge.mission canvas { display: block; }
.badge .sub { opacity: 0.55; font-size: 14px; font-weight: 800; }
/* Badget er en knap til butikken. Den lille pose viser at der kan trykkes. */
.badge.tappable { cursor: pointer; padding-right: 34px; position: relative; }
.badge.tappable::after {
  content: '🛍';
  position: absolute;
  right: 9px;
  font-size: 14px;
  opacity: 0.65;
}
.badge.tappable:active { transform: translateY(3px); }

/* Missionsbadget åbner opgavelisten. Uden et lille mærke ligner det bare en
   visning, og så finder man aldrig listen. Listen var det Lila savnede mest,
   så den må ikke være skjult. */
.badge.mission.tappable { cursor: pointer; position: relative; padding-right: 12px; }
.badge.mission.tappable::after {
  content: '';
  position: absolute;
  right: -3px; top: -3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fffaf2;
  border: 3px solid var(--ink);
  box-sizing: border-box;
  background-image: radial-gradient(circle at 50% 50%, var(--ink) 0 2px, transparent 2px);
  animation: tapNudge 2.4s ease-in-out infinite;
}
.badge.mission.tappable:active { transform: translateY(3px); }
@keyframes tapNudge {
  0%, 74%, 100% { transform: scale(1); }
  80% { transform: scale(1.35); }
  88% { transform: scale(0.9); }
}

/* De fordele der kører lige nu — ét lærred med et ikon og en ring pr. fordel.
   Ligger i badge-rækken, så "hvad har jeg" står samlet ét sted. Selve klassen
   (BuffRow) hører til i ui.js; stilen står her, så den er klar når den kommer.
   Ingen polstring til venstre: ikonerne har deres egen luft indbygget. */
.badge.buffs { padding: 0 6px; }
.badge.buffs canvas { display: block; }
@media (max-height: 420px) { .badge.buffs { height: 34px; } }

.badge.pop { animation: badgePop 0.34s ease-out; }
@keyframes badgePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.16) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* Sidder under badge-rækken, ikke midt i den: missionsbadget må ikke dækkes. */
.area-title, .area-brief {
  border-radius: var(--pill);
  background: rgba(255, 253, 247, 0.9);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(61, 50, 64, 0.22);
  font-weight: 900;
  font-size: 15px;
  pointer-events: none;
  white-space: nowrap;
  /* Skjult betyder HØJDE NUL, ikke bare gennemsigtig. De to ligger i samme
     spalte som badgerne, og et usynligt element der stadig fylder 38 px ville
     efterlade et hul under badgerne resten af tiden. */
  opacity: 0;
  max-height: 0;
  padding: 0 20px;
  border-top-width: 0;
  border-bottom-width: 0;
  overflow: hidden;
  transition: opacity 0.5s, max-height 0.3s, padding 0.3s, border-width 0.3s, margin 0.3s;
  margin-top: 0;
}
.area-title.show, .area-brief.show {
  opacity: 1;
  max-height: 60px;
  padding: 7px 20px;
  border-top-width: 3px;
  border-bottom-width: 3px;
  margin-top: 6px;
}
/* "Hvad mangler du her": ikonet og tallet for hvert spor der ikke er i mål. */
.area-brief { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.area-brief .ab-item { display: flex; align-items: center; gap: 4px; }
.area-brief canvas { display: block; }
.area-brief.done { color: var(--green-d); }

.top-right {
  position: absolute;
  top: calc(10px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  display: flex;
  gap: 9px;
}

/* --------------------------------------------------------------- knapper */

.btn {
  appearance: none;
  border: 4px solid #fff;
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 900;
  font-size: 18px;
  padding: 13px 24px;
  box-shadow: 0 5px 0 var(--ink), 0 10px 20px rgba(61, 50, 64, 0.22);
  transition: transform 0.09s, box-shadow 0.09s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn:active, .btn.down {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--ink), 0 4px 10px rgba(61, 50, 64, 0.22);
}
.btn:disabled { opacity: 0.45; box-shadow: 0 5px 0 rgba(61,50,64,0.4); }

.btn.pink   { background: var(--pink);   color: #fff; box-shadow: 0 5px 0 var(--pink-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.yellow { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.mint   { background: var(--mint);   box-shadow: 0 5px 0 var(--mint-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.green  { background: var(--green);  box-shadow: 0 5px 0 var(--green-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.lilac  { background: var(--lilac);  color: #fff; box-shadow: 0 5px 0 var(--lilac-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.sky    { background: var(--sky);    box-shadow: 0 5px 0 var(--sky-d), 0 10px 20px rgba(61,50,64,0.22); }
.btn.pink:active, .btn.yellow:active, .btn.mint:active, .btn.green:active,
.btn.lilac:active, .btn.sky:active { box-shadow: 0 0 0 rgba(0,0,0,0.3); }

.btn.icon {
  width: 52px; height: 52px;
  padding: 0;
  font-size: 24px;
  border-radius: 50%;
}
.btn.big { font-size: 22px; padding: 17px 34px; }

/* -------------------------------------------------------------- joystick */

/* Hele skærmen er trækfelt. Feltet ligger under .hud (z-index 10), så
   knapperne stadig får deres tryk og man kan trække og hoppe samtidig. */
.stick-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
  touch-action: none;
}

/* Ringen findes ikke før man rører skærmen — den dukker op under fingeren. */
.stick {
  position: absolute;
  left: 0; top: 0;
  width: 140px; height: 140px;
  z-index: 6;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.34);
  border: 5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 0 rgba(61, 50, 64, 0.14);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.14s, transform 0.14s;
  pointer-events: none;
}
.stick.on { opacity: 1; transform: scale(1); }
.stick .knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  background: var(--paper);
  border: 5px solid #fff;
  box-shadow: 0 5px 0 rgba(61, 50, 64, 0.3);
}
.stick .knob::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0.85;
}

/* --------------------------------------------------------- handlingsknapper */

.actions {
  position: absolute;
  right: calc(18px + var(--safe-r));
  bottom: calc(18px + var(--safe-b));
  display: grid;
  /* .act-label placeres i forhold til denne blok. */
  /* Tre knapper i toppen (kraft, kamera) og to i bunden. Kraftknappen
     ligger VED SIDEN AF kameraet, ikke under handlingsknappen — den
     nederste række er der hvor tommelfingeren hviler, og den skal
     tilhøre det man gør hele tiden: hoppe og handle. */
  grid-template-areas: 'eat pow cam' '. act hop';
  gap: 12px;
  align-items: end;
  justify-items: end;
}
.actions.left { right: auto; left: calc(18px + var(--safe-l)); grid-template-areas: 'cam pow eat' 'hop act .'; }

.abtn {
  appearance: none;
  border: 5px solid #fff;
  border-radius: 50%;
  font-family: var(--font);
  font-weight: 900;
  color: var(--ink);
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 6px 0 rgba(61, 50, 64, 0.45), 0 12px 22px rgba(61, 50, 64, 0.2);
  transition: transform 0.09s, box-shadow 0.09s, opacity 0.2s;
  cursor: pointer;
  padding: 0;
}
.abtn:active, .abtn.down {
  transform: translateY(6px);
  box-shadow: 0 0 0 rgba(61, 50, 64, 0.45), 0 5px 12px rgba(61, 50, 64, 0.2);
}
.abtn.hop { grid-area: hop; width: 94px; height: 94px; font-size: 36px; background: var(--yellow); }
.abtn.act { grid-area: act; width: 76px; height: 76px; font-size: 30px; background: var(--mint); opacity: 0.42; }
.abtn.act.ready { opacity: 1; animation: readyPulse 1.1s ease-in-out infinite; }
.abtn.cam { grid-area: cam; width: 62px; height: 62px; font-size: 25px; background: var(--paper); }
/* Når missionen er "tag et billede", er kameraknappen selve målet. */
.abtn.cam.ready { animation: readyPulse 1.1s ease-in-out infinite; background: var(--yellow); }
/* I fototilstand bliver kameraet en udløser. */
.abtn.cam.shutter { background: var(--pink); }
.abtn.cam.shutter::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(61,50,64,0.25);
}
.abtn.cam.shutter canvas { display: none; }
.abtn { position: relative; }
.abtn canvas { display: block; pointer-events: none; }

@keyframes readyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

/* Sidder lige over knapblokken, så den aldrig kan dække kameraknappen. */
/* Peger på handlingsknappen når man står ved en ven uden at trykke. */
.tap-hint {
  grid-area: act;
  position: relative;
  align-self: end;
  justify-self: end;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.tap-hint.show { opacity: 1; }
.tap-hint canvas {
  position: absolute;
  left: -34px; top: -22px;
  animation: tapPoke 1.1s ease-in-out infinite;
  filter: drop-shadow(0 3px 4px rgba(61,50,64,0.35));
}
@keyframes tapPoke {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-6px, -10px) rotate(-8deg); }
}

.act-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  padding: 6px 15px;
  border-radius: var(--pill);
  background: var(--paper);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(61, 50, 64, 0.25);
  font-weight: 900;
  font-size: 15px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.act-label.show { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------------ toasts */

.toasts {
  position: absolute;
  left: 50%;
  top: calc(62px + var(--safe-t));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  z-index: 20;
  width: max-content;
  max-width: 88vw;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border-radius: var(--pill);
  background: var(--paper);
  border: 4px solid #fff;
  box-shadow: 0 5px 0 rgba(61, 50, 64, 0.3), 0 10px 22px rgba(61, 50, 64, 0.2);
  font-weight: 900;
  font-size: 16px;
  animation: toastIn 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
  max-width: 100%;
}
.toast.out { animation: toastOut 0.35s forwards; }
.toast .ticon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: var(--yellow); border: 2.5px solid #fff;
  flex: none;
}
.toast.sticker .ticon { background: var(--lilac); }
.toast.friend .ticon { background: var(--mint); }
/* Guldstjernen skal kunne skelnes fra et klistermærke på et halvt sekund —
   de er begge sjældne, og de kom før i den samme lilla boble med den samme
   akkord. Nu er stjernens gul, og lyden går højere. */
.toast.star .ticon { background: var(--yellow); }
.toast.star { border-color: var(--yellow); }
@keyframes toastIn {
  from { transform: translateY(-22px) scale(0.8); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateY(-16px) scale(0.9); opacity: 0; }
}

/* Overraskelser annonceres med et stort ikon, ikke med tekst. */
.event-banner {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  z-index: 22;
  pointer-events: none;
  background: var(--paper);
  border: 6px solid #fff;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 8px 0 rgba(61,50,64,0.3), 0 16px 34px rgba(61,50,64,0.3);
  animation: eventIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.event-banner canvas { display: block; }
.event-banner.out { animation: eventOut 0.45s forwards; }
@keyframes eventIn {
  from { transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes eventOut {
  to { transform: translate(-50%, -140%) scale(0.7); opacity: 0; }
}

/* ------------------------------------------------------------------ sheets */

.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  background: rgba(61, 50, 64, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn 0.2s;
}
.screen.plain { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card {
  background: var(--cream);
  border: 6px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 0 rgba(61, 50, 64, 0.35), 0 22px 50px rgba(61, 50, 64, 0.35);
  padding: 18px;
  /* Kortet fylder med vilje IKKE hele skærmen.
   *
   * At trykke ude i det mørke lukker vinduet, og det er den vej et barn
   * finder først — men den virker kun hvis der ER noget mørkt at ramme. Før
   * gik kortet helt ud til kanten, og så var der reelt ingen vej ud uden at
   * finde den rigtige knap. Nu er der en synlig mørk ramme hele vejen rundt.
   * De skærme der har meget indhold ruller indvendigt (`col-card`), så de
   * bliver ikke klemt af det her. */
  width: min(660px, 90%);
  max-height: 86%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  animation: cardIn 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes cardIn {
  from { transform: translateY(24px) scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.card h1 { font-size: 26px; margin: 2px 0 4px; }
.card h2 { font-size: 20px; margin: 16px 0 8px; }
.card p { margin: 6px 0; font-weight: 700; line-height: 1.45; font-size: 16px; }
.card .muted { opacity: 0.65; font-size: 14px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.card-head h1 { flex: 1; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.row.center { justify-content: center; }
.grow { flex: 1; }

/* ----------------------------------------------------------- kort/områder */

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.area-card {
  position: relative;
  border: 5px solid #fff;
  border-radius: var(--r-md);
  padding: 12px;
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(61, 50, 64, 0.28);
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  color: var(--ink);
}
.area-card:active { transform: translateY(5px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.area-card .aicon { font-size: 34px; line-height: 1; }
/* Navnene skal stå på ÉN linje. De er valgt korte netop derfor, og
   `overflow-wrap` er kun en nødbremse: skulle en skærm være smallere end
   forventet, brækker ordet i stedet for at stikke ud over kortkanten og
   løbe ind i nabokortet. */
.area-card .aname {
  font-weight: 900;
  font-size: 15px;
  margin-top: 6px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.area-card .asub { font-weight: 700; font-size: 13px; opacity: 0.65; margin-top: 2px; }
/* Systuen. Den ligger blandt banerne, men den ER ikke en bane: lilla kant
   og ingen fire spor, så et barn kan se på afstand at det er noget andet. */
.area-card.bonus { border-color: var(--lilac, #a884d6); background: #fbf3ff; }
.area-card .abar {
  margin-top: 9px; height: 12px; border-radius: var(--pill);
  background: rgba(61, 50, 64, 0.12); overflow: hidden;
  border: 2px solid rgba(255,255,255,0.9);
}
.area-card .abar i { display: block; height: 100%; background: var(--pink); border-radius: var(--pill); }
.area-card.locked { opacity: 0.6; }
.area-card.locked .aicon { filter: grayscale(1); }
.area-card .lock {
  position: absolute; top: 8px; right: 8px;
  background: var(--paper); border: 3px solid #fff; border-radius: var(--pill);
  font-size: 12px; font-weight: 900; padding: 3px 9px;
  box-shadow: 0 3px 0 rgba(61,50,64,0.2);
}
.area-card.current { border-color: var(--yellow); }
/* En bane der er helt i mål får grøn kant og et grønt skilt. Det er den ene
   tilstand kortet SKAL kunne vise uden at man tæller efter. */
.area-card.clear { border-color: var(--green); }
.area-card .lock.done { background: var(--green); color: #fff; }

/* --------------------------------------------------------- de fire spor */

/* Fire streger, ét svar. Rækkefølgen er fast — opgaver, slik, stjerner,
   legesteder — så de står samme sted på banekortet og i opgavelisten, og
   barnet kan genkende dem på placeringen alene. */
.tracks { display: grid; gap: 7px; margin-top: 10px; }
.track {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.track canvas { display: block; }
.track .tn { font-weight: 800; font-size: 14px; opacity: 0.75; }
.track .tbar {
  height: 12px; border-radius: var(--pill);
  background: rgba(61, 50, 64, 0.12); overflow: hidden;
  border: 2px solid rgba(255,255,255,0.9);
}
.track .tbar i {
  display: block; height: 100%; border-radius: var(--pill);
  background: var(--pink);
  transition: width 0.3s;
}
.track .tc { font-weight: 900; font-size: 13px; min-width: 34px; text-align: right; }
/* Færdigt spor: grøn streg og et flueben i stedet for tallene. Et barn der
   ikke læser tal kan stadig se at netop den række er slut. */
.track.ok .tbar i { background: var(--green); }
.track.ok .tc { color: var(--green-d); font-size: 17px; }
.tracks.done .track .tbar { border-color: var(--green); }

/* På banekortet er der ikke plads til navnene, så sporene står to og to.
   Ikonet bærer betydningen — det er de samme fire ikoner som spillet bruger
   alle andre steder for slik, stjerner, opgaver og leg. */
.tracks.tight { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; }
.tracks.tight .track { grid-template-columns: auto 1fr auto; gap: 5px; }
.tracks.tight .tbar { height: 9px; }
.tracks.tight .tc { font-size: 11px; min-width: 26px; }
.tracks.tight .track.ok .tc { font-size: 14px; }

/* Opgavelisten: hvilken bane sporene handler om. Uden den overskrift kunne
   man tro tallene gjaldt hele spillet. */
/* Pokalskærmen. Grøn kant hele vejen rundt, så man kan se på tværs af stuen
   at det er en FÆRDIG-skærm og ikke en almindelig menu. */
.done-card { border-color: var(--green); text-align: center; }
.done-card .card-head { justify-content: center; }
.done-card .done-icon { font-size: 46px; line-height: 1; }
.done-card .done-name { font-weight: 900; font-size: 20px; margin: 2px 0 8px; }
.done-card .tracks { max-width: 340px; margin-left: auto; margin-right: auto; }
.done-card .track { text-align: left; }
/* Sporene og Lila ved siden af hinanden — se kommentaren i openAreaDone. */
.done-row {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; flex-wrap: wrap;
}
.done-row .tracks { flex: 1 1 250px; margin: 0; }
.done-row .lila-siger { flex: 1 1 250px; margin: 0; }

.log-area { font-weight: 900; font-size: 16px; margin-top: 4px; }
.quest-hint.ok { color: var(--green-d); opacity: 1; font-weight: 900; }

/* ------------------------------------------------------------------- værten

   Lila. Hun har tre pladser i spillet (se src/vaert.js): velkomsten, pokalen
   og slutningen. To former: hel figur på en skærm der er HENDES, og en lille
   udgave med en taleboble på en skærm der er noget andet. */

.vaert-card { text-align: center; border-color: var(--pink); }
.vaert-card .card-head { justify-content: center; }
.vaert-figur { display: block; margin: 0 auto; }
.vaert-navn { margin: 2px 0 6px; }
.vaert-tale {
  font-weight: 700; font-size: 15.5px; line-height: 1.4;
  max-width: 400px; margin: 0 auto 8px;
}
/* Figur til venstre, tekst og knap til højre. Det er dét der holder "Kom så!"
   over skærmkanten på en liggende telefon — se kommentaren i vaert.js. */
.vaert-row {
  display: flex; align-items: center; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.vaert-row .vaert-figur { flex: none; margin: 0; }
.vaert-tekst { flex: 1 1 260px; min-width: 240px; text-align: left; }
.vaert-tekst .vaert-tale { margin-left: 0; }
.vaert-tekst .vaert-navn { text-align: left; }
.vaert-tekst .card-head { justify-content: flex-start; margin-bottom: 4px; }
.vaert-tekst .card-head .done-icon { font-size: 32px; line-height: 1; }

/* Den lille udgave: hun står til venstre og siger noget. Bobelen har halen
   ind mod hende, så det er tydeligt hvem der taler — der står andre navne på
   den her skærm. */
.lila-siger {
  display: flex; align-items: center; gap: 4px;
  max-width: 400px; margin: 10px auto 4px; text-align: left;
}
.lila-siger .vaert-figur { flex: none; margin: 0; }
.ls-boble {
  position: relative; flex: 1;
  background: var(--mint); border: 4px solid #fff;
  border-radius: var(--r-md); padding: 9px 12px;
  box-shadow: 0 4px 0 rgba(61, 50, 64, 0.18);
}
.ls-boble::before {
  content: ''; position: absolute; left: -13px; top: 50%;
  width: 0; height: 0; margin-top: -9px;
  border: 9px solid transparent; border-right-color: #fff;
}
.ls-boble b { display: block; font-size: 13px; opacity: 0.6; }
.ls-boble span { font-weight: 800; font-size: 15px; line-height: 1.35; }

/* Tallene på slutskærmen: fire ting man kan pege på og tælle sammen. */
.tak-tal {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 6px; margin: 8px 0 2px;
}
.tak-tal .tt {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.6); border-radius: var(--r-md);
  padding: 6px 9px;
}
.tak-tal .tt-e { font-size: 21px; line-height: 1; }
.tak-tal .tt b { font-size: 18px; }
.tak-tal .tt span { font-size: 12px; opacity: 0.7; font-weight: 700; }

/* ---------------------------------------------------------------- dialog */

.talk {
  position: absolute;
  left: 50%;
  bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%);
  width: min(640px, calc(100% - 24px));
  z-index: 25;
}
.talk .bubble {
  background: var(--paper);
  border: 6px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 0 rgba(61, 50, 64, 0.3), 0 16px 34px rgba(61, 50, 64, 0.28);
  padding: 14px 16px;
  animation: cardIn 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.talk .who {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.talk .who canvas {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 3px 0 rgba(61,50,64,0.25);
  background: var(--mint);
  flex: none;
}
.talk .who .nm { font-weight: 900; font-size: 19px; }
/* Billedsætningen: portræt + ønske + prikker. Den er det primære indhold. */
.talk .strip { display: block; margin: 0 auto 8px; max-width: 100%; }
/* Sætningen er sekundær — den er til den voksne der læser højt. */
.talk .line { font-weight: 700; font-size: 15px; line-height: 1.35; opacity: 0.72; text-align: center; }
.btn.icon-btn { padding: 10px 26px; }
.btn.icon-btn canvas { display: block; }
.talk .prog {
  margin-top: 10px; display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 15px;
}
.talk .prog .bar {
  flex: 1; height: 16px; border-radius: var(--pill);
  background: rgba(61,50,64,0.12); overflow: hidden;
  border: 3px solid #fff;
}
.talk .prog .bar i { display: block; height: 100%; background: var(--green); border-radius: var(--pill); transition: width 0.4s; }
.talk .row { margin-top: 12px; justify-content: flex-end; }

/* ------------------------------------------------------------------ systuen

   Figuren til venstre med trøjen på, valgene til højre. Samme greb som Lilas
   skærme: en række i stedet for en stak, så knapperne bliver over skærmkanten
   på en liggende telefon. */

.design-card { border-color: var(--lilac, #a884d6); }
.design-card .card-head { justify-content: flex-start; margin-bottom: 6px; }
.design-card .card-head .done-icon { font-size: 30px; line-height: 1; }
.design-row {
  display: flex; align-items: flex-start; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.design-row > canvas { flex: none; }
.design-valg { flex: 1 1 460px; min-width: 300px; }
.design-valg .opt-row { margin-bottom: 6px; }
.design-valg .chips { gap: 8px; }
/* Stofprøverne er billeder og skal have samme trykflade som de andre brikker. */
.design-valg .chip.sw { width: 46px; height: 46px; padding: 0; overflow: hidden; }
/* Fanebladene: ét valg ad gangen. De skal være STORE — det er dem man
   trykker på først, og de tre er hele navigationen i skærmen. */
.design-faner { display: flex; gap: 8px; margin-bottom: 10px; }
.design-faner .chip.fane {
  flex: 1; min-height: 52px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 900; font-size: 14px;
}
.design-faner .chip.fane .fi { font-size: 20px; line-height: 1; }
.design-krop { min-height: 112px; }
.design-valg .chip.sw canvas { display: block; margin: 2px; }

/* -------------------------------------------------------------- figurbygger */

.builder { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.builder .preview {
  flex: 0 0 160px;
  /* Bliver hængende øverst, så man kan se figuren mens man vælger tøj.
     Uden align-self ville flexbox strække kassen ned under skærmkanten. */
  align-self: flex-start;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(#dff0f6, #f4fbf6);
  border: 5px solid #fff;
  border-radius: var(--r-md);
  box-shadow: 0 5px 0 rgba(61,50,64,0.22);
  display: grid; place-items: center;
  padding: 8px;
}
.builder .preview canvas { width: 100%; height: auto; display: block; }
.builder .opts { flex: 1 1 320px; min-width: 260px; }

.opt-row { margin-bottom: 12px; }
.opt-row .lbl { font-weight: 900; font-size: 14px; margin-bottom: 6px; opacity: 0.75; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  appearance: none;
  border: 4px solid #fff;
  border-radius: var(--pill);
  background: var(--paper);
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  padding: 9px 15px;
  box-shadow: 0 4px 0 rgba(61, 50, 64, 0.25);
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.09s, box-shadow 0.09s;
}
.chip:active { transform: translateY(4px); box-shadow: 0 0 0; }
.chip.on { background: var(--yellow); border-color: #fff; }
.chip.sw { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.chip.sw.on { outline: 4px solid var(--ink); outline-offset: 2px; }
.chip.locked { opacity: 0.45; }

/* Billedbrikker: hver brik viser BARNETS EGEN figur med netop den ene ting
   skiftet ud. Et barn der ikke læser kan ikke vælge mellem ordene
   "hættetrøje" og "overall", men det kan se forskellen på to billeder. */
.chip.pic {
  padding: 3px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(#eaf6fb, #fbfdf7);
}
.chip.pic canvas { display: block; }
.chip.pic.on { background: var(--yellow); }
/* Låst er ikke det samme som utilgængeligt: man må gerne prøve. Derfor kun
   en let nedtoning, ikke den halvt usynlige der siger "rør mig ikke". */
.chip.pic.locked { opacity: 0.72; }
/* Den man har på PRØVE får en tydelig ramme — det er ikke det samme som at
   have valgt den, og forskellen skal kunne ses uden at læse. */
.chip.trying {
  outline: 4px dashed var(--pink);
  outline-offset: 2px;
  opacity: 1;
}
.chip-price {
  position: absolute;
  bottom: -6px; right: -6px;
  background: var(--paper);
  border: 3px solid #fff;
  border-radius: var(--pill);
  font-size: 11px;
  font-weight: 900;
  padding: 1px 6px;
  box-shadow: 0 2px 0 rgba(61,50,64,0.2);
}

/* Prisskiltet under figuren mens man prøver noget. Det findes kun i det
   øjeblik der ER noget på prøve — ellers er der ingen pris at forholde sig til. */
.try-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(244, 168, 196, 0.16);
  border: 3px dashed var(--pink);
  border-radius: var(--r-md);
}
.try-what {
  background: linear-gradient(#eaf6fb, #fbfdf7);
  border: 3px solid #fff;
  border-radius: 14px;
  padding: 2px;
  display: grid;
  place-items: center;
}
.try-what canvas { display: block; }
.try-price {
  display: flex; align-items: center; gap: 5px;
  background: var(--paper);
  border: 3px solid #fff;
  border-radius: var(--pill);
  padding: 3px 11px 3px 6px;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 3px 0 rgba(61,50,64,0.2);
}
.try-price.short { opacity: 0.55; }
.btn.buy { padding: 6px 12px; min-width: 0; }
.btn.buy canvas { display: block; }

/* ---------------------------------------------------------- stjernebogen */

.card.col-card > .star-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }
.star-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 4px solid #fff;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(61,50,64,0.2);
  margin-bottom: 8px;
}
.star-row.full { border-color: var(--yellow); }
.star-row .sname { font-weight: 900; font-size: 15px; flex: 0 0 40%; }
.star-row .sdots { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; }
.sdot { font-size: 19px; line-height: 1; color: rgba(61,50,64,0.24); }
.sdot.on { color: #f4c534; text-shadow: 0 1px 0 rgba(61,50,64,0.35); }
/* De fortjente står med deres tegn under stjernen — uret for en høj score,
   fluebenet for alle missioner. De ligner ikke de fundne, fordi de ikke ER
   det samme: man kan ikke gå ud og finde dem. */
.sdot.earned {
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  padding: 1px 3px;
  border-radius: 8px;
  background: rgba(61,50,64,0.07);
}
.sdot.earned canvas { display: block; }
.sdot.earned i { font-style: normal; font-size: 14px; line-height: 1; margin-top: -2px; }
.star-row .scount { font-weight: 900; font-size: 15px; min-width: 40px; text-align: right; }
.star-what { margin-top: 10px; display: grid; gap: 6px; }
.sw-row { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; }
.sw-row canvas { display: block; flex: none; }
.star-all { font-size: 19px; font-weight: 900; }
/* På en bred skærm står forklaringen i to spalter — så fylder den to linjer
   i stedet for fire, og der er plads til flere baner uden at rulle. */
@media (min-width: 620px) {
  .star-what { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
@media (max-height: 470px) {
  .star-row { padding: 4px 8px; margin-bottom: 5px; border-width: 3px; }
  .star-row .sname { font-size: 13px; flex-basis: 36%; }
  .star-row .scount { font-size: 13px; min-width: 34px; }
  .sdot { font-size: 15px; }
  .sdot.earned { padding: 0 2px; margin-left: 4px; }
  .sdot.earned i { font-size: 12px; }
  .star-what { margin-top: 7px; gap: 4px; }
  .sw-row { font-size: 12px; gap: 7px; }
  .star-all { font-size: 17px; }
}

/* ---------------------------------------------------------------- butik */

/*
 * Butikkens grammatik i CSS.
 *
 * Kravet der styrer alt herunder: en femårig skal kunne se hele butikken uden
 * at rulle på en liggende telefon ned til 640x300. Løsningen er den samme som
 * i opgavelisten og vejviseren — kun MIDTEN ruller. Pungen, heltemålet,
 * fanerne og Luk-knappen står stille, uanset hvor lav skærmen er.
 *
 * Farverne siger tilstanden, ikke ordene:
 *   gul pris   = du sparer op        (baren er ikke fuld)
 *   grøn pris  = tryk nu             (baren ER fuld)
 *   grøn ✓     = den er din
 *   gråt       = knappen gør ingenting, og den ser sådan ud
 */

/* Stående telefon: kortet er så højt som indholdet (op til kortets 86 %), og
   midten vokser med. Liggende telefon har fast korthøjde, og der skal midten
   i stedet være `flex: 1 1 0`, så den tager PRÆCIS det der er tilovers — se
   afsnittet om lave skærme længere nede. */
.card.col-card > .shop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }
.card.col-card.shop > .shop-nav { flex: none; }
.shop-nav { display: flex; flex-direction: column; min-width: 0; }
.shop-foot { margin-top: 8px; }
.shop-grid { align-content: start; }

/* Pungen: samme badge som i HUD'en, men med det tegnede slikikon i stedet for
   en emoji, så tallet i butikken og tallet ude i verdenen er det SAMME tal. */
.badge.purse { margin-left: auto; padding: 0 14px 0 6px; }
.badge.purse canvas { display: block; }
.buffbar { display: block; flex: none; }

/* --------------------------------------------------------- heltemålet */

/* ÉN ting øverst: det mål der er tættest på. Den er bredere og lysere end
   fliserne, så den læses som en overskrift og ikke som endnu en vare. */
.shop-goal {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 12px 6px 8px;
  border: 4px solid #fff; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fffdf7, #fff3d9);
  box-shadow: 0 4px 0 rgba(61,50,64,0.2);
  font-family: var(--font); color: var(--ink); text-align: left;
  cursor: pointer;
}
.shop-goal:active { transform: translateY(3px); box-shadow: 0 0 0; }
.shop-goal canvas { display: block; flex: none; }
.shop-goal .gtxt { flex: 1 1 auto; min-width: 0; }
.shop-goal .gn {
  font-weight: 900; font-size: 15px; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-goal .pbar { margin-top: 4px; }
.shop-goal.ready { background: linear-gradient(180deg, #f4ffe9, #dcf3d2); }

/* ------------------------------------------------------------- fanerne */

.shop-tabs {
  display: flex; gap: 6px; margin-bottom: 8px;
  overflow-x: auto; padding-bottom: 2px;
}
.shop-tab {
  flex: 1 1 0; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  /* min-height 48: fanebladene målte 43 px, én under fingergrænsen. */
  padding: 6px 4px 7px; min-height: 48px; justify-content: center;
  border: 3.5px solid #fff; border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 3px 0 rgba(61,50,64,0.18);
  font-family: var(--font); font-weight: 900; font-size: 11px;
  color: var(--ink); cursor: pointer;
  opacity: 0.6;
}
.shop-tab canvas { display: block; }
.shop-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shop-tab.on { opacity: 1; background: var(--yellow); box-shadow: 0 3px 0 rgba(61,50,64,0.3); }
.shop-tab:active { transform: translateY(3px); box-shadow: 0 0 0; }

/* --------------------------------------------------------------- prikker */

/* Prikkerne er spillets eneste "tal". De bruges til opsparing (fem), til
   niveauer (fem) og til lageret (tre) — og de ser ens ud alle tre steder,
   for det er dén genkendelse der gør dem læsbare uden ord. */
.pips { display: flex; gap: 4px; align-items: center; }
.pips i {
  /* `flex: none` er ikke pynt: uden den klemmes prikkerne til tynde streger,
     når banemærket ved siden af er bredt — og en prik man ikke kan tælle er
     ikke en prik. */
  flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(61,50,64,0.15);
  border: 2px solid transparent;
  box-sizing: border-box;
}
.pips i.on { background: var(--yellow); border-color: rgba(61,50,64,0.55); }
.pips.lvl i.on { background: var(--mint); }
.pips.stock i.on { background: var(--green); }
/* Næste niveau blinker svagt: dét er det man kan få nu. */
.pips i.next { background: #fff; border-color: var(--ink); animation: pipNext 1.6s ease-in-out infinite; }
/* Niveauer gaverne aldrig når: en ring i stedet for en fyldt prik, så man kan
   se at der er noget mere — og at det kun kan købes. */
.pips i.buy { background: none; border-color: rgba(61,50,64,0.4); border-style: dashed; }
.pips.tiny i { width: 7px; height: 7px; border-width: 1.5px; }
@keyframes pipNext { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }

/* Baren under prikkerne. Den viser den bløde fremgang MELLEM to prikker — uden
   den ville et barn ikke se at der skete noget på de første tyve slik. */
.pbar {
  height: 6px; border-radius: 3px;
  background: rgba(61,50,64,0.13);
  overflow: hidden;
}
.pbar i { display: block; height: 100%; border-radius: 3px; background: var(--yellow); transition: width 0.25s; }

/* ------------------------------------------------------------- fliserne */

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.shop-grid.pantry { grid-template-columns: 1fr; gap: 6px; }
/* Kasserne er to, og de er dét man drømmer om. De får lov at være store og
   stå midt på i stedet for at klemme sig op i venstre hjørne af et gitter
   der er bygget til seksten tøjting. */
.shop-grid.box { grid-template-columns: repeat(2, minmax(140px, 230px)); justify-content: center; gap: 12px; }

.tile {
  position: relative;
  border: 4px solid #fff; border-radius: var(--r-md);
  background: var(--paper); padding: 8px 9px 9px;
  box-shadow: 0 4px 0 rgba(61,50,64,0.22);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-family: var(--font); text-align: left; color: var(--ink);
  cursor: pointer;
}
.tile:active { transform: translateY(3px); box-shadow: 0 0 0; }
.tile canvas { display: block; }
/* "Sommerfuglenet" er ét langt ord i en 108 px bred flise. Uden det her
   stikker det ud over kanten i stedet for at brække. */
.tile .tn { font-weight: 900; font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
.tile .tw { font-weight: 700; font-size: 11px; opacity: 0.6; line-height: 1.28; }
.tile .pbar { width: 100%; }
/* Bundlinjen: prikker til venstre, pris til højre, altid på samme linje.
   Den smalleste flise er 108 px indeni, og der SKAL begge dele kunne være —
   ellers stikker prisen ud over kanten, og en pris der er halvt uden for sit
   kort er værre end ingen pris. Derfor er både prikker og pris skruet ned
   herinde, mens de er store i heltemålet foroven. */
.tile .tfoot { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: auto; }
.tile .tfoot > .price, .tile .tfoot > .abadge { margin-left: auto; flex: none; }
.tile .tfoot .pips { flex: 0 1 auto; min-width: 0; overflow: hidden; gap: 2.5px; }
.tile .tfoot .pips i { width: 8px; height: 8px; border-width: 1.6px; }
.tile .tfoot .price { font-size: 12px; padding: 1px 7px 1px 3px; border-width: 2.5px; }
.tile .tfoot .abadge { font-size: 11px; padding: 1px 7px 1px 3px; border-width: 2.5px; }

/* Prisen: slikikon + tal. Ét mønster i hele butikken. */
.price {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px 2px 4px;
  border: 3px solid #fff; border-radius: var(--pill);
  background: var(--yellow);
  font-weight: 900; font-size: 13px;
}
.price canvas { display: block; }
.price.go { background: var(--green); }
.price.ok, .price.full { background: var(--green); padding: 2px 6px; }

/* Kan man ikke købe endnu, skal knappen SE ud som om den ikke virker. Det er
   ikke pynt — det er forskellen på "vent lidt" og "der skete ikke noget". */
.tile.saving .price { background: #e4dce4; }
.tile.saving, .tile.area, .tile.full { box-shadow: 0 3px 0 rgba(61,50,64,0.14); }
.tile.saving canvas, .tile.area canvas { opacity: 0.9; }
.tile.owned { opacity: 0.72; }

/* Klar til køb: den ene flise der lyser. */
.tile.ready { border-color: var(--green); background: #f7fff2; box-shadow: 0 4px 0 rgba(102,156,100,0.4); }

/* Banemærket der står i stedet for prisen: "kom her igen når du har været der". */
.abadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px 2px 5px;
  border: 3px solid #fff; border-radius: var(--pill);
  background: #ded8e8;
  font-weight: 900; font-size: 12px;
}
.abadge .ae { font-size: 15px; }

/* Mærket på niveau 4-5: dem kan gaverne ikke give. */
.tile .lvlup { position: absolute; top: -8px; right: -6px; }
.tile .lvlup canvas { display: block; }

/* ------------------------------------------------------------ spisekammer */

/* To knapper pr. linje: køb til venstre, brug til højre. Begge skal kunne
   ses — et barn opdager ikke en handling der er gemt bag et langt tryk. */
.tile.pantry { flex-direction: row; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.tile.pantry:active { transform: none; box-shadow: 0 4px 0 rgba(61,50,64,0.22); }
.tile.pantry .tmain {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: none; border: none; font-family: var(--font); color: var(--ink);
  text-align: left; cursor: pointer;
}
.tile.pantry .tmain:active { background: rgba(244,208,106,0.22); }
.tile.pantry .tmid { flex: 1 1 auto; min-width: 0; }
.tile.pantry .tmid .tw { display: block; }
.tile.pantry .tmid .pips { margin-top: 3px; }
.tile.pantry .pcol { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tile.pantry .pcol .pbar { width: 62px; }
.tile.pantry .tuse {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 62px;
  border: none; border-left: 4px solid #fff;
  background: var(--green);
  font-family: var(--font); font-weight: 900; font-size: 11px; color: var(--ink);
  cursor: pointer;
}
.tile.pantry .tuse canvas { display: block; }
.tile.pantry .tuse:active { filter: brightness(0.94); }
.tile.pantry .tuse.off { background: #e4dce4; opacity: 0.55; }

/* ------------------------------------------------------- Mystery Box-kort */

/* Kortene vendes ét ad gangen. Vendingen er en rigtig 3D-drejning, fordi den
   er den eneste bevægelse der siger "der var noget på bagsiden" — en toning
   ville bare se ud som om billedet blev skiftet ud. */
.card.col-card > .box-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  /* `safe center` og ikke bare `center`: er der flere kort end der er plads
     til, skubber almindelig centrering den første række op over kanten, hvor
     man ikke kan rulle hen til den. Og den første er den store gave. */
  align-content: safe center;
  padding: 4px 2px;
}
.box-card {
  width: var(--cw, 100px); height: calc(var(--cw, 100px) * 1.24);
  perspective: 620px;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.bc-in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.box-card.on .bc-in { transform: rotateY(180deg); }
.bc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 4px solid #fff; border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(61,50,64,0.26);
  font-family: var(--font); color: var(--ink); overflow: hidden;
}
.bc-back { background: linear-gradient(180deg, #ffe3ec, #ffc9d9); }
.box-card.big .bc-back { background: linear-gradient(180deg, #fff1c8, #f7dc92); }
.bc-front { transform: rotateY(180deg); background: linear-gradient(180deg, #fffdf7, #f2f9ee); }
.box-card.big .bc-front { border-color: var(--yellow); }
.bc-face canvas { display: block; }
.bc-face .bemoji { font-size: 34px; line-height: 1; }
/* Navnene på gaverne må brække — "Regnbueslush" klippet til "Regnbueslu" ser
   ud som en fejl, mens to linjer bare er et langt navn. */
.bc-face .bn {
  font-weight: 900; font-size: 10.5px; text-align: center; line-height: 1.12;
  padding: 0 4px; max-width: 100%; overflow-wrap: anywhere;
}
.bc-face .abadge { font-size: 9px; max-width: 100%; overflow: hidden; padding: 1px 6px 1px 2px; }
.bc-face .abadge .ae { font-size: 11px; }
.bc-face .bl { font-weight: 900; font-size: 16px; }
/* Tillægget ("og 280 slik oveni") ligger i hjørnet og ikke i rækken: en gave
   fra topskuffen har både navn og banemærke, og så er der ikke en linje mere
   at give væk uden at noget bliver dækket. */
.bc-face .bplus {
  position: absolute; top: 3px; right: 3px;
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 900; font-size: 10px;
  background: var(--yellow); border: 2px solid #fff; border-radius: var(--pill);
  padding: 0 5px 0 1px;
}
.box-card:active .bc-in { transform: scale(0.96); }
.box-card.on:active .bc-in { transform: rotateY(180deg) scale(0.96); }
.boxhint { font-weight: 800; font-size: 12px; opacity: 0.6; }
.btn.pulse { animation: pipNext 1.3s ease-in-out infinite; }

/* ------------------------------------------------ butikken på lave skærme */

/* Teksten til den voksne ryger først: den er en ekstra, ikonet og prisen er
   det barnet bruger. Derefter bliver fliserne smallere, så to rækker stadig
   kan ses i det felt der ruller. */
@media (max-height: 470px) {
  /*
   * På en liggende telefon har butikskortet FAST højde, ikke "så høj som
   * indholdet".
   *
   * To ting følger af det, og begge er nødvendige: kortet bliver lige højt
   * uanset hvilken fane man står på (ellers hopper Luk-knappen op og ned når
   * man skifter fane), og restpladsen i midten er den samme hver gang, så
   * flisestørrelsen kan måles ind én gang — se `fitIcons` i screens.js.
   *
   * 94 % i stedet for kortets normale 86 %: de 41 px er forskellen på at se en
   * hel flise og at se den halve, og i siderne er der stadig mørkt at trykke
   * på for at komme ud.
   */
  .card.col-card.shop, .card.col-card.boxopen { height: 94%; max-height: 94%; }
  .card.col-card > .shop-body, .card.col-card > .box-grid { flex: 1 1 0; }
  .tile .tn { font-size: 13px; }
  .card.shop, .card.boxopen { padding: 12px; }
  .card.shop .card-head, .card.boxopen .card-head { margin-bottom: 5px; flex-wrap: nowrap; }
  .card.shop .card-head h1 { flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
  /* Målet og fanerne side om side. Målet får halvdelen: det er større end en
     fane og skal kunne læses på afstand af en voksen der sidder ved siden af. */
  .shop-nav { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 6px; }
  .shop-nav > .shop-goal { flex: 1 1 auto; min-width: 0; width: auto; margin-bottom: 0; }
  .shop-goal .gtxt { min-width: 60px; }
  /*
   * På den liggende telefon står fanerne som rene billeder.
   *
   * Der er plads til fem navne ELLER til at heltemålet kan vise hvad man
   * sparer op til — ikke begge dele. Målet vinder: fanernes ikoner går igen
   * på fliserne inde i hver fane, så de kan læres af sig selv, mens navnet på
   * det man sparer op til er den ene tekst der skifter og betyder noget.
   * Navnet bliver stående som `aria-label`, så det stadig kan læses op.
   */
  .shop-nav > .shop-tabs { flex: 0 0 auto; min-width: 0; margin-bottom: 0; }
  .shop-tab { min-width: 44px; padding: 4px 5px; }
  .shop-tab span { display: none; }
  /* Hver px sparet på prikker og pris bliver til plads til navnet — og navnet
     er det eneste i striben man ikke kan gætte sig til. */
  .shop-goal .pips { gap: 3px; }
  .shop-goal .pips i { width: 9px; height: 9px; }
  .shop-goal .price { font-size: 13px; padding: 2px 8px 2px 3px; }
  .shop-goal .gn { font-size: 14px; }
  .shop-foot .btn { padding: 9px 20px; font-size: 16px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 6px; }
  .shop-grid.box { grid-template-columns: repeat(2, minmax(126px, 200px)); gap: 8px; }
  .tile { padding: 6px 7px 7px; gap: 3px; }
  .tile .tw { display: none; }
  .tile.pantry .tmid .tw { display: block; font-size: 10px; }
  .shop-goal { padding: 4px 10px 4px 6px; margin-bottom: 6px; }
  .shop-goal .gn { font-size: 13px; }
  .shop-tabs { margin-bottom: 6px; }
  .shop-tab { padding: 3px 3px 4px; font-size: 9.5px; }
  .shop-foot { margin-top: 6px; }
  .pips i { width: 9px; height: 9px; }
}

@media (max-height: 380px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 5px; }
  .tile { padding: 5px 6px 6px; border-width: 3px; }
  .tile .tn { font-size: 12px; }
  .tile.pantry .tmid .tw { display: none; }
  .tile.pantry .tuse { width: 52px; font-size: 10px; }
  .tile.pantry .pcol .pbar { width: 48px; }
  .price { font-size: 12px; padding: 1px 8px 1px 3px; border-width: 2.5px; }
  .shop-goal .pbar { display: none; }
  .shop-tab span { display: none; }
  .shop-tab { padding: 3px; }
  .bc-face .bn { font-size: 10px; }
  .bc-face .bl { font-size: 14px; }
}

/*
 * 640x300 — den laveste skærm vi lover noget om.
 *
 * Her er hvert eneste faste pixel taget fra rullefeltet, så vi klemmer alt
 * det der IKKE er varer: kortets kant, overskriften, heltemålets polstring,
 * fanerne og Luk-knappen. Uden det her afsnit er der 37 px tilbage til
 * fliserne, og så kan man ikke se en eneste hel vare — man ville kun se, at
 * der var noget man ikke kunne få øje på.
 */
@media (max-height: 340px) {
  .card.shop, .card.boxopen { padding: 8px; }
  .card.shop .card-head, .card.boxopen .card-head { margin-bottom: 3px; gap: 7px; }
  .card.shop h1, .card.boxopen h1 { font-size: 17px; }
  .shop-goal { padding: 2px 8px 2px 3px; margin-bottom: 4px; border-width: 3px; }
  .shop-goal .gn { font-size: 12px; }
  .shop-tabs { margin-bottom: 4px; gap: 4px; }
  .shop-tab { border-width: 3px; padding: 2px; }
  .shop-foot { margin-top: 4px; }
  .shop-foot .btn { padding: 7px 18px; font-size: 15px; box-shadow: 0 4px 0 var(--ink); }
  .shop-foot .btn.green { box-shadow: 0 4px 0 var(--green-d); }
  .shop-foot .btn.yellow { box-shadow: 0 4px 0 var(--yellow-d); }
  .shop-foot .btn.big { font-size: 20px; padding: 5px 22px; }
  .tile .pbar { height: 5px; }
  .card.col-card > .box-grid { gap: 6px; }
}

/* Meget smal (portræt): fanerækken og fliserne skal stadig kunne rammes. */
@media (max-width: 430px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* Fanerne brydes over to rækker i stedet for at klippe navnene over. I
     portræt er der masser af højde og ingen bredde — det modsatte af liggende,
     så det er også den modsatte løsning. */
  .shop-tabs { flex-wrap: wrap; overflow-x: visible; }
  .shop-tab { flex: 1 1 28%; min-width: 0; font-size: 10px; }
  /* Overskriften viger for pungen. Tallet i pungen er det eneste i toppen et
     barn kigger på, og det må aldrig kunne blive klippet over. */
  .card.shop .card-head h1, .card.boxopen .card-head h1 { flex: 1 1 auto; min-width: 0; font-size: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .badge.purse { flex: none; font-size: 15px; padding: 0 10px 0 4px; }
  /* Heltemålets prikker ryger: baren ved siden af siger det samme, og de 76 px
     er dem navnet skal bruge for ikke at hedde "Gyld…". */
  .shop-goal .pips { display: none; }
  /* Fem prikker OG en firecifret pris skal kunne være på samme linje i en
     flise der kun er 122 px bred indeni. To px pr. prik er nok. */
  .tile .tfoot .pips i { width: 7px; height: 7px; border-width: 1.5px; }
}

/* ------------------------------------------------------------ zoom-fælden */

/* Ligger over ALT, også skærmkortene: er man zoomet, er det det eneste
   problem der skal løses. Wrapperen får sin position sat fra JS, så den
   følger det synlige udsnit når man ruller rundt i det zoomede billede. */
.zoom-rescue {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zoom-rescue.on { display: flex; }
.zoom-btn {
  pointer-events: auto;
  border: 6px solid #fff;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 8px 0 rgba(61,50,64,0.32), 0 0 0 12px rgba(255,255,255,0.42);
  padding: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  animation: zoomPulse 1.6s ease-in-out infinite;
}
.zoom-btn canvas { display: block; }
.zoom-btn:active { transform: translateY(6px); box-shadow: 0 0 0 12px rgba(255,255,255,0.42); }
@keyframes zoomPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ------------------------------------------------------------ opgaveliste */

/* Kort hvor midten ruller og top+bund står stille. */
.card.col-card { display: flex; flex-direction: column; overflow: hidden; }
.card.col-card > * { flex: none; }
.card.col-card > .quest-list,
.card.col-card > .area-grid,
.card.col-card > .sticker-grid,
.card.col-card > .set-body,
/* Systuen og de to skærme med figurer på: på en meget lav skærm (640 x 360)
   kan indholdet ikke være der, og så skal MIDTEN rulle mens knapperne i
   bunden står fast. Uden det lå "Tag den på" uden for skærmen — og systuen
   havde slet ingen synlig udgang. */
.card.col-card > .design-row,
.card.col-card > .done-row,
.card.col-card > .vaert-row,
.card.col-card > .guide-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }

.quest-list { display: flex; flex-direction: column; gap: 8px; }
.quest {
  border: 4px solid #fff;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(61,50,64,0.22);
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.1s, box-shadow 0.1s;
}
.quest:active { transform: translateY(4px); box-shadow: 0 0 0; }
.quest canvas { display: block; }
/* Den man følger lige nu er markeret, så man kan se hvad pilen peger på. */
.quest.on { border-color: var(--yellow); background: #fffdf0; }
.quest.ready { border-color: var(--green); }
/* Lav liggende skærm: skru alt sammen så Luk-knappen bliver inde i kortet. */
@media (max-height: 470px) {
  .quest-list { gap: 5px; }
  .quest { border-width: 3px; padding: 2px 6px; box-shadow: 0 3px 0 rgba(61,50,64,0.22); }
  .quest-hint { display: none; }
}

/* ----------------------------------------------------------- nyt spil */

.newgame-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px; margin-top: 10px;
}
.newgame-facts .nf {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 3px solid #fff;
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-weight: 800;
}
.newgame-facts .nf canvas { display: block; flex: none; }
.newgame-facts .nf b { font-size: 19px; }
.newgame-facts .nf span { font-size: 12px; opacity: 0.7; line-height: 1.15; }
@media (max-height: 470px) {
  .newgame-facts { gap: 6px; margin-top: 6px; }
  .newgame-facts .nf { padding: 4px 8px; }
  .newgame-facts .nf b { font-size: 16px; }
}

/* ------------------------------------------------------- gratis hårstil */

.hair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.hair-card {
  border: 4px solid #fff;
  border-radius: var(--r-md);
  background: #eef7fb;
  box-shadow: 0 4px 0 rgba(61,50,64,0.22);
  padding: 6px 4px 8px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.hair-card canvas { display: block; border-radius: 12px; }
.hair-card .gn { font-weight: 900; font-size: 13px; }
.hair-card:active { transform: translateY(4px); box-shadow: 0 0 0; }
.card.col-card > .hair-grid,
.card.col-card > .newgame-facts { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }
/* Uden denne strækker gitteret sine rækker ud i hele den ledige højde, så to
   baner bliver til to kæmpekort. Kortene skal have deres egen naturlige højde. */
.card.col-card > .area-grid { align-content: start; }
/* Figurbyggeren har mange rækker. Overskrift og "Færdig" står fast, og kun
   valgmulighederne ruller — ellers forsvinder knappen ud under kanten så
   snart der kommer en hattetype mere. */
.card.col-card > .builder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }
@media (max-height: 470px) {
  .hair-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 7px; }
  .hair-card { padding: 4px 3px 6px; }
  .hair-card .gn { font-size: 11px; }
}
@media (max-height: 380px) {
  .hair-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 5px; }
  .hair-card .gn { font-size: 10px; }
}

/* --------------------------------------------------------------- vejviser */

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.guide-item {
  border: 4px solid #fff;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(61,50,64,0.22);
  padding: 8px 4px 9px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.guide-item { position: relative; }
.guide-item:active { transform: translateY(4px); box-shadow: 0 0 0; }
/* Banens ikon i øverste højre hjørne. Lille — den skal kunne ses, men
   ikke konkurrere med billedet af det man laver. */
.guide-item .gbane {
  position: absolute; top: 2px; right: 3px;
  font-size: 13px; line-height: 1; opacity: 0.9;
}
.guide-item canvas { display: block; }
.guide-item .gn { font-weight: 900; font-size: 11.5px; text-align: center; line-height: 1.2; }

/* Liggende telefon: flere, mindre fliser, så alle punkter kan ses på én gang.
   Selve canvas-størrelsen sættes i openGuide — fitCanvas bruger inline-stil,
   og den slår disse regler. */
/* Katalogskærmen må fylde mere i højden end de øvrige vinduer — se openGuide. */
.card.col-card.guide { max-height: 96%; }

@media (max-height: 470px) {
  /* Flere spalter frem for mindre billeder: femten punkter på to rækker er
     til at overskue, og ikonet er stadig stort nok til at genkende. Blev
     fliserne i stedet smallere, ville de blive tre rækker og halvdelen ryge
     under kanten — og et barn ruller ikke for at finde resten. */
  .guide-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
  .guide-item { padding: 5px 3px 6px; }
  .guide-item .gn { font-size: 11px; }
  /* Sætningen er skrevet til den voksne og koster en hel række. */
  .quest-hint { display: none; }
}
@media (max-height: 380px) {
  .guide-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 5px; }
  .guide-item { padding: 4px 2px 5px; }
  /* 11 px er gulvet: under det er skriften ikke til at læse på en telefon,
     og det er den hyppigst nævnte UI-fejl i mobilspil. */
  .guide-item .gn { font-size: 11px; }
}

/* --------------------------------------------------------------- minispil */

.card-head canvas { display: block; flex: none; }
.mini-facts { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 8px; }
.mini-facts canvas { display: block; }
.mini-best { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 24px; }
.mini-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 4px; }
.mini-score canvas { display: block; }
.mini-score .num { font-weight: 900; font-size: 46px; line-height: 1; }

/* ------------------------------------------------------------------ gaver */

.gift-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.gift-card {
  flex: 1 1 150px;
  max-width: 200px;
  border: 5px solid #fff;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 6px 0 rgba(61,50,64,0.28), 0 12px 26px rgba(61,50,64,0.18);
  padding: 12px 10px 14px;
  font-family: var(--font);
  color: var(--ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.gift-card:active { transform: translateY(6px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.gift-card canvas { display: block; }
.gift-card .gname { font-weight: 900; font-size: 16px; text-align: center; }
.gift-card .gdesc { font-weight: 700; font-size: 12px; opacity: 0.6; text-align: center; line-height: 1.3; }

/*
 * Tre valg skal kunne ses på én gang — ellers mister "vælg én af tre" sin
 * mening, især for et barn der ikke ruller af sig selv.
 *
 * To forskellige problemer, to forskellige svar:
 *  - SMAL skærm (portræt): kortene kan ikke stå ved siden af hinanden, så de
 *    bliver brede rækker med ikonet til venstre.
 *  - LAV skærm (landskab): de skal blive ved at stå side om side, men alt
 *    fylde mindre. Rækker ville her være HØJERE, ikke lavere.
 */
@media (max-width: 430px) {
  .gift-row { flex-direction: column; gap: 9px; }
  .gift-card {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 8px 12px;
  }
  .gift-card canvas { width: 52px; height: 52px; flex: none; }
  .gift-card .gname { font-size: 15px; }
  .gift-card .gdesc { display: none; }
  .gift-card .pips { margin: 0 0 0 auto; }
}

@media (max-height: 470px) {
  .gift-row { gap: 8px; }
  .gift-card { padding: 8px 8px 10px; gap: 2px; }
  .gift-card canvas { width: 56px; height: 56px; }
  .gift-card .gname { font-size: 14px; }
  .gift-card .gdesc { font-size: 11px; line-height: 1.25; }
  .gift-card .pips i { width: 11px; height: 11px; }
}

/* Meget lavt landskab (fx 640x300): også overskriften og kortets kant skal ned. */
@media (max-height: 360px) {
  .screen { padding: 6px; }
  .gift-card { border-width: 4px; padding: 6px 8px 8px; }
  .gift-card canvas { width: 44px; height: 44px; }
  .gift-card .gdesc { display: none; }
}

/* --------------------------------------------------------------- slikdyr */

.critter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.critter {
  border: 5px solid #fff; border-radius: var(--r-md);
  background: var(--paper); padding: 8px 6px;
  box-shadow: 0 5px 0 rgba(61,50,64,0.22);
  text-align: center;
}
.critter canvas { display: block; margin: 0 auto; }
.critter .cname { font-weight: 900; font-size: 12px; margin-top: 3px; }
.critter .ccount { font-weight: 900; font-size: 13px; color: var(--pink-d); }
.critter.off { opacity: 0.55; }

/* -------------------------------------------------------------- album */

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.polaroid {
  background: #fff;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 5px 0 rgba(61,50,64,0.25), 0 10px 20px rgba(61,50,64,0.16);
  padding: 7px 7px 0;
  transform: rotate(var(--tilt, -1.4deg));
  position: relative;
}
.polaroid img { width: 100%; display: block; border-radius: 7px; background: #eee; }
.polaroid .cap {
  font-weight: 800; font-size: 12px; padding: 7px 3px 9px;
  text-align: center; line-height: 1.25;
}
.polaroid .del {
  position: absolute; top: -9px; right: -9px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; background: var(--pink); color: #fff;
  font-weight: 900; font-size: 15px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(61,50,64,0.3);
  display: grid; place-items: center;
}

/* ------------------------------------------------------- klistermærkebog */

.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.sticker {
  border: 5px solid #fff; border-radius: var(--r-md);
  background: var(--paper); padding: 9px 6px;
  box-shadow: 0 5px 0 rgba(61,50,64,0.22);
  text-align: center;
}
.sticker .sic { font-size: 30px; line-height: 1.1; }
.sticker .snm { font-weight: 900; font-size: 12px; margin-top: 4px; }
.sticker .sds { font-weight: 700; font-size: 10.5px; opacity: 0.6; margin-top: 2px; line-height: 1.25; }
.sticker.off { opacity: 0.42; }
.sticker.off .sic { filter: grayscale(1); }

/* ------------------------------------------------------------ fototilstand */

.viewfinder { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.viewfinder .frame {
  position: absolute; inset: 8%;
  border: 5px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 0 0 9999px rgba(61, 50, 64, 0.32);
}
.viewfinder .corner {
  position: absolute; width: 34px; height: 34px;
  border: 6px solid var(--yellow);
}
.viewfinder .c1 { left: -3px; top: -3px; border-right: none; border-bottom: none; border-radius: 16px 0 0 0; }
.viewfinder .c2 { right: -3px; top: -3px; border-left: none; border-bottom: none; border-radius: 0 16px 0 0; }
.viewfinder .c3 { left: -3px; bottom: -3px; border-right: none; border-top: none; border-radius: 0 0 0 16px; }
.viewfinder .c4 { right: -3px; bottom: -3px; border-left: none; border-top: none; border-radius: 0 0 16px 0; }
/* Ordløs udløser midt i rammen: den viser hvor man trykker for at tage
   billedet. Selve trykket fanges af spillets tap-håndtering, så den må ikke
   selv tage imod klik. */
.viewfinder .shoot {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: shootNudge 1.7s ease-in-out infinite;
}
.viewfinder .shoot canvas { display: block; }
@keyframes shootNudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -7px); }
}
/* Krydset ude i det mørke: tryk her og du er ude igen. */
.viewfinder .vf-out {
  position: absolute;
  right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b));
  pointer-events: none;
  opacity: 0.9;
}
.viewfinder .vf-out canvas { display: block; }

.viewfinder .hintline {
  position: absolute; left: 50%; top: calc(14px + var(--safe-t));
  transform: translateX(-50%);
  background: var(--paper); border: 4px solid #fff; border-radius: var(--pill);
  padding: 8px 18px; font-weight: 900; font-size: 15px;
  box-shadow: 0 4px 0 rgba(61,50,64,0.3);
  white-space: nowrap;
}

.flash {
  position: absolute; inset: 0; z-index: 40;
  background: #fff; pointer-events: none;
  animation: flashOut 0.45s forwards;
}
@keyframes flashOut { from { opacity: 0.92; } to { opacity: 0; } }

/* ---------------------------------------------------------------- forside */

/* Kulissen fylder hele skærmen og ligger bagerst; titlen tegnes med i den.
   Knapperne er det eneste DOM der er tilbage, og de bor i bunden. */
.screen.home { align-items: flex-end; }

.home-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Klyngen måles af forsiden selv (`box.offsetHeight`), og kulissen lægger
   figurens ståplads lige over den. Derfor må den ALDRIG kunne rulle: alle
   seks knapper skal kunne ses på en 640x300 telefon, og en skjult knap ville
   ikke blive fanget af noget. Den skrumper i stedet. */
.title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.8vh, 13px);
  max-width: 100%;
}

/* På en stående telefon er der ikke plads til begge knapper på én linje.
   De skal så lægge sig under hinanden — ikke brække deres egen tekst midt
   over, som "▶ / Fortsæt" gjorde i 412 px bredde. */
.home-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.8vh, 16px);
}
.title-wrap .btn { white-space: nowrap; }

/* Hovedhandlingen. Størrelsen følger den mindste af de to skærmmål, så den
   bliver stor på både en liggende telefon og en stående. */
.title-wrap .btn.play {
  font-size: clamp(19px, min(5.6vh, 4vmax), 28px);
  padding: clamp(10px, 2.4vh, 18px) clamp(22px, 5.4vh, 40px);
  letter-spacing: 0.2px;
  gap: 12px;
}

/* "Nyt spil" er med vilje dæmpet: samme papirfarve som båndet, ingen hård
   skygge, mindre skrift. Den var lyserød og lige så høj som "Fortsæt", og så
   stod der to lige tilbud til en femårig — hvoraf det ene sletter alt. */
.title-wrap .btn.restart {
  background: rgba(255, 253, 247, 0.8);
  color: var(--ink);
  font-size: clamp(12px, 2.7vh, 16px);
  padding: clamp(7px, 1.7vh, 11px) clamp(12px, 2.6vh, 18px);
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 0 rgba(61, 50, 64, 0.15);
  gap: 6px;
}
.title-wrap .btn.restart:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(61, 50, 64, 0.15);
}

/* Ét bånd i én farve i stedet for fire kulørte piller. Figur, mærker, album
   og indstillinger er ting man KAN, ikke ting man skal — så de hviler. */
.home-band {
  display: flex;
  align-items: center;
  gap: clamp(0px, 0.6vh, 6px);
  padding: clamp(2px, 0.6vh, 5px);
  border-radius: var(--pill);
  background: rgba(255, 253, 247, 0.72);
  border: 3px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 0 rgba(61, 50, 64, 0.13);
}
.bandbtn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: var(--pill);
  width: clamp(38px, 8vh, 54px);
  height: clamp(32px, 6.8vh, 46px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.09s, background 0.12s;
}
.bandbtn canvas { display: block; }
.bandbtn:active {
  transform: translateY(2px);
  background: rgba(61, 50, 64, 0.09);
}

/* -------------------------------------------------------------- roter-hint */

.rotate-hint {
  position: absolute;
  left: 50%; bottom: calc(14px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 12;
  background: var(--paper);
  border: 4px solid #fff;
  border-radius: var(--pill);
  padding: 9px 18px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 5px 0 rgba(61,50,64,0.3);
  display: flex; align-items: center; gap: 9px;
  animation: toastIn 0.4s;
}
.rotate-hint .ph { animation: tilt 1.8s ease-in-out infinite; font-size: 20px; }
@keyframes tilt {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-84deg); }
}

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

.install-bar {
  position: absolute;
  left: 50%; bottom: calc(14px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 28;
  display: flex; align-items: center; gap: 10px;
  background: var(--paper);
  border: 4px solid #fff;
  border-radius: var(--pill);
  padding: 8px 10px 8px 16px;
  box-shadow: 0 5px 0 rgba(61,50,64,0.3), 0 12px 26px rgba(61,50,64,0.25);
  font-weight: 900; font-size: 14px;
  max-width: calc(100% - 24px);
}
.install-bar .x {
  border: none; background: none; font-size: 20px; font-weight: 900;
  cursor: pointer; color: var(--ink); opacity: 0.5; padding: 0 4px;
}

/* ---------------------------------------------------------------- toggles */

.toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 4px solid #fff; border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(61,50,64,0.2);
  font-weight: 900; font-size: 16px;
  margin-bottom: 9px;
  cursor: pointer;
}
.toggle .sw {
  margin-left: auto;
  width: 58px; height: 32px; border-radius: var(--pill);
  background: rgba(61,50,64,0.18);
  border: 3px solid #fff;
  position: relative;
  transition: background 0.18s;
  flex: none;
}
.toggle .sw::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(61,50,64,0.35);
  transition: transform 0.18s;
}
.toggle.on .sw { background: var(--green); }
.toggle.on .sw::after { transform: translateX(24px); }
.toggle .desc { font-weight: 700; font-size: 12.5px; opacity: 0.6; display: block; margin-top: 1px; }

/* ------------------------------------------------------------ småskærme */

@media (max-height: 420px) {
  .stick { width: 120px; height: 120px; }
  .stick .knob { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .abtn.hop { width: 78px; height: 78px; font-size: 30px; }
  .abtn.act { width: 64px; height: 64px; font-size: 25px; }
  .abtn.cam { width: 52px; height: 52px; font-size: 21px; }
  /* 44 px, ikke 36. Badgerne er KNAPPER — slik åbner butikken, opgave-
     badget åbner opgavelisten, stjernen åbner stjernebogen — og 36 px er
     under de 44 px som både Apple og Material sætter som absolut minimum
     for en finger. Nielsen Norman Group anbefaler 2 cm (~126 px) til børn;
     så meget kan en HUD ikke give, men under 44 må vi ikke gå. */
  /* Badgerne skal på ÉN række. Fire badges à 138+109+107+218 = 572 px med
     8 px imellem endte 8 px forbi det sted hvor genvejsknapperne begynder, og
     så ombrød de til to rækker — 98 px af en 412 px høj skærm, plus banenavn
     og "hvad mangler du". Strammere luft og en smallere gap giver 22 px
     tilbage, og så er der én række. */
  .badge { height: 44px; font-size: 15px; padding: 0 12px 0 7px; }
  .badge.mission { height: 46px; }
  /* Loftet sidder på spalten, ikke på badge-rækken — ellers klipper
     forælderen den bredde vi netop gav rækken. */
  .badges { gap: 6px; }
  .top-left { max-width: 66vw; }
  .top-right { gap: 8px; }
  .btn.icon { width: 46px; height: 46px; font-size: 20px; }
  .badge .glyph { width: 25px; height: 25px; font-size: 14px; }
  .card { padding: 13px; }
  .card h1 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------- forsidens lille tilbud */

/* Ét diskret tilbud til den voksne: hjemmeskærm, eller "husk en kopi".
   Det ligger i VENSTRE side lige under titelbåndet — altså ude over engen,
   hvor der ikke er andet. Prøvet både øverst i midten (kolliderer med titlen)
   og nederst (kolliderer med "Fortsæt", som er den ene knap et barn skal
   kunne ramme). Papirfarve som resten af forsidens bånd, ingen kulør og ingen
   bevægelse: det skal kunne overses af en femårig. */
.home-note {
  position: absolute;
  left: calc(12px + var(--safe-l));
  top: clamp(50px, 21vh, 138px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(46%, 320px);
  padding: 7px 6px 7px 12px;
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.86);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 0 rgba(61, 50, 64, 0.13);
  font-weight: 800;
  font-size: clamp(10px, 1.9vh, 13px);
  line-height: 1.25;
  color: var(--ink);
}
.home-note.warn { background: rgba(255, 240, 224, 0.94); }
.home-note .txt { min-width: 0; }
.home-note .acts { flex: none; }
.home-note .btn.mini {
  font-size: clamp(10px, 1.9vh, 13px);
  padding: 6px 10px;
  border-width: 3px;
  box-shadow: 0 3px 0 rgba(61, 50, 64, 0.2);
  white-space: nowrap;
}
.home-note .x {
  flex: none;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.45;
}

/* Er der ikke plads ved siden af figuren, lægger den sig i toppen af engen i
   fuld bredde i stedet for at klemme teksten sammen til to bogstaver. */
@media (max-width: 520px) {
  .home-note {
    left: calc(8px + var(--safe-l));
    right: calc(8px + var(--safe-l));
    max-width: none;
  }
}

/* På en lav skærm (fx 640x300) er der ikke plads til forklaringen ved siden af
   figuren. Så ryger den — overskriften og knappen siger det nødvendige. */
.home-note .sub { display: block; font-weight: 700; opacity: 0.72; }
@media (max-height: 380px) {
  .home-note { max-width: min(40%, 250px); top: clamp(42px, 17vh, 120px); }
  .home-note .sub { display: none; }
}

/* ------------------------------------------------- smal skærm: HUD-knapper */

/* Der er seks runde genveje i toppen (hjælp, figur, butik, baner, fuld skærm,
   pause). På en smal telefon fylder de sammen med slik- og opgavebadgerne mere
   end skærmens bredde, og så lægger de sig oven i hinanden. Knapperne skrumper
   først — de er stadig langt over 40 px, som er den mindste flade en lille
   finger rammer sikkert. */
@media (max-width: 800px) {
  .top-right { gap: 6px; }
  .top-right .btn.icon { width: 46px; height: 46px; font-size: 20px; border-width: 3px; }
  .badges { max-width: 48vw; }
}
@media (max-width: 560px) {
  /* 40 px var under grænsen. Seks knapper à 44 px med 5 px imellem er
     294 px — det kan en 560 px bred skærm bære, og en finger rammer. */
  .top-right { gap: 5px; }
  .top-right .btn.icon { width: 44px; height: 44px; font-size: 19px; }
  .badges { max-width: 44vw; gap: 6px; }
  .badge { height: 44px; font-size: 15px; }
}

/* Lodret telefon er så smal at seks knapper og badgerne ikke kan stå på
   samme række uanset hvor meget de skrumper. Så ombryder de i stedet til to
   rækker af tre — spillet beder om liggende, men det må ikke være i stykker
   hvis nogen alligevel vender telefonen. */
@media (max-width: 520px) {
  .top-right { flex-wrap: wrap; justify-content: flex-end; max-width: 140px; }
  .badges { max-width: 56vw; }
}

/* Banevælgeren skal kunne overskues på ÉN skærm — man vælger ikke en bane
   man ikke kan se. Kortene er nu mindre for at give plads til det mørke felt
   man trykker i for at gå ud, så undertekst og luft ryger når skærmen er lav
   (liggende telefon) ELLER smal (lodret telefon). */
@media (max-height: 470px), (max-width: 560px) {
  /* Forklaringen er skrevet til den voksne. Når pladsen er knap vejer det
     tungere at kunne se alle fem baner end at kunne læse sætningen. */
  .map-hint { display: none; }
  /* 232 px, ikke 190: kortet skal kunne rumme navnet OG "Her er du" på samme
     linje. Ved 190 knækkede "Slikskoven" i tre linjer, og så blev kortet højere
     end de to ekstra kolonner sparede. Fem baner bliver to rækker uanset. */
  .area-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px; }
  /* Liggende kort: ikonet til venstre, navn og fremdriftsbjælke til højre.
     Det halverer højden, så alle fem baner er på skærmen samtidig — man
     vælger ikke en bane man skal rulle ned for at opdage. */
  .area-card {
    padding: 7px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 9px;
    align-items: center;
  }
  .area-card .aicon { grid-row: 1 / 3; grid-column: 1; font-size: 26px; }
  /* Navnet deler linje med låse-/"Her er du"-badgen. Det er kort nok til at
     der er plads til begge, og så har de fire spor hele linjen nedenunder. */
  .area-card .aname { grid-column: 2; grid-row: 1; font-size: 13px; margin-top: 0; }
  /* Sporene bliver ved at stå to og to, og får kolonne 2 og 3 for sig selv.
     Fire på én linje blev prøvet først: fire ikoner med tal ved siden af
     hinanden er 4 px bredere end kortet, og 4 px overløb er nok til at
     tallene bliver klippet på den smalleste telefon. To og to er 108 px. */
  .area-card .tracks.tight {
    grid-column: 2 / 4; grid-row: 2;
    gap: 1px 8px; margin-top: 3px;
  }
  /* Tallet skal stå KLISTRET til sit eget ikon. Første forsøg lod det
     højrestille i sin kolonne, og så læste rækken "0/9 [slik] 1/150" —
     man kunne ikke se hvilket tal der hørte til hvilket ikon. */
  .area-card .tracks.tight .track {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 5px;
  }
  .area-card .tracks.tight .tc { min-width: 0; text-align: left; font-size: 12px; }
  /* Stregerne ryger på den lave udgave — fire streger på 60 px bliver
     stumper man ikke kan læse. Ikonet og tallet bliver tilbage. */
  .area-card .tracks.tight .tbar { display: none; }
  .area-card .tracks.tight canvas { width: 17px; height: 17px; }
  .area-card .asub { display: none; }
  /* Låsen/"Her er du" må ikke svæve oven på navnet når kortet ligger ned —
     den får sin egen kolonne til højre, på samme linje som navnet. Sporene
     nedenunder får så hele bredden for sig selv. */
  .area-card .lock {
    position: static;
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    justify-self: end;
    font-size: 11px;
    padding: 2px 7px;
    white-space: nowrap;
    box-shadow: none;
    border-width: 2px;
  }
}

/* Liggende telefon: banevaelgeren maa gerne vaere bredere end de andre
   vinduer. Der er 892 px at tage af og kun 412 px hoejde, og hver kolonne
   mere er en raekke mindre at rulle. Det moerke felt man trykker i for at gaa
   ud bliver smallere, men det bliver ikke vaek. */
@media (max-height: 470px) and (min-width: 700px) {
  .map-card { width: min(900px, 96%); }
}

/* Lav skærm: overskriften over de fire spor må ikke spise en opgavelinje.
   Den skal stadig stå der — uden den ved man ikke hvilken bane tallene
   handler om — men den må gerne være lille. */
@media (max-height: 470px) {
  .log-area { font-size: 13px; margin-top: 0; }
  .card.col-card > .tracks { margin-top: 4px; margin-bottom: 2px; }
}

/* Navnefeltet under figuren i byggeren. Stort nok til en finger (48 px) og
   skrevet i spillets egen skrift, så det ser ud som en del af figuren og ikke
   som en formular. */
.navn-boks { margin-top: 6px; width: 100%; }
.navn-felt {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 12px;
  border: 3.5px solid #fff;
  border-radius: var(--pill);
  background: var(--paper);
  box-shadow: inset 0 2px 0 rgba(61,50,64,0.1);
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
  text-align: center;
}
.navn-felt::placeholder { color: rgba(61,50,64,0.4); font-weight: 800; }
.navn-felt:focus { outline: none; border-color: var(--yellow); }

/* Kraftknappen: rund som de andre, men med sin egen plads over kameraet.
   Den lyser grønt når den er klar og gult mens den kører — begge dele tegnes
   på canvasset, så farven her er kun knappens egen skal. */
.abtn.pow {
  grid-area: pow;
  width: 62px; height: 62px;
  background: var(--paper);
  opacity: 0.9;
  padding: 0;
}
.abtn.pow canvas { display: block; }
.abtn.pow.ready { opacity: 1; box-shadow: 0 5px 0 var(--green-d), 0 0 22px rgba(142,201,138,0.55); }
.abtn.pow.live  { opacity: 1; box-shadow: 0 5px 0 #c8a52a, 0 0 26px rgba(244,197,52,0.7); }
@media (max-height: 420px) { .abtn.pow { width: 54px; height: 54px; } }

/* Madpakkeknappen. Samme størrelse som kameraet, og kun synlig når man har
   noget hjemme — se `drawPantry` i main.js. */
.abtn.eat {
  grid-area: eat;
  width: 54px; height: 54px;
  background: var(--paper);
  opacity: 0.92;
  padding: 0;
}
.abtn.eat canvas { display: block; }
@media (max-height: 420px) { .abtn.eat { width: 48px; height: 48px; } }

/* Madpakkeskærmen: én linje pr. madpakke — ikon, navn, hvad den gør, hvor
   længe, hvor mange. Alle fire spørgsmål besvaret på samme linje. */
.pantry-list { display: flex; flex-direction: column; gap: 8px; }
.pantry-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  min-height: 62px;
  border: 4px solid #fff; border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(61,50,64,0.2);
  font-family: var(--font); color: var(--ink);
  cursor: pointer; text-align: left;
}
.pantry-row:active { transform: translateY(4px); box-shadow: 0 0 0; }
.pantry-row canvas { display: block; flex: none; }
.pantry-row .pr-mid { flex: 1; min-width: 0; }
.pantry-row .pr-navn { font-weight: 900; font-size: 15px; }
.pantry-row .pr-hvad { font-weight: 700; font-size: 12.5px; opacity: 0.7; }
.pantry-row .pr-tid { display: flex; align-items: center; gap: 3px; font-weight: 900; font-size: 14px; flex: none; }
@media (max-height: 470px) {
  .pantry-row { min-height: 54px; padding: 5px 10px; }
  .pantry-row .pr-hvad { display: none; }
}