/* ==========================================================
   INNOVATIONSREJSEN – style.css
   Pixel-RPG-kro møder tegneserie-kortspil
   ========================================================== */

:root {
  --brown-d: #2b1a12;
  --brown: #3b2a1e;
  --parch: #f3e6d0;
  --white: #ffffff;
  --navy: #003366;
  --gold: #ffd23f;
  --btn: #0066ff;
  --btn-shadow: #003a99;
  --ok: #2e9e5b;
  --err: #d64545;
  --text-shadow: 0 4px 12px rgba(0, 0, 0, .8);

  /* Pixelhjørner (bruges med clip-path) */
  --px: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
                100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
                6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));

  /* BILLEDER: Baggrunde (--bg-img pr. side) og bogtekstur (--book-tex) sættes fra app.js.
     Skift billeder i IMAGES-blokken i app.js – ikke her. */
  --overlay: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--brown-d); }
body {
  font-family: "Pixelify Sans", "Courier New", monospace;
  color: var(--white);
  font-size: 20px; font-size: clamp(15px, 2.1vh, 20px);
  line-height: 1.45;
}

/* ---------- Sider og sideovergange ---------- */
#app { position: relative; height: 100vh; }
.page {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto;
  display: flex; opacity: 0; visibility: hidden; transform: translateY(24px) scale(.98);
  transition: opacity .5s, transform .5s, visibility 0s .5s;
  background-size: cover; background-position: center;
}
.page.active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .5s; }
.bg-front { background: var(--overlay), var(--bg-img, none), linear-gradient(#1d2a44, #3b2a1e); background-size: cover; }
.bg-inn   { background: var(--overlay), var(--bg-img, none), radial-gradient(circle at 50% 80%, #8a3b12, #2b1a12 70%); background-size: cover; }
.bg-table { background: var(--overlay), var(--bg-img, none),
            repeating-linear-gradient(90deg, #5a3b25 0 38px, #4e3320 38px 40px); background-size: cover; }

.center {
  margin: auto; width: 100%; max-width: 1100px; padding: 2vh 3vw;
  display: flex; flex-direction: column; align-items: center; gap: 2.4vh; text-align: center;
}

/* ---------- Tekst ---------- */
.title { font-size: 72px; font-size: clamp(30px, 8vh, 72px); color: var(--gold); text-shadow: var(--text-shadow), 4px 4px 0 var(--brown-d); letter-spacing: 2px; }
.title.small { font-size: 48px; font-size: clamp(24px, 5.5vh, 48px); }
.subtitle { font-size: 32px; font-size: clamp(18px, 3.6vh, 32px); font-weight: 600; text-shadow: var(--text-shadow); }
.hint, .progress { text-shadow: var(--text-shadow); }

/* ---------- Fuldskærmsknap (øverst til højre) ---------- */
.fs { position: fixed; top: 12px; right: 12px; z-index: 50; font-size: 16px; font-size: clamp(12px, 1.8vh, 16px); padding: .8vh 1.2vw; background: var(--brown); border-bottom-width: 5px; border-bottom-color: var(--brown-d); }
.fs[hidden] { display: none; }

/* ---------- Pixel-paneler (pergament) ----------
   .sh bærer den forskudte skygge (drop-shadow rammer ikke clip-path),
   .panel bærer pixelhjørner + mørk ramme. */
.sh { filter: drop-shadow(6px 6px 0 #140b07); }
.panel {
  background: var(--parch); color: var(--brown-d); clip-path: var(--px);
  box-shadow: inset 0 0 0 5px var(--brown-d), inset 0 0 0 8px var(--gold);
  padding: 2.4vh 2.2vw;
}
.intro { max-width: 640px; display: grid; gap: 1vh; }

/* ---------- Knapper ---------- */
.btn {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
  background: var(--btn); color: var(--white); border: 0; border-bottom: 7px solid var(--btn-shadow);
  padding: 1.2vh 1.8vw; clip-path: var(--px); text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  transition: transform .15s, filter .15s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-4px); filter: brightness(1.12); outline: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn.static:disabled { opacity: 1; cursor: default; white-space: normal; line-height: 1.35; max-width: 720px; max-width: min(720px, 90vw); }
.btn:active { transform: translateY(2px); border-bottom-width: 3px; }
.btn.big { font-size: 30px; font-size: clamp(20px, 3.4vh, 30px); padding: 1.6vh 3vw; }
.btn.ghost { background: var(--brown); border-bottom-color: var(--brown-d); }
.btn.choice { background: var(--navy); border-bottom-color: #001a33; text-align: left; width: 100%; }

/* ---------- Kort (hvid ramme, karakter øverst, tekst under) ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6vh 2vw; width: 100%; }
.grid.names { grid-template-columns: repeat(6, 1fr); }
.card {
  --rot: 0deg; height: 300px; height: clamp(170px, 30vh, 300px); width: calc(300px * 2 / 3); width: calc(clamp(170px, 30vh, 300px) * 2 / 3); perspective: 900px; cursor: pointer;
  transform: rotate(var(--rot)); transition: transform .25s, filter .25s;
  filter: drop-shadow(6px 6px 0 #140b07);
}
.names .card { height: 150px; height: clamp(100px, 16vh, 150px); width: auto; justify-self: stretch; }
.card.text-only .face { justify-content: center; padding: 1vh .8vw; }
.card:hover, .card:focus-visible { transform: rotate(0) scale(1.07) translateY(-8px); outline: none; z-index: 2; }
/* Valgt kort: gul markering med forskudt gul skygge */
.card.sel { transform: rotate(0) scale(1.06); z-index: 3; filter: drop-shadow(5px 5px 0 var(--gold)) drop-shadow(10px 10px 0 #b88a00); }
.card.sel:hover { transform: rotate(0) scale(1.08) translateY(-8px); }
.face {
  height: 100%; display: flex; flex-direction: column; gap: .8vh; padding: 7px 7px 1vh; clip-path: var(--px);
  background: #fff; color: var(--brown-d); text-align: center; box-shadow: inset 0 0 0 3px #d9cdb8;
}
.card.sel .face { box-shadow: inset 0 0 0 6px var(--gold); }
.card.sel .flip { animation: spin .8s; }
/* Alle kort: samme højde og fast 2:3-format */
.card { justify-self: center; } /* bredden er 2/3 af højden (sat på .card) – uden aspect-ratio, så ældre browsere også virker */
/* Interessekort: starter med bagsiden (med navn), vendes om ved klik og viser karakteren */
.card.back-first .flip { transform: rotateY(180deg); transition: transform .8s; }
.card.back-first.sel .flip { transform: rotateY(0); animation: none; }
.back { container-type: inline-size; } /* så navnets skriftstørrelse følger kortets bredde */
.plate { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); padding: 1.2vh .6vw; text-align: center;
  font-weight: 700; line-height: 1.2; font-size: 16px; font-size: clamp(11px, 2vh, 16px); font-size: 20px; font-size: clamp(10px, 7cqw, 20px); overflow-wrap: anywhere; color: var(--brown-d);
  background: var(--book-tex, linear-gradient(#f3e6d0, #f3e6d0)) repeat #f3e6d0; border: 3px solid var(--brown-d); box-shadow: 3px 3px 0 #140b07; }
/* Flip: .flip roterer, .face = forside, .back = bagside (billede: IMAGES.cardBack) */
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip > .face, .flip > .back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.back { transform: rotateY(180deg); clip-path: var(--px); background: var(--back-img, none) center / cover #1a1410; image-rendering: pixelated; box-shadow: inset 0 0 0 3px var(--gold); }
.art { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 30%; }
.info { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3vh; font-size: 16px; font-size: clamp(12px, 1.9vh, 16px); }
.info strong { font-size: 19px; font-size: clamp(14px, 2.3vh, 19px); overflow-wrap: anywhere; }
.info .desc { opacity: .75; font-size: .85em; }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* ---------- Navne-side ---------- */
.namebox { width: 640px; width: min(640px, 90vw); display: grid; gap: 1vh; text-align: left; }
.row { display: flex; gap: 1vw; }
input[type=text] {
  flex: 1; min-width: 0; font: inherit; padding: 1vh 1vw; background: var(--white); color: var(--brown-d);
  border: 4px solid var(--brown-d); clip-path: var(--px);
}

/* ---------- Historie: gammel bog ---------- */
.progress { font-weight: 600; color: var(--gold); }
/* Bogen: læderomslag med syninger, synlig sidebunke, ryg i midten og et bogmærke */
.book {
  --pad: 16px;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; perspective: 2400px;
  width: 1100px; width: min(1100px, 94vw); height: 640px; height: min(72vh, 640px); padding: var(--pad); text-align: left;
  background: radial-gradient(ellipse at 50% 35%, #75401d 0%, #54290f 68%, #3d1d0c 100%);
  border: 4px solid #24110a; border-radius: 10px 10px 8px 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 200, 120, .14), 0 5px 0 #3a1c0c, 0 9px 0 #26120a, 0 24px 32px rgba(0, 0, 0, .6);
}
.book::before { content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 2px dashed rgba(240, 190, 100, .38); border-radius: 6px; pointer-events: none; } /* læder-syning */
.book::after { /* ryggen i midten */
  content: ''; position: absolute; top: var(--pad); bottom: var(--pad); left: 50%; width: 8px; margin-left: -4px; z-index: 4; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(20, 8, 2, .6), rgba(0, 0, 0, 0));
}
.ribbon { /* bogmærke */
  position: absolute; left: 56%; bottom: -30px; width: 16px; height: 46px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #8e1c20, #c8282f 45%, #8e1c20); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.bpage {
  position: relative; display: flex; flex-direction: column; gap: 1.4vh; overflow: hidden; color: var(--brown-d);
  padding: 3vh 2.6vw;
  background: var(--book-tex, linear-gradient(#f3e6d0, #f3e6d0)) repeat #f3e6d0; image-rendering: pixelated; /* loop af kortbaggrund */
}
/* sidebunken: lag af papirkant ved yderkanten og i bunden */
.bpage.left { border-radius: 3px 0 0 3px; box-shadow: -1px 1px 0 #efe3c8, -2px 2px 0 #cdbc96, -3px 3px 0 #efe3c8, -4px 4px 0 #bba884; }
.bpage.right { border-radius: 0 3px 3px 0; box-shadow: 1px 1px 0 #efe3c8, 2px 2px 0 #cdbc96, 3px 3px 0 #efe3c8, 4px 4px 0 #bba884; }
/* skygge ind mod ryggen (papiret buer ned i falsen) */
.bpage::before, .bpage::after { content: ''; position: absolute; pointer-events: none; }
.bpage::before { top: 0; bottom: 0; width: 13%; z-index: 2; }
.bpage.left::before { right: 0; background: linear-gradient(to right, rgba(60, 30, 10, 0), rgba(60, 30, 10, .2) 65%, rgba(30, 14, 4, .5)); }
.bpage.right::before { left: 0; background: linear-gradient(to left, rgba(60, 30, 10, 0), rgba(60, 30, 10, .2) 65%, rgba(30, 14, 4, .5)); }
.bpage::after { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 3; }
.bpage h3 { color: var(--navy); font-size: 30px; font-size: clamp(18px, 3.4vh, 30px); text-align: center; }
.illus { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.pageno { text-align: center; font-size: .8em; opacity: .7; }
.story-text { min-height: 12vh; }
.choices { display: grid; gap: 1.2vh; margin-top: auto; }
.choices .btn { animation: pop .4s both; }
.learn { display: grid; gap: 1.4vh; justify-items: start; background: #e2f3e8; border-left: 8px solid var(--ok); padding: 1.4vh 1.2vw; margin-top: auto; animation: pop .4s both; }
.learn[hidden], .choices:empty { display: none; }

/* Siden der vendes: forside = gammel højreside, bagside = ny venstreside. To blanke ark (.ghost) følger lidt efter, så det ligner flere sider. */
.leaf {
  position: absolute; top: var(--pad); bottom: var(--pad); left: 50%; width: calc(50% - var(--pad));
  transform-origin: left center; transform-style: preserve-3d; z-index: 5; pointer-events: none;
}
.leaf.turn { animation: leafTurn 1s linear both; animation-delay: var(--d, 0ms); }
.leaf > .bpage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf > .fb { transform: rotateY(180deg); }
/* sidens egen skygge: mørkere mod den frie kant, når den vender væk fra lyset */
.leaf > .ff::after { background: linear-gradient(to right, rgba(20, 8, 2, .05), rgba(20, 8, 2, .6)); animation: shadeFront 1s linear both; animation-delay: var(--d, 0ms); }
.leaf > .fb::after { background: linear-gradient(to left, rgba(20, 8, 2, .05), rgba(20, 8, 2, .6)); animation: shadeBack 1s linear both; animation-delay: var(--d, 0ms); }
/* skygge fra den flyvende side ned på siderne under */
.book.turning > .bpage.right::after { top: 0; right: auto; bottom: 0; left: 0; width: 45%; background: linear-gradient(to right, rgba(20, 8, 2, .55), rgba(20, 8, 2, 0)); animation: shadeR 1s linear both; }
.book.turning > .bpage.left::after { top: 0; right: 0; bottom: 0; left: auto; width: 45%; background: linear-gradient(to left, rgba(20, 8, 2, .55), rgba(20, 8, 2, 0)); animation: shadeL 1s linear both; }

@keyframes leafTurn {
  0% { transform: rotateY(-0.0deg) rotateX(0.00deg) translateZ(0.0px) skewY(-0.00deg); }
  10% { transform: rotateY(-4.4deg) rotateX(0.93deg) translateZ(9.3px) skewY(-0.56deg); }
  20% { transform: rotateY(-17.2deg) rotateX(1.76deg) translateZ(17.6px) skewY(-1.06deg); }
  30% { transform: rotateY(-37.1deg) rotateX(2.43deg) translateZ(24.3px) skewY(-1.46deg); }
  40% { transform: rotateY(-62.2deg) rotateX(2.85deg) translateZ(28.5px) skewY(-1.71deg); }
  50% { transform: rotateY(-90.0deg) rotateX(3.00deg) translateZ(30.0px) skewY(-1.80deg); }
  60% { transform: rotateY(-117.8deg) rotateX(2.85deg) translateZ(28.5px) skewY(-1.71deg); }
  70% { transform: rotateY(-142.9deg) rotateX(2.43deg) translateZ(24.3px) skewY(-1.46deg); }
  80% { transform: rotateY(-162.8deg) rotateX(1.76deg) translateZ(17.6px) skewY(-1.06deg); }
  90% { transform: rotateY(-175.6deg) rotateX(0.93deg) translateZ(9.3px) skewY(-0.56deg); }
  100% { transform: rotateY(-180.0deg) rotateX(0.00deg) translateZ(0.0px) skewY(-0.00deg); }
}
@keyframes shadeFront { 0% { opacity: 0; } 20% { opacity: .1; } 40% { opacity: .45; } 50%, 100% { opacity: .75; } }
@keyframes shadeBack { 0%, 50% { opacity: .75; } 60% { opacity: .5; } 80% { opacity: .2; } 100% { opacity: 0; } }
@keyframes shadeR {
  0% { left: 100.0%; opacity: 0; }
  10% { left: 99.7%; opacity: 0.9; }
  20% { left: 95.5%; opacity: 0.9; }
  30% { left: 79.8%; opacity: 0.85; }
  40% { left: 46.7%; opacity: 0.7; }
  50% { left: 0.0%; opacity: 0.3; }
  51%, 100% { left: 0%; opacity: 0; }
}
@keyframes shadeL {
  0%, 49% { right: 0%; opacity: 0; }
  50% { right: 0.0%; opacity: 0; }
  60% { right: 46.7%; opacity: 0.4; }
  70% { right: 79.8%; opacity: 0.6; }
  80% { right: 95.5%; opacity: 0.8; }
  90% { right: 99.7%; opacity: 0.9; }
  100% { right: 100.0%; opacity: 0.9; }
}

@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


/* Interesse-siden: 12 uddannelseskort i 6 kolonner × 2 rækker (hele billedet med ramme vises) */
#page-interest .center { max-width: 1500px; }
.grid.interests { grid-template-columns: repeat(6, 1fr); gap: 2vh 1.2vw; }
.interests .card { height: 280px; height: clamp(150px, 27vh, 280px); width: calc(280px * 2 / 3); width: calc(clamp(150px, 27vh, 280px) * 2 / 3); }
.interests .art { object-fit: contain; object-position: 50% 50%; }
.interests .plate { left: 3%; right: 3%; padding: 1vh .3vw; overflow-wrap: normal; word-break: normal; hyphens: manual; font-size: 16px; font-size: clamp(8px, 7cqw, 16px); }
.interests .info strong { font-size: 17px; font-size: clamp(12px, 2vh, 17px); }

/* Tilfældige popups på startsiden */
.popups { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.bubble {
  position: absolute; max-width: 230px; max-width: min(230px, 40vw); padding: 1.1vh 1.1vw; cursor: pointer; pointer-events: auto;
  background: var(--parch); color: var(--brown-d); border: 4px solid var(--brown-d); box-shadow: 5px 5px 0 #140b07;
  font-weight: 700; font-size: 19px; font-size: clamp(13px, 2.3vh, 19px); line-height: 1.25; text-align: center;
  transform: rotate(var(--tilt, 0deg)); animation: bubbleIn .35s both;
}
.bubble.out { animation: bubbleOut .3s both; }
@keyframes bubbleIn { from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.4); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1); } }
@keyframes bubbleOut { to { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.6); } }

/* Ældre skærmbrowsere (fx interaktive tavler): kortene vises direkte med karakteren – ingen 3D-vending af kortene.
   Slås til automatisk, hvis browseren ikke kender aspect-ratio. Test i en moderne browser ved at tilføje ?legacy til adressen. */
.legacy .card { perspective: none; }
.legacy .flip { transform-style: flat; }
.legacy .flip > .back { display: none; }
.legacy .card.back-first .flip, .legacy .card.back-first.sel .flip { transform: none; transition: none; }
.legacy .card.sel .flip { animation: none; }

/* ---------- Responsivt ---------- */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid.names { grid-template-columns: repeat(3, 1fr); }
  .grid.interests { grid-template-columns: repeat(3, 1fr); }
  .interests .card { height: 250px; width: 167px; }
  .book { grid-template-columns: 1fr; height: auto; }
  .book::after, .ribbon { display: none; }
  .illus { max-height: 26vh; flex: none; }
  html, body { overflow: auto; }
}
@media (max-width: 560px) {
  .grid, .grid.names { grid-template-columns: 1fr; }
  .card { height: 230px; width: 153px; }
  .names .card { height: 230px; width: auto; }
  .grid.interests { grid-template-columns: repeat(2, 1fr); }
  .interests .card { height: 230px; width: 153px; }
  .row { flex-direction: column; }
  .panel { padding: 2vh 5vw; }
}

/* ---------- Respekter reduceret bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  .card:hover { transform: rotate(var(--rot)); }
}