/* Jakobs.ai hub – "Min rygsæk" (hub/backpack.js, owner: hub). Same visual language as the avatar popup / parents' sheet. */
.bp-btn {
  position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: #fff3c4; touch-action: manipulation;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 4px 0 rgba(43, 58, 85, .12);
  transition: transform .15s ease;
}
.bp-btn[hidden] { display: none; }
.bp-btn:active { transform: scale(.92); }
.bp-btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }
.bp-bag { font-size: 32px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.bp-badge {
  position: absolute; right: -5px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  display: grid; place-items: center; font: 700 15px/1 'Fredoka', system-ui, sans-serif; color: #5b3d00;
  background: var(--sun); box-shadow: 0 0 0 3px #fff;
}
.bp-dot {
  position: absolute; right: -2px; top: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff4f6d; box-shadow: 0 0 0 3px #fff; animation: bp-ping 1.4s ease-out infinite;
}
.bp-btn.has-new { animation: bp-wiggle 2.6s ease-in-out infinite; }
@keyframes bp-wiggle {
  0%, 62%, 100% { transform: rotate(0) scale(1); }
  68% { transform: rotate(-14deg) scale(1.1); } 74% { transform: rotate(12deg) scale(1.1); }
  80% { transform: rotate(-8deg) scale(1.05); } 86% { transform: rotate(5deg); } 92% { transform: rotate(0); }
}
@keyframes bp-ping { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(255, 79, 109, .6); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 14px rgba(255, 79, 109, 0); } }

/* the things, small on the hub's avatar button (same 200×200 picture as the sheet; the badge = circle r 64) */
.bp-mini { position: absolute; left: -28.125%; top: -28.125%; width: 156.25%; height: 156.25%; pointer-events: none; }
.bp-mini-back { z-index: -1; }
.bp-mini svg, .bp-layer { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- the sheet ---------- */
.bp-back {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, var(--safe-b, 0px)); background: rgba(20, 40, 70, .45);
}
.bp-back[hidden] { display: none; }
.bp-sheet {
  width: min(760px, 100%); max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; background: var(--paper); color: var(--ink); border-radius: 28px;
  padding: 0 20px 20px; box-shadow: 0 18px 50px rgba(20, 40, 70, .35); animation: ps-in .22s ease-out;
}
.bp-sheet:focus { outline: none; }
.bp-top {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0 10px; background: var(--paper);
}
.bp-top h2 { margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.bp-top h2 span, .bp-big-star { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.bp-close {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; font: 600 22px/1 system-ui, sans-serif;
  background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(43, 58, 85, .12); touch-action: manipulation;
}
.bp-close:focus-visible, .bp-game:focus-visible, .bp-try:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }

/* hero: the animal wearing its things + the star total */
.bp-hero {
  --w: clamp(120px, 24vmin, 170px);
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 28px;
  padding: 4px 12px 14px; border-radius: 24px;
  background: radial-gradient(circle at 30% 45%, #fffbe6 0, #fff0b8 60%, #ffe39a 100%);
}
.bp-stage { padding: calc(var(--w) * .36) calc(var(--w) * .27) calc(var(--w) * .3); }
.bp-wearer { position: relative; width: var(--w); height: var(--w); display: grid; place-items: center; }
.bp-wearer .bp-layer { position: absolute; left: -28.125%; top: -28.125%; width: 156.25%; height: 156.25%; pointer-events: none; }
.bp-disc {
  position: absolute; inset: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .7), 0 6px 0 rgba(43, 58, 85, .12);
}
.bp-face {
  position: relative; font-size: calc(var(--w) * .6); line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.bp-t { transform-box: fill-box; transform-origin: 50% 50%; }
.bp-flame { transform-box: fill-box; transform-origin: 50% 0; animation: bp-flame .35s ease-in-out infinite alternate; }
@keyframes bp-flame { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
.bp-new { animation: bp-pop .8s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: var(--d, .5s); }
@keyframes bp-pop {
  0% { transform: translateY(-40px) scale(0) rotate(-30deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.bp-score { text-align: center; min-width: 0; }
.bp-total { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 64px; font-weight: 700; line-height: 1; }
.bp-big-star { font-size: 54px; }
.bp-of { margin: 4px 0 0; font-size: 18px; font-weight: 500; color: var(--ink-soft); }
.bp-next { margin-top: 12px; }
.bp-next-t { margin: 0; font-size: 18px; font-weight: 600; }
.bp-bar { height: 12px; width: min(240px, 60vw); margin: 8px auto 0; border-radius: 999px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.bp-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd43b, #ff9a3c); }

/* celebration */
.bp-banner {
  position: relative; z-index: 2; flex: 1 0 100%; margin: 12px 0 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px; animation: bp-banner .6s cubic-bezier(.3, 1.6, .5, 1) both .3s;
}
.bp-banner > span:first-child {
  padding: 8px 20px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 22px; font-weight: 700;
  box-shadow: 0 4px 0 #d9582a;
}
.bp-banner-n { margin-top: 6px; font-size: 18px; font-weight: 600; color: #b84f1e; }
@keyframes bp-banner { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.bp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 1; }
.bp-confetti i {
  position: absolute; top: -16px; left: var(--x); width: 10px; height: 14px; border-radius: 3px; background: var(--c);
  transform: rotate(var(--r)) scale(var(--s)); opacity: 0;
  animation: bp-fall 2.4s cubic-bezier(.25, .6, .4, 1) var(--d) both;
}
.bp-confetti i:nth-child(3n) { border-radius: 50%; width: 11px; height: 11px; }
@keyframes bp-fall {
  0% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(var(--s)); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(440px) rotate(calc(var(--r) + 540deg)) scale(var(--s)); }
}

/* sections */
.bp-sec { margin-top: 14px; padding: 14px 16px 16px; border-radius: 20px; background: #fff; box-shadow: 0 2px 0 rgba(43, 58, 85, .06); }
.bp-sec h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }

/* the 10 things */
.bp-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 8px; }
.bp-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.bp-slot-c {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #f1f4f9; box-shadow: inset 0 0 0 3px rgba(43, 58, 85, .08);
}
.bp-slot.on .bp-slot-c { background: #fff3c4; box-shadow: inset 0 0 0 3px #f2c94c; }
.bp-slot.new .bp-slot-c { animation: bp-glow 1.2s ease-in-out 1s 3; }
@keyframes bp-glow { 50% { box-shadow: inset 0 0 0 3px #f2c94c, 0 0 0 8px rgba(255, 201, 60, .45); transform: scale(1.1); } }
.bp-ti { width: 48px; height: 48px; overflow: hidden; }
.bp-slot:not(.on) .bp-ti { filter: brightness(0); opacity: .14; }
.bp-q { position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px/1 'Fredoka', system-ui, sans-serif; color: #8a97ad; }
.bp-slot-l { font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ink-soft); overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.bp-slot.on .bp-slot-l { color: var(--ink); }

/* the games */
.bp-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; }
.bp-game {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-radius: 16px;
  text-decoration: none; color: inherit; touch-action: manipulation; transition: transform .12s ease;
}
.bp-game img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 3px 0 rgba(43, 58, 85, .12); }
.bp-game.off img { filter: grayscale(1); opacity: .42; box-shadow: none; }
.bp-game:active { transform: scale(.92); }
.bp-game.going img { animation: launch .6s ease-in forwards; }
.bp-stars { display: inline-flex; gap: 1px; }
.bp-s { width: 18px; height: 18px; fill: #e3e8f0; }
.bp-s.on { fill: #ffc21a; stroke: #d99a00; stroke-width: 1.4; stroke-linejoin: round; }
.bp-stars.sm .bp-s { width: 14px; height: 14px; }
.bp-legend { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-soft); }
.bp-legend > span { display: inline-flex; align-items: center; gap: 4px; }

/* "Prøv et nyt spil" */
.bp-try-sec { background: #eaf6ff; }
.bp-tries { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.bp-try {
  display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 10px 8px 8px; border-radius: 20px;
  background: #fff; color: var(--ink); text-decoration: none; touch-action: manipulation;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 45%, #fff), 0 3px 0 rgba(43, 58, 85, .1);
}
.bp-try img { flex: none; width: 56px; height: 56px; border-radius: 15px; }
.bp-try-t { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.15; }
.bp-try-p {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px;
  font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #ff9a5c, var(--orange)); box-shadow: 0 4px 0 #d9582a;
}
.bp-try-p svg { width: 22px; height: 22px; }
.bp-try:active { transform: scale(.97); }
.bp-try.going img { animation: launch .6s ease-in forwards; }

/* Dagens tur: the trip stamps (drawn by hub/daytrip.js stampSVG) */
.bp-stamps-sec { background: #fff8e8; }
.bp-stamps-sec h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bp-stamps-n { padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #e4f7d8; color: #2d7a3e; }
.bp-stamps { list-style: none; margin: 0; padding: 4px 2px 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 10px; }
.bp-stamps li { display: grid; place-items: center; }
.bp-stamps .dt-stamp { display: block; width: 64px; height: 77px; filter: drop-shadow(0 3px 3px rgba(43, 58, 85, .18)); }
.bp-stamps li:nth-child(odd) .dt-stamp { transform: rotate(-4deg); }
.bp-stamps li:nth-child(even) .dt-stamp { transform: rotate(3deg); }
.bp-stamps li:first-child .dt-stamp { width: 72px; height: 86px; }
.bp-stamps-none { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ---------- sizes ---------- */
@media (max-width: 600px) {
  .bp-btn { width: 48px; height: 48px; }
  .bp-bag { font-size: 27px; }
  .bp-back { align-items: flex-end; padding: 0; }
  .bp-sheet { border-radius: 24px 24px 0 0; max-height: 94%; padding: 0 14px calc(14px + var(--safe-b, 0px)); }
  .bp-top h2 { font-size: 24px; }
  .bp-hero { gap: 0 16px; }
  .bp-total { font-size: 52px; }
  .bp-big-star { font-size: 44px; }
  .bp-sec { padding: 12px; }
  .bp-slots { gap: 10px 4px; }
  .bp-slot-c { width: 56px; height: 56px; }
  .bp-ti { width: 42px; height: 42px; }
  .bp-slot-l { font-size: 12px; }
  .bp-games { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .bp-game img { width: 50px; height: 50px; }
  .bp-s { width: 16px; height: 16px; }
}
@media (max-width: 440px) {
  /* make room for the 🎒 next to the avatar in the header */
  .who { gap: 6px; }
  .brand-name { font-size: 16px; }
  .lang { width: 40px; height: 40px; padding: 3px; }
  .bp-btn { width: 44px; height: 44px; }
  .bp-bag { font-size: 25px; }
  .bp-badge { min-width: 22px; height: 22px; font-size: 13px; right: -4px; bottom: -4px; padding: 0 5px; }
  .bp-slot-c { width: 50px; height: 50px; }
  .bp-ti { width: 38px; height: 38px; }
  .bp-tries { grid-template-columns: 1fr; }
  .bp-slot-l { font-size: 11px; letter-spacing: -.2px; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
  .brand { padding-right: 6px; }
}
/* short landscape screens: the animal next to the score, smaller */
@media (max-height: 520px) and (orientation: landscape) {
  .bp-back { padding: 8px 16px; }
  .bp-hero { --w: 100px; flex-wrap: nowrap; }
  .bp-top { padding: 10px 0 8px; }
  .bp-total { font-size: 46px; }
  .bp-big-star { font-size: 38px; }
  .bp-slots { grid-template-columns: repeat(10, 1fr); }
  .bp-slot-c { width: 50px; height: 50px; }
  .bp-ti { width: 38px; height: 38px; }
  .bp-slot-l { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-confetti { display: none; }
}