/* ==========================================================================
   BEElio V3.1 — Codex Diorama Edition: Storybook Chapter Stage
   100% Scroll-Unlocked + Seamless Painted 2.5D Wooden Signboard & Valley Diorama
   ========================================================================== */

/* 0. CRITICAL SCROLL & OVERFLOW UNLOCK
   Overrides legacy fixed-100vh / overflow:hidden locks in beelio.css & main.css
   so the entire Chapter Diorama scrolls smoothly from Topbar down to Daily Goal! */
@media (min-width: 641px) {
  html:has([data-beelio-v3-ready="1"]),
  body:has([data-beelio-v3-ready="1"]),
  body:has(.mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"]),
  body:has(.grade2-adventure-wrapper[data-beelio-v3-ready="1"]),
  body:has(.g4-adventure-page[data-beelio-v3-ready="1"]) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    position: static !important;
  }

  #app:has([data-beelio-v3-ready="1"]),
  .main-content-view:has([data-beelio-v3-ready="1"]),
  .main-content-view:has(.mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"]),
  .main-content-view:has(.g4-adventure-page[data-beelio-v3-ready="1"]) {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  .main-content-view:has([data-beelio-v3-ready="1"]),
  .main-content-view:has(.mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"]),
  .main-content-view:has(.g4-adventure-page[data-beelio-v3-ready="1"]) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: calc(100dvh - 48px - 58px) !important;
    max-height: calc(100dvh - 48px - 58px) !important;
  }
}

.mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"],
.grade2-adventure-wrapper[data-beelio-v3-ready="1"],
.g4-adventure-page[data-beelio-v3-ready="1"] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 6px 12px 44px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Hide legacy 3:4 static wooden-cube map visuals while keeping native DOM triggers & modals alive */
.g4-adventure-page[data-beelio-v3-ready="1"] > .g4-adventure-canvas,
.grade2-adventure-wrapper[data-beelio-v3-ready="1"] > .mockup-adventure-canvas {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

/* ==========================================================================
   1. MAIN CODEX POSTER BOARD SHELL (Sleek 3:4 Portrait Proportion)
   ========================================================================== */
.beelio-v3-stage {
  position: relative;
  width: 100%;
  max-width: 710px;
  margin: 8px auto 0;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #BEE5FF 0%,
    #E2F4FF 13%,
    #245B2C 22%,
    #77C352 88%,
    #FEF5D4 100%
  );
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 20px 50px rgba(24, 52, 86, 0.16),
    0 4px 14px rgba(24, 52, 86, 0.08);
  font-family: var(--beelio-font-body, 'Be Vietnam Pro', sans-serif);
  color: #1E293B;
}

/* ==========================================================================
   2. TOP SKY CLOUD HEADER BAR
   ========================================================================== */
.bv3-sky-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 10px;
  background:
    radial-gradient(circle at 18% 95%, rgba(255, 255, 255, 0.92) 0 42px, transparent 44px),
    radial-gradient(circle at 28% 105%, rgba(255, 255, 255, 0.85) 0 34px, transparent 36px),
    radial-gradient(circle at 76% 98%, rgba(255, 255, 255, 0.86) 0 48px, transparent 50px),
    linear-gradient(180deg, #B8E2FF 0%, #E0F3FF 100%);
}

.bv3-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bv3-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid #EAB348;
  background: linear-gradient(180deg, #FFFDF5 0%, #FCE5AA 100%);
  box-shadow: 0 3px 0 #CFA044, 0 5px 10px rgba(15, 23, 42, 0.1);
  color: #A1500B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.14s ease;
}

.bv3-back-btn:hover {
  transform: translateY(-1px);
}

.bv3-back-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #CFA044;
}

.bv3-subject-heading {
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-size: clamp(1.08rem, 2.2vw, 1.34rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1E324F;
  white-space: nowrap;
}

.bv3-chapter-stepper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(148, 197, 238, 0.7);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}

.bv3-step-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #E0F2FE;
  color: #1D4ED8;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s ease;
}

.bv3-step-btn:hover:not(:disabled) {
  background: #BAE6FD;
  transform: scale(1.08);
}

.bv3-step-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.bv3-step-counter {
  font-size: 0.78rem;
  font-weight: 800;
  color: #334155;
  min-width: 30px;
  text-align: center;
}

.bv3-topbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bv3-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7E2 100%);
  border: 2px solid #F3D999;
  box-shadow: 0 3px 0 #DEC27E, 0 5px 10px rgba(15, 23, 42, 0.08);
  font-weight: 800;
  font-size: 0.88rem;
  color: #1E293B;
  white-space: nowrap;
}

.bv3-stat-flame {
  font-size: 1rem;
  line-height: 1;
}

/* ==========================================================================
   3. PAINTED 2.5D WOODEN SIGNBOARD & CASTLE WATERFALL HERO BANNER
   ========================================================================== */
.bv3-hero-wrap {
  position: relative;
  z-index: 4;
  padding: 0 12px;
}

.bv3-hero-scenic {
  position: relative;
  width: 100%;
  aspect-ratio: 1260 / 240;
  border-radius: 18px;
  overflow: hidden;
  background-color: #79C9FF;
  background-image: url('../img/codex-hero-wide.webp?v=slim4'), url('../img/codex-hero-wide.jpg?v=slim4');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  border: 1.5px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 6px 16px rgba(14, 48, 22, 0.28);
}

.bv3-hero-scenic[data-subject-tint="english"] {
  filter: saturate(1.04);
}
.bv3-hero-scenic[data-subject-tint="science"] {
  filter: hue-rotate(8deg) saturate(1.04);
}

/* Engraved Chapter Tag ("CHƯƠNG 1") sitting directly on the painted top wooden plank */
.bv3-wood-chapter-tag {
  position: absolute;
  left: 24.5%;
  top: 17.2%;
  transform: translate(-50%, -50%);
  width: 17.2%;
  text-align: center;
  font-family: var(--beelio-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: clamp(0.58rem, 1.05vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #4A2105;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.65);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Text overlay centered directly on the sleek horizontal wooden signboard */
.bv3-wood-plaque {
  position: absolute;
  left: 24.5%;
  top: 53.5%;
  transform: translate(-50%, -50%);
  width: 34.8%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bv3-wood-title {
  margin: 0 0 2px;
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
  color: #FFD84D;
  -webkit-text-stroke: 3.6px #532305;
  paint-order: stroke fill;
  text-shadow:
    0 2.5px 0 #3E1903,
    0 4px 7px rgba(38, 16, 2, 0.32);
}

.bv3-wood-title.is-short {
  font-size: clamp(0.96rem, 1.9vw, 1.26rem);
}

.bv3-wood-title.is-medium {
  font-size: clamp(0.86rem, 1.65vw, 1.10rem);
}

.bv3-wood-title.is-long {
  font-size: clamp(0.76rem, 1.45vw, 0.96rem);
  -webkit-text-stroke: 3px #532305;
}

.bv3-wood-subtitle {
  margin: 0;
  font-size: clamp(0.60rem, 1.05vw, 0.74rem);
  font-weight: 800;
  color: #4A2105;
  line-height: 1.2;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 232, 180, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tactile 3D Orange "📖 Bí kíp" Pill Button */
.bv3-bikip-btn {
  position: absolute;
  right: 2.2%;
  bottom: 12%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2.5px solid #FFF7DF;
  background: linear-gradient(180deg, #FFB424 0%, #EC7906 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 245, 200, 0.65),
    0 4px 0 #9D4700,
    0 8px 16px rgba(24, 52, 20, 0.35);
  color: #FFFFFF;
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-size: clamp(0.86rem, 1.6vw, 1.02rem);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.bv3-bikip-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.bv3-bikip-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9D4700;
}

/* ==========================================================================
   4. FLOATING JEWEL PROGRESS CAPSULE ("Hành trình của em — 0/8 bài học")
   Sleek pill capsule bridging the Hero Banner & Forest Valley without clutter!
   ========================================================================== */
.bv3-progress-strip {
  position: relative;
  z-index: 9;
  width: min(440px, calc(100% - 36px));
  margin: -14px auto -13px;
  padding: 4px 5px 4px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.95) 0%, rgba(244, 251, 242, 0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 250, 232, 0.96);
  box-shadow:
    0 5px 14px rgba(12, 42, 20, 0.20),
    0 1px 3px rgba(12, 42, 20, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 9px;
}

.bv3-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: #264233;
  white-space: nowrap;
}

.bv3-progress-label::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23FEF3C7' stroke='%23F59E0B' stroke-width='1.6'/%3E%3Cpath d='M10 4.3l1.65 3.35 3.7.54-2.68 2.61.63 3.68L10 12.74l-3.3 1.74.63-3.68-2.68-2.61 3.7-.54L10 4.3z' fill='%23F59E0B' stroke='%23B45309' stroke-width='0.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.bv3-progress-track {
  flex: 1;
  min-width: 72px;
  height: 7px;
  border-radius: 999px;
  background-color: rgba(21, 104, 50, 0.11);
  background-image: radial-gradient(circle, rgba(21, 104, 50, 0.24) 1.1px, transparent 1.3px);
  background-size: 13px 100%;
  background-position: 6px center;
  box-shadow:
    inset 0 1px 2px rgba(15, 42, 24, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.bv3-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22C55E 0%, #65CE1E 65%, #A3E635 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.48);
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bv3-progress-track[aria-valuenow="0"] .bv3-progress-fill {
  min-width: 7px;
  background: linear-gradient(180deg, #86EFAC 0%, #22C55E 100%);
  opacity: 0.92;
}

.bv3-progress-count {
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ECFDF3 0%, #D6F8E3 100%);
  border: 1px solid rgba(34, 197, 94, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-weight: 800;
  font-size: 0.72rem;
  color: #156832;
  white-space: nowrap;
}

/* Mobile-only docked mission bar (hidden on desktop/tablet >620px) */
.bv3-mobile-quest-bar {
  display: none;
}

/* ==========================================================================
   5. SEAMLESS 3:4 PAINTED STORYBOOK VALLEY DIORAMA
   ========================================================================== */
.bv3-valley-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #67BA49;
  background-image: url('../img/codex-valley-diorama.webp'), url('../img/codex-valley-diorama.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  overflow: hidden;
}

.bv3-valley-stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  background: linear-gradient(180deg, rgba(16, 52, 24, 0.34) 0%, rgba(16, 52, 24, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Engraved text sitting dead-center on the painted 3D wooden signpost (angle -14.6deg, clear of nails & left bevel) */
.bv3-start-signpost {
  position: absolute;
  left: 23.9%;
  top: 15.25%;
  transform: translate(-50%, -50%) rotate(-14.6deg);
  width: 13.6%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: var(--beelio-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: clamp(0.48rem, 0.94vw, 0.64rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #512408;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.65);
}

/* ==========================================================================
   6. ISOMETRIC 3D STEPPING-STONE PUCKS (Compact Jewel-Scale Cylinders)
   ========================================================================== */
.bv3-node-wrap {
  position: absolute;
  left: var(--x-port);
  top: var(--y-port);
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bv3-node-wrap[data-state="active"] {
  z-index: 7;
}

.bv3-node-wrap:hover {
  transform: translate(-50%, -54%) scale(1.05);
}

.bv3-node-wrap:active {
  transform: translate(-50%, -48%) scale(0.98);
}

/* Sunburst radial aura behind Active & Boss pucks */
.bv3-puck-halo {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 92px;
  height: 72px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.bv3-sunburst-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bv3-node-wrap[data-state="active"] .bv3-puck-halo {
  animation: bv3-halo-breathe 2.6s infinite ease-in-out;
}

@keyframes bv3-halo-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.92; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* Isometric Elliptical Stone Saucer Base (~50% sleeker footprint) */
.bv3-puck-pedestal {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 41px;
  border-radius: 50%;
  background: linear-gradient(180deg, #E8F0FA 0%, #C7D6EA 100%);
  box-shadow:
    0 4.5px 0 #8DA3C0,
    0 8px 13px rgba(24, 52, 24, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner 3D Cylindrical Puck Face */
.bv3-puck-disc {
  width: 49px;
  height: 32px;
  border-radius: 50%;
  transform: translateY(-3px);
  background: linear-gradient(180deg, #DCE7F6 0%, #BCCCE4 100%);
  border: 1.8px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 4.5px 0 #95ABC8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ACTIVE PUCK: Radiant BEElio-Codex Green Cylinder */
.bv3-node-wrap[data-state="active"] .bv3-puck-pedestal {
  background: linear-gradient(180deg, #FFFFFF 0%, #DCFCE7 100%);
  box-shadow:
    0 4.5px 0 #6EE787,
    0 9px 15px rgba(22, 101, 52, 0.3);
}

.bv3-node-wrap[data-state="active"] .bv3-puck-disc {
  background: linear-gradient(180deg, #65E400 0%, #41B900 100%);
  border: 2px solid #FFFFFF;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 4.5px 0 #2A8C00;
}

/* COMPLETED PUCK: Lush Emerald Cylinder */
.bv3-node-wrap[data-state="completed"] .bv3-puck-pedestal {
  background: linear-gradient(180deg, #ECFDF5 0%, #A7F3D0 100%);
  box-shadow:
    0 4.5px 0 #34D399,
    0 8px 13px rgba(6, 95, 70, 0.24);
}

.bv3-node-wrap[data-state="completed"] .bv3-puck-disc {
  background: linear-gradient(180deg, #34D399 0%, #059669 100%);
  border: 1.8px solid #FFFFFF;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    0 4.5px 0 #047857;
}

/* BOSS PUCK (#8): Royal Honey-Gold Cylinder */
.bv3-node-wrap[data-boss="1"] .bv3-puck-pedestal {
  width: 64px;
  height: 45px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FDE68A 100%);
  box-shadow:
    0 4.5px 0 #E09100,
    0 9px 16px rgba(120, 53, 15, 0.3);
}

.bv3-node-wrap[data-boss="1"] .bv3-puck-disc {
  width: 54px;
  height: 35px;
  background: linear-gradient(180deg, #FFE46B 0%, #F7AB0A 100%);
  border: 2px solid #FFFDF0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    0 4.5px 0 #C97600;
}

/* Number Badge on Top-Left of Puck */
.bv3-puck-num {
  position: absolute;
  top: -6px;
  left: -3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #5E789D;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
  color: #FFFFFF;
  font-family: var(--beelio-font-display, 'Baloo 2', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.bv3-node-wrap[data-state="active"] .bv3-puck-num {
  background: #2CA800;
}

.bv3-node-wrap[data-state="completed"] .bv3-puck-num {
  background: #059669;
}

.bv3-node-wrap[data-boss="1"] .bv3-puck-num {
  background: #EA580C;
}

/* Golden Padlock Sticker on Bottom-Right of Locked Puck */
.bv3-puck-lock {
  position: absolute;
  right: -5px;
  bottom: -2px;
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.18));
}

/* Crisp White Pill Title Beneath Puck */
.bv3-puck-label {
  position: relative;
  z-index: 3;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(226, 232, 240, 0.96);
  box-shadow: 0 3px 8px rgba(20, 56, 24, 0.18);
  font-size: 0.7rem;
  font-weight: 800;
  color: #1E293B;
  white-space: nowrap;
  max-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv3-node-wrap[data-state="active"] .bv3-puck-label {
  border-color: #BBF7D0;
  color: #14532D;
}

.bv3-node-wrap[data-boss="1"] .bv3-puck-label {
  background: #FFFFFF;
  border-color: #FDE68A;
  color: #1E293B;
  font-weight: 900;
}

/* ==========================================================================
   7. INLINE QUEST CARD + LARGE EXPRESSIVE 3D MASCOT BEE CO-PILOT
   ========================================================================== */
.bv3-quest-cluster {
  --bv3-bee-flip: 1;
  position: absolute;
  top: var(--qt-port);
  left: var(--ql-port);
  right: var(--qr-port);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
}

.bv3-quest-cluster[data-port-side="left"] {
  --bv3-bee-flip: -1;
  flex-direction: row-reverse;
}

.bv3-quest-card {
  position: relative;
  width: 168px;
  padding: 8px 11px 9px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1.8px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 8px 18px rgba(18, 60, 28, 0.20),
    0 2.5px 0 rgba(134, 239, 172, 0.52);
}

.bv3-quest-card::before {
  content: "";
  position: absolute;
  top: 54%;
  left: -7px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}

.bv3-quest-cluster[data-port-side="left"] .bv3-quest-card::before {
  left: auto;
  right: -7px;
}

.bv3-quest-title {
  margin: 0 0 2px;
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.18;
  color: #1E293B;
}

.bv3-quest-desc {
  margin: 0 0 5px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bv3-quest-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #334155;
}

.bv3-quest-meta svg {
  width: 13px;
  height: 13px;
}

.bv3-quest-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bv3-quest-start-btn {
  width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #4FE000 0%, #32B300 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    0 2.5px 0 #218200,
    0 5px 10px rgba(34, 139, 0, 0.24);
  color: #FFFFFF;
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.bv3-quest-start-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.bv3-quest-start-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #218200;
}

/* Mascot Bee Co-Pilot + Tilted Speech Bubble */
.bv3-mascot-copilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  margin-top: -12px;
}

.bv3-mascot-bubble {
  margin-bottom: 4px;
  padding: 6px 12px;
  border-radius: 15px;
  background: #FFFDF5;
  border: 2px solid #FDE68A;
  box-shadow: 0 6px 14px rgba(20, 56, 24, 0.18);
  font-size: 0.75rem;
  font-weight: 800;
  color: #1E293B;
  text-align: center;
  max-width: 126px;
  line-height: 1.22;
  position: relative;
  transform: rotate(3deg);
}

.bv3-quest-cluster[data-port-side="left"] .bv3-mascot-bubble {
  transform: rotate(-3deg);
}

.bv3-mascot-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 45%;
  width: 10px;
  height: 10px;
  background: #FFFDF5;
  border-right: 2px solid #FDE68A;
  border-bottom: 2px solid #FDE68A;
  transform: rotate(45deg);
}

.bv3-quest-cluster[data-port-side="left"] .bv3-mascot-bubble::after {
  left: auto;
  right: 45%;
}

.bv3-mascot-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bv3-mascot-burst-svg {
  display: none !important;
}

.bv3-mascot-img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(18, 56, 24, 0.3));
  transform: scaleX(var(--bv3-bee-flip, 1));
  animation: bv3-bee-float 3s infinite ease-in-out;
}

@keyframes bv3-bee-float {
  0%, 100% { transform: translateY(0) scaleX(var(--bv3-bee-flip, 1)); }
  50% { transform: translateY(-6px) scaleX(var(--bv3-bee-flip, 1)); }
}

/* ==========================================================================
   8. INTERACTIVE PAINTED TREASURE CHEST & GOLDEN CASTLE OVERLAYS
   ========================================================================== */
.bv3-chest-station {
  position: absolute;
  left: var(--x-port);
  top: var(--y-port);
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.16s ease;
}

.bv3-chest-station:hover {
  transform: translate(-50%, -53%) scale(1.04);
}

.bv3-chest-pill {
  position: relative;
  margin-bottom: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.8px solid #E0F2FE;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.18);
  font-size: 0.76rem;
  font-weight: 800;
  color: #1E293B;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bv3-chest-pill::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #FFFFFF;
  border-right: 1.8px solid #E0F2FE;
  border-bottom: 1.8px solid #E0F2FE;
  transform: translateX(-50%) rotate(45deg);
}

.bv3-chest-station.is-claimed .bv3-chest-pill {
  border-color: #BBF7D0;
  color: #15803D;
}

.bv3-chest-hitbox {
  width: 92px;
  height: 78px;
  border-radius: 20px;
}

.bv3-castle-summit {
  position: absolute;
  left: var(--x-port);
  top: var(--y-port);
  transform: translate(-50%, -50%);
  width: 21%;
  height: 21%;
  z-index: 4;
  cursor: pointer;
  border-radius: 24px;
}

/* ==========================================================================
   9. BOTTOM "MỤC TIÊU HÔM NAY" CREAM BANNER
   ========================================================================== */
.bv3-daily-goal {
  position: relative;
  z-index: 9;
  margin: -18px 12px 12px;
  padding: 12px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFDF7 0%, #FDF2CC 100%);
  border: 2.5px solid #FBE39E;
  box-shadow:
    0 5px 0 rgba(217, 162, 43, 0.25),
    0 10px 22px rgba(20, 52, 24, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  overflow: hidden;
}

.bv3-daily-goal-coin {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.bv3-daily-goal-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.bv3-daily-goal-text h4 {
  margin: 0 0 2px;
  font-family: var(--beelio-font-display, 'Baloo 2', 'Be Vietnam Pro', sans-serif);
  font-size: 1.08rem;
  font-weight: 800;
  color: #0F172A;
}

.bv3-daily-goal-text p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.bv3-daily-goal-scenery {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   10. MOBILE & SMALL PORTRAIT RESPONSIVENESS (<= 680px, Zero Overflow / Zero Overlap)
   ========================================================================== */
@media (max-width: 680px) {
  .mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"],
  .grade2-adventure-wrapper[data-beelio-v3-ready="1"],
  .g4-adventure-page[data-beelio-v3-ready="1"] {
    padding: 4px 6px 28px !important;
  }

  .beelio-v3-stage {
    border-radius: 22px;
    margin-top: 4px;
  }

  .bv3-sky-topbar {
    flex-wrap: wrap;
    padding: 10px 12px 8px;
    gap: 6px;
  }

  .bv3-back-btn {
    width: 34px;
    height: 34px;
  }

  .bv3-subject-heading {
    font-size: 1rem;
  }

  .bv3-stat-pill {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  .bv3-hero-wrap {
    padding: 0 8px;
  }

  .bv3-hero-scenic {
    aspect-ratio: 1260 / 344;
    border-radius: 18px;
    background-image: url('../img/codex-hero-banner.webp'), url('../img/codex-hero-banner.jpg');
  }

  .bv3-wood-chapter-tag {
    left: 32.5%;
    top: 17.8%;
    width: 22%;
    font-size: 0.62rem;
  }

  .bv3-wood-plaque {
    left: 32.2%;
    top: 56%;
    width: 43.5%;
  }

  .bv3-wood-title {
    -webkit-text-stroke: 3.5px #532305;
  }

  .bv3-wood-title.is-short {
    font-size: 1.08rem;
  }

  .bv3-wood-title.is-medium {
    font-size: 0.96rem;
  }

  .bv3-wood-title.is-long {
    font-size: 0.84rem;
  }

  .bv3-wood-subtitle {
    display: none;
  }

  .bv3-bikip-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    gap: 5px;
    bottom: 10%;
  }

  .bv3-progress-strip {
    width: calc(100% - 24px);
    max-width: 372px;
    margin: 5px auto 8px;
    padding: 3px 4.5px 3px 9.5px;
    gap: 7px;
  }

  .bv3-progress-label {
    font-size: 0.72rem;
  }

  .bv3-progress-count {
    font-size: 0.68rem;
    padding: 2px 8px;
  }

  /* Show clean docked mission bar above the 3:4 valley on narrow phones */
  .bv3-mobile-quest-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 10px 8px;
    padding: 11px 13px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 2px solid #BBF7D0;
    box-shadow: 0 8px 18px rgba(18, 60, 28, 0.16);
    position: relative;
    z-index: 9;
  }

  .bv3-mobile-quest-info {
    flex: 1;
    min-width: 0;
  }

  .bv3-mobile-mascot-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 10px rgba(18, 56, 24, 0.25));
  }

  /* Hide inline meadow quest cluster on narrow phones so all 8 pucks on the 3:4 trail are 100% clear */
  .bv3-valley-stage {
    aspect-ratio: 3 / 4.28;
  }

  .bv3-valley-stage .bv3-quest-cluster {
    display: none;
  }

  .bv3-start-signpost {
    font-size: 0.43rem;
    line-height: 1.12;
  }

  .bv3-puck-halo {
    width: 66px;
    height: 52px;
  }

  .bv3-puck-pedestal {
    width: 40px;
    height: 28px;
    box-shadow: 0 3px 0 #8DA3C0, 0 6px 9px rgba(24, 52, 24, 0.24);
  }

  .bv3-puck-disc {
    width: 34px;
    height: 22px;
    transform: translateY(-2px);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #95ABC8;
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-pedestal {
    width: 44px;
    height: 31px;
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-disc {
    width: 37px;
    height: 24px;
  }

  .bv3-puck-disc .beelio-puck-icon-svg {
    width: 17px;
    height: 14px;
  }

  .bv3-puck-num {
    width: 16px;
    height: 16px;
    font-size: 0.58rem;
    border-width: 1.6px;
    top: -4px;
    left: -3px;
  }

  .bv3-puck-lock .beelio-padlock-svg {
    width: 14px;
    height: 14px;
  }

  .bv3-puck-label {
    margin-top: 1px;
    font-size: 0.56rem;
    line-height: 1.15;
    padding: 1.5px 6px;
    max-width: 82px;
  }

  .bv3-chest-pill {
    font-size: 0.56rem;
    padding: 2px 6px;
    margin-bottom: 4px;
  }

  .bv3-chest-hitbox {
    width: 48px;
    height: 42px;
  }

  .bv3-daily-goal {
    margin: -12px 8px 8px;
    padding: 10px 12px;
    gap: 10px;
  }

  .bv3-daily-goal-text h4 {
    font-size: 0.95rem;
  }

  .bv3-daily-goal-text p {
    font-size: 0.76rem;
  }

  .bv3-daily-goal-scenery {
    opacity: 0.45;
  }
}

/* ==========================================================================
   11. ADAPTIVE PANORAMA CODEX — 1-SCREEN DESKTOP FIT (0px Vertical Scroll!)
   Active on Laptop & Desktop viewports (>= 681px wide & >= 600px tall)
   Uses pure unstretched 1260x344 Hero + native 16:9 Painted Valley (1280x720)
   ========================================================================== */
@media (min-width: 681px) and (min-height: 600px) {
  [data-beelio-v3-ready="1"],
  .mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"],
  .grade2-adventure-wrapper[data-beelio-v3-ready="1"],
  .g4-adventure-page[data-beelio-v3-ready="1"] {
    min-height: calc(100dvh - 57px) !important;
    padding: 2px 14px 8px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  [data-beelio-v3-ready="1"] > .adventure-context-bar,
  .mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar,
  .grade2-adventure-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar,
  .g4-adventure-page[data-beelio-v3-ready="1"] > .adventure-context-bar {
    margin: 2px auto 4px !important;
    padding: 3px 10px !important;
  }

  [data-beelio-v3-ready="1"] > .adventure-context-bar [data-subject],
  .mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar [data-subject],
  .grade2-adventure-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar [data-subject],
  .g4-adventure-page[data-beelio-v3-ready="1"] > .adventure-context-bar [data-subject],
  [data-beelio-v3-ready="1"] > .adventure-context-bar .grade-context-trigger,
  .mockup-adventure-canvas-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar .grade-context-trigger,
  .grade2-adventure-wrapper[data-beelio-v3-ready="1"] > .adventure-context-bar .grade-context-trigger,
  .g4-adventure-page[data-beelio-v3-ready="1"] > .adventure-context-bar .grade-context-trigger {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 13.5px !important;
  }

  /* Fixed-Width 760px + Vertical-Only 100dvh Stretch:
     1) max-width stays locked at sleek 760px (identical horizontal width to V3.3!)
     2) --bv3-hero-h locks the 5.25:1 Hero Banner at 124px..140px
     3) --bv3-valley-h stretches ONLY the vertical height of the Valley so Total_Page_Height === 100dvh (0px scroll, 0px dead bottom void!) */
  .beelio-v3-stage {
    --bv3-hero-h: clamp(124px, 15.2dvh, 140px);
    --bv3-valley-h: clamp(320px, calc(100dvh - 224px - var(--bv3-hero-h)), 980px);
    margin: 0 auto;
    width: 100%;
    max-width: min(760px, calc(100vw - 28px));
    border-radius: 24px;
  }

  /* Compact Sky Topbar */
  .bv3-sky-topbar {
    padding: 5px 14px 4px;
    gap: 8px;
  }

  .bv3-back-btn {
    width: 30px;
    height: 30px;
  }

  .bv3-subject-heading {
    font-size: clamp(0.94rem, 1.75dvh, 1.14rem);
  }

  .bv3-stat-pill {
    padding: 3.5px 10px;
    font-size: 0.79rem;
  }

  /* Sleek Height-Capped Panoramic Ribbon Hero (1260x240 = 5.25:1 at 760px stage width) */
  .bv3-hero-wrap {
    padding: 0 10px;
  }

  .bv3-hero-scenic {
    height: var(--bv3-hero-h);
    aspect-ratio: auto;
    border-radius: 18px;
    background-image: url('../img/codex-hero-wide.webp?v=slim4'), url('../img/codex-hero-wide.jpg?v=slim4');
  }

  .bv3-wood-chapter-tag {
    left: 24.5%;
    top: 17.2%;
    width: 17.2%;
    font-size: clamp(0.56rem, 1.02dvh, 0.66rem);
  }

  .bv3-wood-plaque {
    left: 24.5%;
    top: 53.5%;
    width: 34.8%;
  }

  .bv3-wood-title {
    margin: 0 0 2px;
    -webkit-text-stroke: 3.5px #532305;
  }

  .bv3-wood-title.is-short {
    font-size: clamp(0.96rem, 1.72dvh, 1.14rem);
  }

  .bv3-wood-title.is-medium {
    font-size: clamp(0.86rem, 1.52dvh, 1.00rem);
  }

  .bv3-wood-title.is-long {
    font-size: clamp(0.76rem, 1.34dvh, 0.88rem);
    -webkit-text-stroke: 3px #532305;
  }

  .bv3-wood-subtitle {
    font-size: clamp(0.58rem, 0.96dvh, 0.66rem);
    line-height: 1.2;
  }

  .bv3-bikip-btn {
    padding: 5px 13px;
    font-size: clamp(0.75rem, 1.32dvh, 0.90rem);
    right: 1.8%;
    bottom: 13.5%;
  }

  /* Sleek Centered Jewel Progress Capsule */
  .bv3-progress-strip {
    width: min(384px, calc(100% - 44px));
    margin: -14px auto -14px;
    padding: 2.5px 4px 2.5px 10px;
    border-radius: 999px;
    gap: 7.5px;
  }

  .bv3-progress-label {
    font-size: 0.70rem;
    gap: 4.5px;
  }

  .bv3-progress-label::before {
    width: 12.5px;
    height: 12.5px;
  }

  .bv3-progress-count {
    font-size: 0.67rem;
    padding: 1.5px 8px;
  }

  .bv3-progress-track {
    height: 6px;
  }

  /* Vertically-Elastic Painted Storybook Valley (Width fixed inside 760px stage, Height fills 100dvh!) */
  .bv3-valley-stage {
    height: var(--bv3-valley-h);
    aspect-ratio: auto;
    background-image: url('../img/codex-valley-wide.webp?v=slim1'), url('../img/codex-valley-wide.jpg?v=slim1');
  }

  /* Calibrated directly to the 16:9 wooden signpost plank (-7deg at 21.2%, 14.5%) */
  .bv3-start-signpost {
    left: 21.2%;
    top: 14.5%;
    transform: translate(-50%, -50%) rotate(-7deg);
    width: 11.5%;
    font-size: clamp(0.45rem, 0.96dvh, 0.62rem);
    line-height: 1.12;
  }

  /* Activate 16:9 Widescreen Coordinates */
  .bv3-node-wrap,
  .bv3-chest-station,
  .bv3-castle-summit {
    left: var(--x-wide);
    top: var(--y-wide);
  }

  .bv3-quest-cluster {
    --bv3-bee-flip: 1;
    top: var(--qt-wide);
    left: var(--ql-wide);
    right: var(--qr-wide);
    flex-direction: row;
    gap: 7px;
  }

  .bv3-quest-cluster[data-wide-side="left"] {
    --bv3-bee-flip: -1;
    flex-direction: row-reverse;
  }

  .bv3-quest-cluster .bv3-mascot-bubble {
    transform: rotate(3deg);
  }

  .bv3-quest-cluster[data-wide-side="left"] .bv3-mascot-bubble {
    transform: rotate(-3deg);
  }

  .bv3-quest-cluster .bv3-mascot-bubble::after {
    left: 45%;
    right: auto;
  }

  .bv3-quest-cluster[data-wide-side="left"] .bv3-mascot-bubble::after {
    left: auto;
    right: 45%;
  }

  .bv3-quest-cluster .bv3-quest-card::before {
    left: -8px;
    right: auto;
  }

  .bv3-quest-cluster[data-wide-side="left"] .bv3-quest-card::before {
    left: auto;
    right: -8px;
  }

  /* Proportional 3D Jewel Pucks for 16:9 Valley (Standard Laptop 600px..849px height) */
  .bv3-puck-halo {
    width: 74px;
    height: 58px;
  }

  .bv3-puck-pedestal {
    width: 48px;
    height: 34px;
    box-shadow: 0 3.8px 0 #8DA3C0, 0 7px 11px rgba(24, 52, 24, 0.26);
  }

  .bv3-puck-disc {
    width: 40px;
    height: 26px;
    transform: translateY(-2.5px);
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-pedestal {
    width: 54px;
    height: 38px;
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-disc {
    width: 45px;
    height: 29px;
  }

  .bv3-puck-disc .beelio-puck-icon-svg {
    width: 20px;
    height: 17px;
  }

  .bv3-puck-num {
    width: 18px;
    height: 18px;
    font-size: 0.64rem;
    top: -5px;
    left: -3px;
  }

  .bv3-puck-lock .beelio-padlock-svg {
    width: 15px;
    height: 15px;
  }

  .bv3-puck-label {
    margin-top: 1px;
    padding: 1.5px 8px;
    font-size: 0.65rem;
    max-width: 118px;
  }

  /* Compact Sleek Quest Card + Mascot Bee (~50% smaller surface area than V3.5!) */
  .bv3-quest-card {
    width: 142px;
    padding: 6px 9px 7px;
    border-radius: 12px;
  }

  .bv3-quest-title {
    font-size: 0.78rem;
    margin-bottom: 1.5px;
  }

  .bv3-quest-desc {
    font-size: 0.61rem;
    line-height: 1.24;
    margin-bottom: 3.5px;
  }

  .bv3-quest-meta {
    font-size: 0.61rem;
    gap: 4px;
    margin-bottom: 4.5px;
  }

  .bv3-quest-meta svg {
    width: 11px;
    height: 11px;
  }

  .bv3-quest-start-btn {
    padding: 3.5px 9px;
    font-size: 0.69rem;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 2px 0 #218200,
      0 4px 8px rgba(34, 139, 0, 0.22);
  }

  .bv3-mascot-bubble {
    font-size: 0.60rem;
    padding: 3px 7px;
    max-width: 90px;
  }

  .bv3-mascot-img {
    width: 66px;
    height: 66px;
  }

  /* Chest & Daily Goal scaled cleanly inside 1-Screen */
  .bv3-chest-pill {
    font-size: 0.66rem;
    padding: 3px 8px;
    margin-bottom: 3px;
  }

  .bv3-chest-hitbox {
    width: 64px;
    height: 50px;
  }

  .bv3-daily-goal {
    margin: -11px 10px 6px;
    padding: 6px 14px;
    border-radius: 18px;
    gap: 11px;
  }

  .bv3-daily-goal-coin svg {
    width: 40px;
    height: 40px;
  }

  .bv3-daily-goal-text h4 {
    font-size: 0.95rem;
    margin: 0 0 1px;
  }

  .bv3-daily-goal-text p {
    font-size: 0.78rem;
  }
}

/* Vertical-Stretch Calibration for Tall Viewports (>= 860px height) inside Fixed 760px Stage Width */
@media (min-width: 681px) and (min-height: 860px) {
  .bv3-start-signpost {
    transform: translate(-50%, -50%) rotate(-9.8deg);
    font-size: 0.56rem;
  }

  .bv3-puck-halo {
    width: 80px;
    height: 62px;
  }

  .bv3-puck-pedestal {
    width: 52px;
    height: 37px;
  }

  .bv3-puck-disc {
    width: 43px;
    height: 28px;
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-pedestal {
    width: 58px;
    height: 41px;
  }

  .bv3-node-wrap[data-boss="1"] .bv3-puck-disc {
    width: 48px;
    height: 31px;
  }

  .bv3-puck-disc .beelio-puck-icon-svg {
    width: 22px;
    height: 18px;
  }

  .bv3-puck-num {
    width: 19px;
    height: 19px;
    font-size: 0.68rem;
  }

  .bv3-puck-label {
    font-size: 0.67rem;
    padding: 2px 8px;
    max-width: 124px;
  }

  .bv3-quest-card {
    width: 148px;
    padding: 6.5px 9.5px 7.5px;
    border-radius: 12.5px;
  }

  .bv3-quest-title {
    font-size: 0.80rem;
  }

  .bv3-quest-desc {
    font-size: 0.62rem;
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .bv3-quest-meta {
    font-size: 0.62rem;
    margin-bottom: 5px;
  }

  .bv3-quest-start-btn {
    padding: 4px 10px;
    font-size: 0.71rem;
  }

  .bv3-mascot-bubble {
    font-size: 0.62rem;
    padding: 3.5px 7.5px;
    max-width: 92px;
  }

  .bv3-mascot-img {
    width: 70px;
    height: 70px;
  }

  .bv3-chest-pill {
    font-size: 0.68rem;
    padding: 3.5px 9px;
  }

  .bv3-chest-hitbox {
    width: 68px;
    height: 54px;
  }
}