/* Lesson hub + Info sheet (measured from the 1600x900 reference) */
.hub { background: var(--white); }
.hub-head { position: absolute; left: 180px; right: 180px; top: 34px; text-align: center; }
.hub-head h1 { margin: 0; font-size: 54px; font-weight: 700; display: inline-flex; align-items: center; gap: 18px; }
.hh-check { width: 54px; height: 54px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.hub-head p { margin: 12px 0 0; font-size: 34px; font-weight: 600; color: rgba(34,23,80,.55); }
.info-pill { position: absolute; right: 56px; top: 54px; height: 68px; padding: 0 30px; border-radius: 999px; border: 4px solid #D7D4E2; color: rgba(34,23,80,.6); font-weight: 700; font-size: 32px; }

.cards { position: absolute; left: 0; right: 0; top: 230px; height: 600px; display: flex; gap: 72px; padding: 30px 140px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.cards::-webkit-scrollbar { display: none; }
.act-card { position: relative; flex: none; width: 324px; scroll-snap-align: start; scroll-margin-left: 140px; }
.ac-face { position: relative; display: block; width: 324px; height: 436px; border-radius: 40px; overflow: hidden; transition: transform .15s var(--ease-out); }
.act-card:active .ac-face { transform: scale(.96); }
.ac-num { position: absolute; left: 30px; top: -18px; font-size: 210px; font-weight: 700; color: rgba(255,255,255,.4); line-height: 1; }
.ac-art { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); }
.ac-howto { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 34px; display: grid; place-items: center; }
.act-card.howto .ac-art { bottom: 40px; }
.ac-star { position: absolute; right: -46px; top: -48px; filter: drop-shadow(0 4px 0 rgba(34,23,80,.08)); }
.ac-label { display: block; margin-top: 22px; text-align: center; font-weight: 700; font-size: 33px; white-space: nowrap; }

/* Info sheet */
.info-panel { position: absolute; inset: 0; z-index: 400; background: var(--navy); color: var(--white); overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.info-panel::-webkit-scrollbar { display: none; }
.info-x { position: fixed; right: 50px; top: 50px; width: 72px; height: 72px; border-radius: 50%; background: var(--purple-soft); display: grid; place-items: center; z-index: 2; }
.info-x svg { width: 34px; height: 34px; }
.info-head { position: sticky; top: 0; background: var(--navy); text-align: center; padding: 50px 180px 34px; z-index: 1; }
.info-head h2 { margin: 0; font-size: 50px; }
.info-head p { margin: 10px 0 0; font-size: 32px; color: #B5ADE0; }
.info-list { padding: 0 192px 80px; }
.info-row { display: flex; align-items: center; gap: 52px; padding: 36px 0; border-top: 2px solid rgba(255,255,255,.18); }
.ir-thumb { flex: none; width: 170px; height: 218px; border-radius: 26px; overflow: hidden; display: grid; place-items: end center; }
.ir-thumb .mascot { margin-bottom: -14px; }
.ir-text { flex: 1; }
.ir-text h3 { margin: 0 0 12px; font-size: 44px; }
.ir-text p { margin: 0; font-size: 33px; line-height: 1.35; color: #D8D2F6; }
.ir-right { flex: none; width: 260px; }
.ir-right h4 { margin: 0 0 12px; font-size: 29px; color: #A79FD6; }
.ir-body { font-size: 32px; line-height: 1.4; color: #E9E5FF; }
.ir-body .chips { display: flex; flex-wrap: wrap; gap: 14px; }

/* themed hub: the world's art, softly blurred, plus two of its characters */
.hub-bg { position: absolute; inset: -40px; background-size: cover; background-position: center 45%; filter: blur(16px) saturate(1.15); opacity: .42; pointer-events: none; }
.hub-pal { position: absolute; bottom: -14px; height: 130px; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .18)); animation: palIdle 2.6s ease-in-out infinite alternate; }
.hub-pal.l { left: 12px; }
.hub-pal.r { right: 16px; animation-delay: -1.3s; }
.hub-world { position: absolute; left: 0; right: 0; top: 6px; margin: 0 auto; width: max-content; padding: 4px 18px; border-radius: 999px; background: var(--world); color: #FFFFFF; font-size: 22px; font-weight: 700; }
.hub .ac-label { text-shadow: 0 2px 0 #FFFFFF, 0 0 12px #FFFFFF; }

/* round 2: each activity card is hosted by one of the world's animals, holding the activity's prop */
.ac-pal { position: absolute; left: 50%; bottom: 8px; max-width: 280px; max-height: 300px; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .22)); pointer-events: none; user-select: none; }
.act-card.howto .ac-pal { bottom: 80px; max-height: 250px; }
.ac-pal.pal-hop { animation: cardHop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cardHop { 0% { transform: translateX(-50%); } 25% { transform: translateX(-50%) scale(1.1, .88); } 60% { transform: translateX(-50%) translateY(-60px) scale(.95, 1.06); } 100% { transform: translateX(-50%); } }
.ac-prop { position: absolute; right: 18px; top: 18px; width: 96px; height: 96px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center;
  box-shadow: 0 6px 0 rgba(34, 23, 80, .14); transform: rotate(8deg); }
.act-card:hover .ac-prop { transform: rotate(-6deg) scale(1.06); transition: transform .2s; }
.ir-thumb img { max-width: 150px; max-height: 190px; margin-bottom: 8px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .2)); }

/* round 3: every card fits on one screen (one row up to 5, else two rows), no side-scrolling */
.cards.fit { top: 210px; bottom: 0; height: auto; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(var(--cols), 268px);
  justify-content: center; align-content: start; gap: 30px 38px; scroll-snap-type: none; touch-action: auto; }
.cards.fit .act-card { width: 268px; }
.cards.fit .ac-face { width: 268px; height: 410px; border-radius: 36px; }
.cards.fit .ac-num { font-size: 170px; left: 22px; top: -14px; }
.cards.fit .ac-pal { max-width: 232px; max-height: 300px; bottom: 10px; }
.cards.fit .ac-label { margin-top: 16px; font-size: 30px; }
.cards.fit .ac-star { right: -34px; top: -38px; transform: scale(.75); transform-origin: 70% 30%; }
.cards.fit .ac-prop { width: 80px; height: 80px; top: 14px; right: 14px; }
.cards.fit .ac-prop svg { width: 54px; height: 54px; }
.cards.fit.two-rows { top: 196px; gap: 22px 34px; }
.cards.fit.two-rows .ac-face { height: 262px; border-radius: 30px; }
.cards.fit.two-rows .ac-num { font-size: 120px; left: 18px; top: -8px; }
.cards.fit.two-rows .ac-pal { max-width: 200px; max-height: 210px; bottom: 6px; }
.cards.fit.two-rows .ac-label { margin-top: 8px; font-size: 26px; }
.cards.fit.two-rows .ac-star { transform: scale(.6); }
.cards.fit .act-card.howto .ac-pal { bottom: 70px; max-height: 170px; }
.cards.fit .ac-howto { height: 58px; font-size: 28px; }
.cards.fit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; width: calc(var(--cols) * 268px + (var(--cols) - 1) * 38px); left: 0; right: 0; margin: 0 auto; }
.cards.fit.two-rows { width: calc(var(--cols) * 268px + (var(--cols) - 1) * 34px); }