/* ======================================================== */
/* 🗺️ ROADMAP v7.0: 5-TIER UI AUDIT FIXES (MOBILE-WEB-PWA)  */
/* Ceiling: < 350 lines | Zero Collisions & 80/20 Spotlight */
/* ======================================================== */

/* 1. MOONLY / APPLE MUSIC TRANSLUCENT GLASS TOPBAR & PURE HERO BANNER */
#screenParchmentRoadmap, #screenParchmentRoadmap * { -webkit-tap-highlight-color: transparent; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; }
html.dark #screenParchmentRoadmap.parchment-bg { background: radial-gradient(ellipse at 50% 14%, #132419 0%, #0D1610 50%, #09100B 100%) !important; }
#roadmapHeroHeader { min-height: 166px !important; max-height: 172px !important; overflow: hidden; }
#roadmapHeroHeader #roadmapBannerImg {
    object-position: center 38% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,0.48) 86%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,0.48) 86%, transparent 100%) !important;
}
#roadmapHeroHeader .hero-vignette-bottom { background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(13, 22, 16, 0.62) 78%, #101C14 100%) !important; }
#roadmapHeroHeader .hero-content { padding: 0 18px 12px !important; will-change: opacity, transform; }
#roadmapHeroHeader:not(.is-switching) .hero-content { transition: none !important; }
#roadmapChapterHeading {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 22px !important; font-weight: 800 !important;
    letter-spacing: -0.025em !important; line-height: 1.18 !important; margin: 0 !important; color: #FFFFFF !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65) !important;
}
html.light #roadmapChapterHeading { color: #18181B !important; text-shadow: none !important; }
#screenParchmentRoadmap #roadmapBackBtn {
    width: 36px !important; height: 36px !important; background: rgba(12, 12, 16, 0.42) !important; border: none !important;
    box-shadow: none !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
#screenParchmentRoadmap #roadmapTopBar.is-scrolled #roadmapBackBtn { background: rgba(255, 255, 255, 0.06) !important; }
#screenParchmentRoadmap #roadmapChapterDropdownBtn, #screenParchmentRoadmap #roadmapTopBar.is-scrolled #roadmapChapterDropdownBtn {
    background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 2px 8px !important;
}
#screenParchmentRoadmap #roadmapHeaderEyebrow {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; color: #B8D166 !important;
}
#roadmapCardTagBtn.rm-top-chapter-pill {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 34px !important; padding: 0 12px !important; margin: 0 !important; border-radius: 999px !important;
    background: rgba(12, 12, 16, 0.42) !important; border: none !important; box-shadow: none !important;
    backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    color: #FFFFFF !important; font-size: 12px !important; font-weight: 700 !important;
    transition: transform 0.15s ease, background 0.2s ease !important;
}
/* Khi cuộn xuống: giữa thanh đã có CHƯƠNG 1 + Tên chương ▾, bên phải chỉ giữ lại huy hiệu 3/10 gọn gàng */
#roadmapTopBar.is-scrolled #roadmapCardTagBtn.rm-top-chapter-pill {
    height: 28px !important; padding: 0 10px !important; background: rgba(184, 209, 102, 0.14) !important;
}
#roadmapTopBar.is-scrolled #roadmapCardTag,
#roadmapTopBar.is-scrolled .rm-top-pill-dot,
#roadmapTopBar.is-scrolled #roadmapCardTagBtn svg { display: none !important; }
#roadmapTopBar.is-scrolled .rm-top-pill-prog { color: #D4EE7F !important; font-weight: 800 !important; }
#roadmapCardTag { color: #FFFFFF !important; font-size: 12px !important; font-weight: 700 !important; text-shadow: none !important; }
.rm-top-pill-dot { color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.rm-top-pill-prog { color: rgba(255, 255, 255, 0.86); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
html.light #roadmapCardTagBtn.rm-top-chapter-pill { background: rgba(255, 255, 255, 0.85) !important; color: #18181B !important; }
html.light #roadmapCardTag, html.light .rm-top-pill-prog { color: #18181B !important; }

/* 2. 2.5D GAMING WORLD MAP TERRAIN STAGE (SEAMLESS FOREST ARENA) */
.sq-roadmap-map {
    padding: 6px 12px 128px !important; max-width: 440px; margin: 0 auto;
    background: linear-gradient(180deg, #0E1912 0%, rgba(10, 19, 13, 0.22) 6%, rgba(10, 19, 13, 0.18) 92%, #09110C 100%),
                url('../assets/cards/fable_forest_game_map_bg.jpg') center top / 100% auto repeat-y !important;
}
html.light .sq-roadmap-map { background: #F4F5EE !important; }
#roadmapNextBar, #mysteryRoadmapNextBar { display: none !important; }
.sq-winding-section { position: relative; margin-bottom: 18px; z-index: 1; border: none !important; background: transparent !important; }
.mb-section.sq-winding-section + .mb-section.sq-winding-section { margin-top: 0 !important; }
.mb-section.sq-winding-section::before, .mb-section.sq-winding-section::after { display: none !important; content: none !important; }
.sq-winding-section:has(.has-open-popover) { z-index: 50 !important; opacity: 1 !important; }
.sq-winding-section.is-future-loop:not(:has(.has-open-popover)) { opacity: 0.95; }

.sq-section-header { display: flex; align-items: center; gap: 10px; margin: 4px 2px 12px; position: relative; z-index: 4; }
.sq-section-hairline { flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(184, 209, 102, 0.35), transparent); }
.sq-section-title {
    font-size: 11px; font-weight: 800; color: #F4F4F5; letter-spacing: 0.02em;
    padding: 4.5px 13px; border-radius: 999px; background: rgba(18, 28, 20, 0.92);
    border: 1px solid rgba(184, 209, 102, 0.34); box-shadow: 0 3px 0 #09100B, 0 8px 18px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sq-section-title i { font-style: normal; color: #D4EE7F; font-size: 9px; margin: 0 3px; }
html.light .sq-section-title { background: #EEF2E4; color: #27272A; border-color: rgba(82, 102, 0, 0.25); box-shadow: 0 3px 0 #CBD5B4; }

.sq-winding-stage { position: relative; width: 100%; min-height: 390px; background: transparent !important; }
.sq-winding-stage::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 74% 52%, rgba(251, 191, 36, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 22% 36%, rgba(34, 211, 238, 0.14) 0%, transparent 52%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    animation: sq-stage-aura 4s ease-in-out infinite alternate;
}
@keyframes sq-stage-aura { 0% { opacity: 0.65; } 100% { opacity: 1; } }
.sq-winding-nodes { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: stretch; }
.sq-winding-nodes:has(.has-open-popover) { z-index: 50 !important; }

/* 3. 3D GAME STEPPING-STONE TRAIL + SOFT TRAIL RIBBON */
.sq-bridge-wrap { width: 100%; height: 22px; margin: -2px 0; position: relative; z-index: 1; pointer-events: none; }
.sq-bridge-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sq-bridge-ribbon { fill: none; stroke: rgba(255, 255, 255, 0.042); stroke-width: 24px; stroke-linecap: round; }
html.light .sq-bridge-ribbon { stroke: rgba(82, 102, 0, 0.06); }
.sq-bridge-wrap.is-lit .sq-bridge-ribbon, .sq-bridge-wrap.is-active-bridge .sq-bridge-ribbon { stroke: rgba(184, 209, 102, 0.10); stroke-width: 26px; }
.sq-stone-shadow { fill: none; stroke: #0C0E0A; stroke-width: 8.5px; stroke-dasharray: 2 11.5; stroke-linecap: round; transform: translateY(2px); }
.sq-bridge-line { fill: none; stroke: #353C2D; stroke-width: 7.5px; stroke-dasharray: 2 11.5; stroke-linecap: round; }
html.light .sq-bridge-line { stroke: #C2CAAE; }
.sq-bridge-wrap.is-lit .sq-stone-shadow, .sq-bridge-wrap.is-active-bridge .sq-stone-shadow { stroke: #384C11; }
.sq-bridge-wrap.is-lit .sq-bridge-line { stroke: #9BB845; stroke-width: 8px; stroke-dasharray: 2.5 11; }
.sq-bridge-wrap.is-active-bridge .sq-bridge-line { stroke: #B8D166; stroke-width: 8.5px; stroke-dasharray: 2.5 11; }
.sq-bridge-wrap.is-pulse-flow .sq-bridge-line { stroke: #D4EE7F; stroke-width: 8.5px; stroke-dasharray: 3 10; animation: sq-path-flow 0.7s linear infinite; }
@keyframes sq-path-flow { to { stroke-dashoffset: -26; } }

/* 4. 3-TIER SIZE & 2.5D STONE PEDESTALS FOR SQUARE '?' TILES */
.sq-node-row { position: relative; width: 100%; min-height: 62px; display: block; z-index: 2; }
.sq-node-row.is-active-hero { min-height: 122px; z-index: 6; margin: 2px 0 4px; }
.sq-node-row.has-open-popover { z-index: 45 !important; }
.sq-node-anchor {
    position: relative; left: var(--x, 50%); transform: translateX(-50%);
    width: max-content; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sq-node-anchor::after {
    content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 82px; height: 22px; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(42, 50, 33, 0.92) 0%, rgba(20, 24, 15, 0.95) 68%, transparent 72%);
    box-shadow: 0 3px 0 rgba(8, 10, 6, 0.88);
}
.sq-node-row.is-active-hero .sq-node-anchor::after {
    width: 114px; height: 28px; bottom: -8px;
    background: radial-gradient(ellipse at center, rgba(184, 209, 102, 0.30) 0%, rgba(36, 45, 23, 0.92) 66%, transparent 72%);
    border: 1.5px dashed rgba(184, 209, 102, 0.55);
}

.sq-tile {
    position: relative; z-index: 2; width: 68px; height: 68px; border-radius: 20px; overflow: hidden; background: #22261D; border: none;
    box-shadow: 0 5px 0 #12150F, 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    cursor: pointer; user-select: none; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease, opacity 0.15s ease;
}
html.light .sq-tile { background: #EAEFE0; box-shadow: 0 5px 0 #C5CEB0, 0 10px 20px rgba(0, 0, 0, 0.10), inset 0 1.5px 0 #FFFFFF; }
.sq-tile:hover { transform: translateY(-2px); opacity: 1 !important; }
.sq-tile:active { transform: translateY(3px) scale(0.98); box-shadow: 0 2px 0 #12150F, 0 6px 12px rgba(0, 0, 0, 0.4); }
.sq-tile.sq-tile-completed { width: 62px; height: 62px; border-radius: 18px; opacity: 0.82; }
.sq-tile.sq-tile-completed .sq-story-img { filter: saturate(0.86) brightness(0.88); }
.sq-tile.is-spring-land { animation: sq-tile-spring 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sq-tile-spring { 0% { transform: scale(0.86) translateY(6px); } 55% { transform: scale(1.06) translateY(-3px); } 100% { transform: scale(1) translateY(0); } }
.sq-landing-ripple { position: absolute; inset: -4px; border-radius: 28px; pointer-events: none; z-index: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); animation: sq-ripple-wave 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes sq-ripple-wave { 0% { transform: scale(0.88); opacity: 0.85; } 100% { transform: scale(1.62); opacity: 0; } }
.sq-tile-locked.is-mystery-q { background: #1A1D16; box-shadow: 0 5px 0 #0F110C, 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html.light .sq-tile-locked.is-mystery-q { background: #E4E7DC; box-shadow: 0 5px 0 #C8CEB8, 0 8px 16px rgba(0, 0, 0, 0.06); }

/* 5. '?' FACE & STORY OVERLAY WITH PEEKING '?' TAG */
.sq-q-face { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.sq-bare-num { position: absolute; top: 6px; left: 8px; font-size: 9.5px; font-weight: 800; color: rgba(255, 255, 255, 0.28); }
html.light .sq-bare-num { color: rgba(0, 0, 0, 0.32); }
.sq-big-q { font-size: 28px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.88); letter-spacing: -0.03em; }
.sq-tile-locked .sq-big-q { color: rgba(255, 255, 255, 0.34); }
html.light .sq-big-q { color: #2D3618; }
html.light .sq-tile-locked .sq-big-q { color: rgba(45, 54, 24, 0.35); }

.sq-story-overlay {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 4;
    background: #141610; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.sq-story-overlay.is-cover-stamp { animation: sq-cover-stamp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sq-cover-stamp { 0% { transform: scale(1.26) translateY(-8px); opacity: 0.25; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.sq-story-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-done-dot {
    position: absolute; bottom: 5px; right: 5px; width: 17px; height: 17px; border-radius: 50%;
    background: rgba(15, 17, 12, 0.86); color: #B8D166; display: flex; align-items: center; justify-content: center;
}
.sq-done-dot svg { width: 10px; height: 10px; }

/* 6. ACTIVE HERO SQUARE TILE + TILTED '?' BACKING PLATE (FIX #3) */
.sq-active-callout {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 4px 11px; border-radius: 999px; margin-bottom: 2px;
    background: #FFFFFF; color: #0E100B; border: none;
    font-size: 10.5px; font-weight: 800; letter-spacing: -0.01em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation: sq-float-callout 2.4s ease-in-out infinite;
}
html.light .sq-active-callout { background: #18181B; color: #FFFFFF; }
.sq-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #65A30D; }
html.light .sq-live-dot { background: #B8D166; }
@keyframes sq-float-callout { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.sq-active-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.sq-active-halo {
    position: absolute; inset: -16px; border-radius: 38px;
    background: radial-gradient(circle, rgba(184, 209, 102, 0.30) 0%, transparent 70%); pointer-events: none;
}
/* Tấm đế ô vuông '?' nghiêng nhẹ lấp ló phía sau Bài cần học để thấy rõ ảnh truyện đang đè lên ô '?' */
.sq-active-q-backing {
    position: absolute; width: 92px; height: 92px; border-radius: 25px;
    background: #23281C; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: rotate(-8deg) translate(-8px, 3px); pointer-events: none; z-index: 1;
    display: flex; align-items: flex-start; justify-content: flex-start; padding: 7px 9px;
}
.sq-active-q-backing span { font-size: 14px; font-weight: 900; color: #B8D166; opacity: 0.85; }
html.light .sq-active-q-backing { background: #DCE4C8; }

.sq-tile.sq-tile-active {
    position: relative; z-index: 2; width: 94px; height: 94px; border-radius: 26px; background: #2B3122;
    box-shadow: 0 8px 0 #14180F, 0 22px 42px rgba(0, 0, 0, 0.75), 0 0 0 2.5px #FFFFFF;
}
html.light .sq-tile.sq-tile-active {
    background: #FFFFFF; box-shadow: 0 8px 0 #B8C49A, 0 18px 34px rgba(45, 54, 24, 0.24), 0 0 0 2.5px #18181B;
}
.sq-tile.sq-tile-active .sq-big-q { font-size: 38px; color: #FFFFFF; }
html.light .sq-tile.sq-tile-active .sq-big-q { color: #1B1C17; }

/* 7. POPOVER SHEET + STORY HOOK & AUDIO PREVIEW */
.sq-popover {
    position: absolute; top: calc(100% + 9px); left: 50%;
    transform: translateX(calc(-50% + var(--pop-shift, 0px)));
    width: 272px; padding: 14px; border-radius: 22px; z-index: 60;
    background: #151712; border: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex; flex-direction: column; gap: 9px;
    animation: sq-pop-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.light .sq-popover { background: #FFFFFF; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.07); }
@keyframes sq-pop-in {
    0% { opacity: 0; transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(-6px) scale(0.95); }
    100% { opacity: 1; transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(0) scale(1); }
}
.sq-popover-arrow {
    position: absolute; top: -6px; left: calc(50% + var(--arrow-shift, 0px));
    width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: #151712; box-shadow: -1px -1px 0 rgba(255, 255, 255, 0.08);
}
html.light .sq-popover-arrow { background: #FFFFFF; box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.07); }

.sq-popover-head { display: flex; align-items: center; justify-content: space-between; }
.sq-popover-kicker { font-size: 12px; font-weight: 800; color: #FFFFFF; }
html.light .sq-popover-kicker { color: #18181B; }
.sq-pop-ghost-link { background: transparent; border: none; padding: 2px 4px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: #B8D166; }

.sq-fan-cards-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sq-fan-card { background: transparent; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.sq-fan-card:active { transform: scale(0.96); }
.sq-fan-art-wrap { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #22251E; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.sq-fan-art-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-fan-title { font-size: 11px; font-weight: 700; color: #F4F4F5; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.light .sq-fan-title { color: #18181B; }
.sq-fan-meta { font-size: 10px; font-weight: 600; color: #71717A; line-height: 1; }
.sq-pop-sheet-btn {
    width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.045); color: #D4D4D8; font-size: 11.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between;
}
html.light .sq-pop-sheet-btn { background: rgba(0, 0, 0, 0.045); color: #27272A; }

.sq-pop-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sq-pop-title-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sq-pop-story-title { font-size: 15.5px; font-weight: 800; color: #FFFFFF; margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
html.light .sq-pop-story-title { color: #18181B; }
.sq-pop-meta-line { font-size: 11px; font-weight: 500; color: #A1A1AA; }

.sq-audio-preview-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.07); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
}
html.light .sq-audio-preview-btn { background: rgba(0, 0, 0, 0.06); color: #18181B; }
.sq-audio-preview-btn.is-speaking { background: #B8D166; color: #0E100B; animation: sq-audio-pulse 0.9s ease-in-out infinite; }
@keyframes sq-audio-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.sq-story-hook-line { font-size: 11.5px; line-height: 1.38; color: #A1A1AA; font-style: italic; margin: 0; }
html.light .sq-story-hook-line { color: #52525B; }

.sq-vocab-row { display: flex; flex-wrap: wrap; gap: 5px; }
.sq-vocab-chip { padding: 3.5px 8px; border-radius: 8px; border: none; background: rgba(255, 255, 255, 0.045); color: #E4E4E7; font-size: 10px; font-weight: 600; }
html.light .sq-vocab-chip { background: rgba(0, 0, 0, 0.05); color: #27272A; }

.sq-pop-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sq-pop-start-btn {
    width: 100%; height: 44px; border-radius: 14px; border: none; cursor: pointer;
    background: #FFFFFF; color: #090A0F; font-size: 13.5px; font-weight: 800;
}
html.light .sq-pop-start-btn { background: #18181B; color: #FFFFFF; }
.sq-pop-start-btn.is-locked-btn { background: rgba(255, 255, 255, 0.07); color: #D4D4D8; font-size: 12px; }

.sq-seg-bar { display: flex; align-items: center; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, 0.035); border: none; padding: 2px; }
html.light .sq-seg-bar { background: rgba(0, 0, 0, 0.045); }
.sq-seg-btn { flex: 1; height: 100%; background: transparent; border: none; cursor: pointer; font-size: 11px; font-weight: 700; color: #E4E4E7; border-radius: 9px; }
html.light .sq-seg-btn { color: #27272A; }
.sq-seg-btn.is-muted { color: #A1A1AA; }
.sq-seg-div { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; }

/* 8. FLOATING THUMB-ZONE DOCK & SCROLL-SNAP SHELF */
.sq-thumb-dock {
    position: absolute; left: 16px; right: 16px; bottom: max(env(safe-area-inset-bottom), 12px);
    z-index: 38; pointer-events: none; display: flex; justify-content: center;
}
.sq-thumb-dock-inner {
    pointer-events: auto; width: 100%; max-width: 390px; height: 56px; padding: 0 10px;
    border-radius: 20px; background: rgba(20, 22, 17, 0.94); border: none;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
html.light .sq-thumb-dock-inner { background: rgba(255, 255, 255, 0.95); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07); }
.sq-dock-thumb { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; background: #262A20; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sq-dock-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-dock-q { font-size: 19px; font-weight: 900; color: #FFFFFF; }
.sq-dock-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-dock-title { font-size: 13px; font-weight: 800; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.light .sq-dock-title { color: #18181B; }
.sq-dock-sub { font-size: 10.5px; font-weight: 500; color: #A1A1AA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-dock-cta { height: 36px; padding: 0 14px; border-radius: 11px; border: none; cursor: pointer; flex-shrink: 0; background: #FFFFFF; color: #090A0F; font-size: 12px; font-weight: 800; }
html.light .sq-dock-cta { background: #18181B; color: #FFFFFF; }

.story-shelf-wrap { margin-bottom: 14px; }
.story-shelf-label { font-size: 11.5px; font-weight: 800; color: #A1A1AA; margin: 0 2px 8px; }
.story-snap-lane { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.story-snap-album { scroll-snap-align: start; flex-shrink: 0; width: 108px; background: transparent; border: none; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; cursor: pointer; }
.story-snap-cover { width: 108px; height: 108px; border-radius: 18px; overflow: hidden; background: #22251E; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.story-snap-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-snap-title { font-size: 12px; font-weight: 700; color: #FFFFFF; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.light .story-snap-title { color: #18181B; }
.story-snap-sub { font-size: 10.5px; font-weight: 500; color: #71717A; margin-top: -3px; }

/* 9. MILESTONE LOOT TILES, FLOATING SANCTUARY ISLAND & 2.5D GAME SCENERY */
.sq-tile.sq-tile-milestone { width: 70px; height: 70px; border-radius: 20px; background: #262015; z-index: 2; }
.sq-tile-milestone.is-locked-muted { opacity: 0.92; }
.sq-milestone-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-milestone-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.22) 100%); }
.sq-milestone-num { position: absolute; top: 6px; left: 8px; font-size: 9.5px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.sq-loot-aura { position: absolute; inset: -12px; border-radius: 28px; background: radial-gradient(circle, rgba(34, 211, 238, 0.30) 0%, rgba(251, 191, 36, 0.18) 50%, transparent 74%); pointer-events: none; z-index: 0; }
.sq-loot-xp-pill { position: absolute; bottom: 4px; right: 4px; padding: 1.5px 6px; border-radius: 999px; background: rgba(15, 17, 12, 0.88); border: 1px solid rgba(251, 191, 36, 0.45); color: #FDE68A; font-size: 8.5px; font-weight: 800; }

.sq-game-scenery { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sq-prop { position: absolute; width: 76px; height: 72px; opacity: 0.88; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
.sq-prop-tl { top: 12px; left: -2px; }
.sq-prop-br { bottom: 8px; right: 2px; width: 66px; height: 56px; }
.sq-prop-tr { top: 12px; right: -2px; }
.sq-prop-bl { bottom: 8px; left: 2px; width: 66px; height: 56px; }
.sq-game-island-base { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 170px; height: 70px; z-index: 0; pointer-events: none; }
.mb-char-line { display: none !important; }
.sq-campfire-glow { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 92px; height: 32px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, rgba(184, 209, 102, 0.14) 52%, transparent 74%); pointer-events: none; z-index: 1; }