/* =========================================
   LITTLE BIBLE EXPLORERS
   COMPLETE RESPONSIVE STYLESHEET
   ========================================= */

* {
  box-sizing: border-box;
}

:root {
  --purple: #6846a5;
  --deep-purple: #49316f;
  --ink: #342b45;
  --muted: #756d80;
}

body {
  margin: 0;
  background: #fffdf8;
  color: var(--ink);
  font-family: "Nunito", sans-serif;
}

button {
  font: inherit;
  cursor: pointer;
}

/* HEADER */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 9px 6%;
  background: white;
  box-shadow: 0 3px 18px #39234b10;
  min-height: 82px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* LITTLE BIBLE EXPLORERS LOGO */

.game-logo {
  display: block;
  width: 150px;
  height: 68px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.star-counter {
  padding: 9px 15px;
  border-radius: 30px;
  background: #fff3c9;
  color: #725014;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

/* MAIN LAYOUT */

main {
  width: min(1100px, 90%);
  margin: auto;
}

/* WELCOME SECTION */

.welcome-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 300px;
  margin: 32px 0;
  padding: 38px 6%;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(120deg, #eee5ff, #fff1d0);
}

.welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 570px;
}

.welcome-label,
.section-kicker {
  color: var(--purple);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.welcome-section h2 {
  max-width: 500px;
  margin: 12px 0;
  color: var(--deep-purple);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
}

.welcome-section p {
  max-width: 470px;
  color: #645a70;
  line-height: 1.7;
}

.primary-button {
  margin-top: 12px;
  padding: 14px 24px;
  border: 0;
  border-radius: 30px;
  background: var(--purple);
  color: white;
  font-weight: 900;
  box-shadow: 0 5px 0 #49316f;
}

.welcome-art {
  position: relative;
  flex: 0 0 250px;
  height: 220px;
}

/* BIBLE TREASURE */

.treasure-section {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0 48px;
  padding: 20px 24px;
  border: 1px solid #f2e4c1;
  border-radius: 20px;
  background: #fffaf0;
}

.treasure-icon {
  font-size: 42px;
}

.treasure-section h3 {
  margin: 5px 0 0;
  color: var(--deep-purple);
  font-size: 23px;
}

.treasure-section p {
  margin: 2px 0 0;
  color: var(--muted);
}

.treasure-sparkle {
  margin-left: auto;
  font-size: 30px;
}


/* DAILY VERSE: CHILD-FRIENDLY ACTION RIBBON */
.treasure-action-ribbon {
  display:inline-flex;align-items:center;gap:9px;margin-top:13px;padding:9px 15px;
  border:1px solid #e8d8a2;border-radius:999px;background:linear-gradient(110deg,#fff0bd,#fff8df);
  color:#604b16;font-size:12px;font-weight:950;cursor:pointer;
  box-shadow:0 3px 0 #ead9a6;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.treasure-action-ribbon:hover,.treasure-action-ribbon:focus-visible {
  transform:translateY(-2px);background:linear-gradient(110deg,#ffe59a,#fff1c7);
  box-shadow:0 6px 0 #ead9a6;outline:3px solid rgba(245,190,64,.22);outline-offset:2px;
}
.treasure-action-ribbon:active { transform:translateY(1px);box-shadow:0 1px 0 #ead9a6; }
.ribbon-chevron { display:inline-block;font-size:17px;transition:transform .2s ease; }
.treasure-action-ribbon[aria-expanded="true"] .ribbon-chevron { transform:rotate(180deg); }
.treasure-action-panel { margin-top:13px;padding:14px 16px;border:1px solid #eee2bd;border-radius:17px;background:rgba(255,255,255,.82); }
.treasure-action-panel[hidden] { display:none!important; }
.treasure-action-heading { margin:0 0 8px!important;color:#4c4380!important;font-size:13px!important;font-weight:950!important; }
.treasure-action-panel ol { margin:0;padding-left:22px;color:#4c5266;font-size:13px;line-height:1.6; }
.treasure-action-panel li { padding:3px 0 3px 3px; }
.treasure-action-panel li::marker { color:#7a61c8;font-weight:900; }
.treasure-action-note { margin:9px 0 0!important;color:#777b8b!important;font-size:11px!important;font-weight:600!important; }
@media(max-width:600px) {
  .treasure-action-ribbon { font-size:11px;padding:9px 12px; }
  .treasure-action-panel { padding:12px; }
  .treasure-action-panel ol { font-size:12px; }
}

/* SECTION HEADINGS */

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-heading h2,
.map-heading h2 {
  margin: 5px 0;
  color: var(--deep-purple);
  font-size: clamp(25px, 4vw, 32px);
}

.heading-emoji {
  font-size: 42px;
}

/* ADVENTURE CARDS */

.world-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.world-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 230px;
  padding: 19px;
  border: 2px solid transparent;
  border-radius: 20px;
  color: var(--ink);
  text-align: left;
  transition: transform .2s, box-shadow .2s;
}

.world-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px #342b4518;
}

.world-noah {
  background: #e3f4ff;
}

.world-david {
  background: #fff0d9;
}

.world-moses {
  background: #e2f6e8;
}

.world-jesus {
  background: #f4e8ff;
}

.world-art {
  align-self: center;
  margin: 4px 0 12px;
  font-size: 54px;
}

.world-number {
  color: var(--purple);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.world-card strong {
  margin-top: 4px;
  font-size: 18px;
}

.world-card small {
  margin-top: 5px;
  color: #6d6576;
  line-height: 1.4;
}

.world-action {
  margin-top: auto;
  padding-top: 13px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
}


/* SEQUENTIAL ADVENTURE LOCKS */
.world-card.locked,
.map-location.locked {
  cursor: not-allowed;
  filter: saturate(.55);
  opacity: .62;
  box-shadow: none;
}

.world-card.locked:hover,
.map-location.locked:hover {
  transform: none;
  box-shadow: none;
}

.world-card.locked .world-action {
  color: #756d80;
}

.map-location.locked {
  border-color: #d8d1e2;
  background: #eeeaf3;
}

.map-location.locked .location-status {
  color: #766d82;
}

.world-card:disabled,
.map-location:disabled {
  pointer-events: auto;
}

/* ADVENTURE MAP */

.adventure-map {
  margin: 65px 0 45px;
  padding: 28px 20px;
  overflow: hidden;
  border: 1px solid #e9e0d2;
  border-radius: 28px;
  background: #fffaf0;
}

.map-heading {
  text-align: center;
}

.map-heading p {
  margin: 5px 0 16px;
  color: var(--muted);
}

.map-score {
  width: fit-content;
  margin: 0 auto 15px;
  padding: 9px 18px;
  border-radius: 30px;
  background: #fff0bd;
  color: #775619;
  font-weight: 900;
}

.adventure-land {
  position: relative;
  width: min(100%, 560px);
  height: 610px;
  margin: auto;
  overflow: hidden;
  border: 5px solid white;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 15% 30%, #a9d88e 0 13%, transparent 14%),
    radial-gradient(ellipse at 85% 60%, #b4df91 0 15%, transparent 16%),
    linear-gradient(180deg, #bce8ff 0%, #d9f3c3 35%, #9bd27e 100%);
  box-shadow: 0 5px 18px #3c573022;
}

.adventure-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-sun,
.map-cloud,
.map-mountain,
.map-decoration,
.map-location,
.treasure-castle,
.map-explorer {
  position: absolute;
  z-index: 2;
}

.map-sun {
  top: 12px;
  right: 25px;
  font-size: 43px;
}

.map-cloud {
  font-size: 35px;
  opacity: .9;
}

.cloud-one {
  top: 35px;
  left: 30%;
}

.cloud-two {
  top: 105px;
  right: 8%;
}

.map-mountain {
  font-size: 58px;
  opacity: .85;
}

.mountain-one {
  top: 100px;
  left: 4%;
}

.mountain-two {
  top: 185px;
  right: 2%;
}

.map-decoration {
  font-size: 35px;
}

.tree-one {
  top: 260px;
  left: 5%;
}

.tree-two {
  top: 390px;
  right: 5%;
}

.tree-three {
  bottom: 18px;
  left: 8%;
}

.flower-one {
  top: 320px;
  right: 13%;
}

.flower-two {
  bottom: 115px;
  left: 8%;
}

/* Extra landmarks make the map feel like a world to explore. */
.map-castle {
  font-size: 34px;
  filter: drop-shadow(0 3px 2px #3b472b35);
}
.castle-one { top: 18%; left: 43%; }
.castle-two { top: 43%; right: 8%; font-size: 30px; }
.castle-three { bottom: 12%; right: 35%; font-size: 32px; }
.map-bridge { top: 58%; left: 43%; font-size: 30px; }
.map-rainbow { top: 4%; left: 7%; font-size: 34px; }

/* MAP LOCATIONS */

.map-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  min-height: 105px;
  padding: 8px 5px;
  border: 3px solid white;
  border-radius: 18px;
  background: #ffffffed;
  color: var(--deep-purple);
  box-shadow: 0 4px 10px #263b2530;
  transition: transform .2s;
}

.map-location:hover {
  z-index: 5;
  transform: scale(1.06);
}

.location-picture {
  font-size: 32px;
  line-height: 1.2;
}

.location-name {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 900;
}

.location-status {
  margin-top: 3px;
  color: #967021;
  font-size: 9px;
  font-weight: 900;
}

.map-location.completed {
  border-color: #f5c94e;
  background: #fff9dc;
}

.map-location.completed .location-status {
  color: #27864a;
}

.location-noah {
  top: 485px;
  left: 5%;
}

.location-david {
  top: 365px;
  right: 5%;
}

.location-moses {
  top: 235px;
  left: 6%;
}

.location-jesus {
  top: 80px;
  right: 9%;
}

/* TREASURE CASTLE */

.treasure-castle {
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 2px solid white;
  border-radius: 20px;
  background: #fff4cb;
  color: #684b17;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.castle-icon {
  font-size: 24px;
}

/* MAP CHARACTER IMAGES */

.map-explorer {
  top: 86%;
  left: 17%;
  display: flex;
  transform: translate(-50%, -50%);
  transition: top 1.1s cubic-bezier(.2,.8,.2,1), left 1.1s cubic-bezier(.2,.8,.2,1);
  z-index: 6;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  filter: drop-shadow(0 3px 2px #25351b35);
}

/* Lucas on the map */

.map-lucas-photo {
  display: block;
  width: 39px;
  height: 49px;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: explorerFloat 2.6s ease-in-out infinite;
}

/* Evanah on the map */

.map-evanah-photo {
  display: block;
  width: 39px;
  height: 49px;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: explorerFloat 2.6s ease-in-out infinite;
  animation-delay: .5s;
}

/* MAP PROGRESS */

.map-progress {
  width: min(100%, 560px);
  margin: 20px auto 0;
  padding: 18px;
  border-radius: 18px;
  background: white;
}

.map-progress h3 {
  margin: 0 0 12px;
  color: var(--deep-purple);
}

.progress-track {
  height: 13px;
  overflow: hidden;
  border-radius: 20px;
  background: #eee8f4;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #66bd7b, #a4d76e);
  transition: width .4s ease;
}

.map-progress p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* ACHIEVEMENTS */

.achievement-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 45px 0;
  padding: 25px;
  border-radius: 22px;
  background: #f0eaff;
}

.achievement-icon {
  font-size: 55px;
}

.achievement-section h2 {
  margin: 5px 0;
  color: var(--deep-purple);
}

.achievement-section p {
  margin: 4px 0;
  color: var(--muted);
  line-height: 1.6;
}

.achievement-guides {
  font-weight: 700;
  color: var(--deep-purple) !important;
}

/* FOOTER */

footer {
  padding: 25px 15px;
  background: #49316f;
  color: white;
  text-align: center;
  font-size: 13px;
}

.footer-verse {
  opacity: .8;
}

/* GAME MODAL */

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #20172dcc;
}

.modal.show {
  display: flex;
}

.modal-card {
  position: relative;
  width: min(100%, 760px);
  max-height: 94vh;
  padding: 25px;
  overflow-y: auto;
  border-radius: 25px;
  background: white;
  box-shadow: 0 15px 50px #0003;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1edf7;
  color: var(--deep-purple);
  font-size: 18px;
  font-weight: 900;
}

.modal-card h2 {
  color: var(--deep-purple);
  text-align: center;
}

.modal-card p {
  color: #5e5669;
  line-height: 1.7;
}

.story-emoji {
  margin: 8px 0;
  font-size: 48px;
  text-align: center;
}

.story-scene-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  background: #f4efff;
  margin: 0 auto;
}

.scene-count {
  display: block;
  margin-top: 14px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
}

.scene-title {
  margin: 8px 0;
  font-size: 27px;
}

.scene-story {
  font-size: 16px;
}

.scene-lesson {
  margin: 15px 0;
  padding: 14px;
  border-radius: 15px;
  background: #f4efff;
  color: var(--deep-purple);
  font-weight: 800;
}

.scene-controls {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.scene-controls button {
  flex: 1;
}

.modal-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border: 0;
  border-radius: 25px;
  background: var(--purple);
  color: white;
  font-weight: 900;
}

.modal-button.secondary {
  background: #eae4f3;
  color: var(--deep-purple);
}

.modal-button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

/* QUIZ */

.quiz-option {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 13px;
  border: 2px solid #e6def0;
  border-radius: 14px;
  background: white;
  color: var(--ink);
  text-align: left;
  font-weight: 800;
}

.quiz-option:hover {
  border-color: var(--purple);
  background: #f7f2ff;
}

.quiz-option:disabled {
  cursor: default;
  opacity: 1;
}

.lesson-box,
.verse-box,
.feedback-box {
  margin: 15px 0;
  padding: 14px;
  border-radius: 15px;
  background: #f4efff;
}

.verse-box {
  background: #fff5d8;
  color: #6d511c;
  font-weight: 800;
}

.feedback-box {
  font-weight: 900;
}

.feedback-box.correct {
  background: #e6f7e9;
  color: #267342;
}

.feedback-box.incorrect {
  background: #fff0e8;
  color: #9b4b2c;
}

/* LUCAS AND EVANAH - WELCOME CHARACTERS */

.character-stage {
  position: relative;
  flex: 0 0 390px;
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  overflow: visible;
}

.explorer-character {
  position: relative;
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: explorerFloat 3s ease-in-out infinite;
}

.evanah-character {
  width: 42%;
  animation-delay: .65s;
}

.character-art {
  position: relative;
  width: 100%;
  height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LUCAS PHOTO */

.lucas-photo {
  width: 118px;
  height: 165px;
  flex: 0 0 165px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lucas-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px rgba(52, 43, 69, .14));
}

/* EVANAH PHOTO */

.evanah-photo {
  width: 118px;
  height: 165px;
  flex: 0 0 165px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.evanah-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px rgba(52, 43, 69, .14));
}

/* CHARACTER NAME LABELS */

.character-name {
  margin-top: 7px;
  padding: 4px 14px;
  border-radius: 20px;
  background: white;
  color: var(--deep-purple);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 8px #342b4520;
}

/* DECORATIVE SPARKLES */

.character-sparkle {
  position: absolute;
  font-size: 25px;
  animation: sparklePulse 2s ease-in-out infinite;
}

.sparkle-one {
  top: 12px;
  left: 3px;
}

.sparkle-two {
  top: 55px;
  right: 0;
  animation-delay: 1s;
}

.character-greeting {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--deep-purple);
}

/* CHARACTER ANIMATIONS */

@keyframes explorerFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes characterWave {
  0%, 100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-5deg);
  }

  65% {
    transform: rotate(5deg);
  }
}

@keyframes hatBob {
  0%, 100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(4deg) translateY(-3px);
  }
}

@keyframes sparklePulse {
  0%, 100% {
    opacity: .55;
    transform: scale(.85) rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.18) rotate(15deg);
  }
}

/* TABLET RESPONSIVE DESIGN */

@media (max-width: 760px) {

  .world-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-section {
    min-height: 280px;
    padding: 28px 6%;
  }

  .character-stage {
    flex-basis: 250px;
    height: 190px;
    gap: 5px;
  }

  .character-art {
    height: 145px;
  }

  .lucas-photo {
    width: 96px;
    height: 135px;
    flex-basis: 135px;
  }

  .evanah-photo {
    width: 96px;
    height: 135px;
    flex-basis: 135px;
  }

  .character-greeting {
    font-size: 9px;
    bottom: -22px;
  }

  .map-lucas-photo,
  .map-evanah-photo {
    width: 36px;
    height: 46px;
  }

  /* TABLET LOGO SIZE */

  .game-logo {
    width: 130px;
    height: 60px;
  }
}

/* MOBILE RESPONSIVE DESIGN */

@media (max-width: 480px) {

  .top-bar {
    padding: 8px 4%;
    min-height: 62px;
    gap: 8px;
  }

  /* SMALLER MOBILE LOGO */

  .game-logo {
    width: 105px;
    height: 48px;
  }

  .star-counter {
    padding: 7px 10px;
    font-size: 11px;
  }

  main {
    width: 92%;
  }

  .welcome-section {
    align-items: flex-start;
    min-height: 300px;
  }

  .welcome-section h2 {
    font-size: 30px;
  }

  .character-stage {
    position: absolute;
    right: 5px;
    bottom: 0;
    width: 220px;
    flex-basis: 220px;
    height: 165px;
    gap: 3px;
    opacity: .96;
  }

  .explorer-character {
    width: 50%;
  }

  .character-art {
    height: 120px;
  }

  .lucas-photo {
    width: 77px;
    height: 112px;
    flex-basis: 112px;
  }

  .evanah-photo {
    width: 77px;
    height: 112px;
    flex-basis: 112px;
  }

  .character-name {
    margin-top: 3px;
    padding: 3px 9px;
    font-size: 10px;
  }

  .character-greeting {
    display: none;
  }

  .character-sparkle {
    font-size: 18px;
  }

  .welcome-copy {
    max-width: 100%;
  }

  .treasure-section {
    padding: 15px;
  }

  .treasure-section h3 {
    font-size: 20px;
  }

  .world-card {
    min-height: 215px;
    padding: 14px;
  }

  .world-card strong {
    font-size: 16px;
  }

  .adventure-map {
    padding: 22px 10px;
  }

  .adventure-land {
    height: 580px;
  }

  .map-location {
    width: 108px;
    min-height: 100px;
  }

  .location-noah {
    left: 2%;
    top: 485px;
  }

  .location-david {
    right: 2%;
    top: 365px;
  }

  .location-moses {
    left: 2%;
    top: 235px;
  }

  .location-jesus {
    right: 2%;
    top: 80px;
  }

  .treasure-castle {
    top: 12px;
  }

  .map-explorer {
    top: 86%;
    left: 17%;
  }

  .map-character-pair {
    gap: 1px;
  }

  .map-lucas-photo,
  .map-evanah-photo {
    width: 31px;
    height: 41px;
  }

  .achievement-section {
    align-items: flex-start;
    padding: 18px;
  }

  .achievement-icon {
    font-size: 40px;
  }

  .modal-card {
    padding: 18px;
  }

  .scene-title {
    font-size: 22px;
  }

  .scene-controls {
    flex-direction: column;
  }
}

/* =========================================
   DAVID THE BRAVE - SCENE IMAGE ANIMATION
   ========================================= */

.david-scene-image {
  animation: explorerFloat 2.6s ease-in-out infinite;
}

/* =========================================
   MOSES' JOURNEY - SCENE IMAGE ANIMATION
   ========================================= */

.moses-scene-image {
  animation: explorerFloat 2.6s ease-in-out infinite;
}

/* =========================================
   WALK WITH JESUS - SCENE IMAGE ANIMATION
   ========================================= */

.jesus-scene-image {
  animation: explorerFloat 2.6s ease-in-out infinite;
}

/* ACCESSIBILITY: REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .explorer-character,
  .avatar-face,
  .avatar-hat,
  .character-sparkle,
  .map-lucas-photo,
  .map-evanah-photo,
  .david-scene-image,
  .moses-scene-image,
  .jesus-scene-image {
    animation: none;
  }
}

/* One-attempt quiz answer states */
.quiz-option.correct {
  border-color: #2e9b57;
  background: #e9f8ee;
  color: #176536;
}

.quiz-option.incorrect {
  border-color: #d65a55;
  background: #fff0ef;
  color: #9b2824;
}


/* ADVENTURE 5 — GOD CAN USE ME */
.god-can-use-me-scene-image {
  animation: explorerFloat 2.6s ease-in-out infinite;
}
.location-god-can-use-me {
  top: 8px;
  left: 39%;
}
.world-god-can-use-me {
  border-color: #e9c65c;
}
@media (max-width: 700px) {
  .location-god-can-use-me {
    top: 8px;
    left: 36%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .god-can-use-me-scene-image { animation: none; }
}

/* =========================================
   VISUAL POLISH UPDATE — NOVEMBER 2026
   Keeps the existing game structure and behaviour.
   ========================================= */
:root {
  --purple: #5b3ca6;
  --deep-purple: #38236f;
  --ink: #25304a;
  --muted: #68738a;
  --lbe-blue: #4d9ee8;
  --lbe-mint: #63c99a;
  --lbe-gold: #ffc94d;
  --lbe-coral: #ff8c78;
  --surface: #ffffff;
  --soft-shadow: 0 14px 38px rgba(45, 39, 86, .10);
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 5% 8%, rgba(116, 190, 255, .16), transparent 30%),
    radial-gradient(ellipse at 95% 25%, rgba(255, 207, 105, .17), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #fffaf2 54%, #f7f8ff 100%);
  color: var(--ink);
  min-height: 100vh;
}
.top-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 8px max(5%, calc((100% - 1180px)/2));
  min-height: 86px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(91,60,166,.09);
  box-shadow: 0 8px 28px rgba(49,42,92,.07);
  backdrop-filter: blur(14px);
}
.game-logo { width: 168px; height: 70px; }
.star-counter {
  padding: 11px 19px;
  background: linear-gradient(135deg, #fff1b8, #ffe08a);
  color: #76500b;
  border: 1px solid rgba(224,169,43,.25);
  box-shadow: 0 5px 14px rgba(205,155,42,.14);
  font-size: 14px;
}
main { width: min(1160px, 91%); }
.welcome-section {
  min-height: 330px;
  margin: 34px 0 30px;
  padding: 42px 5.5%;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 32px;
  background:
    radial-gradient(circle at 83% 22%, rgba(255,255,255,.65) 0 5%, transparent 5.5%),
    radial-gradient(circle at 93% 78%, rgba(255,255,255,.35) 0 9%, transparent 9.5%),
    linear-gradient(118deg, #dff2ff 0%, #e9e4ff 48%, #fff0cf 100%);
  box-shadow: 0 18px 48px rgba(75,83,145,.13), inset 0 1px 0 #fff;
}
.welcome-label, .section-kicker {
  display: inline-block;
  color: #5b43a0;
  letter-spacing: 1.65px;
  font-size: 11px;
}
.welcome-section h2 {
  color: #35216e;
  font-size: clamp(32px, 4.7vw, 49px);
  letter-spacing: -1.3px;
  line-height: 1.08;
}
.welcome-section p { color: #58647c; font-size: 16px; }
.primary-button, .modal-button {
  background: linear-gradient(135deg, #6948bd, #4c35a0);
  box-shadow: 0 5px 0 #382476, 0 9px 20px rgba(76,53,160,.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-button:hover, .modal-button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 7px 0 #382476, 0 13px 24px rgba(76,53,160,.22);
}
.primary-button:active, .modal-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #382476; }
.character-name { border: 1px solid #eee8ff; box-shadow: 0 5px 15px rgba(52,43,69,.10); }
.treasure-section {
  margin: 28px 0 52px;
  padding: 22px 26px;
  border: 1px solid #f5df9c;
  background: linear-gradient(105deg, #fff9e6, #fffdf7 70%);
  box-shadow: 0 10px 25px rgba(183,143,50,.08);
}
.treasure-section h3 { color: #49327e; }
.section-heading { margin-bottom: 22px; }
.section-heading h2, .map-heading h2 { color: #392573; letter-spacing: -.6px; }
.heading-emoji { filter: drop-shadow(0 5px 5px rgba(62,53,100,.12)); }
.world-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.world-card {
  position: relative;
  min-height: 250px;
  padding: 19px 17px 17px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 24px;
  box-shadow: 0 9px 24px rgba(52,43,69,.07), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.world-card::before {
  content: "";
  position: absolute;
  width: 118px; height: 118px;
  right: -37px; top: -43px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.world-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 32px rgba(52,43,69,.14);
  border-color: rgba(255,255,255,1);
}
.world-noah { background: linear-gradient(155deg, #d9f0ff, #eef9ff); }
.world-david { background: linear-gradient(155deg, #ffe8c7, #fff6e8); }
.world-moses { background: linear-gradient(155deg, #d9f5e5, #effbf4); }
.world-jesus { background: linear-gradient(155deg, #eee2ff, #faf5ff); }
.world-god-can-use-me { background: linear-gradient(155deg, #fff0b8, #fff9e4); }
.world-art { position: relative; z-index: 1; font-size: 58px; margin: 5px 0 15px; filter: drop-shadow(0 5px 5px rgba(43,48,72,.13)); }
.world-number { color: #6550a2; font-size: 10px; letter-spacing: 1.2px; }
.world-card strong { color: #2f2850; font-size: 17px; line-height: 1.25; }
.world-card small { color: #657087; font-size: 12px; }
.world-action { color: #513a9a; font-size: 13px; }
.world-card.locked { opacity: .72; }
.adventure-map {
  margin: 70px 0 48px;
  padding: 32px 22px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 32px;
  background: linear-gradient(145deg, #fffdf4, #f2f9ff);
  box-shadow: var(--soft-shadow);
}
.map-heading p { color: #68738a; }
.map-score { background: linear-gradient(100deg, #fff0b4, #ffe5a0); box-shadow: 0 5px 14px rgba(195,147,35,.12); }
.adventure-land { box-shadow: 0 12px 28px rgba(53,96,62,.18); border: 6px solid white; }
.map-location { border-radius: 20px; box-shadow: 0 7px 18px rgba(38,59,37,.20); }
.map-location:focus-visible, .world-card:focus-visible, button:focus-visible { outline: 3px solid #ffb83e; outline-offset: 3px; }
.map-progress { border: 1px solid #edf0f8; box-shadow: 0 8px 22px rgba(45,39,86,.06); }
.progress-track { background: #e8e8f3; }
.progress-fill { background: linear-gradient(90deg, #49bf88, #8bdc80, #f5d35d); }
.achievement-section {
  margin: 48px 0;
  padding: 28px 30px;
  border: 1px solid #e9e0ff;
  background: linear-gradient(110deg, #eee8ff, #e9f6ff 75%, #fff6dc);
  box-shadow: 0 10px 28px rgba(75,66,130,.08);
}
.achievement-section h2 { color: #392573; }
footer { background: linear-gradient(110deg, #35216e, #59409c); padding: 30px 15px; }
.modal { background: rgba(25,20,48,.72); backdrop-filter: blur(7px); }
.modal-card {
  width: min(100%, 790px);
  padding: 28px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 28px;
  box-shadow: 0 25px 80px rgba(15,12,34,.30);
}
.modal-close { background: #f0ebff; box-shadow: 0 3px 10px rgba(52,43,69,.08); }
.modal-card h2 { color: #392573; }
.scene-title { letter-spacing: -.5px; }
.scene-image-container { margin: 18px auto; max-width: 680px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg,#eaf4ff,#fff6e3); }
.story-scene-image { border-radius: 20px; background: transparent; }
.scene-story { color: #4d5870 !important; font-size: 17px; line-height: 1.8 !important; }
.scene-lesson, .lesson-box { background: linear-gradient(105deg,#fff4cf,#fffaf0); border: 1px solid #f4e2a8; color: #59451b; }
.quiz-option { border: 2px solid #e7e2f2; border-radius: 17px; padding: 15px 17px; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.quiz-option:hover { border-color: #9c83dc; background: #f6f2ff; transform: translateX(3px); }
.verse-box { background: #fff6d9; border: 1px solid #f2e3ac; }
.feedback-box.correct { background: #e6f8ed; border: 1px solid #bce9ca; }
.feedback-box.incorrect { background: #fff0e9; border: 1px solid #f4c8b8; }
#music-toggle { border-radius: 24px !important; box-shadow: 0 5px 16px rgba(52,35,111,.20); }
@media (max-width: 1000px) {
  .world-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .top-bar { min-height: 74px; padding: 7px 4.5%; }
  .game-logo { width: 145px; height: 60px; }
  .world-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
  .world-card { min-height: 225px; padding: 16px; }
  .welcome-section { border-radius: 25px; }
  .adventure-map { padding: 24px 13px; border-radius: 25px; }
}
@media (max-width: 480px) {
  main { width: 92%; }
  .top-bar { min-height: 66px; }
  .game-logo { width: 118px; height: 49px; }
  .star-counter { padding: 8px 11px; font-size: 12px; }
  .welcome-section { display: block; padding: 27px 22px 38px; margin-top: 20px; }
  .welcome-section h2 { font-size: 32px; }
  .character-stage { margin: 12px auto 0; width: 100%; max-width: 300px; }
  .character-greeting { bottom: -22px; }
  .treasure-section { padding: 17px; gap: 13px; }
  .treasure-icon { font-size: 35px; }
  .treasure-section h3 { font-size: 20px; }
  .section-heading h2, .map-heading h2 { font-size: 25px; }
  .world-grid { gap: 10px; }
  .world-card { min-height: 215px; padding: 14px 12px; border-radius: 19px; }
  .world-art { font-size: 49px; }
  .world-card strong { font-size: 15px; }
  .world-card small { font-size: 11px; }
  .achievement-section { padding: 20px 17px; gap: 14px; }
  .modal-card { padding: 20px 16px; border-radius: 22px; }
  .scene-story { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* ============================================================
   LITTLE BIBLE EXPLORERS — PREMIUM VISUAL SYSTEM (2026.11.06)
   Visual-only layer: existing game behaviour and component IDs
   remain unchanged.
   ============================================================ */
:root {
  --purple:#5035a5; --deep-purple:#30216f; --ink:#24324a;
  --muted:#65728a; --lbe-blue:#43b8e8; --lbe-teal:#35c6ad;
  --lbe-gold:#ffc94d; --lbe-coral:#ff806e; --lbe-lilac:#a88cf0;
  --surface:#ffffff; --page:#f4f8ff;
}
html { scroll-behavior:smooth; background:var(--page); }
body {
  color:var(--ink);
  background:
    radial-gradient(ellipse at 4% 8%,rgba(93,196,244,.16),transparent 29rem),
    radial-gradient(ellipse at 96% 28%,rgba(255,205,91,.17),transparent 27rem),
    linear-gradient(180deg,#f5faff 0%,#fffaf1 52%,#f5f7ff 100%);
  font-family:"Nunito",system-ui,sans-serif;
}
.top-bar {
  position:sticky; top:0; z-index:50; min-height:82px;
  padding:9px max(5%,calc((100% - 1220px)/2));
  background:rgba(255,255,255,.91); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(91,105,160,.10);
  box-shadow:0 8px 30px rgba(45,55,105,.08);
}
.game-logo { width:174px;height:72px; }
.star-counter {
  padding:11px 19px; border:1px solid #ffe19a;
  background:linear-gradient(135deg,#fff7d8,#ffe8a1); color:#76500a;
  box-shadow:0 5px 15px rgba(206,151,30,.14); font-size:15px;
}
main { width:min(1180px,91%); }
.welcome-section {
  min-height:360px; margin:35px 0 27px; padding:48px 6%;
  border:1px solid rgba(255,255,255,.9); border-radius:34px;
  background:linear-gradient(115deg,#dff5ff 0%,#e8e6ff 48%,#fff0ce 100%);
  box-shadow:0 22px 55px rgba(68,91,156,.14),inset 0 1px 0 #fff;
}
.welcome-section::before,.welcome-section::after {
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.welcome-section::before { width:260px;height:260px;right:19%;top:-155px;background:rgba(255,255,255,.34); }
.welcome-section::after { width:170px;height:170px;left:43%;bottom:-125px;background:rgba(255,255,255,.25); }
.welcome-copy { max-width:590px; }
.welcome-label,.section-kicker {
  display:inline-flex;align-items:center;gap:7px;color:#5541a4;
  font-size:11px;font-weight:1000;letter-spacing:1.65px;
}
.welcome-label { padding:8px 13px;border-radius:30px;background:rgba(255,255,255,.72);box-shadow:0 4px 12px #5541a411; }
.welcome-section h2 {
  margin:17px 0 13px;color:#30216f;
  font-size:clamp(34px,5.2vw,54px);font-weight:1000;letter-spacing:-1.6px;line-height:1.06;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.welcome-section p { max-width:490px;color:#52617c;font-size:16px;line-height:1.75; }
.primary-button {
  position:relative;margin-top:15px;padding:15px 27px;border:0;border-radius:17px;
  background:linear-gradient(135deg,#6348c5,#4932a4 65%,#39258b);color:white;
  font-size:15px;font-weight:1000;letter-spacing:.2px;
  box-shadow:0 6px 0 #30216f,0 13px 24px rgba(66,48,151,.25);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.primary-button:hover { transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 9px 0 #30216f,0 17px 28px rgba(66,48,151,.25); }
.primary-button:active { transform:translateY(3px);box-shadow:0 3px 0 #30216f; }
.welcome-art { flex-basis:310px;height:270px; }
.character-art { filter:drop-shadow(0 12px 12px rgba(48,45,92,.16)); }
.character-name { padding:5px 13px;border:2px solid white;border-radius:20px;background:#fff;color:#44318f;box-shadow:0 5px 15px #45358a20;font-weight:1000; }
.character-greeting { color:#4c4770;font-weight:900; }
.treasure-section {
  position:relative;margin:25px 0 58px;padding:22px 27px;border:1px solid #f4df9e;
  border-radius:24px;background:linear-gradient(110deg,#fff9df,#fff 65%,#fff2d4);
  box-shadow:0 12px 30px rgba(170,128,35,.09);
}
.treasure-icon { display:grid;place-items:center;width:66px;height:66px;flex:0 0 66px;border-radius:20px;background:linear-gradient(145deg,#ffe49a,#ffc84c);box-shadow:0 7px 16px #d49a3030; }
.treasure-section h3 { color:#50358e;font-size:25px;font-weight:1000; }
.treasure-section p { font-weight:800; }
.section-heading { margin-bottom:24px; }
.section-heading h2,.map-heading h2 { color:#30216f;font-size:clamp(27px,4vw,36px);font-weight:1000;letter-spacing:-.8px; }
.heading-emoji { display:grid;place-items:center;width:62px;height:62px;border-radius:21px;background:#fff;border:1px solid #e8e9fa;box-shadow:0 8px 22px #4b4b8712; }
.world-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.world-card {
  position:relative;isolation:isolate;min-height:310px;padding:0 0 20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.95);border-radius:26px;background:white;
  box-shadow:0 12px 30px rgba(45,62,112,.10),0 2px 7px rgba(45,62,112,.05);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.world-card::after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,.97) 72%); }
.world-card:hover { transform:translateY(-8px);border-color:#fff;box-shadow:0 22px 42px rgba(45,62,112,.17); }
.world-card-image { display:block;width:100%;height:165px;object-fit:cover;object-position:center 38%;background:linear-gradient(135deg,#dff4ff,#fff0d5); }
.world-art { display:none; }
.world-number { align-self:flex-start;margin:14px 19px 0;padding:6px 10px;border-radius:20px;background:#eeeaff;color:#523aa5;font-size:10px;letter-spacing:1.1px; }
.world-card strong { margin:9px 19px 0;color:#29375a;font-size:20px;font-weight:1000;letter-spacing:-.35px; }
.world-card small { margin:6px 19px 0;color:#68758b;font-size:13px;line-height:1.5; }
.world-action { align-self:flex-start;margin:13px 19px 0;padding:9px 14px;border-radius:12px;background:#f0edff;color:#5035a5;font-size:12px;font-weight:1000; }
.world-noah .world-number { background:#e4f6ff;color:#1379a7; }
.world-david .world-number { background:#fff0dc;color:#a45b13; }
.world-moses .world-number { background:#def8ef;color:#16836a; }
.world-jesus .world-number { background:#f0e9ff;color:#6840a8; }
.world-god-can-use-me .world-number { background:#fff2ca;color:#93620b; }
.world-card.locked { filter:saturate(.65); }
.adventure-map {
  margin:74px 0 48px;padding:38px 28px;border:1px solid #dce9dc;border-radius:34px;
  background:linear-gradient(145deg,#f1fff7,#eff8ff 54%,#fff8e7);
  box-shadow:0 18px 48px rgba(47,107,91,.10);
}
.map-heading h2 { margin:8px 0; }
.map-heading p { color:#61758a;font-size:15px; }
.map-score { padding:11px 21px;border:1px solid #f3d77c;background:linear-gradient(135deg,#fff4c9,#ffe6a0);box-shadow:0 5px 16px #c89c3b1c; }
.adventure-land {
  border:7px solid white;border-radius:32px;
  background:radial-gradient(ellipse at 18% 24%,#d6f5aa 0 13%,transparent 14%),radial-gradient(ellipse at 82% 58%,#b8eaa1 0 16%,transparent 17%),linear-gradient(180deg,#91d9ff 0%,#c9f0cf 43%,#8ed57e 100%);
  box-shadow:0 15px 35px rgba(48,103,73,.20),inset 0 0 0 1px rgba(255,255,255,.6);
}
.map-location { border:3px solid white;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 8px 20px rgba(42,62,79,.20); }
.map-location:hover { transform:translateY(-4px) scale(1.04); }
.location-name { color:#3e3185; }
.map-progress { border:1px solid #e4eaf5;border-radius:22px;box-shadow:0 10px 25px rgba(46,69,110,.08); }
.progress-track { height:15px;background:#e9edf6; }
.progress-fill { background:linear-gradient(90deg,#36c6a6,#7bd67d,#ffd05c); }
.achievement-section {
  margin:45px 0 55px;padding:30px 34px;border:1px solid #e5e2fa;border-radius:28px;
  background:linear-gradient(110deg,#eeeaff,#e8f8ff 65%,#fff4dc);
  box-shadow:0 14px 34px rgba(65,62,135,.09);
}
.achievement-icon { display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;border-radius:24px;background:linear-gradient(145deg,#ffe28c,#ffbf42);font-size:42px;box-shadow:0 9px 20px #d49a3030; }
.achievement-section h2 { color:#30216f;font-size:clamp(23px,3vw,31px);font-weight:1000; }
.achievement-section p { color:#5f6d85;line-height:1.7; }
footer { padding:35px 15px;background:linear-gradient(110deg,#30216f,#4b35a0 58%,#247e9e);color:#fff; }
footer p { color:rgba(255,255,255,.88); }
.modal { background:rgba(24,27,58,.76);backdrop-filter:blur(11px); }
.modal-card { border:1px solid rgba(255,255,255,.85);border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);box-shadow:0 30px 90px rgba(12,17,46,.36); }
.modal-close { position:sticky;top:0;background:#f0edff;color:#49339c;box-shadow:0 5px 15px #3e32821a; }
.modal-card h2 { color:#30216f;font-weight:1000; }
.scene-image-container { border:5px solid white;box-shadow:0 12px 30px rgba(43,70,110,.12); }
.story-scene-image { animation:storyFloat 4.8s ease-in-out infinite; }
@keyframes storyFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.scene-count { padding:7px 12px;border-radius:20px;background:#f0edff;color:#533da2; }
.scene-title { color:#30216f;font-weight:1000; }
.scene-story { color:#465670!important; }
.scene-lesson,.lesson-box { border:1px solid #f0dfaa;border-radius:18px;background:linear-gradient(110deg,#fff5d4,#fffaf0); }
.scene-controls button,.modal-button { border-radius:15px;box-shadow:0 5px 0 rgba(48,33,111,.17);transition:transform .18s,filter .18s; }
.modal-button { background:linear-gradient(135deg,#6348c5,#4932a4); }
.modal-button:hover,.scene-controls button:hover { transform:translateY(-2px);filter:brightness(1.04); }
.modal-button.secondary { background:#eeebfa;color:#48368e; }
.quiz-option { padding:16px 18px;border:2px solid #e5e9f5;border-radius:17px;background:#fff;color:#35425c;box-shadow:0 4px 12px rgba(44,61,100,.04);transition:transform .18s,border-color .18s,background .18s; }
.quiz-option:hover { border-color:#8b78d4;background:#f4f1ff;transform:translateX(4px); }
.verse-box { border:1px solid #f1dfa0;border-radius:18px;background:linear-gradient(110deg,#fff6d8,#fffdf4); }
.feedback-box { border-radius:17px; }
#music-toggle { border-radius:16px!important;box-shadow:0 8px 22px rgba(52,35,111,.22); }
button:focus-visible { outline:3px solid #ffbf42;outline-offset:3px; }
@media(max-width:900px) {
  .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .world-card { min-height:300px; }
}
@media(max-width:760px) {
  .top-bar { position:relative;min-height:72px;padding:7px 4.5%; }
  .game-logo { width:145px;height:60px; }
  .welcome-section { min-height:320px;padding:32px 5%;border-radius:27px; }
  .welcome-section h2 { font-size:clamp(31px,7vw,43px); }
  .welcome-art { flex-basis:245px; }
  .world-grid { gap:14px; }
  .world-card-image { height:145px; }
  .world-card { min-height:285px;border-radius:22px; }
  .world-card strong { font-size:18px; }
  .adventure-map { padding:26px 13px;border-radius:27px; }
  .achievement-section { padding:23px 19px; }
}
@media(max-width:520px) {
  main { width:92%; }
  .top-bar { min-height:64px; }
  .game-logo { width:118px;height:49px; }
  .star-counter { padding:8px 11px;font-size:12px; }
  .welcome-section { display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:27px 22px 15px;margin-top:20px; }
  .welcome-copy { width:100%; }
  .welcome-section h2 { max-width:340px;font-size:34px; }
  .welcome-section p { font-size:14px; }
  .welcome-art { align-self:center;width:100%;max-width:300px;height:190px;flex:0 0 190px;margin-top:5px; }
  .character-stage .character-greeting { bottom:-8px; }
  .treasure-section { margin:20px 0 40px;padding:16px;gap:12px;border-radius:20px; }
  .treasure-icon { width:54px;height:54px;flex-basis:54px;font-size:32px; }
  .treasure-section h3 { font-size:20px; }
  .section-heading h2,.map-heading h2 { font-size:25px; }
  .world-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
  .world-card { min-height:250px;padding-bottom:13px;border-radius:18px; }
  .world-card-image { height:112px; }
  .world-number { margin:10px 11px 0;padding:5px 7px;font-size:9px; }
  .world-card strong { margin:7px 11px 0;font-size:15px; }
  .world-card small { margin:5px 11px 0;font-size:10px; }
  .world-action { margin:9px 11px 0;padding:7px 10px;font-size:10px; }
  .adventure-land { height:570px; }
  .map-location { width:105px;min-height:96px;padding:7px 4px; }
  .location-name { font-size:9px; }
  .location-noah { top:455px;left:3%; }
  .location-david { top:345px;right:3%; }
  .location-moses { top:225px;left:3%; }
  .location-jesus { top:80px;right:3%; }
  .location-god-can-use-me { top:20px;left:4%; }
  .treasure-castle { top:9px;left:62%;font-size:10px; }
  .achievement-section { align-items:flex-start;gap:13px;padding:20px 15px; }
  .achievement-icon { width:58px;height:58px;flex-basis:58px;font-size:32px;border-radius:18px; }
  .achievement-section h2 { font-size:21px; }
  .modal-card { padding:19px 14px;border-radius:22px; }
  .scene-story { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-scene-image { animation:none; }
  *,*::before,*::after { scroll-behavior:auto!important;transition-duration:.01ms!important; }
}


/* CARD LAUNCH BUTTON ONLY: the card itself is informational, not clickable. */
.world-card { cursor: default; }
.world-card:hover { cursor: default; }
.world-card .world-action {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;align-self:flex-start;margin:13px 19px 0;padding:10px 16px;
  border:0;border-radius:13px;background:linear-gradient(135deg,#eee9ff,#e4dcff);
  color:#5035a5;font:inherit;font-size:12px;font-weight:1000;cursor:pointer;
  box-shadow:0 4px 0 #d5c9ff,0 7px 14px rgba(80,53,165,.12);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.world-card .world-action:hover:not(:disabled),
.world-card .world-action:focus-visible {
  transform:translateY(-3px) scale(1.055);
  background:linear-gradient(135deg,#ffe58a,#ffd05b);
  color:#51350a;box-shadow:0 6px 0 #eab943,0 12px 20px rgba(174,126,27,.22);
  outline:3px solid rgba(255,202,74,.35);outline-offset:3px;
}
.world-card .world-action:active:not(:disabled) { transform:translateY(1px) scale(.98);box-shadow:0 2px 0 #d5c9ff; }
.world-card .world-action:disabled { cursor:not-allowed;opacity:.55;filter:grayscale(.3);box-shadow:none; }
.world-card.locked { cursor:default; }

/* =========================================
   LITTLE BIBLE EXPLORERS — FULL-PAGE FINISH
   ========================================= */
:root {
  --lbe-ink: #26365b;
  --lbe-purple: #5740a8;
  --lbe-sky: #eaf7ff;
  --lbe-mint: #e9fbf2;
  --lbe-gold: #fff3cf;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 8% 5%, rgba(214,240,255,.72), transparent 30rem),
    radial-gradient(ellipse at 92% 16%, rgba(255,237,196,.48), transparent 28rem),
    linear-gradient(180deg,#fbfdff 0%,#fffdf8 48%,#f7fbff 100%);
  color:var(--lbe-ink);
}
.top-bar {
  position:relative;z-index:5;
  background:rgba(255,255,255,.91);
  border-bottom:1px solid rgba(105,119,163,.10);
  backdrop-filter:blur(14px);
}
main { width:min(1180px,92%); }
.welcome-section {
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(118deg,#e5f5ff 0%,#eeebff 49%,#fff1cf 100%);
  box-shadow:0 22px 55px rgba(68,91,156,.13),inset 0 1px 0 #fff;
}
.treasure-section {
  display:grid;grid-template-columns:66px minmax(0,1fr) auto;align-items:center;
  gap:18px;margin:28px 0 52px;padding:22px 26px;
  border:1px solid #f0dfa9;border-radius:25px;
  background:linear-gradient(112deg,#fff7d9 0%,#fff 58%,#edf8ff 100%);
  box-shadow:0 13px 34px rgba(154,125,51,.09);
}
.treasure-section > div:nth-child(2) { min-width:0; }
.treasure-section h3 { margin:7px 0 5px;color:#44358c;font-size:clamp(17px,1.8vw,20px);line-height:1.45;font-weight:850; }
.treasure-section p { margin:0;color:#6d6682;font-size:13px;font-weight:900; }
#daily-verse-reflection { display:block;margin-top:8px;color:#6c7890;font-size:12px;line-height:1.45; }
.treasure-sparkle { align-self:start; }
.worlds-section {
  position:relative;margin:0 0 45px;padding:30px 28px 25px;
  border:1px solid #e5eaf6;border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(247,250,255,.94));
  box-shadow:0 18px 48px rgba(51,68,113,.08);
}
.world-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.world-card { min-width:0; }
.world-card[hidden] { display:none!important; }
.adventure-pagination {
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:27px auto 2px;padding:10px 0 0;
}
.adventure-pagination[hidden] { display:none!important; }
.page-button {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border:1px solid #dcd7f4;border-radius:14px;
  background:linear-gradient(135deg,#f1edff,#e8f6ff);color:#49378f;
  font-size:13px;font-weight:1000;box-shadow:0 4px 0 #dcd7f4;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.page-button:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 6px 0 #dcd7f4;background:#fff; }
.page-button:active:not(:disabled) { transform:translateY(1px);box-shadow:0 2px 0 #dcd7f4; }
.page-button:disabled { opacity:.42;cursor:not-allowed;box-shadow:none; }
.page-status { min-width:150px;text-align:center;color:#66728b;font-size:12px;font-weight:900; }
.adventure-map,.achievement-section { box-shadow:0 18px 45px rgba(51,68,113,.08); }
footer { margin-top:50px; }
@media(max-width:900px) {
  .worlds-section { padding:25px 20px; }
  .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  main { width:93%; }
  .worlds-section { padding:21px 14px;border-radius:23px; }
  .world-grid { grid-template-columns:minmax(0,1fr);gap:15px; }
  .world-card { min-height:285px; }
  .world-card-image { height:165px; }
  .world-card strong { font-size:18px; }
  .world-card small { font-size:12px; }
  .world-action { font-size:12px;padding:9px 14px; }
  .treasure-section { grid-template-columns:52px minmax(0,1fr);gap:12px;padding:16px;border-radius:20px; }
  .treasure-icon { width:52px;height:52px;flex-basis:52px;font-size:30px; }
  .treasure-sparkle { display:none; }
  .treasure-section h3 { font-size:19px; }
  #daily-verse-reflection { font-size:11px; }
  .adventure-pagination { gap:9px; }
  .page-button { min-height:41px;padding:9px 12px;font-size:11px; }
  .page-status { min-width:105px;font-size:10px; }
}


/* ================================================
   DAILY BIBLE TREASURE — COLOUR & CHARACTER FINISH
   ================================================ */
.treasure-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:66px minmax(0,1fr) 190px;
  align-items:center;
  gap:18px;
  min-height:270px;
  padding:25px 24px;
  border:1px solid #f4d58a;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 12%,rgba(255,255,255,.92) 0 2px,transparent 3px),
    radial-gradient(ellipse at 12% 100%,rgba(255,190,92,.42),transparent 34%),
    radial-gradient(ellipse at 88% 0%,rgba(176,224,255,.72),transparent 35%),
    linear-gradient(118deg,#fff1bd 0%,#fff9e9 36%,#f0f8ff 72%,#e9f8ff 100%);
  box-shadow:0 16px 36px rgba(99,91,147,.12),inset 0 1px 0 rgba(255,255,255,.95);
}
.treasure-section::before,
.treasure-section::after {
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
}
.treasure-section::before {
  width:230px;height:230px;right:70px;top:-145px;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.65);
}
.treasure-section::after {
  width:170px;height:170px;left:22%;bottom:-130px;
  background:rgba(208,244,225,.38);
}
.treasure-section .treasure-icon {
  display:grid;place-items:center;width:62px;height:62px;
  border-radius:21px;background:linear-gradient(145deg,#ffe18a,#ffc64e);
  box-shadow:0 8px 18px rgba(190,139,33,.20);font-size:34px;
}
.treasure-section .treasure-copy {position:relative;z-index:2;min-width:0;}
.treasure-section .section-kicker {
  display:inline-block;padding:6px 11px;border-radius:999px;
  background:#e9e2ff;color:#5b43a8;font-size:10px;font-weight:1000;
  letter-spacing:1.35px;
}
.treasure-section h3 {
  margin:11px 0 6px;color:#40338e;
  font-size:clamp(17px,1.65vw,20px);line-height:1.48;font-weight:900;
  text-wrap:pretty;
}
.treasure-section #daily-verse-reference {
  color:#655a9c;font-size:12px;font-weight:900;margin:0;
}
.treasure-section #daily-verse-reflection {
  display:block;margin-top:8px;color:#63718a;font-size:12px;line-height:1.5;font-weight:700;
}
.treasure-section .treasure-action-ribbon {
  margin-top:13px;padding:10px 16px;border:1px solid #e8bd55;
  background:linear-gradient(110deg,#ffe28c,#fff0bd 58%,#ffe6a3);
  color:#60471a;box-shadow:0 4px 0 #e7c56e,0 8px 15px rgba(185,139,41,.13);
  font-size:12px;font-weight:1000;
}
.treasure-section .treasure-action-ribbon:hover,
.treasure-section .treasure-action-ribbon:focus-visible {
  transform:translateY(-3px) scale(1.025);background:linear-gradient(110deg,#ffd76b,#ffedaa);
  box-shadow:0 7px 0 #e7c56e,0 12px 20px rgba(185,139,41,.19);
}
.treasure-section .treasure-action-panel {
  margin-top:15px;padding:15px 17px;border:1px solid #d9d2f6;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,244,255,.96));
  box-shadow:0 8px 20px rgba(93,75,153,.08);
}
.treasure-section .treasure-action-heading {color:#4e3c9b!important;}
.treasure-section .treasure-action-panel ol {line-height:1.7;}
.treasure-section .treasure-action-panel li {padding:5px 7px 5px 4px;border-radius:9px;}
.treasure-section .treasure-action-panel li:nth-child(5n+1) {background:rgba(255,231,164,.34);}
.treasure-section .treasure-action-panel li:nth-child(5n+2) {background:rgba(214,239,255,.42);}
.treasure-section .treasure-action-panel li:nth-child(5n+3) {background:rgba(224,247,231,.48);}
.treasure-section .treasure-action-panel li:nth-child(5n+4) {background:rgba(239,229,255,.48);}
.treasure-section .treasure-action-panel li:nth-child(5n) {background:rgba(255,225,220,.38);}
.treasure-section .treasure-action-note {color:#68758b!important;}
.treasure-section .treasure-sparkle {position:absolute;right:20px;top:18px;font-size:24px;}
.treasure-companions {
  position:relative;align-self:stretch;min-height:205px;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;gap:0;
}
.treasure-companion {
  position:absolute;bottom:0;width:112px;height:174px;
  display:flex;align-items:flex-end;justify-content:center;
  animation:treasure-float 3.8s ease-in-out infinite;
  filter:drop-shadow(0 9px 8px rgba(70,76,111,.16));
}
.treasure-companion img {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.treasure-lucas {left:0;transform:rotate(-4deg);animation-delay:-1.1s;}
.treasure-evanah {right:0;width:106px;height:160px;transform:rotate(4deg);animation-delay:-2.2s;}
.treasure-companion-star {position:absolute;font-size:19px;animation:treasure-twinkle 2.2s ease-in-out infinite;}
.treasure-companion-star.star-a {top:20px;left:20px;}
.treasure-companion-star.star-b {top:58px;right:7px;animation-delay:-.9s;}
@keyframes treasure-float {0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes treasure-twinkle {0%,100%{transform:scale(.82) rotate(-8deg);opacity:.7}50%{transform:scale(1.16) rotate(9deg);opacity:1}}
@media(max-width:850px) {
  .treasure-section {grid-template-columns:56px minmax(0,1fr) 135px;gap:13px;padding:20px;}
  .treasure-companions {min-height:170px;}
  .treasure-companion {width:83px;height:140px;}
  .treasure-evanah {width:80px;height:130px;}
}
@media(max-width:600px) {
  .treasure-section {
    grid-template-columns:48px minmax(0,1fr);align-items:start;gap:10px;
    padding:16px 14px 12px;min-height:0;border-radius:22px;
  }
  .treasure-section .treasure-icon {width:46px;height:46px;border-radius:15px;font-size:26px;}
  .treasure-section .treasure-copy {grid-column:2;}
  .treasure-section h3 {font-size:17px;line-height:1.45;}
  .treasure-section .treasure-sparkle {right:12px;top:9px;font-size:17px;}
  .treasure-companions {
    grid-column:1 / -1;justify-self:end;width:170px;min-height:105px;
    margin-top:-4px;margin-right:4px;
  }
  .treasure-companion {width:68px;height:105px;}
  .treasure-evanah {width:65px;height:98px;}
  .treasure-companion-star.star-a {top:5px;left:24px;}
  .treasure-companion-star.star-b {top:22px;right:5px;}
  .treasure-section .treasure-action-panel {padding:12px;}
}
@media(prefers-reduced-motion:reduce) {
  .treasure-companion,.treasure-companion-star {animation:none!important;}
}

/* Learning report controls */
.learning-report-cta{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.learning-report-cta p{margin:0;color:#596486;font-size:14px}
.report-card-button{border:0;border-radius:999px;padding:12px 20px;background:linear-gradient(110deg,#4e43a8,#7662d8);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(75,62,160,.22);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.report-card-button:hover,.report-card-button:focus-visible{transform:translateY(-3px);box-shadow:0 10px 20px rgba(75,62,160,.3)}
.report-card-button.secondary{background:#e9edff;color:#40368e;box-shadow:none}
.treasure-companions[hidden]{display:none!important}
.treasure-companions:not([hidden]){display:block;animation:treasure-friends-enter .45s ease both}
@keyframes treasure-friends-enter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.learning-report-cta{align-items:stretch}.report-card-button{width:100%}}

/* Compact explorer companions: shown only when the daily-action ribbon opens */
.treasure-companions{min-height:132px;max-width:180px;margin-inline:auto}
.treasure-companion{width:78px;height:122px}
.treasure-evanah{width:74px;height:116px}
@media(max-width:850px){.treasure-companions{min-height:118px}.treasure-companion{width:68px;height:106px}.treasure-evanah{width:64px;height:100px}}
@media(max-width:600px){.treasure-companions{grid-column:1/-1;justify-self:end;width:145px;min-height:92px;margin-top:0;margin-right:4px}.treasure-companion{width:58px;height:90px}.treasure-evanah{width:55px;height:86px}}