/* ============================================================
   world.css — Jr. world map, Deep Breath Island reading room, video player
   Screens: map · reading-room · player
   All rules scoped under .scr[data-screen="…"]; class names prefixed wd-.
   ============================================================ */

/* ---------- Shared: frosted circle button (Figma "Button Overlay Style") ---------- */
.scr[data-screen="map"] .wd-nav,
.scr[data-screen="reading-room"] .wd-nav {
  position: absolute; left: 0; top: 44px; width: 375px; height: 56px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; pointer-events: none;
}
.scr[data-screen="map"] .wd-frost,
.scr[data-screen="reading-room"] .wd-frost {
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.64);
  box-shadow: 0 0 8px 0 rgba(20, 19, 19, 0.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
.scr[data-screen="map"] .wd-frost:active,
.scr[data-screen="reading-room"] .wd-frost:active { transform: scale(0.94); }
.scr[data-screen="map"] .wd-frost img,
.scr[data-screen="reading-room"] .wd-frost img { width: 32px; height: 32px; display: block; }

/* ============================================================
   MAP  (Figma 6106:182107)
   ============================================================ */
.scr[data-screen="map"] { background: #0B662A; }

.scr[data-screen="map"] .wd-map-scroll {
  position: absolute; inset: 0; overflow: auto;
  overscroll-behavior: contain; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.scr[data-screen="map"] .wd-map-scroll.is-dragging { cursor: grabbing; }
.scr[data-screen="map"] .wd-map-world { position: relative; width: 2200px; height: 2200px; overflow: hidden; }
.scr[data-screen="map"] .wd-map-world img { -webkit-user-drag: none; }
.scr[data-screen="map"] .wd-map-bg { position: absolute; left: 0; top: 0; width: 2200px; height: 2200px; display: block; }

.scr[data-screen="map"] .wd-home {
  position: absolute; width: 246px; height: 246px;
  transition: transform var(--hs-duration-faster) var(--hs-easing-standard);
}
.scr[data-screen="map"] .wd-home img { width: 246px; height: 246px; display: block; pointer-events: none; }
.scr[data-screen="map"] .wd-home.is-pressed { transform: scale(0.96); }

/* Label pill — Figma "Frame 633729" / Badge/Default */
.scr[data-screen="map"] .wd-label {
  position: absolute; height: 42px;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.scr[data-screen="map"] .wd-label-pill {
  background: var(--hs-warm-grey-100); /* #F9F4F2 */
  border-radius: 25.6px; padding: 6.4px 12.8px;
  box-shadow: 0 6.4px 6.4px rgba(0, 0, 0, 0.24);
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px;
  color: var(--hs-warm-grey-700); white-space: nowrap; text-align: center;
}
.scr[data-screen="map"] .wd-label-tail { width: 9.6px; height: 7.62px; display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16)); }

/* Quick help bottom sheet (Figma 6106:224750 → open state 6106:215899) */
.scr[data-screen="map"] .wd-qh-scrim {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(20, 19, 19, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--hs-duration-fast) var(--hs-easing-linear);
}
.scr[data-screen="map"] .wd-qh-sheet {
  position: absolute; left: 0; top: 369px; z-index: 31;
  width: 375px; height: 443px;
  background: var(--hs-white);
  border-radius: 24px 24px 0 0; overflow: hidden;
  transform: translateY(443px);
  transition: transform var(--hs-duration-slow) var(--hs-easing-exit);
  touch-action: none;
}
.scr[data-screen="map"].is-qh-open .wd-qh-scrim { opacity: 1; pointer-events: auto; }
.scr[data-screen="map"].is-qh-open .wd-qh-sheet {
  transform: none;
  transition: transform var(--hs-duration-slow) var(--hs-easing-entrance);
}
.scr[data-screen="map"] .wd-qh-sheet.is-dragging { transition: none; }

.scr[data-screen="map"] .wd-qh-grabber { position: relative; height: 16px; cursor: grab; }
.scr[data-screen="map"] .wd-qh-handle {
  position: absolute; left: 172px; top: 5px; width: 32px; height: 4px; border-radius: 8px;
  background: var(--hs-warm-grey-200); /* #E2DED9 */
}
.scr[data-screen="map"] .wd-qh-controls {
  height: 48px; padding: 0 16px 12px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.scr[data-screen="map"] .wd-qh-side { width: 40px; height: 40px; flex-shrink: 0; }
.scr[data-screen="map"] .wd-qh-title {
  flex: 1 0 0; height: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 0;
  font: 700 32px/38.4px var(--hs-font-sans); letter-spacing: -0.96px;
  color: var(--hs-warm-grey-700); text-align: center; white-space: nowrap; align-self: center;
}
.scr[data-screen="map"] .wd-qh-close {
  width: 40px; height: 40px; border-radius: 999px; border: none; padding: 0;
  background: var(--hs-warm-grey-100);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
.scr[data-screen="map"] .wd-qh-close:active { transform: scale(0.94); }
.scr[data-screen="map"] .wd-qh-close img { width: 24px; height: 24px; display: block; }

.scr[data-screen="map"] .wd-qh-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px; row-gap: 20px; padding: 24px 16px;
}
.scr[data-screen="map"] .wd-qh-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  filter: drop-shadow(0 0 4px rgba(20, 19, 19, 0.08));
  transition: transform var(--hs-duration-faster) var(--hs-easing-standard);
}
.scr[data-screen="map"] .wd-qh-tile.is-pressed { transform: scale(0.97); }
.scr[data-screen="map"] .wd-qh-art {
  position: relative; width: 100%; aspect-ratio: 300 / 200;
  /* rounded-rect mask from Figma (sos-tile-mask.svg) as a clip — CSS masks fail from file:// */
  border-radius: 6.667% / 10%; overflow: hidden;
}
.scr[data-screen="map"] .wd-qh-art > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scr[data-screen="map"] .wd-qh-art > img.wd-cover { object-fit: cover; }
.scr[data-screen="map"] .wd-media {
  position: absolute; left: 0; bottom: 0; width: 30px; height: 30px;
  background: rgba(20, 19, 19, 0.6); border-top-right-radius: 32px;
}
.scr[data-screen="map"] .wd-media img { position: absolute; left: 7px; bottom: 7px; width: 12px; height: 12px; display: block; }
.scr[data-screen="map"] .wd-qh-label {
  width: 100%; text-align: center;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: #000;
}

/* ============================================================
   READING ROOM  (Figma 6725:32556)
   ============================================================ */
.scr[data-screen="reading-room"] { background: var(--hs-blue-200); /* #0061EF */ }

.scr[data-screen="reading-room"] .wd-rr-scroll {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
.scr[data-screen="reading-room"] .wd-rr-shelfs {
  width: 375px; height: 1769px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.scr[data-screen="reading-room"] .wd-rr-stack { width: 375px; display: flex; flex-direction: column; }
.scr[data-screen="reading-room"] .wd-rr-cap { height: 12px; background: var(--hs-blue-300); /* #0040EA */ }

.scr[data-screen="reading-room"] .wd-rr-items {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 16px; padding: 0 24px;
}
.scr[data-screen="reading-room"] .wd-rr-edge { position: absolute; top: 0; bottom: 0; width: 12px; background: var(--hs-blue-300); }
.scr[data-screen="reading-room"] .wd-rr-edge.is-left { left: 0; }
.scr[data-screen="reading-room"] .wd-rr-edge.is-right { right: 0; }
.scr[data-screen="reading-room"] .wd-rr-shelf {
  height: 12px; background: var(--hs-blue-300);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

.scr[data-screen="reading-room"] .wd-spot {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 8px; padding-top: 16px;
  transition: transform var(--hs-duration-faster) var(--hs-easing-standard);
}
.scr[data-screen="reading-room"] .wd-spot[data-go]:active { transform: scale(0.97); }
.scr[data-screen="reading-room"] .wd-spot-title {
  width: 100%; text-align: center;
  font: 700 14px/16.8px var(--hs-font-sans); letter-spacing: -0.42px; color: var(--hs-white);
}
.scr[data-screen="reading-room"] .wd-object { flex: 1 0 0; min-width: 0; }
.scr[data-screen="reading-room"] .wd-object img { width: 100%; aspect-ratio: 311 / 207; display: block; }

/* Thumbnail (Headspace Jr.) */
.scr[data-screen="reading-room"] .wd-thumb { position: relative; width: 100%; aspect-ratio: 30 / 20; border-radius: 8px; }
.scr[data-screen="reading-room"] .wd-thumb-contents,
.scr[data-screen="reading-room"] .wd-thumb-frame {
  position: absolute; top: 0; left: 0; right: -0.67%; bottom: -0.67%;
  /* rounded-rect mask from Figma (thumb-mask.svg) as a clip — CSS masks fail from file:// */
  border-radius: 6.667% / 10%; overflow: hidden;
}
.scr[data-screen="reading-room"] .wd-thumb-contents { overflow: hidden; }
.scr[data-screen="reading-room"] .wd-thumb-sprite { position: absolute; max-width: none; display: block; pointer-events: none; }
.scr[data-screen="reading-room"] .wd-thumb-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scr[data-screen="reading-room"] .wd-media {
  position: absolute; left: 0; bottom: 0; width: 30px; height: 30px;
  background: rgba(20, 19, 19, 0.6); border-top-right-radius: 32px;
}
.scr[data-screen="reading-room"] .wd-media img { position: absolute; left: 6px; bottom: 6px; width: 16px; height: 16px; display: block; }
.scr[data-screen="reading-room"] .wd-done {
  position: absolute; right: 0; bottom: 0; width: 30px; height: 30px;
  background: var(--hs-blue-300); border-top-left-radius: 32px;
}
.scr[data-screen="reading-room"] .wd-done img { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; display: block; }

/* Room title (TEXT_PATH, Apercu Black 24 on an elliptical arc) + illustration */
.scr[data-screen="reading-room"] .wd-rr-room { width: 375px; display: flex; flex-direction: column; align-items: center; }
.scr[data-screen="reading-room"] .wd-rr-title { width: 255px; height: 40px; overflow: visible; display: block; }
.scr[data-screen="reading-room"] .wd-rr-title text {
  font-family: var(--hs-font-sans); font-weight: 900; font-size: 24px; letter-spacing: -0.72px; fill: var(--hs-white);
}
.scr[data-screen="reading-room"] .wd-rr-illus { width: 375px; padding: 0 24px; }
.scr[data-screen="reading-room"] .wd-rr-illus img { width: 327px; height: 218px; display: block; }

/* Fixed chrome */
.scr[data-screen="reading-room"] .wd-rr-statusfade {
  position: absolute; left: 0; top: 0; width: 375px; height: 44px; z-index: 19; pointer-events: none;
  background: linear-gradient(to bottom, var(--hs-blue-200), rgba(0, 97, 239, 0));
}
.scr[data-screen="reading-room"] .wd-rr-floor {
  position: absolute; left: 0; top: 756px; width: 375px; height: 56px; z-index: 18;
  background: var(--hs-blue-300); pointer-events: none;
}

/* Badge bottom sheet (Figma 6730:187768 → 6725:34059 → 6730:190246) */
.scr[data-screen="reading-room"] .wd-bs-away {
  position: absolute; left: 0; top: 0; width: 375px; height: 357px; z-index: 40;
  display: none;
}
.scr[data-screen="reading-room"].is-bs-open .wd-bs-away { display: block; }
.scr[data-screen="reading-room"] .wd-bs-sheet {
  position: absolute; left: 0; top: 357px; z-index: 41;
  width: 375px; height: 455px; background: #F1ECDE;
  border-radius: 24px 24px 0 0; overflow: hidden;
  transform: translateY(455px); visibility: hidden;
  transition: transform var(--hs-duration-fast) var(--hs-easing-exit), visibility 0s linear var(--hs-duration-fast);
}
.scr[data-screen="reading-room"].is-bs-open .wd-bs-sheet {
  transform: none; visibility: visible;
  transition: transform var(--hs-duration-fast) var(--hs-easing-entrance), visibility 0s;
}
.scr[data-screen="reading-room"] .wd-bs-sheet > * { position: absolute; }
.scr[data-screen="reading-room"] .wd-bs-illus { left: 97.5px; top: 24px; width: 180px; height: 120px; display: block; }
.scr[data-screen="reading-room"] .wd-bs-title {
  left: 0; top: 168px; width: 375px; text-align: center;
  font: 700 24px/28.8px var(--hs-font-sans); letter-spacing: -0.72px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="reading-room"] .wd-bs-desc {
  left: 24px; top: 197px; width: 327px; text-align: center; opacity: 0.9;
  font: 400 16px/24px var(--hs-font-sans); color: var(--hs-warm-grey-700);
}
.scr[data-screen="reading-room"] .wd-bs-divider { left: 24px; top: 269px; width: 327px; height: 4px; border-radius: 2px; background: #EADFC9; }
.scr[data-screen="reading-room"] .wd-bs-head {
  left: 24px; top: 297px; width: 327px; text-align: center;
  font: 700 20px/24px var(--hs-font-sans); letter-spacing: -0.6px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="reading-room"] .wd-bs-badge { top: 321px; width: 92px; height: 92px; display: block; }
.scr[data-screen="reading-room"] .wd-bs-badge.is-earned { left: 33.5px; }
.scr[data-screen="reading-room"] .wd-bs-badge.is-earned:not(.jr-badge-pop) { opacity: 0; }
.scr[data-screen="reading-room"] .wd-bs-badge.is-lock1 { left: 141.5px; }
.scr[data-screen="reading-room"] .wd-bs-badge.is-lock2 { left: 249.5px; }

/* ============================================================
   PLAYER  (Figma 6725:31502 paused → 6725:31582 playing)
   ============================================================ */
.scr[data-screen="player"] { background: #000; }
.scr[data-screen="player"] .wd-pl-video { position: absolute; left: 0; top: 301px; width: 375px; height: 210px; object-fit: cover; display: block; }
.scr[data-screen="player"] .wd-pl-overlay { position: absolute; inset: 0; background: rgba(20, 19, 19, 0.6); }
.scr[data-screen="player"] .wd-pl-fade { transition: opacity var(--hs-duration-fast) var(--hs-easing-linear); }
.scr[data-screen="player"].is-playing .wd-pl-fade { opacity: 0; pointer-events: none; }

.scr[data-screen="player"] .wd-pl-head {
  position: absolute; left: 54px; top: 119px; width: 263px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.scr[data-screen="player"] .wd-pl-eyebrow { font: 400 16px/24px var(--hs-font-sans); color: #D2D5DE; }
.scr[data-screen="player"] .wd-pl-title { font: 700 24px/28.8px var(--hs-font-sans); letter-spacing: -0.72px; color: #E5E7EC; }

.scr[data-screen="player"] .wd-pl-close {
  position: absolute; left: 328px; top: 68px; width: 24px; height: 24px; z-index: 5;
  background: none; border: none; padding: 0;
}
.scr[data-screen="player"] .wd-pl-close img { width: 24px; height: 24px; display: block; }
.scr[data-screen="player"] .wd-pl-play {
  position: absolute; left: 127px; top: 346px; width: 120px; height: 120px;
  background: none; border: none; padding: 0;
  transition: opacity var(--hs-duration-fast) var(--hs-easing-linear), transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
.scr[data-screen="player"] .wd-pl-play:active { transform: scale(0.96); }
.scr[data-screen="player"] .wd-pl-play img { width: 120px; height: 120px; display: block; }
.scr[data-screen="player"] .wd-pl-skip { position: absolute; top: 382px; width: 48px; height: 48px; display: block; }
.scr[data-screen="player"] .wd-pl-skip.is-back { left: 55px; }
.scr[data-screen="player"] .wd-pl-skip.is-ahead { left: 271px; }
.scr[data-screen="player"] .wd-pl-airplay { position: absolute; left: 175px; top: 736px; width: 24px; height: 24px; display: block; }

.scr[data-screen="player"] .wd-pl-scrub { position: absolute; left: 24px; width: 327px; }
.scr[data-screen="player"] .wd-pl-scrub.is-paused { top: 677px; }
.scr[data-screen="player"] .wd-pl-scrub.is-live { top: 732px; opacity: 0; transition: opacity var(--hs-duration-fast) var(--hs-easing-linear); }
.scr[data-screen="player"].is-playing .wd-pl-scrub.is-live { opacity: 1; }
.scr[data-screen="player"] .wd-pl-track { position: relative; height: 24px; }
.scr[data-screen="player"] .wd-pl-inactive { position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); }
.scr[data-screen="player"] .wd-pl-active { position: absolute; left: 0; top: 8px; height: 8px; border-radius: 999px; background: #E5E7EC; }
.scr[data-screen="player"] .wd-pl-scrub.is-paused .wd-pl-active { width: 7px; }
.scr[data-screen="player"] .wd-pl-knob { position: absolute; left: 2px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #E5E7EC; }
.scr[data-screen="player"] .wd-pl-scrub.is-live .wd-pl-active { width: 101px; transition: width 1800ms linear; }
.scr[data-screen="player"].is-playing .wd-pl-scrub.is-live .wd-pl-active { width: 128px; }
.scr[data-screen="player"] .wd-pl-times {
  margin-top: 4px; display: flex; justify-content: space-between;
  font: 400 14px/21px var(--hs-font-sans); color: #E5E7EC; white-space: nowrap;
}